Einführung in HTML

Was ist das?

HTML heißt Hyper Text Mark­up Lan­guage. Dem­nach han­delt es sich um eine Spra­che zur Struk­tu­rie­rung von Doku­men­ten, wobei man sich über soge­nann­te Links von einem Text zum ande­ren kli­cken kann. HTML ist die Grund­la­ge des Infor­ma­ti­ons­aus­tauschs im World Wide Web, einem wich­ti­gen Bestand­teil des Inter­nets.

Hallo Welt

HTML-Datei­en sind nor­ma­le Text­da­tei­en. Eine Mini­mal­da­tei, die Hal­lo Welt! anzeigt, sieht so aus:

In den Klam­mern <…> und </…>, sind die soge­nann­ten Mark­up-Tags oder kurz Tags unter­ge­bracht. Sie bestim­men die Struk­tur der Datei. Hier­bei gibt es in der Regel ein Start-Tag <…> und ein End-Tag </…>.

<html> sagt dem Web-Brow­ser, dass eine HTML-Datei kommt. Im Hea­der <hea­der> ist der Kopf unter­ge­bracht. Der <tit­le> wird oben im Brow­ser ange­zeigt, zumeist als Name des Rei­ters.

Alles, was im Brow­ser­fens­ter zu sehen sein wird, fin­den wir im Body-Bereich. Bei uns ist das Hal­lo Welt!

Wenn man das Bei­spiel aus­pro­bie­ren will, kann man es ein­fach in eine Text­da­tei kopie­ren. Unter Win­dows mit dem Note­pad muss man dar­auf ach­ten, dass Alle Datei­en aus­ge­wählt wor­den ist und nicht Text­da­tei. Als Datei­endung muss .html oder .htm gewählt wer­den. Wei­ter­hin soll­te es kei­ne Groß­buch­sta­ben oder Umlau­te im Datei­na­men geben. Ich habe die Datei hallo_welt.html genannt.

Überschriften und Umlaute

Über­schrif­ten las­sen sich mit den Tags <h1>, <h2> usw. ange­ben, wobei immer auch ein End-Tag vor­han­den sein muss.

Ergeb­nis

Überschrift 1. Ordnung

Das ist ein Absatz.

Überschrift 2. Ordnung

Das ist ein wei­te­rer Absatz.

Mit dem meta-Tag <meta charset=”utf-8″> wird ein bestimm­ter Zei­chen­satz aus­ge­wählt, mit dem unser Text dar­ge­stellt wer­den soll. Somit kön­nen wir auch Umlau­te ganz nor­mal schrei­ben. Ansons­ten müss­ten wir die Umlau­te anders dar­stel­len. So steht &auml; für ä, &ouml; für ö und &uuml; für das ü. Der ent­spre­chen­de Groß­buch­sta­be Ä wird mit &Auml; dar­ge­stellt. Gespro­chen kann man sich das mit AUml(aut) mer­ken.

Absät­ze wer­den mit <p> für Para­graph gekenn­zeich­net. Absät­ze und Über­schrif­ten stel­len wich­ti­ge Mit­tel zur Struk­tu­rie­rung von Tex­ten dar.

Listen

In HTML wer­den geord­ne­te Lis­te (orde­re Lis­te, <ol>) von unge­ord­ne­ten Lis­ten (unor­de­red lists, <ul>) unter­schie­den. Geord­ne­te Lis­ten wer­den in irgend­ei­ner Form durch­num­me­riert, ent­we­der mit Zah­len oder mit Buch­sta­ben.

Ergeb­nis

Listen

Geordnete Listen

Mit Zahlen

  1. ers­ter Ein­trag
  2. zwei­ter Ein­trag
  3. drit­ter Ein­trag

Mit römischen Zahlen

  1. ers­ter Ein­trag
  2. zwei­ter Ein­trag
  3. drit­ter Ein­trag

Mit Buchstaben

  1. ers­ter Ein­trag
  2. zwei­ter Ein­trag
  3. drit­ter Ein­trag

Ungeordnete Listen

  • ers­ter Ein­trag
  • zwei­ter Ein­trag
  • drit­ter Ein­trag

Tabellen

Tabel­len wer­den mit dem Tag <table> erzeugt, wobei man gleich im Tag die Dicke der Tabel­len­li­ni­en mit dem Attri­but bor­der ange­ben kann. Eine neue Zei­le wird mit table row <tr> und neue Zel­len mit table Data <td> erzeugt. Die Zel­len der Kopf­zei­le wer­den durch das Tag <th> für table head gekenn­zeich­net.

Ergeb­nis
Vor­na­meNach­na­me
SandraBullock
ScarlettJohansson
JodieFoster

Bilder

Bil­der las­sen sich sehr kom­for­ta­bel mit dem Tag <img> ein­fü­gen. Hier wird kein Ende-Tag erwar­tet. Als Attri­bu­te kön­nen die Quel­le src, die Brei­te wist, die Höhe height sowie ein alter­na­ti­ver Text alt ange­ge­ben wer­den, der ange­zeigt wird, wenn es nicht mög­lich ist, das Bild zu laden.

Ergeb­nis
Basstölpel

Soll das Bild sich stets über die vol­le Brei­te erstre­cken, wobei die Höhe ange­passt wer­den soll, kann man das beson­ders vor­teil­haft mit dem style-Attri­but bewerk­stel­li­gen.

Ergeb­nis
Basstölpel

Man spricht hier­bei auch von Respon­se Design, weil der­ar­ti­ge Bil­der auch sehr gut auf klei­ne­ren Bild­schir­men wie bei Smart­pho­nes betrach­tet wer­den kön­nen.

Ver­wei­se sind wie bereits erwähnt wich­tig für Hyper­text­do­ku­men­te. Sie wer­den durch das Tag <a> wie anchor defi­niert.

Ergeb­nis

Goog­le
RKI im neu­en Fens­ter
Mail an Jage­mann
Down­load PDF

Die Adres­se wird im Attri­but href fest­ge­legt. Das kann ent­we­der eine voll­stän­di­ge Adres­se begin­nend mit http:// bzw. https:// sein, aber auch eine Mail­adres­se (hier wird mail­to) vor­an­ge­stellt oder aber der Pfad zu einer Datei.

Textformatierung

Absät­ze kön­nen links­bün­dig, rechts­bün­dig, zen­triert oder auch im Block­satz dar­ge­stellt wer­den. Hier­zu fin­det inner­halb eines Absat­zes <p> das Attri­but align Anwen­dung.

Des Wei­te­ren kön­nen Tei­le von Wör­tern oder gan­ze Wör­ter mit den Tags <sup> und <sub> hoch- und tief­ge­stellt wer­den. Auf die­se Art und Wei­se kann man z.B. x2 und H2O dar­stel­len.

Ergeb­nis

Fet­ter Text
Kur­si­ver Text

Ein rechts­bün­di­ger Absatz.

Ein zen­trier­ter Absatz.

Ein Absatz im Block­satz. Er könn­te mehr Text gebrau­chen.

Texthoch stel­len

Texttief stel­len