Sie sind auf Seite 1von 10

HTML-Kurzeinführung

Stefan Schmuckli

Inhaltsverzeichnis

Aufbau der HTML-Seite ................................................................................................... 2


Der Kopfbereich (HEAD).................................................................................................. 3
Der Hauptbereich (BODY) ............................................................................................... 4
Textformatierung ............................................................................................................. 4
Überschriften ................................................................................................................... 6
Grafiken .......................................................................................................................... 7
Verweise (Links) .............................................................................................................. 8
Kommentare und Sonderzeichen ................................................................................... 10

1
Aufbau der HTML-Seite
Das HTML-Dokument beinhaltet ähnlich eines in WORD abgespeicherten Dokumentes
neben dem Text verschiedene Informationen, die die Bildschirm und Druckdarstellung
beeinflussen.
Der Unterschied liegt jedoch darin, dass eine HTML-Seitenerstellung mit jedem beliebigen
Editor vollzogen werden kann. Er muss nur unformatiert speichern können, um fremde
Steuerzeichen aus dem HTML-Dokument fernzuhalten.

Dazu zählen vor allem die Zeichen <, >, & und "
Mit diesen Zeichen werden die sogenannten TAGS (Marken) und Sonderzeichen gebildet.

Jeder Tag wird durch zwei spitze Klammern eingeschlossen und löst meist eine Steuerung
der Darstellungsform des Dokumentes aus. (Bsp. <BOLD>)
Das Aufheben dieser Steuerung/Formatierung geschieht durch den gleichen Text
innerhalb der spitzen Klammern mit vorangestelltem Schrägstrich. (Bsp. </BOLD>)

Auch spezielle Zeichen, wie die landesspezifischen Zeichen, werden durch Zeichenfolgen
dargestellt, da beim HTML vom ASCII-Grundzeichensatz ausgegangen wird.

<html>

Kopfbereich
<head>
<title>VCR</title>
</head>

<body>
Herzlich willkommen!<p>
Bei uns....
Hauptbereich
</body>

</html>

Das HTML-Dokument wird in zwei Bereiche untergliedert.

Dies ist zum einen der "Header" (Kopfbereich), der durch die Zeichen <HEAD> und
</HEAD> deklariert wird und eine Betitelung aufnimmt. In ihm sind nur bestimmte
Steuerelemente einzubringen.

Der "BODY" (Haupttextbereich). Dieser durch <BODY> und </BODY> geklammerte Bereich
enthält den Haupt-Dokumententext.

Alle Tags können auch in Kleinbuchstaben geschrieben werden, z.B. <body> und
</body>.

2
Der Kopfbereich (HEAD)
Der Kopfbereich wird durch die beiden Tags <HEAD> und </HEAD> gekennzeichnet. In
diesen Bereich werden die Informationen über die gesamte Seite eingebracht.
Dazu zählen der Dokumententitel, Autor, Herausgeber, Copyright etc. Diese Angaben
werden in sogenannte Metatags geschrieben.

Der Kopfbereich kann also folgendermassen aussehen

<HTML>
<HEAD>
<Title>Crashkurs HTML</Title>
<META NAME="Title" CONTENT="Crashkurs HTML">
<META NAME="Author" CONTENT="Hans Muster">
<META NAME="Publisher" CONTENT="Musterverein">
<META NAME="Copyright" CONTENT="2007 by Musterverein">
<META NAME="Keywords" CONTENT="Schulung; Kurs; HTML; Crashkurs; Head">
<META NAME="Description" CONTENT="Crashkurs: Einführung in HTML">
<META NAME="Abstract" CONTENT="Grundbegriffe im Umgang mit HTML">
<META NAME="page-topic" CONTENT="Schulung">
<META NAME="page-topic" CONTENT="Anleitung">
<META NAME="audience" CONTENT="Zielgruppe ">
<META NAME="Robots" CONTENT="INDEX,FOLLOW">
<META NAME="Language" CONTENT="Deutsch">
</HEAD>

Dokumententitel
Der Dokumententitel wird durch die Tags <TITLE> und </TITLE> eingegrenzt. Zwischen
diesen Tags sollte der Titel des Dokumentes mit max. 64 Zeichen stehen, da dieser von
den Browsern als Fenstertitel genutzt wird.

Metatags
Die Metatags beschreiben die Seite näher. Die Metatag-Angaben werden von den
Suchmaschinen herausgelesen und dienen dann ihrerseits als "Hits".

Im Kopfbereich werden auch Verknüpfungen definiert. Im folgenden Beispiel ist der


Verweis auf die globale Formatvorlage, resp. auf das sogenannte Stylesheet, z.B.

<link rel="stylesheet" href="../../stylesheet/vcr.css" type="text/css">

Wichtig:
Mit ../ wird das Verzeichnis über dem aktuellen Verzeichnis referenziert, egal wie es
heißt. Mit ../../ dasjenige Verzeichnis über dem Verzeichnis über dem aktuellen
Verzeichnis usw. Von jedem der so adressierten Verzeichnisse kann wieder auf deren
Unterverzeichnisse zugegriffen werden, wie im obigen Beispiel gezeigt wird.
Dies heisst also: gehe zwei Verzeichnisse nach oben, von dort aus ins Unterverzeichnis
stylesheet und dort findest du die Datei vcr.css.

Dies gilt auch für Grafiken und Links!

3
Der Hauptbereich (BODY)
Der BODY ist, wie der Name schon sagt, der Hauptkörperbereich einer Seite und trägt
meist ca. 60-70 Prozent des Gesamtvolumens der Seite in sich.
Er wird durch die Tags <BODY> und </BODY> eingegrenzt.

Textformatierung
Die Textformatierung innerhalb eines HTML-Dokumentes muss komplett vom Autor des
Dokumentes gesteuert werden. Selbst einfache Formatierungen wie der Zeilenumbruch,
der bei einem Editor durch die Return-Taste ausgelöst wird, sind bei einem HTML-
Dokument durch Sonderzeichen einzubringen.
Dadurch erklärt sich auch, dass der Text des Dokumentes in keiner Weise der Seite
ähneln muss, die er erzeugt.

Zeilenumbruch
Der Zeilenumbruch ist durch das Tag <BR> in den Text einzubringen. An seiner Stelle
wird unabhängig von der Zeilenlänge und der Breite der Seite ein Zeilenumbruch
durchgeführt.

Beispiel:

Ich bin Zeile 1<BR>Ich bin Zeile 2

erzeugt die Ausgabe:

Ich bin Zeile 1


Ich bin Zeile 2

Absatz
Ein Absatz wird durch das Zeichen <P> erzwungen. Das <P> fügt neben dem
Zeilenumbruch noch eine Leerzeile ein.

Beispiel:

Peter Müller<P>Hochstrasse 5<P>4410 Liestal

erzeugt die Ausgabe:

Peter Müller

Hochstr.5

4410 Liestal

4
Zentrierung
Durch <CENTER> kann eine Textzentrierung ausgelöst und durch </CENTER> wieder
aufgehoben werden.

Beispiel:

<CENTER>Textausgabe</CENTER>

erzeugt die Ausgabe:

Textausgabe

Durch diese Befehle lässt sich ein Text zwar in Absätze geteilt aufbauen, er hat aber noch
keine Aussagekraft, da einzelne Textpassagen noch nicht hervorgehoben sind. Dies wird
auch über Tags gesteuert, die in den folgenden beiden Kapiteln aufgezeigt werden.
Sollte ihr Browser (Ihre Software für das Internet) die Formatierungen nicht in korrekter
Form darstellen, so liegt dies nicht an dem Dokument. Vielmehr kann nicht jeder Browser
alle Formatierungen darstellen. Es wird auch oft eine andere Formatierung zur Darstellung
benutzt, beispielweise wird oft der Fettdruck durch ein Unterstreichen des Textes
dargestellt.

Direkte Formatierung
Die direkten Formatierungen unterscheiden sich von den Absatzformatierungen -ähnlich
wie unter Windows-Textverarbeitungen- von den Absatzformatierungen dadurch, dass sie
zumeist Browser-unabhängig sind. Die meisten Browser können sie darstellen.
Sie erklären sich durch ihre Form selbser. Deshalb hier nur eine Auflistung der möglichen
direkten Formatierungen.

<B>...</B>
Eine durch <B> gestartete fette Schrift wird durch </B> beendet.

<I>...</I>
Eine durch <I> gestartete kursive (Italic) Schrift wird durch </I> beendet.

<U>...</U>
Text unterstrichen.

<S>...</S>
Text durchgestrichen.

<SUB>...</SUB>
Text heruntergestellt (subscript)

<SUP>...</SUP>
Text hochgestellt (superscript)

5
Überschriften
Headings (Allgemein)
Die H1-H6 Formatierungen werden als "Headings" bezeichnet und sind vergleichbar mit
den Formatvorlagen unter Word. Sie enthalten die Schriftformatierung, die
Absatzformatierung (Zeilenumbruch und Abstand vor und nach dem Heading).
Es ist üblich nur Wechsel um eine Ebene zu vollziehen, nicht einen Heading um 2 Stufen
tiefer einzubringen. Inkorrekt wäre also eine H3-Formatierung hinter einer H1
Formatierung. Die Formatierung erfolgt durch <Hx> vor und </Hx> nach dem zu
formatierenden Text, wobei das x durch eine Zahl von 1 bis 6 zu ersetzen ist. (Beispiel:
<H1></H1>)
Darstellungen erfolgen weiter unten im Text.

Beschreibungen der Headings


Es ist auch hier zu beachten, dass nicht jeder Browser die vorgegebenen Formatierungen
in gleicher Weise darstellt.

<H1>
Fette sehr grosse Schrift, ein oder zwei Leerzeilen vor dem Text und danach. Bei
Ausdruck der Seite startet eine neue Seite.

<H2>
Fette grosse Schrift, ein oder zwei Leerzeilen vor und nach dem Heading.

<H3>
Grosse Schrift, ein oder zwei Leerzeilen vor und nach dem Heading.

<H4>
Fette Schrift,kleiner als H3, eine Leerzeile vor und nach dem Heading.

<H5>
Fette Schrift,kleiner als H4, eine Leerzeile vor und nach dem Heading.

<H6>
Fette Schrift,kleiner als H5, eine Leerzeile vor und nach dem Heading.

6
Grafiken
Grafiken sind nicht direkt in HTML-Dokumente eingebunden. Dazu dienen Platzhalter im
Dokument, an deren Stelle der Browser diese Bilder darstellt, die er mit der Seite
hinzulädt.
Dieser Platzhalter ist das Tag <IMG>, dem jedoch noch zwei Informationen hinzuzufügen
sind. Dies sind die Angaben des Grafiknamens und einer Textalternative für die Grafik,
falls diese nicht dargestellt werden kann.
Die Alternative wird durch das Attribut ALT angegeben, der Grafikname durch das Attribut
SRC (Source). Beide Attribute werden in das Tag der Grafik mit eingebunden und in dieser
Form in das Dokument eingebracht:

<IMG ALT=Ersatzname SRC=Grafikdatei>

Mit diesem Befehl wird dem Browser mitgeteilt, woher er die Grafik zu laden hat. Dies ist
im Normalfall das Quellverzeichnis des HTML-Dokumentes. Wenn nun aber das Dokument
in ein anderes Verzeichnis oder auf einen anderen Server verlagert wird, sei es durch
Verlagern oder Kopieren, findet der Browser die Grafik nicht mehr.
Wichtig ist das Format der Grafik, da es darüber entscheidet, ob und wie die Grafik
dargestellt wird und wie lange es dauert, bis die Grafik am Bildschirm erscheint.
Als Standardformate haben sich GIF und JPEG durchgesetzt. Beide Formate übertragen
die Bilddaten in komprimierter Form, was die downloadzeiten erheblich verkürzt.

Beispiel:

<img alt="VCR Logo" src="images/vcr.jpg">

7
Verweise (Links)
Ankersprünge innerhalb des Dokumentes

Um innerhalb eines Dokumentes springen zu können, müssen als erstes die Sprungziele
definiert werden. Dazu wird das Element anchor (Anker) eingebracht.

Die Ankerdefinition erfolgt in der Syntax:

<A NAME=“MeinSprungziel“>Ankertext</A>

Ein Sprung zum Anker wird dann als sogenannter interner LINK eingebunden. Diese Links
dienen zur Verknüpfung von Elementen mit Sprungzielen oder Objekten (Seiten). Ein
interner LINK wird durch das Zeichen # innerhalb der LINK-Definition deklariert. Es wird
bei der Definition des Attributes HREF vor den Ankernamen gesetzt.

Die Syntax sieht wie folgt aus:

<A HREF=“MeinSprungziel“>Text im Dokument </A>

Dies erzeugt einen Text im Dokument der beim Anklicken einen Sprung innerhalb des
Dokumentes auf die Sprungadresse (Anker) erzeugt.

Sprünge auf andere Dokumente und Rechner


Die Seiten, bzw. Knotenpunkte, des Netzes tragen, wie im Strassenverkehr üblich, eigene
Namen und Wegweiser auf Folgeseiten.
Diese eigenen Namen setzten sich aus mehreren Teilen zusammen, um eine klare
Ortsangabe zu definieren. Wer kann schon etwas mit dem Ortsnamen Basel anfangen,
wenn er nicht weiss ob es am Rhein oder an der Aare liegt.
Darum setzen sich diese Zielanker, oder auch URLs ("Uniform Resource Locators"), aus
mehreren Teilen zusammen.

Syntax der URLs:

Übertragungsprotokoll:// Server:Port/Pfad/Dokument

Der erste Teil, zu erkennen an dem : // dahinter, gibt das Übertragungsprotokoll an. Diese
Protokolle sind standardisierte Formate um eine Kommunikation von unterschiedlichen
System zu gestatten. So ist es möglich die Daten von einem anderen Rechner problemlos
zu lesen und zu verstehen.
Dahinter folgt durch die Angabe der Rechneradresse (Server/Port) und des Dokumentes
(Pfad/Dokument) eine klare Bestimmung des Dokumentes bzw. der Datei.
Um Sprünge zwischen Hypertextseiten zu definieren verwenden wir die fast gleiche Form
der Ankerdefinition, wie bei Sprüngen innerhalb des Dokumentes, beim Attribut HREF wird
kein # vor den Zielankernamen geschrieben.

8
Die Syntax sieht deshalb wie folgt aus:

<A HREF=Name des Ankers>Text im Dokument </A>

Definition:

<A HREF=“http://www.vcreinach.ch“> Velo Club Reinach </A>

Ziel des Links

Ein ausgewählter Link kann im selben Browserfenster dargestellt werden, oder auch in
einem neuen Fenster / neuen Registerkarte.
Falls die Seite Frames verwendet, muss der Zielframe angegeben werden.

Link im selben Fenster oder im gleichen Frame öffnen:

<A HREF=“ pages/foto_uebersicht.php?ID=3&Jahr=2007“>Fotos Superdolomiti</A>

Link in neuem Fenster / neuer Registerkarte öffnen:

<A HREF=“http://www.petesbikeshop.ch“ target=“_blank“>Pete’s Bike-Shop</A>

Framebezeichnungen

banner

llinks rechts

Hier befindet sich die Hauptfenster für Seiteninhalt


Hauptnavigation mit
den Links

Auswahl Anzeige

Link in anderem Frame öffnen:


Damit der im Frame mit der Bezeichnung „links“ angewählte Link im Frame „rechts“
geöffnet wird muss beim Ziel die Bezeichnung angegeben werden:

<A HREF=“pages/berichte.html“ target=“rechts“> Velo Club Reinach </A>

9
Kommentare und Sonderzeichen
Sonderzeichen und Kommentare treten sehr häufig in einem HTML-Dokument auf. Es gibt
zwar bereits Programme, die Umlaute oder ähnliche Zeichen ohne Sonderzeichen
darstellen können. Jedoch ist dies mit Vorsicht zu geniessen, vor allem unter dem Aspekt
der Plattformabhängigkeit. Die Darstellung der Seite ist immer abhängig vom System und
Programm. Durch die Sonderzeichen ist es möglich sprach- und systemunabhängig
Umlaute und Ähnliches in den Text einzubringen.

Kommentare
Kommentare, die nicht auf der Seite erscheinen sollen, werden zwischen die Zeichenfolge
<!-- und --> gesetzt. Der Autor einer Seite sollte damit nicht zu sparsam umgehen, der
Text wird auch von anderen gelesen, aber er sollte ihn auch nicht damit überhäufen.
Gründe dafür liegen in der Übersichtlichkeit und vor allem in der Dateigrösse.

Beispieltext:
<!-- Ich bin ein Kommentar und würde im Normalfall nicht auf dem
HTML-Dokument zu sehen sein. -->

Sonderzeichen
Wie schon in einem vorigen Kapitel erwähnt sind die vier Zeichen "kleiner als" <, "grösser
als" >, & und "Gänsefuss" " Steuerzeichen im HTML-Dokument.
Sie können jedoch durch eine spezielle Zeichenfolge im Text erzeugt werden. Neben
diesen Steuerzeichen gibt es noch viele weitere Zeichen, die als spezielle Zeichenfolge in
den Text müssen.
Diese Zeichenfolgen können in den meisten HTML-Programmen menuegesteuert in den
Text eingebracht werden, oder sind bequem durch SUCHE/ERSETZE Routinen zu
plazieren. Nach einiger Zeit hat der Anwender die gängigen Folgen im Kopf, da sie in
einer klaren Struktur definiert wurden.
Die Zeichenfolgen für das Zeichen liegen grundsätzlich zwischen den beiden Zeichen &
und ; (Semikolon).

Einige Anwendungsbeispiele:

Ä &Auml;
ä &auml;
Ö &Ouml;
ö &ouml;
Ü &Uuml;
ü &uuml;
© &copy;
à &agrave;
á &aacute;
â &acric;
è &egrave;
é &eacute;
ç &ccedil;

10