<!DOCTYPE html>HTML5-Doctype, erste Zeile der HTML-Datei
<html lang="de">Umschließt den kompletten Inhalt und es wird im Inhalt als Sprache Deutsch verwendet
<head>Head-Bereich, der Metainformationen über die Webseite enthält (werden nicht im Browserfenster angezeigt)
<meta charset="UTF-8" />Verwendete Codierung - mit UTF-8 können Sonderzeichen direkt genutzt werden (im Deutschen z.B. Umlaute öäü)
<title>HTML5-Grundgerüst</title>Wichtig! Titel der Seite - hat mehrere wichtige Funktionen:
- Titelzeile im Browserfenster
- Namen von gesetzten Lesezeichen/Bookmarks
- Liste der bereits besuchten Seiten
- für den Eintrag bei Suchmaschinen in der ersten Zeile
(engl. title=Titel)
</head>
<body>Umschließt den Inhalt, der im Browserfenster angezeigt wird
INHALT Hier kommen nun der Inhalt (und alle weiteren HTML-Befehle, die den Inhalt strukturieren)
</body>
</html>Ende der HTML-Seite
### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ###
Dann gibt es noch,
<h1> … </h1>Hauptüberschrift - wichtig, sollte 1 mal auf jeder einzelnen Seite kommen
(engl. h = heading = Überschrift)
<h2> … </h2> bis <h6> … </h6>
Unterüberschriften - sollten in der logischen Reihenfolge verwendet werden. Nach <h2> kommt <h3>
<p> … </p>Absatz - nach dem Absatz wird automatisch Platz gehalten
(engl. p = paragraph = Absatz)
<br />erzwungener Zeilenumbruch (Zeilenende)
(engl. br = break = Umbruch)
<hr />Trennlinie - soll 2 unterschiedliche Inhalte trennen
(engl. hr = horizontal ruler = horizontale Linie)
### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ###
Und...
<b> … </b>Schrift wird fett angezeigt
(engl. b = bold = fett)
<strong> … </strong>wichtiger Bereich, Schrift wird fett angezeigt
(engl. strong = kräftig, überzeugend)
<i> … </i>Schrift wird kursiv angezeigt
(engl. i = italic = kursiv, schräg)
<em> … </em>hervorgehobener Bereich, Schrift wird kursiv dargestellt
(engl. em = emphasis = betont, Hervorhebung)
<sup> … </sup>hochgestellte Schrift, z.B. Fußnote2
(engl. sup = superscript, zu Deutsch hochstellen)
<sub> … </sub>tiefgestellte Schrift, z.B. H2O
(engl. sub = subscript, zu Deutsch tiefstellen)
<del> … </del>durchstrichener Text, sprich Inhalt gilt nicht mehr
(engl. del = deleted = gelöscht)
<ins> … </ins>neuer Inhalt im Text (gut um Änderungen hervorzuheben)
(engl. ins = inserted = neu eingefügt)
<small> … </small>für das "Kleingedruckte" im Text
(engl. small = klein)
### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ###
und noch mehr...
<a href="URL">BESCHREIBUNG</a>für interne & externe Linkes.
"Beschreibung" wird später im Browser als Link (blau unterstrichen) angezeigt und kann angeklickt werden. Die URL innerhalb href wird aufgerufen
(engl. a = anchor = Anker)
(engl. href = hyper reference = Hypertext-Referenz)
<a href="index.htm">STARTSEITE</a>interner Link<a href="http://www.+++.de/"> …externer Link<a href="http://+++/"> target="_blank" …neues (leeres) Browserfenster wird beim Anklicken geöffnet
(engl. target = Ziel, blank = leer)<a href="#xy"> …Sprungmarke (wird durch # gekennzeichnet) zu einem bestimmten Punkt, hier "xy". Der Punkt muss über das Attribut id definiert sein
<a href="++@++.de">++l@++.de</a>So kann eine E-Mail-Adresse eingegeben werden. Durch Anklicken öffnet sich ein E-Mail-Programm (wenn man es installiert hat ) und die E-Mail-Adresse ist bereits eingegeben.
### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ###
und weiteres...
<!-- KOMMENTAR -->
<!--
QUELLCODE ohne Wirkung
-->
Über diese Anweisung können Kommentare im HTML-Code gemacht werden bzw. Teile des HTML-Codes auskommentiert werden. Somit sind diese Teile für einen Browser nicht existent. Das ist z.B. gut zum Testen von HTML-Befehlen.
### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ###
Farben werden über CSS genutzt!
Früher wurden auch bei HTML-TAGs Farben festgelegt, was aber im Sinne der Trennung von Inhalt und Design heutzutage keinen Sinn mehr macht! Daher gehören Farben (Design) in den CSS-Bereich
Zum Beispiel:
Schwarz wäre #000000
Grau wäre #808080
### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ###