HTML

Mit HTML wird eine Webseite geschrieben und strukturiert.

HTML (HyperText Markup Language) ist eine plattformunabhängige Dokumentbeschreibungssprache/Auszeichnungssprache, in der Web-Seiten geschrieben sind. HTML wurde Ende der 80er Jahre zusammen mit dem World Wide Web erfunden. Zurzeit ist HTML5 der aktuellste Webstandard, dieser wird vom World Wide Web Consortium (W3C) herausgegeben. Das HTML-Dokument kann mit jedem beliebigen Texteditor erstellt werden und enthält den zu übertragenden Text und zusätzlich HTML-Kommandos (tags) zur Textformatierung, Einfügen von Bildmaterial, Querverweise auf andere Dokumente (Hyperlinks) oder auch Formulare für Texteingaben. Programme/Browser führen dann die Formatierungsbefehle des Dokumentes aus und zeigen es auf dem Computer-Bildschirm an. Die HTML-tags selbst sind nicht auf der Webseite ersichtlich.
Quellcode mit Text und HTML-tags


HTML Seitenaufbau

Es gibt nebst dem Inhalt (Text/Bilder etc.), welchen man im Browserfenster sieht, weitere zwingende Meta-Informationen über jede Webseite. Dieser HTML-Grundaufbau gliedert sich in folgende Bereiche:

<!DOCTYPE html>

<html>

<head>

METAINFORMATIONEN (NICHT AUF WEBSEITE ERSICHTLICH)

</head>

<body>

INHALT DER WEBSEITE

</body>

</html>


DOCTYPE-Definition - erste Zeile jeder Webseite
Über die DOCTYPE-Definition wird dem Webbrowser mitgeteilt, was er in der folgenden Datei erwarten kann und welche HTML-Befehle zulässig sind. Diese Zeile wird benötigt, damit man die erstellten HTML-Seiten von einem Programm automatisch validieren (überprüfen) lassen kann.

HTML-TAG
In der nachfolgenden Zeile der DOCTYPE-Definition kommt der html-Anfangs-tag mit weiteren Angaben wie beispielsweise welche Sprache für den Inhalt der Seite verwendet wird. Der html-End-tag wird ganz am Ende der Seite einfügt und umfasst alle Bereiche.

HEAD-Bereich
Im Head-Bereich sind verschiedene Dinge definiert, die man auf der Seite nicht direkt sieht - mit Ausnahme von Inhalt des title-tags, der im Browserfenster angezeigt wird. Die Angaben im Head-Bereich sind wichtig für die Technik und Suchmaschinen und es können noch diverse Informationen über Autor, Copyright und eine Kurzbeschreibung eingetragen werden. Ebenso wird hier die Verlinkung zum externen CSS (Cascading Style Sheet) eingebunden.

Body-Bereich
Hier kommt der ganze Inhalt einer Webseite hin. Text, Bilder, Hyperlinks werden hier platziert.


HTML Befehle (tags)

Nebst dem geschriebenen Text gibt es diverse HTML-Befehle (tags), einerseits um die Webseite zu strukturieren, wie:
-> Überschriften (h1 - h6)
-> Absatz / Paragraph (p)
-> Listen (li)

oder für Textauszeichnungen, wie:
-> fett, kursiv, unterstrichen

sowie um Querverweise/Hyperlinks einzubauen (a href), wie:
-> Links zu anderen Webseiten
-> Mail-Adressen
-> Bilder, Dokumente, PDFs (welche als Download verlinkt werden)

Aufbau von HTML-tags
• HTML-tags enthalten Verhältniszeichen, sie beginnen immer mit Kleiner-als-Zeichen und enden mit Größer-als-Zeichen:
• Es gibt immer ein Anfangs-tag und einen End-tag. Der End-tag endet jedoch mit ein Schrägstrich (wenige Ausnahmen haben nur ein tag, ein sogenanntes Standalone-tag, z.B. break oder horizontal ruler)
• Zwischen den Zeichen befindet sich die Anweisung, welche in Englisch abgekürzt wird
• HTML-tags, sprich die Anweisung zwischen den Verhältniszeichen, werden immer klein geschrieben
• jedes neue HTML-tag erzeugt einen Zeilenumbruch im HTML-Dokument

<p>HTML-tag für Absatz/Paragraph</p>

 


HTML Links einbinden (Referenzieren)

Eines der wichtigsten Elemente einer Webseite ist der Link. Ein Link verweist auf eine andere Webseite, bietet eine Verknüpfung mit E-Mail-Adressen oder zu weiteren Dokumenten an.
Links werden mit dem HTML-tag 'a href' eingefügt. 'A' steht für anchor (Anker) und 'href' für Hyperreferenz.
Innerhalb diese HTML-Befehls 'a href' folgt eine Zieldatei (in Anführungs- & Schlusszeichen) - beide Daten sind nicht auf der Webseite ersichtlich. Anschließend folgt der sichtbare Link-Text, welcher standardmässig blau unterstrichen auf der Webseite dargestellt wird. Der HTML-Befehl wird mit dem End-Tag 'a' wieder geschlossen.
Sobald der Linktext angeklickt wird, lädt sich die angegebene Zielseite. Normalerweise werden Links als Text dargestellt, es können aber auch Grafiken oder Bilder verlinkt werden.

Es gibt Links mit folgenden Funktionen:
• interne Links/relative Links: Verweise innerhalb der eigenen Webseite auf Unterseiten
• externe Links/absolute Links: Links auf andere, externe Webseiten im Internet
• Datei-Link (Download): um eine andere Datei (PDF/Bild/weitere Dokumente) zu öffnen
• E-Mail-Link: um eine E-Mail-Adresse zu verlinken
• Sprungmarken-Link: um an einen bestimmten Ort der Webseite zu gelangen (z.B. für Inhaltsverzeichnisse/Kapitel)

Beispiel eines internen und externen Links:

<a href="www.webbasics.ch">Webbasics</a>

<a href="http://www.webbasics.ch/">Webbasics</a>

Aufbau einer Link-Adresse:

http:// = Hypertext transfer protocol (Kommunikationsprotokoll)
www = World Wide Web (Netzwerk von elektronischen Hypertext-Dokumenten/Webseiten)
webbasics = Name der registrierten Webseite, des Dokuments
ch = Schweizer Länderdomäne (Domain-Anhang, Top-Level-Domain)

Beispiel eines Links, welcher in einer neuen Seite geöffnet wird (target="_blank" oder target="_new"):

<a href="http://www.webbasics.ch/" target="_blank">Link öffnet sich in neuer Seite</a>

Dateien verlinken
Anstatt auf Webseite zu verweisen, können natürlich auch Dateien (wie PDFs) verlinkt werden. Der HTML-Befehl bleibt derselbe (a href). Anstelle der Webseitenadresse wird jedoch der Dateipfad angegeben. Voraussetzung ist jedoch, dass die Dateien bereits online auf einem Server gespeichert worden sind.

Beispiel eines Links zu einem PDF-Dokument (auch hier die Möglichkeit, das PDF in einer neuen Seite zu öffnen):

<a href="Speicherpfad/Datei.pdf" target="_blank">Projekt XY</a>

Mail-Adressen verlinken
Der E-Mail-Link ist ähnlich aufgebaut wie die Webseiten-Verlinkung. Nach dem HTML-Befehl 'a href' wird anstelle der Internetseite das Attribut 'mail to' und nachfolgend die E-Mail-Adresse in das Anfangs-tag eingefügt. Mehrere Hauptmail-Adressen werden durch ein Komma getrennt.
Es ist auch möglich Kopien (cc) Blindkopien (bbc) an weitere Mail-Adressen oder eine Betreff (subject) sogar einen Nachrichtentext (body) einzufügen. Hierfür wird nach der Hauptmail-Adresse ein Fragezeichen (?) angehängt sowie allen weiteren Parameter mit einem kaufmännischen Und (&) getrennt. Die Parameter bestehen jeweils aus einem Namen, einem Istgleichzeichen (=) und einem zugewiesenen Wert.
Mögliche Mail-Parameter:
- cc (sichtbarer Kopienempfangende)
- bcc (unsichtbarer Kopienempfangende)
- subject (Betreff)
- body (Nachrichtentext)

Beispiel eines einfachen E-Mail-Links:

<a href="mailto:webmaster@info.com">Mail an Webmaster</a>


Beispiel eines E-Mail-Links mit Parameter (cc, subject, body):

<a href="mailto:webmaster@info.com?cc=privat@gmail.com&#38;subject=Titel">Mail an Webmaster, cc Privatadresse, Titel</a>

Sprungmarken verlinken
Innerhalb der Webseite können Sprungmarken definiert werden, d. h. sobald der Link anklickt wird, springt man zum entsprechenden Ziel im selben Dokument (Anker). Sinnvoll ist dies, wenn man beispielsweise mit einem Inhaltsverzeichnis und Kapiteln innerhalb der Webseite arbeitet. Der Link beginnt mit dem HTML-tag 'a href', gleich wie die anderen Verweise. Anstelle der Webseite wird jedoch ein Name definiert und mit # angefügt (a href="#Kapitel1"). Der Anker beginnt mit dem HTML-tag 'a name' und dem gleichen Link-Namen (a name="Kapitel1").

Beispiel einer Sprungmarke mit Link und Anker:

<a href="#Kapitel1">Kapitel 1</a>

<a name="Kapitel1">Kapitel 1</a>

HTML Bilder einbinden
Nebst Text können auch Bilder direkt in ein HTML-Dokument eingebunden werden. Um Bilder direkt auf der Webseite erscheinen zu lassen, werden sie mit dem HTML-tag 'img src' (image source = Bildquelle) eingebunden. Zusätzlich zum tag wird der Speicherort der Bilddatei oder die URL angegeben. Ausserdem gibt es bei img scr-tag kein end-tag (Standalone-tag).

Beispiel Bild mit Speicherortangaben: <img src="Dateiordner/bild.jpg">

Beispiel Bild mit URL: <img src="http://www.webbasics.ch/webbasics.jpg">


Listen und Tabellen

Listen
Listen werden gebraucht, um eine Seite zu strukturieren, insbesondere aber um Menü/Navigation einer Webseite zu erstellen. Es gibt zwei verschiedene Grundtypen von Listen:

ul = unordered list / unsortierte Liste (mit Aufzählungszeichen)

ol = ordered list / sortierte Liste (durchnummeriert, 1./2./3. etc.)

Jede Liste beginnt entweder mit dem ul- oder ol-tag. Jeder neue Listenpunkt beginnt mit dem li-tag (list item). Listenpunkt und Listenende enden jeweils mit dem dazugehörigen End-tag.

<ul>

<li>Kaffee</li>

<li>Milch</li>

</ul>


Tabelle
Tabellen sind ideal um Daten, Aufzählungen zu strukturieren. Im Gegensatz zur Liste können mehrere Datensätze/Zellen nebeneinander stehen. Folgende HTML-tags gibt es für die Tabellenstruktur:

table = Tabelle, Tabellenbeginn
tr = table row, Tabellenreihe (kommt vor jeder Tabellereihe hin)
td = table data, Tabellendaten (kommt vor jeder Tabellenzelle hin)
th = table head, Tabellenkopfzeile (optional)

rowspan = Reihen in der Tabelle miteinander verbinden (optional)
colspan = Spalten in der Tabelle miteinander verbinden (optional)

Im table-tag können zusätzlich Angaben zur Gestaltung der Tabelle gemacht (z.B. table border="1", welches das Tabellenraster anzeigt), jedoch wird dies besser getrennt und mit CSS gelöst.

Beispiel einfache Tabelle mit Tabellenraster:

<table border="1">

<tr>

<td>Reihe 1, Zelle 1</td>

<td>Reihe 1, Zelle 2</td>

<td>Reihe 1, Zelle 3</td>

</tr>

<tr>

<td>Reihe 2, Zelle 1</td>

<td>Reihe 2, Zelle 2</td>

<td>Reihe 2, Zelle 3</td>

</tr>

<tr>

<td>Reihe 3, Zelle 1</td>

<td>Reihe 3, Zelle 2</td>

<td>Reihe 3, Zelle 3</td>

</tr>

</table>


HTML Bereiche definieren (div/span)

<div> Mit dem DIV-tag (Division = Bereich) können Webseiten in einzelne Bereiche abgetrennt werden. Dies erlaubt dann mit einem CSS-Selektor (Klasse oder ID) direkt auf diesen Bereich zuzugreifen und den Bereich gesondert zu gestalten (beispielsweise Inhalt und Navigation einer Webseite).

<div class="rot">Ich bin ein Abschnitt mit roter Schrift und weissem Hintergrund.</div>

Mit dem SPAN-tag (umspannen) wird der einzelne Bereich innerhalb eines Abschnittes definiert, z.B. eine Textauszeichnungen/Worthervorhebung:

Ich bin ein <span class="rot">rotes</span> Wort auf <span class="rot">weissem</span> Grund.


HTML Style-Attribut (Inline CSS)

<span style> Es können auch einzelne HTML-Elemente mit Hilfe von CSS-Eigenschaften formatieren werden. Die Formatdefinitionen gelten dann für den Bereich des betreffenden HTML-Elements. Sinnvoll ist dies für Gestaltungsausnahmen von einzelnen Elementen einer Webseite. Ansonsten wird das Design mit externem CSS gelöst, welches als eigenständiges Stylesheet in das HTML Dokument eingebunden wird.

Aufbau / Ergänzung Inline-CSS im Anfangs-tag mit style:

<span style="Eigenschaft:Wert;Eigenschaft:Wert;">Text mit Inline-CSS gestaltet</span>

<span style="color:white;background-color:green;">Text mit Inline-CSS gestaltet</span>


Das HTML Style-Attribut kann entweder auf ein einzelnes Wort, Satz angewandt werden (span) oder ebenso auf den Strukturierungs-tags wie Paragraph (p) oder Header (h).

Aufbau HTML Style-Attribut
Das Style-Attribut besteht immer aus dem Attribut (z.B. color) sowie dem dazugehörigen Wert (z.B. blue) und wird innerhalb des Anfangs-tag mit dem style-Zusatz wie folgt eingefügt:

<span style="color:red;">Das ist ein roter Text</span>


Es können auch mehrere Attribute für ein einzelnes Element angegeben werden, welche mit dem Semikolon (Strichpunkt) getrennt werden:

<span style="background-color:red;

color:yellow;font-size:25px;font-weight:bold;

border:3px;border-style:solid;">

span style tag mit vielen Attributen</span>

Bei diesem Beispiel werden die individuellen Formatangaben auf ein span-Element (Bereich umspannen) angewendet. Es erhält mit Hilfe der Style-Eigenschaften für Hintergrundfarbe (background-color), Schriftfarbe (color), Schriftart (font-family), Schriftgröße (font-size), Zeichenabstand (letter-spacing), Innenabstand zum Rand (padding) und einem Rahmen (border) ein eigenes Aussehen.


HTML Bereiche

Zur feineren, übersichtlicheren Strukturierung werden einzelne Bereiche unterteilt und können individuell gestaltet werden. Anbei die wichtigsten HMTL-Strukturtags:

section
Das section Element repräsentiert einen Abschnitt eines Dokuments, typischerweise einen mit einer Überschrift. Das section-Element muss keinen bestimmten Inhalt enthalten und ist vergleichbar mit einem normalen div-Container (Division = Bereich).

<section>

<h1> .... </h1>

<article>

<p> ........ </p>

</article>

</section>


header und footer
Für einführende (header) und abschliessende Informationen (footer). Beide Elemente müssen nicht zwingend im Kopf- oder Fussbereich vorkommen. Sinnvoll ist es, wenn im Header z.B. das Logo eingesetzt wird und im footer Infos über die Seite, Kontaktangaben etc.

<header>

<h1> Seitentitel </h1>

 Info über Seite 

</header>

<footer>

<h1> Kontaktangaben </h1>

 Adresse 

</footer>


nav
Das nav Element enthält Navigationselemente, also Links die auf andere Sektionen der Webseite oder andere Dokumente verweisen. Anders als header und footer Elemente ist das nav Element dazu gedacht, wirklich einmalig zu sein und nur wichtige, für die Navigation der Seite notwendige, Links zu enthalten.

<nav>

<ul>

<li> Link zur 2. Seite </li>

<li> Link zur 3. Seite </li>

</ul>

</nav>


aside
Das aside Element enthält Informationen und Links, welche nicht oder nur bedingt mit dem Hauptthema zu tun haben. Es ist semantisch also in etwa wie eine Sidebar zu verstehen. Es kommt nicht darauf an, an welcher Position das Element sich befindet, sondern vielmehr auf die Beziehung zu den anderen Elementen. Die Sidebar muss also nicht rechts oder links an der Seite platziert sein, sondern kann überall sein.

<aside>

 .... 

</aside>


article
Das article Element enthält Inhalte die in sich zusammenhängend sind, aber vom Rest der Seite unabhängig sind. Paradebeispiel dafür ist ein Blogartikel, oder ein Newsbeitrag. Wichtig bei article ist die inhaltliche Unabhängigkeit vom Rest der Seite. Es ist damit auch durchaus erlaubt Kommentare oder Widgets (Uhr, Statistiken etc.) in ein article-tag zu packen.


Tipps

HTML-Gerüst ohne CSS-Layout einer Webseite anschauen:
Im Browser (Firefox) Ansicht / Webseiten-Stil / kein Stil wählen, dann sieht man den klassischen Aufbau ohne Webseiten-Design (CSS).
Bei Safari Einstellungen / Erweitert, 'Menü Entwickler in Menüleiste anzeigen' anwählen, dann Entwickler/Styles deaktivieren anwählen.

HTML-Quellcode einer Webseite anschauen: Im Browser (Firefox) Extras / Web-Entwickler / Seitenquelltext wählen, damit man den Quellcode einer Webseite anschauen kann.
Bei Safari Einstellungen / Erweitert, 'Menü Entwickler in Menüleiste anzeigen' anwählen, dann Entwickler/Seitenquelltext anzeigen anwählen.

>> Quellcode dieser Seite anschauen: jodi.org

HTML-tag herausfinden: Im Browser (Firefox) Extras / Web-Entwickler / Inspector anwählen, damit kann man die einzelnen HTML-Elemente von einer Webseite zuordnen. Bei Safari Einstellungen / Erweitert, 'Menü Entwickler in Menüleiste anzeigen' anwählen, dann Entwickler/Seitenquelltext anzeigen anwählen und Informationen aktivieren.


>> The year open data went worldwide (ted talk)

Vorherige Seite: Domain Nächste Seite: CSS