<!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>
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."
Man kann sich 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.
Ö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.
Man könnte 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, muss man selbst genau die Namen seiner Seiten kennen. Schreibt man einen Buchstaben klein, der eigentlich groß ist, wird die Seite nicht gefunden. Auch wenn man html schreibt statt htm, wird die Seite nicht gefunden.
Damit es später kein Durcheinander gibt, legen wir jetzt folgendes fest:
Zu Beginn eines Absatzes steht <p> und am Ende das schließende Tag </p>.
Möchte man innerhalb eines Absatzes einen
Zeilenumbruch
erzwingen, so ist das passende Tag <br>.
Beachte: Es ist ein Unterschied, ob man einen neuen Absatz beginnt, oder einen Zeilenumbruch erzwingt.
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.
<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!
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:
Die Tags für kursiv sind <em> und </em>. "em" steht für "emphasized".
Auf keinen Fall verwenden, weil jeder meint, es sei ein Link! Tag: <u>
Und wie blöd ist das, wenn man auf einem unterstrichenem
Text rumklickt und nichts passiert?
Woher soll man dann wissen, was hier wirklich ein Link ist?
Eine "unordered list" <ul>. Jeder Listenpunkt hat das Tag <li>.
<ul> <li>erster Aufzählungspunkt</li> <li>zweiter Aufzählungspunkt</li> <li>dritter Aufzählungspunkt</li> </ul>
Eine Liste mit Nummerierung heißt "ordered list". Dies wird ganz genauso geschrieben, nur mit dem Tag <ol> statt <ul>.
Der Code ist der gleiche wie oben, nur mit <ol> statt <ul>.
Hinweis: Möchte man, dass ein Tag angezeigt wird statt ausgeführt, muss man das kleiner-gleich-Zeichen (“lower-than”) als HTML-Code schreiben: Statt <p> schreibe <p>. Diese Ersetzung habe ich bereits für dich gemacht.