Bachelor-Studiengang Bibliotheks- und Informationsmanagement - HTML-Einführung

http://www.hdm-stuttgart.de/ffahrbach/html

Kurze Geschichte von HTML

Die erste Version von HTML wurde 1989/1990 von Tim Berners-Lee entwickelt, als er bei der European Organization for Nuclear Research (CERN) in Genf arbeitete. Parallel wurde bereits an Prototypen erster grafischer Browser gearbeitet.
Ziel war es, eine einfache, plattfornübergreifende und schlanke Programmiersprache für Webseiten zu entwickeln.
1994: HTML2.0 erscheint, Ende 1994: Netscape Navigator erscheint, 1995: der erste Internet Explorer erscheint.
1997: erst jetzt gelingt es dem W3C-Consortium mit der Version 3.2 einen HTML-Standard zu veröffentlichen, der von allen beteiligten Firmen unterstützt wurde.
1998: HTML4.0 mit Integration von CSS erscheint.
2000: XHTML1.0 (XML-gerechtes HTML) wird veröffentlicht.
2009: XHTML2.0 - Die Entwicklung von XHTML2.0 wird zu Gunsten von HTML5 eingestellt.
2009: HTML5.0 erscheint als erster Arbeitsentwurf.
Was ist neu in HTML5?

Erste HTML-Tags

Erklärung einer Funktion	Tag im Quelltext	Auswirkung im Browser
Neue Zeile: <br>	Dies ist Zeile 1<br>Dies ist Zeile 2	Dies ist Zeile 1 Dies ist Zeile 2
Neuen Absatz: <p> </p>	<p>Dies ist Absatz 1</p> <p>Dies ist Absatz 2</p>	Dies ist Absatz 1 Dies ist Absatz 2
Überschrift: <h1> </h1> (n-ter Ordnung: h2, h3, h4 etc.)	<h1>Überschrift 1. Ordnung</h1> <h2>Dies ist eine Überschrift 2. Ordnung</h2>	Überschrift 1. Ordnung Dies ist eine Überschrift 2. Ordnung

Einige Regeln für die HTML-Programmierung

Oft erscheinen HTML-Tags paarweise mit einen öffnenden tag und einen schließenden tag.
Der schließende tag gleicht dem öffnenden, enthält aber nach der öffnenden spitzen Klammer einen Schrägstrich.
Wichtig: Ein geöffneter tag muss unbedingt auch wieder geschlossen werden, sonst kann er Ihr ganzes HTML-Dokument durcheinander bringen.
Ganz wichtig: Beachten Sie unbedingt die Reihenfolge der tags! Tags müssen in der entsprechenden Reihenfolge geschlossen werden, wie sie geöffnet wurden. Beispiel: <1><2><3> ... </3></2></1>
Enige Regeln sind nicht zwingend vorgeschrieben, erleichtern aber die Arbeit mit HTML:
- Alle tags sollten immer in Kleinbuchstaben geschrieben werden.
- Bei ineinander verschachtelten tags, steigern Einrückungen die Übersichtlichkeit sehr.

Grundgerüst einer HTML-Datei

Funktion	Tag	Auswirkung
Dokumententyp-Deklaration	<!doctype html>	<!doctype html> <html> <head> <title> Das ist der Titel der oben im Browserfenster erscheint </title> </head> <body> Hier steht der eigentliche Inhalt der HTML-Datei </body> </html>
Öffnender tag für die gesamte Datei	<html>
Öffnender tag für den Dateikopf:	<head>
tags für den Dateititel:	<title>Titel der Datei</title>
Schließender tag für den Kopf:	</head>
Öffnender tag für den Dateiinhalt:	<body>
Schließender tag für den Dateiinhalt:	</body>
Schließender tag für die gesamte Datei:	</html>

Textstrukturierung (Sectioning) in HTML5

Funktion	Tag	Auswirkung
erkennbarer Kopfbereich (z.B. für Überschriften)	<header> ... </header>	Optisch haben diese Elemente keine andere Wirkung, als eine neue Zeile im Textfluss zu erzeugen. Um derart definierte Bereiche erkennbar als solche zu gestalten, können CSS-Eigenschaften auf diese Bereiche angewendet werden. Die Bereiche <header> und <footer> dürfen nicht verschachtelt werden. <section>-Bereiche hingegen dürfen - sofern dies logisch und sinnvoll ist - verschachtelt werden.
erkennbarer Fußbereich (z.B. abschließende tags am Seitenende, Copyright, Impressum, o.ä.)	<footer> ... </footer>
Einzelne Abschnitte (z.B. in einem längeren Text)	<section> ... </section>
Kennzeichnet einen eigenständigen logischen Teil in einer Webseite, z.B. ein Beitrag in einem Blog oder einem Forum.	<article> ... </article>
Kennzeichnet den Bereich mit den Navigationselementen	<nav> ... </nav>
Kennzeichnet den Bereich einer Seitenleiste oder zusätzlichen Spalte	<aside> ... </aside>

Listen

Zur Strukturierung können Sie in HTML auch Listen einsetzen. Es gibt hier grundsätzlich zwei unterschiedliche Typen. Geordnete Listen (Ordered List) und ungeordnete Listen (Unordered List).

Geordnete, durchnummerierte Liste (Ordered List)
Sortierte durchnummerierte Liste: <ol> ... </ol> Darin einzelne Gliederungspunkte: <li> ... </li>	<ol> <li>Erster Gliederungspunkt</li> <li>Zweiter Gliederungspunkt</li> <li> Gliederungspunkt</li> </ol>	Erster Gliederungspunkt Zweiter Gliederungspunkt Dritter Gliederungspunkt
Liste in einer Liste:	<ol> <li>Erste Liste, erster Punkt</li> <li>Erste Liste, zweiter Punkt <ol> <li>Zweite Liste, erster Punkt</li> <li>Zweite Liste, zweiter Punkt</li> </ol></li> <li>Erste Liste, Punkt</li> </ol>	Erste Liste, erster Punkt Erste Liste, zweiter Punkt Zweite Liste, erster Punkt Zweite Liste, zweiter Punkt Erste Liste, Punkt
Unsortierte Liste (Unordered List)
Unsortierte Liste: <ul> ... </ul> Darin einzelne Gliederungspunkte: <li> ... </li>	<ul> <li>Erster Gliederungspunkt</li> <li>Zweiter Gliederungspunkt</li> <li>Dritter Gliederungspunkt</li> </ul>	Erster Gliederungspunkt Zweiter Gliederungspunkt Dritter Gliederungspunkt
Liste in einer Liste:	<ul> <li>Erste Liste, erster Punkt</li> <li>Erste Liste, zweiter Punkt <ul> <li>Zweite Liste, erster Punkt</li> <li>Zweite Liste, zweiter Punkt</li> </ul></li> <li>Erste Liste, dritter Punkt</li> </ul>	Erste Liste, erster Punkt Erste Liste, zweiter Punkt Zweite Liste, erster Punkt Zweite Liste, zweiter Punkt Erste Liste, dritter Punkt
Gemischte Listen
Unsortierte Liste in einer sortierten Liste:	<ol> <li>Erste Liste, erster Punkt</li> <li>Erste Liste, zweiter Punkt <ul> <li>Zweite Liste, erster Punkt</li> <li>Zweite Liste, zweiter Punkt</li> </ul></li> <li>Erste Liste, dritter Punkt</li> </ol>	Erste Liste, erster Punkt Erste Liste, zweiter Punkt Zweite Liste, erster Punkt Zweite Liste, zweiter Punkt Erste Liste, dritter Punkt

Attribute und Werte von tags

Tags können in HTML mit einem oder mehreren Attributen und den dazugehörigen Werten ausgezeichnet werden. Die Attribute werden dabei innerhalb der spitzen Klammern des (öffnenden Tags notiert). Die Werte werden nach einem "=" in Anführungszeichen notiert.

Funktion	Tag	Auswirkung
Abbildung einfügen: tag: <img> Attribut: src Wert: "hdm-logo.gif"	<img src="hdm-logo.gif">
Kombination mehrerer Attribute in einem tag
Abbildung einfügen: tag: <img> Attribut: src Wert: "hdm-logo.gif" Attribut: alt Wert: "Das HdM-Logo"	<img src="hdm-logo.gif" alt="Das HdM-Logo">

Abbildungen

Funktion	Tag	Auswirkung
Abbildungen einfügen: tag: <img ...> Attribut: src Wert: "Dateiname"	<img src="wolframstrasse.jpg">
Größe des Bildes verändern: tag: <img ...> Attribute: width, height Wert: n (Anzahl der Pixel)	<img src="wolframstrasse.jpg" width="300" height="50">
Alternativtext: tag: <img ...> Attribut: alt Wert: "Alternativtext" Attribut: title Wert: "Titel oder Beschreibung"	<img src="wolframstrasse.jpg" alt="Bild des Standorts Wolframstrasse" title="HdM, Wolframstrasse 32>

Links

Funktion	Tag	Auswirkung
Verlinkung auf eine externe Datei: tag: <a ...> ... </a> Attribut: href Wert: [Name der Datei]	Dies ist eine <a href="Datei2.htm">Verlinkung</a> zu der Datei2.htm	Dies ist eine Verlinkung zu der Datei2.htm
Verlinkung innerhalb einer Datei (Anker): tag: <a ...> ... </a> Attribut: href Wert: "#[Name der Sprungmarke]" z.B. "#anfang" Sprungmarke am Anfang der Datei: < a name="anfang"></a>	Dieser <a href="#anfang">Link</a> führt zum Anfang der Datei. --------------------------------------- tag am Dateianfang: <a name="anfang"></a>	Dieser Link führt zum Anfang der Datei.
Verlinkung auf externe Websites:	Dies ist eine <a href="http://www.hdm-stuttgart.de/bi">Verlinkung</a> nach http://www.hdm-stuttgart.de/bi	Dies ist eine Verlinkung nach http://www.hdm-stuttgart.de/bi
Verlinkung auf eine externe Datei, Öffnen eines neuen Browser-Fensters Attribut: target Wert: "_blank"	Dies ist eine <a href="Datei2.htm" target="_blank">Verlinkung</a> zu der Datei2.htm, die in einem neuen Browser-Fenster geöffnet wird.	Dies ist eine Verlinkung zu der Datei2.htm, die in einem neuen Browser-Fenster geöffnet wird.
Verlinkung auf eine externe Datei in einem parallel gelegenem "Nachbar-Ordner" namens xhtml liegt.	Dies ist eine <a href="../XHTML/Datei3.htm"> Verlinkung</a> zu der Datei3.htm, die in dem parallel gelegenem Nachbar-Ordner "xhtml" liegt.	Dies ist eine Verlinkung zu der Datei3.htm, die in dem parallel gelegenem Nachbar-Ordner "xhtml" liegt.
Verlinkung auf eine externe Datei in einem Unterverzeichnis, Öffnen eines neuen Browser-Fensters Attribut: target Wert: "_blank"	Dies ist eine <a href="Ordner/Datei4.htm" target="_blank">Verlinkung</a> zu der Datei4.htm, die in dem Unterverzeichnis "Ordner" liegt und in einem neuen Browser-Fenster geöffnet wird.	Dies ist eine Verlinkung zu der Datei4.htm, die in dem Unterverzeichnis "Ordner" liegt und in einem neuen Browser-Fenster geöffnet wird.
Verlinkung von Grafiken	<a href="http://www.hdm-stuttgart.de/bi" target="_blank"> <img src="wolframstrasse.jpg"></a> <br>Beim Anklicken dieser Abbildung erscheint die Website des Bachelor-Studiengangs Bibliotheks- und Informationsmanagement in einem neuen Browser-Fenster	Beim Anklicken dieser Abbildung erscheint die Website des Bachelor-Studiengangs Bibliotheks- und Informationsmanagement in einem neuen Browser-Fenster
Verlinkung auf eine Mailadresse tag: <a ...> ... </a> Attribut: href Wert: "mailto:[E-Mailadresse]"	Mit <a href="mailto:wesser@hdm-stuttgart.de">diesem Link</a> kann Herrn Wesser eine E-Mail geschickt werden.	Mit diesem Link kann Herrn Wesser E-Mail geschickt werden.
Verlinkung anderer Dateien	Dieser Link auf <a href="test.zip">die Datei test.zip</a> starten beim Anklicken den Download-Vorgang	Dieser Link auf die Datei test.zip starten beim Anklicken den Download-Vorgang

Tabellen

Hinweis: Verwenden Sie Tabellen nach Möglichkeit nur für tabellarische Inhalte, nicht zu Layout-Zwecken.

Anfang der Tabelle: <table>
Beschriftung der Tabelle: <caption>
Anfang Tabellenzelle in Kopfzeile: <th>
Anfang einer Tabellenzeile: <tr>
Anfang einer Tabellenzelle: <td>

<table>
<caption>Tabellenüberschrift</caption>
<tr>
<th>Spaltenkopf 1</th>
<th>Spaltenkopf 2</th>
</tr>
<tr>
<td>Zelle links oben</td>
<td>Zelle rechts oben</td>
</tr>
<tr>
<td>Zelle links unten</td>
<td>Zelle rechts unten</td>
</tr>
</table>

Tabellenüberschrift
Spaltenkopf 1	Spaltenkopf 2
Zelle links oben	Zelle rechts oben
Zelle links unten	Zelle rechts unten

Zellen verbinden:
tag: <td>
Attribut: colspan
Wert: n (Anzahl der zu Zellen, die verbunden werden sollen)

<table>
<tr>
<td colspan="2">Beide oberen Zellen verbunden</td>
</tr>
<tr>
<td>Zelle links unten</td>
<td>Zelle rechts unten</td>
</tr>
</table>

Beide oberen Zellen verbunden
Zelle links unten	Zelle rechts unten

Zeilen verbinden:
tag: <td>
Attribut: rowspan
Wert: n (Anzahl der zu Zeilen, die verbunden werden sollen)

<table>
<tr>
<td rowspan="2">Zelle, die über zwei Zeilen verbunden wurde</td>
<td>Zelle</td></tr>
<tr><td>Zelle</td></tr>
</table>

Zelle, die über zwei Zeilen verbunden wurde	Zelle
	Zelle

Formulare & Formularfelder

Ein Formular besteht aus mehreren Einzelteilen Geöffnet und geschlossen wird ein Formular immer durch das <form>-Tag Alles was zwischen diesen beiden Tags steht, gehört zum Formular.	<form> ... < /form>
Im <form>-tag wird mit dem Attribut action="" angegeben, was der Webserver mit den eingegebenen Formulardaten weiter anstellen soll. Beim action-Attribut kann z.B. eine E-Mailadresse angegeben werden, es kann aber auch ein externes Programm auf dem Server aufgerufen werden, das die Daten weiter verarbeitet.	<form action="mailto:zudirselbst@wohinwohl.com"> ... < /form>
Im <form>-tag wird außerdem noch mit dem Attribut 'method=' angegeben, wie der Server die eingegebenen Formulardaten behandeln soll. Meist ist das method-Attribut mit dem Wert "post" oder "get" versehen. Bei unserem Beispiel muss "post" verwendet werden.	<form action="mailto:zudirselbst@wohinwohl.com" method="post"> ... < /form>
Wenn in dem Formular Text erfasst wird, der dann per E-Mail-Funktion versendet werden soll, muß das Attribut enctype mit dem Wert "text/plain" noch ergänzt werden.	<form action="mailto:zudirselbst@wohinwohl.com" method="post" enctype="text/plain"> ... < /form>
Wenn Sie Formularfelder gruppieren wollen, können Sie das mit dem <fieldset>...</fieldset>-Tag bewerstelligen. Die Überschrift des Fieldsets kennzeichnen Sie mit <legend>...</legend> nach dem öffnenden <fieldset>.	Ihre Daten

Typ des Formularfeldes	Tag	Auswirkung
Die einzelnen Formularfelder werden durch verschiedene tags bestimmt. Einzeilige Textfelder und Checkboxen, sowie die Schaltflächen werden durch das tag <input> definiert, mehrzeilige Textfelder durch <textarea>, Auswahllisten durch das tag <select>. Jedes Formularfeld braucht auch einen eindeutigen Namen. Dieser Name wird durch das Attribut "name" bestimmt, mit dem das jeweilige Formularfeld-Tag versehen wird. Durch das Attribut <size> kann die Länge/Breite des Feldes bestimmt werden.
Einzeiliges Textfeld: tag: <input> Attribut: type Wert: "text" (definiert ein Textfeld)	<input type="text" name="name">
Auswahlliste: Eine Auswahlliste wird durch das tag: <select> eingerahmt Attribut: Name (benennt dieses Formularfeld) Einzelner Listeneintrag: tag: option Attribut: value (definiert den angezeigten und den übergebenen Wert des jeweiligen Listeneintrages) Wert: "enthält den übergebenen Listenwert" Attribut: selected (definiert den vorausgewählten Wert)	<select name="Wert"> <option selected="selected" value="Wert 1">Wert 1</option> <option value="Wert 2">Wert 2</option> <option value="Wert 3">Wert 3</option> </select>
Runde Checkboxen: tag: <input> Attribut: type Wert: "radio" (definiert ein rundes Checkbox-Feld) Attribut: name (definiert den Namen des Formularfeldes) Attribut: value (definiert den Inhalt, der übergeben wird) Attribut: checked (definiert das vorausgewählte Feld)	<input type="radio" value="1" name="wert" checked="checked">1<br> <input type="radio" value="2" name="wert">2<br> <input type="radio" value="3" name="wert">3	1 2 3
Checkboxen: tag: <input> Attribut: type Wert: "checkbox" (definiert ein klassisches viereckiges Checkbox-Feld) Attribut: name (definiert den Namen des Formularfeldes) Attribut: value (definiert den Inhalt, der übergeben wird) Attribut: checked (definiert das vorausgewählte Feld)	<input type="checkbox" value="1" name="wert1" checked="checked>1<br> <input type="checkbox" value="2" name="wert2">2<br> <input type="checkbox" value="3" name="wert3">3	1 2 3
Mehrzeiliges Textfeld: tag: <textarea> Attribut: name (definiert den Namen des Formularfeldes) Attribut: rows (definiert die Anzahl der Zeilen) Attribut: cols (definiert die Anzahl der Spalten)	<textarea name="wert"> Mit diesem Text wird das Eingabefeld vorbelegt. </textarea>	Mit diesem Text wird das Eingabefeld vorbelegt.
Formularfeld zum Upload von Files tag: <input> Attribut: type Wert: "file"	<input type="file">
Schaltfläche zum Verarbeiten des Formularinhalts: tag: <input> Attribut: type Wert: submit	<input type="submit" value="Senden>
"Beschriften" von Formularfeldern: Beschriftungen von Formularfelder können Sie mit <label for="feldname">Feldname</label> zuordnen.	<label for="vorname">Ihr Vorname</label> <input type="text" id="vorname" name="vorname">	Ihr Vorname

<h2>Ein Beispielformular</h2>

<form method="post" action="mailto:mail@adresse.de" enctype="text/plain">
<h2>Ihre Meinung zum heutigen Wetter</h2>

<fieldset>
<legend>Ihre Daten</legend>

<label for="name">Ihr Name:</label>
<input type="text" name="name" id="name"><br>

<label for="land">Wo wohnen Sie?</label>
<select name="land" id="land">
<option selected="selected" value="Deutschland">Deutschland</option>
<option value="Schweiz">Schweiz</option>
<option value="Österreich">Österreich</option>
<option value="Anderes Land">Anderes Land</option>
</select><br>
<label for="bewertung">Bewerten Sie das Wetter</label>

<input id="bewertung" type="radio" value="spitze" name="bewertung" checked="checked">spitze
<input type="radio" value="naja" name="bewertung">mittelmäßig
<input type="radio" value="mies" name="bewertung">schlecht
<br>

<label for="aenderungen">Was soll sich ändern?</label>
<textarea name="aenderungen" rows="5" cols="20" id="aenderungen">Mehr Regen? Sturm? 36 Grad? </textarea><br>

</fieldset>

Ein Beispielformular

Kommentare in HTML

Funktion	Tag	Auswirkung
Unsichtbare Kommentare einfügen: tag: <!-- xyz -->	<!-- Das ist ein Kommentar -->

Sonderzeichen

Umlaut ä	ä	ä
Umlaut Ä	Ä	Ä
Umlaut ö	ö	ö
Umlaut Ö	Ö	Ö
Umlaut ü	ü	ü
Umlaut Ü	Ü	Ü
Umlaut ß	ß	ß
geschütztes Leerzeichen
Anführungszeichen	"	"
Kaufmanns-und	&	&
Spitze Klammer auf	<	<
Spitze Klammer zu	>	>
Paragraph	§	§
Copyright	©	©
Registered trademark	®	®
Ein Viertel	¼	¼
Ein Halb	½	½
Drei Viertel	¾	¾

Aufgaben zu HTML