HTML-Basiswissen zum Nachschlagen

Allgemeines

HTML bedeutet Hypertext Markup Language.
  • Hypertext ist Text, welcher zusätzlich zu dem eigentlichen Text auch noch Verweise auf weitere Texte an anderen Orten enthalten kann.
  • Markup wird auf deutsch meistens mit Auszeichnung übersetzt. Mir gefällt (Text-)Markierung besser.
  • Language steht für Sprache.
Alle Webseiten des Internets enthalten HTML-Texte, welche von Browser-Programmen (Chrome, Firefox, Safari, Internet Explorer, Opera, ...) gelesen und angezeigt werden können.

Im Internet gibt es eine Menge Quellen zum Thema HTML. Es gibt aber nicht sehr viele, die auf dem aktuellen Stand sind und den Vorgaben in Ihrem Unterricht entsprechen (z.B. Programmier-Richtlinien). Meine empfohlene Vorgehensweise zum Erlernen von HTML lautet daher verständlicherweise: Kommen Sie zum Unterricht und beteiligen Sie sich aktiv an den Übungen, welche Sie auch hier im Wiki finden. Dann werden Sie keine Schwierigkeiten haben, im Internet die aktuellen und besseren Seiten von den alten und den schlechten zu unterscheiden.

HTML-Version und Grundgerüst

HTML hat sich über die Jahre weiterentwickelt und existiert in verschiedenen Versionen. Wenn Sie eine HTML-Seite schreiben, dann gehört also unbedingt die Wahl und Angabe der genutzten HTML-Version dazu. Ihr Browser kann eine entsprechend des gewählten Standards fehlerfrei geschriebene Seite schneller und richtiger anzeigen. Wenn eine Seite Fehler enthält, dann gibt es keine Garantie, dass diese Seite entsprechend Ihrer Vorstellungen angezeigt wird. Die HTML-Version finden Sie jeweils in der ersten Zeile einer HTML-Datei noch vor dem <html>-Tag. Für HTML 5 lautet die Angabe der Version wie folgt:
<!DOCTYPE html>
Selbstverständlich können Sie auch mit anderen HTML-Standards arbeiten, wenn Sie die Unterschiede in den Quelltexten kennen und anwenden - hierfür gibt es allerdings nur eingeschränkten Support seitens Ihres Lehrers; siehe ...

Grundstruktur

HTML-Seiten haben alle die gleiche Grundstruktur! Sie bestehen
  • aus einem Bereich, in dem sich beschreibende Informationen zur Seite, Formatierungen und Skripte befinden und
  • einem Bereich, in dem sich die auf der Seite abgebildeten Inhalte befinden.
Diese beiden Bereiche werden durch entsprechende Markierungen (Tags) in der Seite eingeschlossen.
Die Grundstruktur sieht also wie folgt aus:
<!DOCTYPE html>
<html>
 
 <head>
 
 </head>
 
 
 <body>
 
 </body>
 
</html>
Sie sehen im obigen Quelltext das html-Tag, das head-Tag und das body-Tag. Das gegebene Beispiel können Sie als Vorlage für beliebige zu erstellende Webseiten verwenden. Alle hinzukommenden Bestandteile der Seite werden entweder dem head- oder dem body-Tag hinzugefügt.

Deutsche Sprache (Umlaute und andere Sonderzeichen)

Damit aus dem obigen Beispiel eine vollständige und fehlerfreie Vorlage wird, müssen noch weitere Informationen hinzugefügt werden. Die wichtigste weitere Angabe ist die Angabe der vom Editor verwendeten Kodierung der HTML-Seite in der abgespeicherten Datei. Entsprechend eines vorgegebenen Zeichensatzes speichert jeder Editor Zeichen als Zahlenwerte im Binärformat. Wenn der Browser für die Anzeige der Datei die enthaltenen Zahlenwerte im Binärformat liest, versucht er sie entsprechend einer Zeichentabelle in Zeichen zu wandeln und anzuzeigen. Leider gibt es eine ganze Reihe von möglichen Kodierungen, was zu Anzeigefehlern führt, wenn die Angabe der korrekten Zeichentabelle (Kodierung) in der Seite fehlt. Nutzer des Notepad++-Editors fügen z.B. einfach die folgende Zeile dem head-Tag der HTML-Datei hinzu (UTF-8-Zeichensatz) - entsprechend der Voreinstellung des Editors:
<meta charset="utf-8">
Die Ausgabe von einigen Sonderzeichen in HTML funktioniert alternativ wie folgt:
Solch eine Ausgabe wird z.B. beim Programmieren benötigt, wenn man sicherstellen möchte, dass auch wirklich genau dieses Zeichen ausgegeben wird.

Titel der Seite

HTML-Seiten werden im Browser stets mit einem Titel angezeigt. Dieser Titel steht im head-Tag der Datei und wird jeweils im Browser-Fenster oben angezeigt.
<title>Mein Titel</title>

Validator

Mit den obigen Vorgaben haben Sie jetzt hoffentlich eine eigene fehlerfreie Vorlage erstellt.
Speichern Sie Ihre HTML-Datei in Ihrem Home-Verzeichnis. Überprüfen Sie Ihre Seite auf folgender Webseite:
Nutzen Sie bitte die Option File Upload, da nur so die korrekte Zeichenkodierung geprüft werden kann. Nur so können Sie ein fehlerfreies Ergebnis erzielen.

Beipiele, wie man seine HTML-Seite um verschiedene Tags ergänzen kann


Wie kann ich ein Bild in meiner Seite verwenden?

...
  <img src="tanzmaus.png" alt="Tanzmaus">
...
siehe auch:

Wie verwendet man einen Link?

...
  <a href="http://www.tagesschau.de/">
     ARD Tagesschau
  </a>
  Nachrichten<br>
  <a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten<br>
  <a href="/">Wohin der wohl f&uuml;hren mag?</a><br>
  <a href="./">Und der hier?</a>
...
 
siehe auch:


HTML-Beispielseite

htmlseite-beispiel1.html


Empfohlene Übungen zum Erlernen von HTML



Übersichten HTML-Tags

Eine HTML-Seite besteht aus vielen Tags (gesprochen: Tägs). Alle wird man nicht auswendig lernen können. Es ist dennoch sinnvoll, möglichst viele kennenzulernen.

Ein einfacher Link zu einer anderen Seite

<a href="http://www.dasistsodoof.de/">Doofer Link</a>
  • <a href=""> </a> ist die Art und Weise, wie ein Link immer geschrieben werden muss, d.h. die korrekte Syntax.
  • http://www.dasistsodoof.de/ ist die Adresse der Seite, welche bei Anklicken des Links aufgerufen wird.
  • "Doofer Link" ist der Text, der zu ihrem Link auf der HTML-Seite angezeigt wird.

div und span

HTML-Seitenprüfung (Analyse)

HTML, XHTML und CSS

Farben

Schriftarten / Zeichenkodierungen

Tabellen

Formulare

Templates (Vorlagen)


Weitere Infos

Unterschied zwischen span und div tags:

Positionierung von span und div tags:

Quellen zur Information:

Eventhandler:


HTML 5: