Kleine CodeCrowd von programmieren lernen

Das HTML-Grundgerüst

Als ersten Schritt auf dem Weg HTML zu lernen, legen wir am besten das HTML Grundgerüst an.
Öffne deinen Code-Editor und lege eine neue Datei an. Unter Brackets gehst du dazu im Menü unter Datei -> Neu und speichere diese Datei unter einem sinnvollen Dateinamen. Vergiss beim Speichern nicht die Endung .html an den Dokumentnamen anzuschließen, damit du definierst, dass es sich um eine HTML-Datei handelt.

Um nun deine HTML-Datei zu vervollständigen, muss nur noch ein HTML-Grundgerüst in die Datei eingefügt werden.
Die wichtigsten Elemente des HTML-Grundgerüsts sind:

  • Doctype
  • HTML-Tag
  • Head-Tag
  • Title-Tag
  • Body-Tag

Wir schauen uns dieses Grundgerüst gleich noch einmal im Detail an. Zuerst aber kopieren wir es in unsere Datei:


<!DOCTYPE HTML>


<html lang="de">


<head>

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    
    

    
    



<body>
   
Der sichtbare Teil der Website beginnt hier

</body>
   
</html>

Ich habe das HTML-Grundgerüst im obigen Beispiel ausführlich kommentiert, damit du die einzelnen Elemente besser verstehst. Du kannst diese Vorlage gern kopieren und für deine eigenen Projekte verwenden.

Den Code zu diesem Artikel findest du wie immer in der Infobox.

Die wichtigsten Elemente des HTML-Grundgerüsts

  • Als erstes fügen wir den Doctype HTML ein, der definiert, um welche HTML-Version es sich handelt. In unserem Fall HTML5. Es gibt verschiedenen Arten von Doctypes für ältere HTML-Versionen. Wenn du eine neue Website schreibst, gibt es eigentlich kaum einen Grund nicht die aktuellste Version von HTML zu verwenden.
  • Mit dem HTML-Tag definieren wir den Bereich in dem HTML geschrieben wird und schließen diesen am Ende der Datei wieder. Alles zwischen diesen HTML-Tags wird unser HTML-Code sein. Denn nur so kannst du über die HTML4-Elemente auch die aktuellen HTML5-Elemente nutzen.
  • Das HTML-Tag umschließt den gesamten HTML-Bereich und ist damit das Stamm- oder Wurzelelement deines HTML-Dokuments. Das HTML-Tag muss das lang="" Attribut haben, aus Gründen der Benutzbarkeit deiner Website.Für deutsche Website fügst du den Attributwert "de" ein, für englische Websites hingegen "en".
  • Der Head-Bereich ist der Kopfbereich der Website, welcher nicht sichtbar sein wird, sondern allgemeine Informationen zur Website beinhaltet. In diesem Head-Bereich kann mann zum Beispiel mit Meta-Tags weitere Informationen zum Kopfbereich hinzufügen.
  • Ein Title-Tag definiert den Title der Website, welcher zum Beispiel im Browser-Tag oder in den Google-Suchergebnissen angezeigt wird.
  • Nun beginnt mit dem Body-Tag der eigentliche Rumpf der Website, also der sichtbare Bereich, der in deinem Browser dargestellt wird.

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.

Infobox

Kommentare