Kapitel 4 ? HTML

Kapitel 4 – HTML 

Hypertext Markup Language 

1


1. World Wide Web (WWW) 

2. HTML-Dokumente 

3. HTML-Tags 

4. Sonderzeichen 

5. Farben 

6. Hyperlinks 

7. Bilder 

8. Dynamische HTML-Dokumente 

2


World Wide Web (WWW): 

Das WWW ist ein über das Internet abrufbares und einfach zu bedienendes 

Informationssystem. Die Daten liegen verstreut auf unzähligen 

Rechnern in der Welt, die untereinander über das Internet vernetzt sind. 

Es wurde 1989 am CERN in Genf entwickelt und 1991 zur allgemeinen 

Benutzung freigegeben. Das WWW ist nicht mit dem Internet selbst 

gleichzusetzen. Es nutzt das Internet wie andere Internet-Dienste auch, 

zum Beispiel E-Mail oder FTP. 

Das Abrufen der Information erfolgt nach dem Client-Server-Konzept: 

Der Webserver hält Information in Form von HTML-Dokumenten bereit, 

bearbeitet die Anfragen des Webclients und schickt ihm die Information 

in Form von HTLM-Dokumenten zu. 

Der Webclient ist der Webbrowser (ein Softwareprogramm wie Firefox, 

Opera, Mozilla, Internet Explorer). Er sendet über das Internet Anforderungen 

an den Webserver, nimmt dessen Antwort entgegen und stellt 

die empfangenen HTML-Anweisungen grafisch am lokalen Rechner dar. 

3


Client-Server Kommunikation 

4


Das WWW basiert auf drei Grundkomponenten: 

1. HTML - Die Layoutsprache für vernetzte WWW-Dokumente: HTML wurde 

speziell für das WWW entwickelt. Das besondere an HTML sind die sog. 

„Hyperlinks“, also Verweise zu anderen Dokumenten, die sich auf beliebigen 

Rechnern befinden und die man sich mit einem Mausklick auf einen solchen 

Link auf dem eigenen Rechner anzeigen lassen kann. 

2. HTTP - Das Kommunikationsprotokoll: Das Hypertext Transfer Protocol 

definiert, wie Webserver und Webbrowser über das Netzwerk miteinander 

kommunizieren. Es basiert auf dem Transportprotokoll TCP/IP, welches den 

Datenaustausch im Internet regelt. 

HTTPS - HTTP Secure ist ein Weiterentwicklung von HTTP, bei dem der 

Datentransfer verschlüsselt stattfindet, um z. B. Passwörter zu übertragen. 

3. URL - Die einheitliche Adressierung im Internet: Eine URL (Uniform Resource 

Locator) stellt die Adresse einer beliebigen Ressource im Internet dar. Sie setzt 

sich aus einem protokollspezifischen und einem allgemeinen Teil zusammen: 

http://www.hm.edu/sekundaer_navigation/alumni/alumnibersicht2.de.html 

protokoll://www-server.domain.topleveldomain/homepage-verzeichnis/datei 

5






5. Farben 

6. Hyperlinks 

7. Bilder 


6

HTML-Dokumente: 


Ein HTML-Dokument ist eine einfache Textdatei. 

HTML-Befehle („HTML-Tags“) kennzeichnen bestimmte Stellen im Text und 

sorgen für die Gliederung bzw. Formatierung des Dokuments. HTML-Tags 

bestehen fast immer aus einem Start-Tag und einem End-Tag: 

…..Text….. 

Ausnahme z. B.: kennzeichnet einen Zeilenumbruch (ohne ) 

Bei Tags wird nicht zwischen Groß- und Kleinschreibung unterschieden: 

 

Dateien, die HTML-Anweisungen enthalten, können mit einem normalen 

Text-Editor erstellt werden. 

Der Dateiname muss die Endung .htm oder .html enthalten, damit die 

HTML-Datei vom Browser als HTML-Dokument erkannt und grafisch 

dargestellt wird. 

7


Struktur des HTML-Dokuments: 

Einige Tags sind in jedem Dokument von Notwendigkeit, da sie die 

entsprechenden Abschnitte (Kopf und Inhalt) kennzeichnen. 

Das Tag …. umrahmt das ganze HTML-Dokument. 

Das Tag … markiert den Dokumentenkopf. Dieser enthält 

Anweisungen, die für das gesamte Dokument gelten, z.B. den Dokumententitel, 

der mit … angegeben wird und in der obersten Leiste des 

Browserfensters erscheint. 

Das Tag … umrahmt den eigentlichen Inhalt des Dokuments. 

Darstellung von „normalem Text“ im Webbrowser: 

HTML-Anzeigen haben keine feste Zeilenbreite, d.h. der Browser bestimmt 

selbst, wie lang eine Zeile sein darf und bricht den Text um. Dabei wird der 

Text an die Breite des Browserfensters angepasst. 

In der HTML-Datei angegebene Leerzeilen, Leerzeichen und Zeilenumbrüche, 

die nicht extra markiert sind, werden vom Browser ignoriert; sie 

werden jeweils vom Browser durch ein Leerzeichen ersetzt. 

8


Jede HTML-Datei besitzt folgenden Aufbau: 

 

 

………. 

……… 

 

 

………. 

 

 

html-Tag: Leitet das HTML-Dokument ein und 

schließt es wieder ab. 

head-Tag: Enthält allgemeine Angaben zur 

HTML-Datei, z.B. Adressbasis (Arbeitsverzeichnis), 

Autor, Stylesheets, JavaScript etc. 

title-Tag: Inhalt wird oberster Leiste des 

Browsers angezeigt, wird für Lesezeichen 

verwendet und von Suchmaschinen registriert. 

body-Tag: Textkörper - enthält die Information, 

die im Browserfenster dargestellt wird. 

Beachte: 

Verschachtelung von Tags – title ist in head enthalten und head in html. 

9


Ein einfaches HTML-Dokument: 

10






5. Farben 

6. Hyperlinks 

7. Bilder 


11


Häufig verwendete HTML-Tags: 

Überschrift – Heading: ....... x=1...6 

Wirkung: Hervorhebung, andere Größe 

Tags können Attribute enthalten, welche die Standardeigenschaften der Tags 

ändern. Die Attribute stehen im Starttag und bestehen aus einem Namen und 

einem Wert. Der Wert eines Attributs steht zwischen Anführungszeichen: 

auch möglich: right, left 

Absatz – Paragraph: ... 

Wirkung: Neuen Absatz beginnen, Zeilenumbruch und etwas Abstand zum 

vorherigen Text einfügen. 

Zeilenumbruch – Break: 

Wirkung: Zeilenumbruch, d. h. neue Zeile beginnen – kein Endetag! 

Kommentar: 

Wirkung: Wird nicht dargestellt, dient als Kommentar oder zum Ausblenden. 

12


Schriftgröße, Schriftart: 

Schriftgröße: Es gibt 7 verschiedene Schriftgrößen, wobei 3 die 

Standardgröße ist. Es gibt zwei Möglichkeiten die Schriftgröße mit 

dem Attribut „size“ festzulegen: 

Absolut: ... x= 1...7 

Relativ zur aktuellen Schriftgröße: 

... x= -3 ... +4 

Beispiel: HM 

Schriftarten wie Arial, Helvetica etc. werden mit dem Attribut „face“ definiert. 

 

Arial 

Times New Roman 

Courier 

 

13


HTML-Tags für Texthervorhebungen: 

(jeweils mit Start- und Ende-Tag zu verwenden!) 

DarstellungsorientierteTags: 

fettgedruckt (bold) 

möglichst nicht verwenden (underlined) 

Schrägschrift (italics) 

nicht proportionaler Zeichensatz („Hallo“ statt „Hallo“) 

hochgestellt 

tiefgestellt 

Inhaltsorientierte Tags werden je nach Browser unterschiedlich interpretiert: 

meist als Schrägschrift („emphasized“) 

stärker als „emphasized“, meist fett 

als Programmcode darstellen, nicht proportionalen 

Zeichensatz verwenden 

nachfolgenden Text als Zitat darstellen 

als Abkürzung darstellen („abbreviation“) 

14


Aufzählungen (Listen): 

Einfache Aufzählung (engl. „unordered list“): 

 

 

…… 

……. 

……………… 

: Tag, in das die gesamte Aufzählung 

einzubetten ist. 

: Tag zum Einfügen neuer 

Aufzählungspunkte. 

Nummerierte Aufzählung (engl. „ordered list“): 

 

 

…… 

……. 

……………… 

: Tag, das die nummerierte Aufzählung 

umrahmt. (Mit dem Attribut „start“ kann 

der Beginn der Nummerierung festgelegt 

werden.) 

: Tag zum Einfügen neuer 

Aufzählungspunkte. 

15


16

 

i 

Quadrat 

3. Potenz 

 

 

1 

1 

1 

 

 

2 

4 

8 

 

... 

 


Tabellen: 

Eine HTML-Tabelle ist zeilenweise aufgebaut. Die 

Zellen der ersten Zeile können als Tabellenkopf 

speziell gekennzeichnet werden: 

… - Gesamte Tabelle 

… - Tabellenzeile (table row) 

… - Tabellenkopf-Zellen (table header) 

… - Normale Zellen (table data) 

17

Weitere HTML-Tags: 


„SELFHTML – HTML Dateien selbst erstellen“ von Stefan Münz 

http://de.selfhtml.org 

„MSDN Library“ von Microsoft 

http://msdn.microsoft.com/library/ 

Mit der Suchfunktion nach der Seite „DHTML Objects“ suchen... 

18






5. Farben 

6. Hyperlinks 

7. Bilder 


19

Sonderzeichen: 


Die folgenden Sonderzeichen , ", & haben in einer HTML-Datei eine spezielle 

Bedeutung. Sollen diese Zeichen im Text verwendet werden, müssen sie speziell 

markiert werden: 

& leitet ein Sonderzeichen ein und ; schließt es ab: 

< < 

> > 

& & 

" " 

non breaking space – Leerzeichen 

Länderspezifische Zeichen: 

ä ä Ä Ä 

ö ö Ö Ö 

ü ü Ü Ü 

ß ß € € 

20






5. Farben 

6. Hyperlinks 

7. Bilder 


21

Farben: 

5. Farben 

Farben können in HTML-Dokumenten auf zwei verschiedene Arten angegeben 

werden: 

als Farbname (red, yellow, green usw.) oder 

als 6-stellige Hexadezimalzahl, die den sog. RGB-Wert festlegt. 

RGB-Farbschema: 

Jede Farbe ergibt sich aus einer Mischung der drei Grundfarben Rot, Grün und 

Blau. Zur Codierung eines Farbwertes wird ein 24-Bit Wert verwendet, in dem 

jede dieser drei Grundfarben durch einen 8-Bit Wert repräsentiert wird. Jede 

dieser Grundfarben steuert somit einen Farbanteil zwischen 0 und 100% 

(entspricht den Werten 0 und 255) zur Mischfarbe bei. 

RGB-Wert: #rrggbb - 6 Hexadezimalziffern für 24 Bit 

Je zwei Hexadezimalziffern geben den Beitrag einer Grundfarbe zur Mischfarbe 

im Bereich von 0 bis 255 (entspricht 00 bis ff im Hexadezimalsystem) an. 

22

5. Farben 

Farben werden auf eine von 2 Arten 

angegeben : 

Standardisierte Farbnamen: 

leicht lesbar, aber nur 16 

Farbnamen sind definiert 

RGB-Farbwert hexadezimal: 

zum Beispiel: #CCFFFF 

#0C37F3 

rot grün blau 

23

5. Farben 

Verwendung von Farben: 

Farbeinstellungen, die das ganze Dokument betreffen, werden durch 

entsprechende Attribute im body-Tag definiert. 

Attribute: 

bgcolor Hintergrundfarbe (Background Color) 

text Farbe für den Text 

link Farbe nicht besuchter Links 

vlink Farbe bereits besuchter (angeklickter) Links 

Beispiele: 

blauer Hintergrund 

Text rot 

Text rot, Links blau 

Farbeinstellungen, die nur einen bestimmten Bereich betreffen, werden über 

das color-Attribut des font-Tags definiert: 

Informatik Informatik 

24






5. Farben 

6. Hyperlinks 

7. Bilder 


25

6. Hyperlinks 

Hyperlinks sind Verlinkungen auf Stellen im gleichen Dokument, auf Dateien auf dem 

eigenen Rechner und auf Dateien im Internet. 

Beachte: Die Datei index.html im obigen Bsp. gibt es mehrmals auf www.nasa.gov 

26

Hyperlinks ins Web: 

6. Hyperlinks 

Text 

Hochschule München 

Anker-Tag („anchor“) 

href hypertext reference – legt das Verweisziel fest. 

"URL" – Gibt den Ort an, an dem sich die Datei befindet, 

die nach einem Mausklick auf den Link geladen wird. 

– Definiert das verwendete Übertragungsprotokoll. 

Der von den Anker-Tags eingeschlossene Bereich wird als aktives Element 

in der Regel unterstrichen dargestellt. Dies kann ein normaler Text, eine 

Überschrift, ein Element einer Tabelle oder auch ein Bild sein. 

HM 

Überschrift als Link... 

27

6. Hyperlinks 

URL (Uniform Resource Locator): 

protocol://host.domainname/pfad/dateiname 

protocol: Vorschrift, wie die Datei übertragen wird 

host.domain: Name des Webservers (meist „www“).Name des Netzwerks 

pfad: Pfadname - Verzeichnis, in dem sich die Datei befindet 

dateiname: Dateiname des Dokuments 

URLs zu Dateien auf anderen Rechnern: 

http://www.hm.edu/sekundaer_navigation/impressum/impressum_1.de.html 

http://www.ibh.rwth-aachen.de/ibh/index.html 

URLs zu Dateien auf dem lokalen Rechner (Windows): 

file://localhost/c:/temp/demo.html file:///c:/temp/demo.html 

Beachte: 

protocol://host.domainname Groß-/Kleinschreibung wird ignoriert 

pfad/dateiname Groß-/Kleinschreibung kann relevant sein 

(abhängig vom Betriebssystem, vom Webserver, 

von den Einstellungen des Webservers…) 

28

Unterscheidung: 

Absoluter Link: 

6. Hyperlinks 

In der URL wird der Webserver angegeben und der absolute Pfadname einer 

Datei und optional eine Stelle im Dokument. Fehlt der Dateiname, so wird die 

sog. Homepage geladen (Standardseite, oft mit dem Namen index.html). 

Mondlandung 

Hochschule München 

Relativer Link: 

In der URL wird der Webserver nicht angegeben, d. h. die Datei befindet 

sich auf demselben Webserver wie die Datei, die den Link enthält. 

Die Lage der zu öffnenden Datei wird relativ zum aktuellen Dokument 

angegeben (wie bei relativen Pfadangaben in der DOS-Box). 

6. Hyperlinks 

Relative Verlinkung von mehreren Dokumenten: 

index.html kap info1.html img 

kap1.html kap2.html bild1.jpg bild2.jpg 

Im Hyperlink wird nur angegeben, wie man von einer Ausgangsdatei zur 

Zieldatei kommt. Die allgemeine Form der relative Pfadangabe lautet: 

………… 

Beispiele: 

 

 

 

 

Vorteile der relativen Verlinkung: 

…könnten z. B. in 

der Datei index.html 

verwendet werden 

Großes Dokument in mehrere kleinere zerlegen, die schneller geladen werden. 

Alle Dateien können zusammen verschoben werden, ohne dass die Verlinkung 

geändert werden muss (z. B. vom lokalen Rechner auf Webserver kopieren). 

30

6. Hyperlinks 

31






5. Farben 

6. Hyperlinks 

7. Bilder 


32

Bilder: 

7. Bilder 

Bilder werden durch einen Link auf eine Bilddatei in ein HTML-Dokument 

eingebunden. HTML unterstützt die Bildformate: 

GIF .gif Graphics Interchange Format, 256 Farben, hohe 

Kompressionsrate, Animation möglich. 

JPEG .jpg Joint Photographic Expert Group, bis zu 16,7 Mio. 

.jpeg Farben, geeignet für hochauflösende Grafik, 

komprimiert mit Verlust. 

PNG .png Portable Network Graphic Format (neuer Standard 

des W3C), verlustfreie Kompression, 16.7 Mio. 

Farben, keine Animation. 

Je höher der Kompressionsfaktor, desto schlechter die Bildqualität, 

je geringer der Faktor, desto größer die Datei (lange Ladezeit!). 

Alle Formate sind pixelorientiert (keine Vektorgrafik). 

Einbinden von Bildern: 

Rel. Pfandangabe: 

Bild als Link: 

33






5. Farben 

6. Hyperlinks 

7. Bilder 


34


Dynamische HTML-Dokumente: 

HTML bietet umfassende Möglichkeiten Internetseiten interaktiv zu gestalten. 

Es ist zum Beispiel möglich, kleine Programme oder „Applets“ in die HTML-Seite 

einzubetten: 

JavaScript: 

HTML-Dokument kann JavaScript-Programmteile enthalten. 

Diese können überall im Dokument eingebaut sein, üblicherweise im 

Kopf-Bereich. 

Das Skript wird nicht kompiliert, sondern von einem Interpreter innerhalb des 

Browsers ausgeführt. 

Mit …. wird der JavaScript-Code vom HTML-Code getrennt. 

Es gelten strenge Sicherheitseinschränkungen, da das Skript auf dem 

Rechner des Betrachters (Client) abläuft. 

JavaScript wird oft im Zusammenhang mit „Formularen“ in der HTML-Seite 

eingesetzt. Zum Beispiel zur Eingabeüberprüfung oder für einfache 

Berechnungen. 

35


(JavaScript, Beispiel) 

36


PHP (PHP Hypertext Preprocessor): 

Skriptsprache, die auf dem Server ausgeführt wird. 

Auf dem Webserver muss ein PHP-Prozessor installiert sein. 

Alles was im Klammerpaar eingeschlossen ist, wird als PHP- 

Kommando aufgefasst, interpretiert und ausgeführt. Das Ergebnis wird an der 

gleichen Stelle im HTML-Dokument als Textstring eingesetzt. 

HTML-Dokument mit PHP-Kommandos bekommt die Endung: .php 

ASP (Active Server Pages): 

Alternative Skriptsprache zu PHP der Firma Microsoft. 

Serverseitige Ausführung des Skripts auf Webservern der Firma Microsoft 

(Microsoft Internet Information Server, IIS). 

Skriptcode befindet sich zwischen: 

Das HTML-Dokument trägt die Endung: .asp 

37


PHP-Ausführung auf dem Webserver: 

Die HTML-Datei mit Endung .php enthält php-Anweisungen, die 

vom Webserver bearbeitet werden. Daraus wird eine HTML-Seite 

erzeugt, die dann zum Client geschickt wird. 

38

 

PHP Beispiel 

 

 

Datum und Uhrzeit 

Heute ist der 

. 

Es ist jetzt 

 

Uhr. 

 

 


k310.php Antwort an Client 

Die Datei k310.php liegt auf einem 

Webserver. Die php-Befehle werden 

ausgeführt. Nur die erzeugte HTML- 

Datei wird zum Browser geschickt! 

PHP-Processor 

 

 

PHP Beispiel 

 

 

Datum und Uhrzeit 

Heute ist der 05:11:2006. 

Es ist jetzt 14:11:54 Uhr. 

 

 

39

Java-Applets: 

Applets sind Java-Programme, die aus HTML-Seiten aufgerufen 

werden können. 

Der Browser muss über eine sog. virtuelle Maschine verfügen, d. h. 

eine Software, die Java-Code ausführen kann. 

Ein Applet läuft auf dem Client-Rechner als eigenständiger Task ab. 

(Es gelten strenge Sicherheitseinschränkungen!). 

Einbindung mit: …. 

Beispiel: 

 

 


Java-fähige Browser zeigen hier ein Applet! 

40

Kapitel 4 ? HTML

Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.

Template löschen?

Als Template speichern?