Grundstruktur eines HTML-Dokuments

<!DOCTYPE html> 
<html lang="de"> 
    <head>
            <title>Titel der Seite</title>
            <meta charset="UTF-8"> 
    </head>
    <body>
            Hier steht der ganze Text, der 
            auf der Seite erscheinen soll ....
    </body>
</html>

Grundidee von HTML

HTML ist nur zur Strukturierung des Textes! Das Design macht CSS.

D.h. in einem HTML-Dokument stehen Informationen wie: "Das ist eine Überschrift." Nicht aber Dinge wie: "Dieser Text soll Schriftgröße 10 haben."

Du kannst dir ein HTML-Dokument also wie eine Datei in einem Textverarbeitungsprogramm vorstellen: In der HTML-Datei steht der Text und für welchen Text welche Formatvorlage zugewiesen ist. In der CSS-Datei steht, wie die einzelnen Formatvorlagen dargestellt werden sollen, z.B. wie sieht eine Haupt-Überschrift aus, welche Schriftart wird verwendet. Werden Zitate kursiv dargestellt usw.

Die erste Seite erstellen

Öffne einen ganz normalen Texteditor, z.B. unter Linux gedit. (Kurzer Druck auf die Super-Taste - das ist die mit dem Fenster-Logo. Dann bei der Lupe gedit eingeben. Auf "Textbearbeitung" klicken.)

Kopiere dort die Grundstruktur der HTML-Seite hinein. Schreibe zwischen <body> und </body> irgend etwas.

Speicher die Datei als meineseite.htm ab und öffne sie anschließend mit einem Browser, z.B. Firefox.

Wenn du Probleme hast mit deiner ersten HTML-Seite hilft dieses Video für Linux weiter und dieses hier für Windows.

Namenskonventionen

Du könntest die Dateien irgendwie benennen, solange die Erweiterung htm oder html ist. Umlaute und ß geben allerdings Probleme, wenn die Seite einmal auf einen Server geladen wird, der die Sonderzeichen nicht versteht oder auch, wenn jemand die Seite von einem nicht deutsch-sprachigem Land aufruft.

Um später Links zu setzen, musst du selbst genau die Namen deiner Seiten kennen. Schreibst du einen Buchstaben klein, der eigentlich groß ist, wird die Seite nicht gefunden.

Damit es später kein Durcheinander gibt, legen wir jetzt folgendes fest:

Wichtige HTML-Tags

Absätze und Zeilenumbrüche

Zu Beginn eines Absatzes steht <p> und am Ende das schließende Tag </p>.

Möchtest du innerhalb eines Absatzes einen
Zeilenumbruch erzwingen, so ist das passende Tag <br>.

Beachte: Es ist ein Unterschied, ob du einen neuen Absatz beginnst, oder einen Zeilenumbruch erzwingst.

Beispiel mit Code

Hier beginnt mein Abatz, deshalb steht davor ein p-Tag. Wenn das letzte Wort des Absatzes geschrieben ist, werde ich das schließende p-Tag tippen.
Hier
ist mitten mit im Satz ein erzwungener Umbruch.

Und nachdem ich den letzten Absatz mit dem schließenden p-Tag abgeschlossen habe, kann ich mit dem öffnenden p-Tag einen neuen Absatz beginnen.

<p>Hier beginnt mein Abatz, deshalb steht davor ein p-Tag. Wenn das letzte Wort des Absatzes geschrieben ist, werde ich das schließende p-Tag tippen.<br> Hier <br> ist mitten mit im Satz ein erzwungener Umbruch.</p> <p>Und nachdem ich den letzten Absatz mit dem schließenden p-Tag abgeschlossen habe, kann ich mit dem öffnenden p-Tag einen neuen Absatz beginnen.</p>
Übung Probiere es aus! Schreibe ein wenig Text in ein HTML-Dokument. (Die Grundstruktur holst du dir oben auf dieser Seite.)
Füge dort <p> und <br> an verschiedenen Stellen ein und beobachte den Unterschied!
Diesen Unterschied solltest du sensibel einsetzen, um der Leser*in durch die Strukturierung des Textes zu helfen.

Überschriften

<h1> ist das Tag für eine Überschrift auf höchster Ebene. Jede Seite sollte eine h1-Überschrift haben!

Z.B. die Überschrift "Wichtige HTML-Tags" ein paar Zeilen weiter oben wurde mit <h1>Wichtige HTML-Tags</h1> definiert.

<h2> ist das Tag für eine Überschrift eine Ebnene tiefer usw. bis <h6>. Keine dieser Ebenen soll übersprungen werden. Das wäre schlechter Stil!

Übung Sieh es dir an, wie es auf dieser Seite eingesetzt wurde. An den Schriftgrößen kannst du erkennen, was eine Überschrift erster Ebene ist, was zweiter Ebene usw.
Prüfe dann deinen Eindruck indem du mit rechts in die Seite klickst und dir den Seitenquelltext anzeigen lässt. Ignoriere alles, was du noch nicht verstehst, suche nur nach den <p>, <br>, <h1> und <h2>.

Fett

Für fett ist das öffnende Tag <strong>. Dort, wo der fett zu druckende Text zu Ende ist, muss das schließende Tag </strong> erscheinen.

Beispiel:

Stelle in einer HTML-Datei fetten Text dar. Schreibe danach normal (also nicht fett) weiter. Probiere, was passiert, wenn du das schließende Tag </strong> vergisst.

Kursiv

Die Tags für kursiv sind <em> und </em>. "em" steht für "emphasized".

Unterstreichung

Auf keinen Fall verwenden, weil jeder meint, es sei ein Link! Tag: <u>

Und wie blöd ist das, wenn du auf einem unterstrichenem Text rumklickst und nichts passiert?
Woher sollst du dann wissen, was hier wirklich ein Link ist?

Listen

Liste ohne Nummerierung

Eine "unordered list" <ul>. Jeder Listenpunkt hat das Tag <li>.

  • erster Aufzählungspunkt
  • zweiter Aufzählungspunkt
  • dritter Aufzählungspunkt
<ul>
	<li>erster Aufzählungspunkt</li>
	<li>zweiter Aufzählungspunkt</li>
	<li>dritter Aufzählungspunkt</li>
</ul>

Liste mit Nummerierung

Eine Liste mit Nummerierung heißt "ordered list". Dies wird ganz genauso geschrieben, nur mit dem Tag <ol> statt <ul>.

  1. erster Aufzählungspunkt
  2. zweiter Aufzählungspunkt
  3. dritter Aufzählungspunkt

Der Code ist der gleiche wie oben, nur mit <ol> statt <ul>.

Übung 1 Lade die Datei Uebung1.pdf herunter. Lade ebenso die Datei uebung1.htm herunter und sieh dir beide Dateien an. Leider fehlt bei der HTML-Datei jegliche Struktur. Überschriften sind nicht als Überschriften zu erkennen usw.
Öffne die HTML-Datei in einem Editor und füge nach und nach die HTML-Tags ein, die du gelernt hast, um die Seite in das gleiche Aussehen zu bringen wie die pdf-Datei.

Hinweis: Möchtest du, dass ein Tag angezeigt wird statt ausgeführt, musst du das kleiner-gleich-Zeichen (“lower-than”) als HTML-Code schreiben: Statt <p> schreibe &lt;p>. Diese Ersetzung habe ich bereits für dich gemacht.

Weitere HTML-Tags