Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Webprogrammierung: Basiswissen

Die Struktur von HTML

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wie funktioniert HTML eigentlich, welche Aufgaben hat die Sprache, was kann sie und was kann sie nicht? In diesem Film werden diese wichtigen Fragen beantwortet.

Transkript

Ich habe hier im vorherigen Kapitel behauptet, HTML sei eine im Grunde ganz einfache Sprache. Und jetzt mache ich mal die Probe auf's Example und zeige Ihnen, wie HTML generell funktioniert. HTML steht ja für Hypertext Markup Language, was Sie mit Auszeichnungsprache für Hypertext übersetzen können. Eine Auszeichnungsprache ist eine Sprache, die Text oder Elemente benutzt, um Strukturen in einem Dokument festzulegen. Möchten Sie etwa, dass ein Browser einen bestimmten Text als Überschrift darstellt, dann markieren Sie diesen Text mit dem Element h1, "h1" für Headline der Kategorie 1. Am besten zeige ich Ihnen das an einem simplen Beispiel. Hier habe ich einen normalen Texteditor, in diesem Fall Notepad++. Sie können aber jeden anderen Editor benutzen, der reinen ASCII Text speichert. Nun geben wir da einfach mal Text ein: "Das ist ein kleiner Test". Fertig. Und speichere diesen Text jetzt mit der Endung html. Das heißt, ich speichere das Ganze als HTML Datei. Ich nenne die mal sinnigerweise "test.html" und speicher das, und nun ist das bereits eine HTML Datei. Die ist zwar mal unkorrekt, und sie würde bei jedem Validator halt meist noch Fehler auswerfen, aber Browser sind außerordentlich gutmütige Programme. Sie sagen halt, ich habe hier ein HTML Dokument, also stelle ich es auch als HTML Dokument dar. Wir sehen, wenn wir das ganze mal hier jetzt mit Explorer uns anzeigen lassen, dann haben wir hier in unseren Browser den Text "Das ist ein kleiner Test". Soweit, so simpel. Jetzt möchte ich aber, dass dieser Text eine Headline wird, und dafür markiere ich ihn am Anfang mit einem Tag in spitzen Klammern, "<h1" mit dem Schluß - den Punkt nehme ich mal weg - am Schluß setze ich auch nochmal ein "h1", und damit der Browser halt weiß, hier hört das "h1" wieder auf, bekommt das Element einen Schrägstrich davor. Sie sehen also hier bereits, bei der farbigen Hervorhebung, dass dieser Teil jetzt in HTML als Headline definiert worden ist. Speicher den Text nochmal, und lasse ihn mir nochmal in IE anzeigen. Sie sehen aus unserem kleinen Text, ist bereit eine Headline h1 geworden. Im Grunde war es das schon. Sie müssen halt nur von HTML die entsprechenden Elemente oder Tags auswendig lernen und kennen, das ist nur eine Hand voll, Sie werden vielleicht ein oder zwei Tage brauchen, dann haben Sie 90% aller Tags, die Sie jemals benötigen, intus, und können quasi HTML blind schreiben. Ich habe hier mal als Beispiel meine eigene Webseite hier geladen. Wenn wir mal einen Blick hineinwerfen, wie eine HTML Seite hier ausschaut. Am Kopf dieser HTML Seite steht immer der Dokumententyp. In diesem Fall wird gesagt "<doctype html". Ist in spitzen Klammern, das heißt alles in spitzen Klammern sind HTML-Kommandos, oder HTML-Elemente oder Tags. In diesem Fall, "doctype html" heißt, dass folgende Dokument ist in HTML 5 geschrieben worden. Es folgt dann, als große Klammer, ein eröffnendes <html, und am Schluß der Seite, ein schließendes <html. Alles, was zwischen diesen beiden HTML-Tags steht, gehört zur HTML Webseite. Webseiten werden normalerweise in zwei Bereiche eingeteilt, in ein Kopfbereich und ein Bodybereich. Im Kopfbereich hier durch "head" markiert, steht meistens der Titel der Webseite, einige Meta-Angaben für Suchmaschinen, die als "keywords" definiert werden, Beschreibungen und dergleichen mehr. Hier ist wieder ein Stylesheet eingebunden, es werden verschiedene Icons eingebunden, das muss uns nicht weiter interessieren. Wichtig ist noch diese Angabe, dieses <meta-Tag. Hier wird festgelegt, in welchem Zeichensatz diese Seite gespeichert worden ist, also UTF-8, damit der Browser auch die Seite korrekt darstellen kann. Sprich, dass er Umlaute und Sonderzeichen erkennt und darstellt. Da an diesen "head" Bereich, schließt sich ja ein "body" Bereich an. Das ist der eigentliche Inhalt der Webseite. Also auch hier gibt's ein öffnendes "body", und am Schluß der Webseite ein schließendes "body". Alles innerhalb vom <body-Tag gehört zum Inhalt der Webseite. Und dann kommt eigentlich auch schon der Inhalt. Das sind hier verschiedene Strukturierungselemente, das sind verschiedene "div's", das sind also Absätze, die definiert werden. Die müssen uns nicht weiter stören. Hier gibt es dann eine Grafik mit ein bisschen Text dabei, hier gibt es einen Link, und noch einen Link. Wenn wir mal da runterscrollen, sehen Sie hier bereits relativ klar erkennbar, den Inhalt einer Webseite, also "h1", eine Headline, eine "h1". Es gibt einen kleinen Absatz mit einem Motto für die Webseite, und dann kommt auch schon ein bisschen Text, der einfach dann so direkt in das HTML-Dokument eingetragen wird. Natürlich ist HTML in der Praxis sehr viel komplizierter und komplexer, als ich je in diesem kleinen Abriss darstellen kann. Aber vielleicht nimmt ihnen dieser Überblick hier ein wenig die Angst vor HTML, und ich kann ihnen wirklich nur noch raten, probieren Sie es aus, machen Sie mal. HTML ist eine, wie gesagt, relativ simpel, einfach strukturierte Sprache. Sie werden vielleicht eine Woche, zwei Wochen benötigen, um halt die Grundprinzipien verstanden zu haben von HTML. Aber danach steht Ihnen eigentlich nichts mehr im Weg, um sich vertieft in HTML einzuarbeiten, und Webseiten ganz nach Ihrer Lust zu bauen.

Grundlagen der Webprogrammierung: Basiswissen

Lernen Sie die wichgsten Technologien und Begriffe des World Wide Web kennen und sehen Sie, wie Sie sie selbst anwenden können.

2 Std. 21 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!