CSS, HTML und Javascript mit {stil}

HTML Grundlagen

HTML Grundlagen: öffnendes und schließendes HTML-Tagp/pöffnendes Tagschließendes Tag

HTML-Tags sind Anweisungen in spitzen Klammern, auch »HTML-Markup« genannt. Sie geben Text und den Bildern der Webseite eine Struktur und versorgen die Browser mit Informationen, wie sie den Inhalt der HTML-Seite formatieren sollen.

HTML ist Klartext – reiner Text – und beschreibt, wie der Browser Text und Bilder darstellen soll: als einfacher Textabsatz, Überschrift, Auflistung, als Link oder Adresse eines Bildes.

Tags mit einem Anfang und einem Ende sind »Container« oder Behälter für Informationen. Meist sind es nur wenige Buchstaben und Abkürzungen für englische Begriffe.

<p>Absatz Paragraph</p>
<h1>Überschrift Header<h1>
<a href="http://wikipedia.de">Link zu Wikipedia</a>

Die meisten HTML-Anweisungen treten paarweise auf:

  • Ein öffnendes Tag <p> sagt dem Browser: »Hier beginnt ein Absatz«.
  • Ein schließendes </p>-Tag sagt: »Hier endet der Absatz«.
                           +--- HTML-Attribut
                           |   +--- Wert in Hochkommas
                           |   |
<p>ein Text mit einem <a href="…">Link</a></p>
 |                     |                |  |
 |                     |                |  +--- schließendes
 |                     |                |       HTML-Tag mit 
 |                     |                |       Schrägstrich
 |                     |                |
 |                     |                +--- schließendes Tag
 |                     +--- öffnendes Tag
 +--- öffnendes HTML-Tag

Innerhalb eines p-Tags dürfen weitere Tags liegen: Verschachteln ist erlaubt. Im Beispiel liegt das a-Tag zwischen dem öffnenden und schließenden p-Tag.

Allerdings hat das Verschachteln von HTML-Tags enge Grenzen. Welche Tags in einem Element erlaubt sind, ist für jedes Element festgelegt. In einem p-Tag darf z.B. kein div-Tag gesetzt werden und keine Tabellen mit dem table-Tag. Welche Tags innerhalb eines anderen Tags benutzt werden können, muss also für jedes HTML-Tag geprüft werden.

Es gibt auch HTML-Tags, die kein Ende-Tag haben (im Standard als »void« bezeichnet).

<img src="bild.png" width="100" height="100" alt="">
<br>

Beispiele für »leere« Tags ohne Ende-Tag sind img, br, link, meta und input.

HTML-Tags dürfen zwar verschachtelt werden, aber das Ende eines HTML-Tags darf ein anderes öffnendes Tag nicht kreuzen:

<p>Hier ist der <a href="eineSeite.html">Link</p></a>

Aufbau von HTML-Seiten

Ein HTML-Dokument besteht aus einem Dokumentenkopf (head) und einem Dokumentenkörper (body). Im head-Tag liegen Informationen über das Dokument. Was zwischen <head> und </head> steht, wird vom Browser nicht auf der Webseite angezeigt. Nur das <title>-Tag ist eine Ausnahme. Sein Inhalt wird in der Titelleiste des Browserfensters angezeigt.

Der Besucher der Webseite sieht nur, was zwischen dem öffnenden und dem schließenden <body>-Tag steht.

HTML-Seite ohne Tags für die Struktur
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
   Lorem ipsum 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
      …
      Sed dictum mauris euismod mauris.
</body>
</html> 

Die Browser ignorieren die Zeilenumbrüche und zeigen einen Textbrei. Der Text braucht HTML-Tags, um in Form zu kommen.

HTML ohne Tags für die Struktur www.webseite.de Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu. Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Sed dictum mauris euismod mauris.

HTML-Tags für die Struktur von Webseiten

Was zwischen <h1> und </h1> gesetzt wird, erzeugt einen Zeilenumbruch und wird zu einer großen fetten Überschrift, was zwischen <p> und </p> steht, wird zum Textabsatz mit Zeilenumbruch.

Nicht nur der Leser, sondern auch die Suchmaschinen gehen davon aus, dass prägnante Überschriften etwas über den Inhalt der Seite aussagen. In das <title> Tag setzen wir eine kompakte Beschreibung des Inhalts: »HTML Tutorial – Grundlagen | mediaevent.de«. Was im title-Tag steht, taucht in der Browserleiste auf, wird in den Bookmarks gespeichert und als Überschrift in den Ergebnissen der Suchmaschinen angezeigt. Das title-Tag ist das Mutterschiff aller Überschriften.

<body>
<h1>Lorem ipsum </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p>Mauris ante neque, vehicula quis, convallis sit amet, 
   vestibulum ornare, arcu. </p>
<p>Donec at lorem et elit congue dictum. Cras sapien ligula, 
   rutrum quis, posuere id, faucibus id, risus. Maecenas sed est 
   volutpat arcu adipiscing tempus. Sed dictum mauris euismod 
   mauris.</p> 
</body>
HTML mit Tags für die Struktur www.webseite.de Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu. Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Sed dictum mauris euismod mauris.

Text strukturieren

Zeilenbrüche im HTML-Markup werden ignoriert, sondern bestimmte HTML-Tags bringen einen Zeilenumbruch mit.

h1, h2, … h6
erzeugt abgestufte Überschriften (HTML h1, h2, h3 … Überschrift – Header)
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
p
erzeugt einen Textabsatz mit einem Zeilenumbruch (p – Textabsatz)
<p>Ein Textabsatz …</p>
ul, ol
erzeugen ungeordnete bzw. geordnete (nummerierte) Listen (ul, ol, li • HTML Aufzählungen)
Ungeordnete Listen werden mit einem führenden Listenpunkt dargestellt, geordnete Listen mit einem Index. In beiden Listen wird jedes Listenelement in li-Tags eingeschlossen.
<ol>
<li>HTML strukturiert den Inhalt </li>
</ol>
table
erzeugt eine Tabelle mit tr- und td-Tags (HTML table – Tabellen)
<tr>-Tags innerhalb des <table>-Tags stellen die Zeilen der Tabelle dar. Innerhalb der tr-Tags liegen td- oder th-Tags für Tabellenzellen.
<table> <tr> <td>Zeile 1 Spalte 1</td> <td>Zeile 1 Spalte 2</td> </tr> <tr> <td>Zeile 2 Spalte 1</td> <td>Zeile 2 Spalte 2</td> </tr> </table>

Links und Text hervorheben

a
Link oder »Anker«, wird automatisch unterstrichen (HTML a Link, Ankertag, Hyperlink)
<a href="http://www.lipsum.com">Lorem ipsum</a>
i, em
kursive – schräggestellte – Schrift (em, strong, b, i kursiv / fett)
<em>ganz schön schräg</em>
b, strong
fette Schrift (em, strong, b, i kursiv / fett)
<strong>richtig fett</strong>
code
Darstellung als Computer-Code (HTML code-Tag)
<code>Computer-Code</code>

Bilder in HTML

Bilder, Video und Audio – »Medien« werden über den Pfad zu ihrem Ordner und ihren Dateinamen in die Webseite gelinkt.

img
Bilder auf Webseiten anzeigen (img – Bilder in HTML-Seiten)
<img src="img/aquarell.jpg" width="720" height="480" alt="Aquarell">
video
Video in Webseiten einbetten ()
<video controls height="360" width="640"> <source src="countdown.mp4" type="video/mp4" /> <source src="countdown.ogg" type="video/ogg" /> Dieser Browser unterstützt HTML5 Video nicht </video>

Kommentare in HTML

HTML-Kommentare sind besondere HTML-Tags: Was zwischen dem öffnenden und dem schließenden Kommentar-Tag steht, wird vom Browser nicht auf der Seite angezeigt, erzeugt keinen Zeilenumbruch und nimmt keinen Raum an. HTML-Kommentare werden zur Dokumentation des Quelltexts, aber auch für besondere Anweisungen eingesetzt.

<!-- Kommentar im HTML-Quelltext -->

HTML-Kommentare helfen z.B., Anfang und Ende eines HTML-div-Tags im Quelltext besser zu erkennen.

<div class="main">
…
</div><!-- Ende Block main -->

Eine besondere Funktion üben (noch) »bedingte Kommentare oder conditional comments« aus: Sie filtern CSS-Regeln für alte Internet Explorer wie IE8 und IE9. Ihre Tage sind jetzt allerdings gezählt, denn die neuen Versionen von Internet Explorer hören nicht mehr auf Conditional Comments.