1. HTML als Textformatierungssprache

1.3 Einfache HTML-Tags

Jetzt, da Sie hoffentlich das Grundprinzip verstanden haben, gehen wir einfach mal eine Liste von HTML-Tags durch. Viele dienen einfach der Formatierung von Text (wo, wie groß, fett).

Text hervorheben: `<strong>` und `<em>`

Sie haben schon das HTML-Tag <strong> kennengelernt, der den Text fettgedruckt hervorhebt.

Die Vorlesung beginnt      <strong>pünktlich</strong> 
um  18:00.

Die Vorlesung beginnt pünktlich um 18:00.

Das HTML-Tag <em> ist ähnlich, es hebt den Text hervor, indem es ihn kursiv macht:

Die <em>Vorlesung</em> 
beginnt     pünktlich um 18:00.

Die Vorlesung beginnt pünktlich um 18:00.

Absätze mit `<p>`

HTML ignoriert Leerzeilen
und fügt sie von Haus aus nur ein,
wenn der rechte Rand des umgebenden Elements
erreicht worden ist. 

<p>
Wenn Sie Text mit &lt;p&gt;...&lt;/p&gt; einrahmen, so 
machen Sie deutlich, dass es sich um einen <em>Absatz handelt.</em>
</p>

<p>
Der wird standardmäßig von seiner Umgebung durch eine Leerzeile 
und etwas Platz abgegrenzt.
</p>

HTML ignoriert Leerzeilen und fügt sie von Haus aus nur ein, wenn der rechte Rand des umgebenden Elements erreicht worden ist.

Wenn Sie Text mit <p>...</p> einrahmen, so machen Sie deutlich, dass es sich um einen Absatz handelt.

Der wird standardmäßig von seiner Umgebung durch eine Leerzeile und etwas Platz abgegrenzt.

Überschriften

<h1> Gibt Ihnen eine große Überschrift </h1>

<h2> Gibt Ihnen eine etwas kleinere Überschrift </h2>

<h3> Gibt Ihnen eine noch kleinere Überschrift </h3>

Listen

<ul> (unordered list) bzw. <ol> (ordered list) zusammen mit <li> (list item) gibt Ihnen Stichpunktlisten:

<ul>
<li>Dies ist eine nicht-numerierte Liste.</li>
<li>Sie sehen nur Stichpunkte.</li>
</ul>
<ol>
<li>Jeder Stichpunkt ist durchnummeriert.</li>
<li>Uns so weiter.</li>
</ol>

Dies ist eine nicht-numerierte Liste.
Sie sehen nur Stichpunkte.

Jeder Stichpunkt ist durchnummeriert.
Uns so weiter.

Tabellen

Tabellen erstellen Sie mit <table>. Jede Zeile ist ein <tr> (table row), jede Zelle ein <td>. Mit <th> deuten Sie an, dass die Zelle zur Tabellenüberschrift gehört und hervorgehoben werden soll.

<table>
    <tr>
        <th>Nachname</th>
        <th>Vorname</th>
        <th>Studiengang</th>
    </tr>
    <tr>                                    
        <td>Hammerschmidt</td>
        <td>Nicole</td>
        <td>Informatik, Bachelor</td>
    </tr>
    <tr>                                    
        <td>Kowalcyzk</td>
        <td>Adam</td>
        <td>Biologie, Master</td>
    </tr>                                
    <tr>                                    
        <td>Scheder</td>
        <td>Dominik</td>
        <td>Informatik, Diplom</td>
    </tr>
</table>

Nachname	Vorname	Studiengang
Hammerschmidt	Nicole	Informatik, Bachelor
Kowalcyzk	Adam	Biologie, Master
Scheder	Dominik	Informatik, Diplom

In meinem Skript schaut die Tabelle oben ganz gut aus. Wenn Sie aber einfach <table> in einem HTML-Dokument verwenden, sieht es sehr ungeschmückt und karg aus: table-without-style.html. Wie man den Stil für einen <table> festlegt, also horizontale Streifen, farbliche Absetzung etc., lernen Sie im Kapitel über CSS.

Übungsaufgabe Schauen Sie sich die Seite html-tree-structure.html im Browser an. Finden Sie heraus, wie Sie sich in Ihrem Browser den Html-Quelltext anzeigen lassen können.

Zeichnen Sie die Baumstruktur der Seite, mit dem body-Element als Wurzelknoten.

Finden Sie heraus, wie Sie in Ihrem Browser einen Tab namens Elements öffnen, der Ihnen die Html-Elemente schon von sich aus einigermaßen baumförmg anzeigt. Bei mir sieht das so aus:

Übungsaufgabe Schreiben Sie eine Html-Seite, die ungefähr so aussieht: