Aus dem Kurs: Grundlagen der Webprogrammierung: Meine erste Website

HTML-Grundgerüst erstellen

Aus dem Kurs: Grundlagen der Webprogrammierung: Meine erste Website

Gratismonat starten Für Ihr Team erwerben

HTML-Grundgerüst erstellen

“

HTML steht für Hyper Text Markup Language. Dieses Auszeichnen ist das wichtigste Grundprinzip von HTML. Und alle HTML-Dokumente bestehen aus demselben Grundgerüst, und wir sehen uns an, wie das ausschaut, und dabei arbeiten wir auch immer nach diesem Prinzip "Start-Tag/End-Tag". Ich bin in meinem Editor Visual Studio Code. Ich habe einen Ordner vorher angelegt und ihn geöffnet, das geht hier über "Ordner öffnen". Und nun möchte ich ein HTML-Dokument anlegen und dafür sage ich Datei > Neue Textdatei und ich speichere das Dokument direkt auch und ich nenne es einmal "Grundgerüst". Ich schreibe dabei nicht ü, sondern ue, weil Dateinamen keine Sonderzeichen enthalten sollten. Wichtig ist außerdem die Endung .html. Und dann kann ich beginnen, meinen HTML-Code zu schreiben. Und ich beginne mit dem HTML-Start-Tag. Und Sie haben gesehen, der Editor hat mir automatisch das zugehörige End-Tag ergänzt, und außerdem braucht jedes HTML-Dokument ein head und ein body, also einen Kopfbereich und einen Rumpf. Innerhalb des heads stehen Informationen über das Dokument und da ist sehr wichtig der Seitentitel. Innerhalb des body steht das, was man dann wirklich im Browser sieht. Und da schreibe ich mal den Text "Hallo HTML". Dann speichere ich das Ganze. Jetzt möchte ich ansehen, wie das im Browser aussieht. Und dafür kann ich mit der rechten Maustaste draufklicken und sagen "Im Datei-Explorer anzeigen" und dann kann ich draufklicken auf mein Dokument und es öffnet sich der Browser und ich sehe, wie das aussieht. Hier oben ist der Seitentitel, also das, was ich bei title geschrieben habe, und hier sehe ich den Inhalt von body. Unser Grundgerüst ist noch nicht ganz vollständig. Ich brauche ganz oben immer eine DOCTYPE-Angabe. Kann ich hier auswählen. Die sieht so aus, dass ich schreibe "". Und das verrät den Browser, dass das, was ich hier schreibe, HTML5 ist, und das ist der Standard heutzutage. Außerdem sollte ich eine Zeichensatzangabe machen. Das stellt dann sicher, dass ich Sonderzeichen im Deutschen, wie ü und ä, unproblematisch schreiben kann. Und als Zeichensatz verwendet man heute immer UTF-8. Das Letzte, was noch fehlt, ist eine Viewport-Angabe. Die ist wichtig, damit das Ganze dann auch bspw. auf Smartphones funktioniert. Das sind natürlich jetzt schon Sachen, die werden bisschen mühsam, zu schreiben, deswegen gibt es eine weitere Möglichkeit, wie Sie solche Dokumente erstellen können, und die zeige ich nun. Ich erstelle ein neues Dokument, speichere das einmal als "beispiel.html" ab. Und jetzt könnte ich natürlich hingehen und wieder das Grundgerüst erstellen, aber es geht auch einfacher mit Visual Studio Code. Ich schreibe ein Ausrufezeichen und dann, sehe ich, gibt es Emmet-Abkürzungen, und da kann ich draufklicken und habe – Zack – ein vollständiges Grundgerüst. Das ist natürlich eine wunderschöne Abkürzung. Jetzt muss ich hier noch ein bisschen was ändern. Also, als Sprache möchte ich nicht Englisch haben, sondern "de". Das sollen deutsche Texte sein. Diese Angabe hier für den Internet Explorer brauche ich heute nicht mehr. Und hier habe ich jetzt auch diese meta-Angabe, von der eben gesprochen habe, die wichtig ist für Smartphones, damit es dort alles richtig angezeigt wird. Und hier kann ich wieder schreiben "Hallo HTML". Und hier könnte ich einen anderen Seitentitel angeben. Und auf diese Art habe ich dann ganz schnell ein Dokument mit Grundgerüst erstellt. Wir können uns das ansehen, "Im Datei-Explorer anzeigen", und ich gehe hier drauf und sehe mein Dokument, was korrekt erstellt wurde. Hier sehen Sie noch einmal das Grundgerüst von allen HTML-Dokumenten. DOCTYPE, HTML-Anfang, HTML-Ende, head-Anfang, head-Ende, body-Anfang, body-Ende, und im head steht der Zeichensatz, die Viewport-Angabe und der Seitentitel.

Inhalt