<!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."
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.
Ö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.
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:
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.
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 du auf einem unterstrichenem
Text rumklickst und nichts passiert?
Woher sollst du 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ö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 <p>. Diese Ersetzung habe ich bereits für dich gemacht.