HTML Einführung

Dieses Tutorial bietet Ihnen eine Einführung in die Auszeichnungssprache HTML. HTML ist die Basis des World Wide Webs. Der Browser, in dem Sie Internetseiten aufrufen, stellt die HTML Dokumente dar.

Was ist HTML?
HTML Grundgerüst
Textformatierung - Textauszeichnung
Textformatierung - Textausrichtung
Bilder einfügen
Hyperlinks
HTML Formulare

Was ist HTML?

HTML steht für Hypertext Markup Language, was übersetzt soviel, wie "Hypertext Auszeichnungssprache" bedeutet. Das World Wide Web Consortium legt die Standards der Sprache fest und entwickelt sie stetig weiter. Um den HTML Quelltext einer Webseite zu sehen, klicken Sie unter "Ansicht" auf "Seitenquelltext anzeigen" (je nach Browser etwas unterschiedlich).

HTML Grundgerüst

Jede HTML-Seite hat ein gewisses Grundgerüst, welches so aussehen sollte:

<html>
<head>
</head>
<body>
</body>
</html>

Wie zu sehen ist, haben die Tags auch sogenannte Endtags, welche durch den Schrägstrich (Slash) kenntlich gemacht werden. Zwischen <html> und </html> steht der Inhalt des Dokuments, jedoch wird der Inhalt zwischen den <head> Elementen nicht im Browser angezeigt, mit Ausnahme des Titels, welcher sehr wichtig für Suchmaschinen und somit auch für Ihre Besucher, welche über Suchmaschinen zu Ihrer Website gelangen, von Bedeutung ist.

<title>Titel der Webseite</title>

Die anderen Tags im <head> Bereich sind für manche Suchmaschinen von Bedeutung, sie helfen bspw. die Sprache oder den Inhalt der Webseite deutlich zu machen. Für die meisten Suchmaschinen werden diese jedoch nicht mehr benötigt, weshalb ich hier nicht weiter darauf eingehe. Wer trotzdem mehr über Meta-Tags wissen möchte, schaut einfach hier vorbei.
Im <body> Bereich steht der Inhalt, der für den Besucher zu sehen ist, also Text, Bilder, Hyperlinks usw.

Textformatierung

Texte können in HTML formatiert werden. Der Text bzw. Textteile können fett formatiert, kursiv und unterstrichen werden. Hierzu ein Beispiel:

<html>
<head>
</head>
<body>
<b>Dieser Text wird fett dargestellt</b>
<br>
<i>Dieser Text wird kursiv dargestellt</i>
<br>
<u>Dieser Text wird unterstrichen</u>
<br>
<b><i>Dieser Text wird fett und kursiv dargestellt</i></b>
</body>
</html>

Wie zu sehen, besitzen alle Tags auch einen Endtag. Die Tags können auch beliebig verschachtelt werden, sodass eine Textstelle z.B. fett und kursiv formatiert ist. Diese HTML-Seite sieht folgendermaßen aus:

Ausrichtung (links, mittig, rechts)

Elemente können verschieden ausgerichtet werden. Standardmäßig wird bspw. Text links ausgerichtet, sodass es nicht nötig ist dies noch einmal anzugeben, wenn man ihn links ausgerichtet haben möchte. Mit dem Attribut align können Elemente ausgerichtet werden. Die Werte lauten, wie anzunehmen, left, center, right. Nun ein Beispiel:

<html>
<head>
</head>
<body>
<p align="center">Zentrierter Text</p>
<p align="leftt">Links ausgerichteter Text</p>
<p align="right">Rechts ausgerichteter Text</p>
</body>
</html>

Sobald das ausgerichtete Element beendet wird (hier durch </p>), wird die Ausrichtung ausgehoben.

Bilder einfügen

Um eine Webseite attraktiver zu gestalten benötigt man Bilder. Im Quelltext des HTML Dokuments wird auf das Bild, was eingefügt werden soll, verwiesen. Dies geschieht wie folgt:

<img src="bild.PNG" alt="Alternativtext">

Wie zu sehen braucht das <img> Tag kein Endtag; img steht für image (Bild), src für source (Quelle). Zum Schluss noch das Attribut alt. Hier kann eine Bildbezeichnung eingefügt werden; dies dient Besuchern mit abgeschalteter Bildanzeige und Suchmaschinen, die ja keine Bilder erkennen können.
Auch Bilder können ausgerichtet werden. Dies geschieht, wie bereits erwähnt, mit dem align-Attribut. Hier ein kleines Beispiel, in dem das Bild rechts ausgerichtet wird:

<html>
<head>
<title>Rechtsbündiges Bild</title>
</head>
<body>
<h1>Rechtsbündiges Bild</h1>
<img align="right" src="bild.PNG" alt="rechtsbündiges Bild">
</body>
</html>

Im Browser sieht dies wie folgt aus:

Hyperlinks

Mit sogenannten Hyperlinks lassen sich HTML Seiten verknüpfen. Intern können also so alle Seiten des Webauftritts miteinander verknüpft werden. Aber auch andere Websites können so auf Ihre Website verlinken. In diesem Fall ist der Link als Empfehlung zu sehen. So sieht die Grundsyntax eines Hyperlinks aus:

<a href="unterseite1.html" title=
"Linkbeschreibung">Unterseite1</a>

Es muss also mit dem <a>-Tag gearbeitet werden, welches auch ein Endtag haben muss. Mit dem Attribut href geben Sie das Ziel des Links an. Um eine Beschreibung für die angelinkte Webseite zu geben ist das title-Attribut da. Beim Berühren mit der Maus wird dieser Text angezeigt. Der blau-markierte Text ist der Linktext.
Wenn Sie nun die angelinkte Webseite in einem neuen Fenster öffnen möchten, benötigen Sie das Attribut target mit dem Wert _blank. Dies wird folgendermaßen in das <a>-Tag hineingesetzt:

<a href="unterseite1.html" title="Linkbeschreibung" 
target="_blank">Unterseite1</a>

Formulare

Formulare in HTML sind der Grundbaustein für die Kommunikation zwischen der Webseite und dem Betrachter. Im Folgenden möchte ich zeigen, wie man Formulare auf einer HTML-Seite erstellt und die darin enthaltenen Daten auswertet.

Ein Formular wird in HTML mit dem <form>-Tag eingeleitet und mit </form> abgeschlossen. Für verschiedene Elemente in einem Formular stehen auch verschiedene HTML-Tags zur Verfügung. Das wohl wichtigste Formular-Element ist das Texteingabefeld. Dieses wird mit dem HTML-Code

<input type="text">

notiert. Beispiel:

<form>
 <input type="text">
</form>

Dieses Eingabefeld kann mit dem HTML-Attribut "size" zusätzlich in der Breite verändert werden. Beispielsweise führt der HTML-Code

<input type="text" size="40">

zu einer Texteingabe, die 30 Zeichen breit ist. Ein weiteres wichtiges Formular-Element ist ein Eingabefeld, in dem der eingegebene Text nicht sichtbar ist oder durch Sternchen oder Ähnliches unkenntlich gemacht wird, um beispielsweise Passworteingaben zu ermöglichen. Dies wird mit dem HTML-Code

<input type="password">

erreicht. Beispiel:

<form>
 Benutzername: <input type="text" size="30"><br>
 Passwort: <input type="password" size="30"><br>
</form>

Um mehrzeilige Texteingaben zu erreichen, gibt es das <textarea>-Tag. Mit den Attributen "rows" und "cols" kann die Größe dieses Eingabefeldes in Zeichen bestimmt werden. Beispiel:

<form>
 Name:<br><input type="text" size="30"><br>
 Nachricht:<br><textarea rows="5" cols="30"></textarea>
</form>

Wichtig ist, dass bei einer Textbox immer ein abschließendes </textarea>-Tag stehen muss. Vor diesem kann ein Standardtext für die Texteingabe definiert werden.