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:

<html>
<header>
    <title>Hallo</title>
</header>
<body>
    Hallo Welt!
</body>
</html>

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 <title> 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.

<html>
  <head>
    <meta charset="utf-8">
    <title>Überschrift im Browser</title>
  </head>
  <body>
    <h1>Überschrift 1. Ordnung</h1>
    <p>Das ist ein Absatz.</p>
    <h2>Überschrift 2. Ordnung</h2>
    <p>Das ist ein weiterer Absatz.</p>
  </body>
</html>
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.

<html>
  <head>
    <meta charset="utf-8">
    <title>Listen</title>
  </head>
  <body>
    <h1>Listen</h1>
    <h2>Geordnete Listen</h2>
    <h3>Mit Zahlen</h3>
    <ol>
      <li>erster Eintrag</li>
      <li>zweiter Eintrag</li>
      <li>dritter Eintrag</li>
    </ol>
    <h3>Mit römischen Zahlen</h3>
    <ol type="I">
      <li>erster Eintrag</li>
      <li>zweiter Eintrag</li>
      <li>dritter Eintrag</li>
    </ol>
    <h3>Mit Buchstaben</h3>
    <ol type="a">
      <li>erster Eintrag</li>
      <li>zweiter Eintrag</li>
      <li>dritter Eintrag</li>
    </ol>

    <h3>Ungeordnete Listen</h3>
    <ul>
      <li>erster Eintrag</li>
      <li>zweiter Eintrag</li>
      <li>dritter Eintrag</li>
    </ul>
  </body>
</html>
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.

<html>
  <head>
    <meta charset="utf-8">
    <title>Tabellen</title>
  </head>
  <body>
    <table border=1>
      <tr>
        <th>Vorname</th><th>Nachname</th>
      </tr>
      <tr>
        <td>Sandra</td><td>Bullock</td>
      </tr>
      <tr>
        <td>Scarlett</td><td>Johansson</td>
      </tr>
      <tr>
        <td>Jodie</td><td>Foster</td>
      </tr>
    </table>
  </body>
</html>
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.

<html>
  <head>
    <meta charset="utf-8">
    <title>Bilder</title>
  </head>
  <body>
    <img src="https://mlp29tolaabw.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://jagemann-net.de/wp-content/uploads/2021/01/basstoelpel.jpg" width="400" alt="Basstölpel"/>
  </body>
</html>
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. 

<html>
  <head>
    <meta charset="utf-8">
    <title>Bilder</title>
  </head>
  <body>
    <img src="https://mlp29tolaabw.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://jagemann-net.de/wp-content/uploads/2021/01/basstoelpel.jpg" alt="Basstölpel" style="width: 100%; 
  height: auto;"/>
  </body>
</html>
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­phones 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.

<html>
  <head>
    <meta charset="utf-8">
    <title>Verweise</title>
  </head>
  <body>
    <p>
      <a href="https://www.google.de">Google</a>
      <br/>
      <a href="https://www.rki.de" target="_blank">RKI im neuen Fenster</a>
      <br/>
      <a href="mailto:docjay@jagemann-net.de">Mail an Jagemann</a>
      <br/>
      <a href="dateigibtsnicht.pdf">Download PDF</a>
    </p>
  </body>
</html>
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 ali­gn 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.

<html>
  <head>
    <meta charset="utf-8">
    <title>Formatierung</title>
  </head>
  <body>
    <p>
  	<b>Fetter Text</b><br/>
  	<i>Kursiver Text</i><br/>
    </p>
    <p align="right">
  	Ein rechtsbündiger Absatz.
    </p>
    <p align="center">
  	Ein zentrierter Absatz.
    </p>
    <p align="justify">
  	Ein Absatz im Blocksatz. Er könnte mehr Text gebrauchen.
    </p>
    <p> 
  	Text<sup>hoch</sup> stellen
    </p>
    <p> 
  	Text<sub>tief</sub> stellen
    </p>
  </body>
</html>
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