Schülerinformatik - HTML-Grundlagen


Überblick HTML

Im Internet wird eine sehr große Anzahl von Web-Seiten bereit gestellt. Jede Web-Seite wird über ein spezielles Dokument beschrieben. Damit eine Web-Seite möglichst gleich aussieht, kommt eine (formale) Dokumentbeschreibungssprache, die HTML (Hypertext Markup Language), zum Einsatz.

Mittels HTML können Strukturelemente von Dokumenten wie z. B. Überschriften, Absätze und Tabellen durch spezielle HTML-Elemente definiert werden. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Ein Tag (dt. Auszeichner) enthält einen Namen, der in spitzen Klammern (< tagName >) geschrieben wird. Um beispielsweise einen Absatz in HTML festzulegen, verwendet man das Tag "p". Zwischen dem öffnenden und dem schließenden Tag (dem Gültigkeitsbereich für das Tag) steht dann der Inhalt des Absatzes: <p> hier steht der Text <⁄p> .

Ein Web-Browser hat die Aufgabe, das HTML-Dokument gemäß der definierten Struktur für den Menschen lesbar darzustellen. Bekannte Browser sind z. B. Mozilla Firefox, Internet Explorer und Google Chrome.


Aufbau / Definition eines HTML-Dokuments

Es gibt verschiedene Möglichkeiten wie einzelne HTML-Seiten strukturiert werden können. Nachfolgend ist eine einfache Möglichkeit dargestellt. (Fast) jede HTML-Seite verwendet die Elemente: <html>, <head>, <title> und <body>. Diese Elemente müssen in einer bestimmten Reihenfolge angeordnet werden. Zunächst wird mit dem öffnenden html-Tag angezeigt, dass es sich um ein HTML-Dokument handelt. Danach kommt der Kopfteil (<head>) und der Fußteil (<body>). Im Kopfteil kann beispielsweise der Titel (<title>) der Web-Seite festgelegt werden. Dieser erscheint als Text im Tab bei der Ansicht im HTML-Browser. Nachfolgend ist ein erstes HTML-Dokument dargestellt.

<html>
<head>
<title>Der Titel</title>
</head>
<body>
Hallo, du da!
</body>
</html>


Es gibt verschiedene Möglichkeiten ein HTML-Dokument zu erstellen. Man kann spezielle HTML-Editoren oder einfach einen Texteditor verwenden. Bei einem Windowsrechner kann man beispielsweise den Editor "Notepad" verwenden. Nach Start des Editors gibt man seinen HTML-Text ein. Anschließend kann der HTML-Text in eine Datei mit der Endung ".html" gespeichert werden. (Hinweis: beim Editor "Notepad" muss als Dateityp "Alle Dateiten (*.*)" ausgewählt werden, damit nicht automatisch die Dateiendung "txt" angefügt wird.)

Die nachfolgende Abbildung zeigt die Verwendung von Notepad für die Beschreibung einer HTML-Seite.

notepad

Die HTML-Seite sollte so im Web-Browser dargestellt werden.

notepad

Aufgabe 1: Rufe einen Text-Editor auf und gebe das oben dargestellte HTML-Dokument ein. Speichere die Datei unter dem Namen index.html. Öffne anschließend über einen Datei-Explorer die Datei und zeige diese im Web-Browser an.

Aber HTML kann noch viel mehr! Wenn du keine Schriftgröße angibst, erscheint die Schrift automatisch in der Größe, die im Browser eingestellt ist. Wenn du die Schriftgröße verändern willst, z. B. für Überschriften, dann kannst du z. B. das HTML-Element <h1> verwenden. Wenn du wieder die Standardschriftgröße verwenden möchtest, schließt du die Überschrift mit der Angabe <⁄h1> ab. Der h1-Tag ändert nicht nur die Schriftgröße sondern macht auch gleich einen Absatz und fügt damit einen Zeilenabstand automatisch ein. Anstelle von <h1> kannst du übrigens auch <h2>, <h3>, .., <h6> verwenden. Damit kamm man unterschiedlich große Überschriften definieren.

Man erkennt beim Schreiben einer HTML-Seite, dass ein HTML-Element in der Regel aus einem öffnenden HTML-Tag und einem schließenden HTML-Tag besteht. Dazwischen steht der Tag-Inhalt. Weitere Informationen zu der Definition eines HTML-Tags bzw. eines HTML-Elements findest du hier.

Wenn man längere HTML-Texte schreibt, kann es leicht passieren, dass man mehrere Leerzeichen hintereinander eingibt. Allerdings erscheinen diese nicht im Web-Browser. Sie werden "überlesen". Sofern man jedoch absichtlich mehrere Leerzeichen im Text darstellen möchte, dann muss man dies über ein spezielles Zeichen definieren. Ein erzwungenes Leerzeichen wird über &nbsp; im HTML-Text kodiert. In einem HTML-Text sollten auch alle deutsche Umlaute sowie Sonderzeichen über spezielle Codes festgelegt werden. Eine Liste der wichtigsten Zeichen und deren Codierung findest du hier: HTML-Sonderzeichen.

Im folgenden wollen wir weitere HTML-Elemente kennen lernen. Ein wichtiges Element ist beispielsweise <break>. Mit diesem kann ein Zeilenumbruch definiert werden. Bitte beachte, dass das break-Element eines der HTML-Elemente ist, die kein schließendes Tag benötigen. Abschnitte können mit dem HTML-Element <p> festgelegt werden. Schließt du einen Text mit <b> und </b> ein, dann wird dieser fett ausgegeben. Ein Text kann kursiv dargestellt werden, wenn du das HTML-Tag <i> verwendest.
Nachfolgend siehst du die Verwendung der verschiedenen Tags.

<html>
<head>
<title>Tante Trude Trippelstein<⁄title>
<⁄head>
<body>
<h2>Tante Trude Trippelstein <⁄h2>
<h3>Gedicht von Lea Smulders<⁄h3>
<p>
Tante <i>Trude Trippelstein<⁄i>
<br>h&auml;lt nicht viel vom <b>Sonnenschein<⁄b>.
<⁄p>
<br>...
<⁄body>
<⁄html>

Im Browser wird das HTML-Dokument wie folgt dargestellt.

notepad

Aufgabe 2: Recheriere im Internet wie in HTML ein Text zentriert ausgegeben werden kann. Gebe anschließend das obige Gedicht vollständig ein und stelle die Verse des Gedichts zentriert dar.
(Hinweis: den vollen Text des Gedichtes findest du bspw. hier: Gedicht Tante Trude Trippelstein).


HTML-Links / Verweise

Verweise sind ein entscheidender Bestandteil jeder Web-Seite. Mit deren Hilfe kann man auf andere Web-Seiten oder Quellen verweisen (Hypertext-Idee). Für Verweise in HTML gibt es das a-Element (engl. anchor, dt. Anker). Ein wichtiges Attribut beim a-Element ist das href-Attribut (engl. hyper reference, dt. Hyper(text)-Referenz). Als Wert des href-Attributs wird das gewünschte Verweisziel (die URL) angegeben. Vor dem schließenden Tag kann ein aussagekräftiger Verweistext platziert werden. Links können sowohl auf eigene HTML-Seiten oder aber auch auf externe Web-Seiten verweisen.

Beispiele
<a href="zweitewebseite.html">Verweis zu einer anderen Seite des HTML-Projekts<⁄a>
<a href="http:⁄⁄www.tagesschau.de⁄">Externer Link zu ARD Tagesschau<⁄a>

Per Voreinstellung werden alle Verweise im aktuellen Fenster geöffnet. Mit dem Attribut target im einleitenden <a>-Tag kann ein Zielfenster für den Verweis festgelegt werden. Mit der Angabe target="_blank" wird die referenzierte Web-Seite in einem neuen Fenster geöffnet. Bei der Angabe _self wird das HTML-Dokument im aktuellen Fenster angezeigt (Default-Einstellung).

Weitere Informationen zu Verweise findest du beispielsweise in der Lektion 7 des HTML-Kurses unter http://www.pixelkids.de/pau/htmlkurs/l7.html.

Aufgabe 3: Füge in deiner HTML-Datei für das Gedicht eine Quellenangabe als externer Verweis hinzu. Beim Klick auf die Quellenangabe soll diese in einem eigenen Fenster angezeigt werden.

Aber wir können auch Verweise innerhalb eines HTML-Dokuments verwenden. Insbesondere, wenn die HTML-Seite nicht auf einer Seite dargestellt werden kann, kann man Anker verwenden und auf Knopfdruck den Ausschnitt für die Anzeige verändern. Interne Verweise werden ebenfalls über Anker realisiert. Mit Hilfe des name-Attributs beim öffnenden a-Tag kann ein (eindeutiger) Ankername im HTML-Dokument definiert werden. Mit diesem Ankernamen wird das Sprungziel festgelegt. Über ein weiteres a-Tag kann dann der Verweis zu diesem Sprungziel angegeben werden. Dies erfolgt wie beim externen Verweis über das href-Attribut. Allerdings wird das Zeichen # sowie der Ankername (und nicht eine URL) angegeben. Die Verwendung von internen Verweisen wird nachfolgend dargestellt.

...
<body>
<h2>Tante Trude Trippelstein <⁄h2>
<h3>Gedicht von Lea Smulders<⁄h3>
<br><a href="#vers1">Vers 1<⁄a> &nbsp; &nbsp; <a href="#vers2">Vers 2<⁄a>
<p>
<a name="vers1">
Tante <i>Trude Trippelstein<⁄i>
<br>h&auml;lt nicht viel vom <b>Sonnenschein<⁄b>
<br>...
<br>
<br>
<br>
<⁄p>
<p>
<a name="vers2">
Ist der <i>Sommer <⁄i> schön und warm,
<br>...
<br>
<br>
<br>
<⁄p>
<⁄body>
<⁄html>

Weitere Informationen zu Anker findest du in der Lektion 7 bei http://www.pixelkids.de/pau/htmlkurs/l7.html.


Einbindung von Bildern (Grafiken)

Um Grafiken in eine HTML-Datei einzubinden, referenziert man die Grafikdatei an gewünschter Stelle im HTML-Quelltext. Geeignete Dateiformate für Web-gerechte Grafiken sind vor allem GIF, JPEG und PNG.

Für Grafikreferenzen gibt es in HTML das Standalone-Tag <img> (engl. image, dt. Bild). Mit dem Attribut src (engl. source, dt. Quelle) bestimmt man die gewünschte Grafikdatei. Am besten befindet sich die Grafikdatei im gleichen Verzeichnis wie das HTML-Dokument oder in einem Unterverzeichnis (z. B. mit dem Namen bilder).

Beispiel:
<img src="./bilder/tanzmaus.png" alt="Tanzmaus">

Mit Hilfe der optionalen Attribute width und height kann die Bildgröße (in Pixeln) festgelegt werden. Mit dem name-Attribut kann ein Namen für das Bild angegeben werden. Falls das Bild nicht angezeigt werden kann (z. B. weil der Speicherort falsch angegeben wurde oder das Bild nicht mehr existiert), kann mit dem alt-Attribut ein Text, der statt dessen angezeigt wird, festgelegt werden.

Beispiel:
<img src="./bilder/tanzmaus.png" width="100" height="150" alt="Tanzmaus">

Weitere Informationen zum Einfügen von Bildern findest du in Lektion 8 bei http://www.pixelkids.de/pau/htmlkurs/l8.html.

Aufgabe 4:
Suche nun passende Bilder für dein HTML-Projekt und füge diese in deiner HTML-Datei ein. Alternativ kannst Du auch mit einem Zeichenprogramm (wie z. B. paint) ein Bild malen.

Aufgabe 5:
Es gibt noch viele weitere Möglichkeiten, die uns HTML bietet. Informiere dich im Internet beispielsweise über die Verwendung von Farben und Tabellen (siehe bspw. Pixelkids - (HTML) oder SELFHTML) und erweitere dein HTML-Projekt entsprechend!



Weitere nützliche Links