Jetzt lerne ich… HTML
<h1>Jetzt lerne ich… HTML</h1>
<h1>Jetzt lerne ich… HTML</h1>
HTML ist die Abkürzung für "Hypertext Markup Language" (sprich "Haipertext Mahkap Länguidsch") und ist die Sprache, mit der Internetseiten erstellt werden. Hypertext bedeutet, dass sich mit HTML mehrere Seiten miteinander verbinden lassen – das sind die Links oder Hyperlinks, die du überall im Internet findest. Markup Language lässt sich mit Auszeichnungssprache übersetzen. Aber was bedeutet Auszeichnungssprache?
Im Supermarkt findest du an jedem Artikel ein Etikett, auf dem steht, was der Artikel kostet. Bei einer Auszeichnungssprache bekommt jeder Text ein Etikett, auf dem steht, was der Text darstellt, z.B. ob es sich um eine Überschrift oder um den Text einer Liste handelt.
Die Etiketten in HTML heißen Tags (sprich "tägs") und werden in spitze Klammern geschrieben (< >). Zu jedem Start-Tag (<tag>) gehört ein Ende-Tag (</tag>) mit dem gleichen Namen. Der Name des Ende-Tags beginnt allerdings mit dem Schrägstrich. Das Start-Tag bedeutet, ab hier ist alles z.B. eine Überschrift. Wenn das Ende-Tag kommt, ist die Überschrift beendet.
Genug der Vorrede. Jede HTML-Seite ist eine Textdatei mit der Endung ".html" oder ".htm". Starte deshalb zuerst den Editor (unter Windows findest du ihn über Start – Programme – Zubehör – Editor). Jede HTML-Seite besitzt folgendes Grundgerüst:
<html>
<head>
</head>
<body>
</body>
</html>
Das <html>-Tag bedeutet, dass jetzt Text folgt, der in HTML geschrieben wurde. Innerhalb der HTML-Datei gibt es zwei Teile: Kopf (<head>) und Körper (<body>). Im Kopf befinden sich allgemeine Informationen zur Seite. Im Körper steht der Text, der auf der Seite angezeigt werden soll. Ergänzen wir die HTML-Datei etwas:
<html>
<head>
<title>Meine erste HTML-Seite</title>
</head>
<body>
<p>Der Text meiner HTML-Seite</p>
</body>
</html>
Das <title>-Tag im Kopf beschreibt den Text, der in der Titelleiste des Internetprogramms steht. <p> beschreibt einen Absatz im Körper der HTML-Seite.
Sehen wir uns das Ergebnis an. Dazu musst du die Datei als HTML-Datei speichern. Im Editor wählst du dazu im Menü "Datei" den Punkt "Speichern" aus. Als Dateiname gibst du "seite1.html" ein, als Dateityp wählst du "Alle Dateien" aus und klickst dann auf die Schaltfläche "Speichern". Wenn du die Datei jetzt doppelt anklickst, wird sie mit deinem Internetprogramm geöffnet. Dort erscheint einfach der Text "Der Text meiner HTML-Seite" und in der Titelleiste steht "Meine erste HTML-Seite".
Fügen wir jetzt ein paar Elemente hinzu:
…
<body>
<h1>Überschrift erste Ebene</h1>
<h2>Überschrift zweite Ebene</h2>
<p>Der Text meiner HTML-Seite</p>
<p><b>Fetter</b> und <i>kursiver</i> Text</p>
</body>
…
Klicke im Editor auf Speichern und sieh dir das Ergebnis im Internetprogramm an. Du siehst, dass du ganz einfach Internetseiten gestalten kannst. Wichtig ist nur, dass du jedes Tag mit seinem Ende-Tag wieder abschließt.
Hier noch eine Liste mit einigen HTML-Tags zum Ausprobieren:
| <html> | Beginn der HTML-Seite |
| <head> | Beginn des Kopfes |
| <body> | Beginn des Körpers |
| <p> | Absatz |
| <h1> | Überschrift der ersten Ebene |
| <h2> | Überschrift der zweiten Ebene, die Überschriften gehen bis <h6> |
| <b> | Fetter Text |
| <i> | Kursiver (schräger) Text |
| <u> | Unterstrichener Text |
| <s> | Durchgestrichener Text |
| <big> | Text ist größer als normal |
| <small> | Text ist kleiner als normal |
| <ul> | Beginn einer Liste |
| <li> | Ein Listenelement |
| <ol> | Beginn einer Aufzählung, die einzelnen Elemente der Aufzählung werden auch mit <li> dargestellt. |
| <hr/> | Fügt eine Trennlinie ein. Dieses Tag ist gleichzeitig auch das Ende-Tag, deshalb der Schrägstrich am Ende. |
Viel Spaß
Clemens