Little Boxes – die HTML-Basics

Ein HTML-Grundgerüst als Vorlage erstellen

Testen Sie unsere 1931 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Grundgerüst einer jeden Webseite besteht aus vier Teilen. Legen Sie in diesem Video ein solches Grundgerüst als Vorlage an, die Sie für alle Ihre Webseiten nutzen können.

Transkript

Der Quelltext einer jeden Webseite lässt sich grob in vier Abschnitte aufteilen. In der allerersten Zeile steht der Doctype, DOCTYPE hier. Dann kommt das Stammelement html, das Sie, wie Sie das hervorgehoben sehen, alle anderen Elemente umschließt. Vor html kommt nur der DOCTYPE und nach /html kommt gar nichts. Innerhalb von html kommt der head, der Kopf einer Seite, der Information über die Webseite enthält. Und unterhalb des Kopfes kommt der Körper, der body, der den Inhalt der Webseite aufnimmt, der später im Browserfenster sichtbar dargestellt wird. Diese Elemente DOCTYPE, html, head und body, das sind so die Haupbereiche, die es auf einer Seite gibt. Ich möchte jetzt eine Vorlage erstellen, vorlage.html, die man als Grundlage, als Vorlage für weitere Seiten benutzen kann, damit man nicht jedes Mal von Null anfangen muss. Speichern unter vorlage.html im littleboxes Ordner, im Übungsordner, wie er immer der bei Ihnen heißt. Und dann werde ich das hier reduzieren auf die Elemente, die man immer braucht. Also der style Block zum Beispiel, der fliegt raus, weil gestylt werden Seiten jedes Mal anders. Dann der title passt ja so für eine Vorlage auch nicht, den nennen wir einfach mal "HTML-Grundgerüst-Vorlage". Und hier fehlt noch eine Seitenbeschreibung, die setzen wir schon mal dazu. meta name=description Das ist die perfekte Ergänzung zum title. Der title gibt ganz kurz an, worum es geht. Und hier die Beschreibung einer Seite, der Webseite. So, der title ist die Seitentitel und die meta description, da muss natürlich wieder geschlossen werden, ist die Seitebeschreibung. Die beiden, werden Sie später noch sehen, arbeiten sehr eng zusammen. meta name="description" content="Beschreibung der Webseite". Wenn hier die Einfärbung so regelmäßig ist, dann ist es immer ein gutes Indiz, das passt dann schon gut. Hier oben habe ich nichts geändert, werde aber noch hier bei html. Das gibt die Sprache an, in der der Quelltext geschrieben ist. Und da gibt es ein Attribut, das heißt lang, kurz für language. Und das gibt an, in welcher Sprache der Inhalt der Seite geschrieben ist. Und das de steht für Deutsch. So, der Inhalt hier auf dieser Seite kommt erstmal weg. Und stattdessen, denn in einer Vorlage brauchen wir erstmal keinen Inhalt, schreibe ich einen Kommentar rein. Kommentare sind eine gute Angewohnheit. Und ich schreib jetzt hier einen Kommentar hinein, der im HTML etwas umständlich ist, diese Kommentiererei, das beginnt nämlich mit <!--. Und dann schreibe ich da mal rein "body erscheint im Browserfenster". Also alles, was hier steht zwischen body und /body erscheint im Browserfenster. Und ein Kommentar wird beendet mit --. Das meinte ich eben mit "umständlich". <!-- Text des Kommentares --. So ein Kommentar erscheint nicht im Browserfenster. Ich hab jetzt gespeichert. Ich gehe mal rüber in den Browser, bzw. in den Windows Explorer hier erstmal und werde mir diese Seite im Browser anschauen. Ich gehe mal auf Öffnen. So, und da kommt wieder, ist nichts zu sehen. Das ist der schöne Satz, wie Sie sehen, sehen Sie nichts. Im Quelltext sieht man aber, dass alles bereits vorhanden ist. So, da sehen Sie auch das, was ich über die Kommentare erzählen wollte. Sie sind im Browserfenster nicht zu sehen, im Quelltext aber sehr wohl. Das heißt, Sie sollten da keine großartigen Geheimnisse, reinschreiben, denn ein Benutzer sieht sie zwar nicht im Browserfenster, kann sich aber jederzeit natürlich den Quelltext angucken und sieht dann auch die von Ihnen geschriebenen Kommentare.

Little Boxes – die HTML-Basics

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 5 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:11.03.2015
Aktualisiert am:28.09.2016

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!