HTML-Basiskurs

Bild: Pixabay, Lizenz: CC0

HTML (Hypertext Markup Language) ist die Seitenbeschreibungssprache des WWW und dient in erster Linie zur Strukturierung von Textdokumenten, dem Einbinden von Bildern und dem Erzeugen von Links. Das Opens external link in new windowWorld Wide Web Consortium (W3C), das Gremium zur Standardisierung der Techniken für das WWW, hat die Regeln für HTML erstellt und entwickelt sie weiter.

 

Seit es Content-Management-Systeme gibt, bastelt niemand mehr Internetseiten selbst mit HTML-Befehlen zusammen. Dennoch ist es nach wie vor sinnvoll, einige Befehle der Seitenbeschreibungssprache selbst zu kennen. Nicht nur um besser zu verstehen, wie das WWW funktioniert, sondern weil man auch bei der Verwendung von Content-Management-Systemen oder Blogsoftware immer wieder an deren Grenzen stößt, die sich mit der Verwendung von ein paar HTML-Befehlen leicht erweitern lassen.

Allgemeines

Was in einer Word-Datei im Hintergrund immer mit abgespeichert wird (Textformatierungen, Absätze, etc.) wird in einer HTML-Datei selbst von Hand programmiert. Wie der Text auf der Programmieroberfläche aussieht, spielt zunächst überhaupt keine Rolle, denn die Umsetzung der HTML-Befehle übernimmt ein Browser.

Die Bereiche des Dokuments

 

Head: beinhaltet Informationen über die Autoren, Erstellungsdaten (sog. Meta-Tags), Angaben für Suchmaschinen, Befehle für den Server/Browser.

 

Body: hier steht der eigentliche sichtbare Inhalt des Dokuments.

Befehlsarten (Tags)

 

Einfache Befehle

 zum Beispiel:

<br> (erzeugt einen Zeilenumbruch)

<img src="bild.gif"> (fügt ein Bild ein)

 

Containerbefehle

Containerbefehle bestehen aus zwei Teilen und umschließen den Bereich, für den der Befehl gilt.

 

Zum Beispiel:

 <font size="2">Textbeispiel</font> (setzt die Schriftgröße für einen Text fest)

Meta-Tags

Meta-Tags enthalten allgemeine Angaben über die Seite, die sich an Browser, Server oder Suchmaschinen richten. Angaben zu „keywords“ übermitteln zum Beispiel Stichwörter über den Inhalt einer Seite an Suchmaschinen. Mit dem Meta-Tag „description“ wird die Seite beschrieben. Diese Beschreibung erscheint den AnwenderInnen, wenn die Seite bei einer Suchmaschine als Treffer ausgegeben wird.

 

Stichworte festlegen:

<meta name="keywords" content="HTML, Tags, Meta-Tags, Umlaute, Farben">

 

Beschreibung der HTML-Seite:

<meta name="description" content="HTML-Basiskurs: Grundlegende Informationen zu HTML, die wichtigsten Befehle und Tipps für die Umsetzung einer ersten eigenen Webseite.">

Farben

Farben werden in Form von Hexadezimalwerten angegeben. Als Grundlage dienen dazu die Farben Rot, Grün und Blau.

 

So wird ein sattes Rot mit der Zahlen/Buchstabenfolge „FF0000“ dargestellt. FF entspricht in der Hexadezimalzählung (0 - 15 = 0 - F) dem Wert 16 X 16 - 1, also 255. Ein tiefes Blau entspricht damit „0000FF“. Alle drei Farben lassen sich mischen und dabei entstehen sämtliche Zwischentöne.

 

Setzt man die Intensität aller Farben gleich hoch, ergibt sich ein Weiß („FFFFFF“), setzt man sie auf 0 (Null), ergibt sich ein Schwarz („000000“); (additive Farbmischung!).

 

Im Weiteren werden immer wieder Farbanwendungen auftauchen. Damit Farben richtig programmiert sind, sollte vor der Angabe eines Farbwertes ein # gesetzt werden: „#00FF00“.

Textformatierung

Geschützte Leerzeichen

  • Sie dienen als unsichtbare Füllung für Tabellenzellen oder für Absätze.
  • Der Browser kann nur 1 Leerzeichen erkennen, für jedes weitere Leerzeichen benötigt er ein geschütztes Leerzeichen.
  • Sie verbinden fest zwei getrennte Wortteile miteinander (EURO 200), die nicht umgebrochen werden sollten.
Text&nbsp;&nbsp;&nbsp;mit Leerzeichen Text   mit Leerzeichen
EURO&nbsp;200 EURO 200

Absätze

  • Texte werden in der Regel immer innerhalb eines Absatzes gesetzt.
  • Ein Absatz kann linksbündig (Standard), zentriert oder mittig sein.
  • Abstände zwischen zwei Textblöcken werden mit einer "leeren" Absatzmarke generiert.

 

Syntax:

<p align="left">Beispieltext</p>

 

<p align="center">Beispieltext</p>

 

<p align="right">Beispieltext</p>

Ausgabe:

 

Beispieltext

Beispieltext

Beispieltext

 

Neue Zeile

Eine neue Zeile ist etwas anderes als ein neuer Absatz.

Syntax:

 

Noch ein Beispieltext<br>

Noch ein Beispieltext<br>

Noch ein Beispieltext<br>

 

Ausgabe:

 

Noch ein Beispieltext

Noch ein Beispieltext

Noch ein Beispieltext

 

Blocksatz

 

Ein Blocksatz wird mit folgendem Absatzbefehl erzeugt:

 

<p align="justify">In diesem Fall muss der Beispieltext sogar noch länger sein. Der Blocksatz erzeugt ein einheitliches Textbild, lässt sich jedoch etwas schlechter lesen als der sogenannte "Flattersatz".</p>

 

In diesem Fall muss der Beispieltext sogar noch länger sein. Der Blocksatz erzeugt ein einheitliches Textbild, lässt sich jedoch etwas schlechter lesen als der sogenannte "Flattersatz".

Schriftformatierung

Schriftarten

  • Dem Browser muss in der Programmierung angegeben werden, welche Schriften den BesucherInnen einer Internetseite angezeigt werden sollen.
  • Werden keine Schriften definiert, gibt der Browser die Schrift wieder, die beim jeweiligen Besucher voreingestellt ist.
  • Es können nur Schriften angezeigt werden, die auf dem PC des Nutzers installiert sind.
  • Da es unsicher ist, welche Schriften dort installiert sind, beschränkt man sich sinnigerweise auf übliche Schriften wie "Arial", "Helvetica", "Times", "Verdana", etc.
  • Es können mehrere Schriften, mit Kommata getrennt, angegeben werden. Falls eine Schrift auf dem PC einer Besucherin nicht installiert ist, weicht der Browser automatisch auf die nächste Schrift aus.

 

Syntax:

 

<font face="Verdana, Arial, Helvetica">Textbeispiel</font>

Schriftgrößen

  • Schriftgrößen werden nicht in "Punkt" angegeben (9, 10, 11, 12, etc.) sondern in den Werten 1, 2, 3, 4, 5, 6, 7 definiert
  • Es lassen sich relative Schriftgrößen angeben, sie verkleinern oder vergrößern die voreingestellte Schrift um den entsprechenden Wert: -1, -2, -3, -4, -5, -6, -7, +1, +2, +3, +4, +5, +6, +7
  • Verschiedene Schriften stellen sich bei gleicher Größe verschieden groß dar.

 

Syntax:

 

<font size="1">Textbeispiel</font>

<font size="3">Textbeispiel</font>

<font size="6">Textbeispiel</font>

 

Schriftfarbe

 

Schriftfarben werden wie bei allen Farbangaben in der HTML-Programmierung mit den RGB-Werten (Rot, Grün, Blau) angegeben. Mit der 6stelligen Hexadezimalzahl lassen sich daher 16,7 Millionen Farbwerte definieren. Vor der Farbangabe muss immer das Zeichen # stehen.

 

Syntax:

 

<font color="#ff0000">Textbeispiel</font>

<font color="#00ff00">Textbeispiel</font>

<font color="#0000ff">Textbeispiel</font>

<font color="#ffff00">Textbeispiel</font>

<font color="#00ffff">Textbeispiel</font>

<font color="#aabb11">Textbeispiel</font>

 

Kombinierte Font-Tags

 

Mehrere Attribute können in einem Font-Befehl stehen und sollten auch zusammen gefasst werden. Dabei muss der Font-Befehl nur einmal beendet werden.

 

Syntax:

<font size="6" colour ="#ff0000">Textbeispiel</font>

 

Fett und kursiv

 

Beide Befehle sind einzelne Container-Befehle, die nichts mit dem Font-Tag zu tun haben. Sie befinden sich deshalb außerhalb des Font-Tags.

 

Syntax:

 

<strong>Textbeispiel</strong>

 

<i>Textbeispiel</i>

 

<strong><i>Textbeispiel</i></strong>

Listen

Ungeordnete Listen

Bei einer Aufzählungsliste wird der Anfang und das Ende einer Liste mit <ul> bzw. </ul> (unordered list) markiert und die jeweiligen Aufzählungspunkte mit <li> und </li>.

 

Syntax:

 

<ul>

<li>Radio</li>

<li>Fernsehen</li>

<li>Internet</li>

</ul>

Ausgabe:

 

  • Radio
  • Fernsehen
  • Internet

Geordnete Listen

Geordnete Listen lassen sich gleich formatieren wie ungeordnete Listen, die Listenpunkte werden jedoch mit Zahlen angegeben.

 

Syntax:

 

<ol>

<li>Radio</li>

<li>Fernsehen</li>

<li>Internet</li>

</ol>

Ausgabe:

 

  1. Radio
  2. Fernsehen
  3. Internet

Hyperlinks

Link auf ein anderes Dokument

Bei Hyperlinks wird nach absoluter und relativer Adressierung unterschieden:

Ein absoluter Link hat eine eindeutige Internetadresse als Zielangabe, die mit http:// beginnt.

 

Beispiel:

 

<a href="http://www.lmz-bw.de">Landesmedienzentrum Baden-Württemberg</a>

 

Landesmedienzentrum Baden-Württemberg

 

Ein relativer Link führt zu einem Dokument innerhalb der eigenen Seitenstruktur; das Ziel des Links wird aus der Perspektive des Dokuments angegeben. Falls sich die Zielseite in einem anderen Ordner befindet, muss der Pfad mit angegeben werden.

 

<a href="familie/opa.html">Ein Link auf die Seite von Opa</a>

Link auf eine Stelle innerhalb des Dokuments (Anker)

Damit kann z.B. von einem Übersichtspunkt auf den eigentlichen Inhalt gelinkt werden oder vom Seitenende an den Anfang des Dokuments.

 

Dieser Befehl besteht aus zwei Teilen: Einmal muss der Link gesetzt werden, dann der Zielpunkt (Anker) definiert werden.

 

Syntax Link:

Ein Link auf einen Anker muss immer mit dem Zeichen # beginnen.

 

<a href="#hobby">Opas Lieblingsbeschäftigung</a>

 

Syntax Anker:

Der benannte Anker umschließt keinen bestimmten Text oder ein anderes Objekt.

 

<a name="hobby"></a>

Link auf eine Stelle innerhalb eines anderen Dokuments

Dabei wird nach dem Dateinamen des Zieldokuments ein # und dann der Ankername angegeben.

 

<a href="familie/opa.html#hobby">Ein Link direkt zu der Lieblingsbeschäftigung von Opa</a>

E-Mail-Link

Hier können Sie eine E-Mail an Opa schreiben.

 

Syntax:

 

Hier können Sie eine E-Mail an <a href="mailto:opa@domainname.de">E-Mail</a> an Opa schreiben.

Einbinden von Bildern

  • Vor allem zwei Dateiformate werden üblicherweise verwendet, um Grafiken und Fotos in HTML-Seiten einzubinden: gif, geeignet für Grafiken, Icons, also gleichmäßige Flächen und Schriften; jpg, geeignet für fotorealistische Bilder und Grafiken mit Farbverläufen.
  • Die Breiten- und Höhenangabe eines Bildes sollte im Programmiercode korrekt angegeben werden.
  • Bei den Bildeigenschaften kann beispielsweise angegeben werden, wie der Text ein Bild umfließt.
  • Im Alternativtext eines Bildes (Alt-Tag) wird das Bild kurz beschrieben. Der Alternativtext erscheint, wenn die Grafik nicht angezeigt werden kann. Auch für Blinde ist der Alternativtext von Bedeutung.
  • Bilder können einen oder mehrere Links auf andere Dokumente beinhalten.

 

Beispiel 1:

Bild mit Breiten- und Höhenangaben und Alternativtext.

 

Arbeitstisch

<img src="images/html_arbeitstisch.jpg" width="150" height="196" alt="Arbeitstisch">

Beispiel 2:

Bild mit Breiten- und Höhenangaben, Alternativtext und Rahmen (1 Pixel).

 

Fü

<img src="images/html_fuesse.jpg" width="150" height="196" border="1" alt="Füße auf dem Tisch">

Beispiel 3:

Der Text ist einfach neben das Bild geschrieben. Das Bild hat die Eigenschaft align="right".

Lachender Schüler

Diese Bilder sind an der Schule für Farbe und Gestaltung in Stuttgart aufgenommen worden. Das Copyright liegt beim Landesmedienzentrum Baden-Württemberg.

Syntax:

<img src="images/html_lachen.jpg" width="220" height="171" alt="Lachender Schüler" align="right">Diese Bilder sind an der Schule für Farbe und Gestaltung in Stuttgart aufgenommen worden. Das Copyright liegt beim Landesmedienzentrum Baden-Württemberg.

Beispiel 4:

Der Text ist einfach neben das Bild geschrieben. Das Bild hat nun die Eigenschaft align="left".

Diese Bilder sind an der Schule für Farbe und Gestaltung in Stuttgart aufgenommen worden. Das Copyright liegt beim Landesmedienzentrum Baden-Württemberg.

Syntax:

<img src="images/html_lachen.jpg" width="220" height="171" alt="Lachender Schüler" align="left">

 

Bilder verlinken

Bilder werden grundsätzlich genau so verlinkt, wie Texte verlinkt werden, das heißt der Befehl umschließt das Bild.

Üblicherweise wird dem Bild das Attribut Rahmen="0" mit gegeben, ansonsten erscheint um das Bild ein Blauer Rahmen, bzw. ein Rahmen in der Linkfarbe.

<a href="http://www.sfg.s.bw.schule.de/"><img src="images/html_fuesse.jpg" width="150" height="196" alt="Füße auf dem Tisch" border="0"></a>

 

 

Link

Opens external link in new windowde.selfhtml.org

Die ursprünglich von Stefan Münz betreute Seite ist das Nachschlagewerk zu HTML im Netz und ist inzwischen als Wiki für die Mitarbeit geöffnet worden.