HTML

1
HTML
HyperText Markup Language
Die Programmiersprache des WWW
Keine eigentliche Programmiersprache, sondern
eher Seitenbeschreibungssprache
systemübergreifend, plattformunabhängig (im
Idealfall) HTML-Text sieht auf allen
Rechnern/Rechnersystemen nahezu gleich aus
Hypertext kann an beliebigen Stellen auf andere
Informationen verweisen (z.B. tiefer gehende
Zusatzinformationen, Fremd-worterklärungen,
Index...), im Gegensatz zu einem Buch, bei dem
man hinten nachschlagen muss
2
Werkzeuge
Die Werkzeuge zum Erstellen einer Web-Seite
Ein einfacher (ASCI-)Texteditor, z.B. WordPad, MS
Word
Ein HTML-Editor, z.B. Home-Site (Shareware),
Arachnophilia (Shareware), Hot Metal Pro, oder
Frontpage, Phase V
Und zum Betrachten der Seiten
Einen Browser, z.B. Netscape Navigator, MS
Internet Explorer, Mosaic,Opera
3
Syntax von HTML
Die Befehle in HTML die Tags
... werden immer von spitzen Klammern
eingeschlossen, also lt und gt (tags)
Es gibt offene Tags, die einzeln stehen, z.B.
ltBRgt
... und es gibt geschlossene Tags, die immer als
Paar auftreten, mit einem Anfangs-Tag und einem
Ende-Tag, z.B. ltBgt und lt/Bgt
Ende-Tags sind also immer durch einen
Schrägstrich ( / ) gekennzeichnet
4
Syntax von HTML
Tags können ineinander verschachtelt sein, dürfen
sich aber nicht überschneiden
Richtig ltBgt ltIgt .... lt/Igt lt/Bgt
Falsch ltBgt ltIgt .... lt/Bgt lt/Igt
5
Tags
ltHTMLgt lt/HTMLgt
schließen ein Dokument ein
ltHEADgt lt/HEADgt
der Dokumenten-Kopf
ltTITELgt lt/TITELgt
der Dokumenten-Titel
ltBODYgt lt/BODYgt
der Hauptteil
ltBRgt
Zeilenumbruch
ltPgt lt/Pgt
Absatz
ltH1...6gt lt/Hgt
verschiedene Überschriften
ltBgt lt/Bgt
Fettschrift
ltIgt lt/Igt
Kursivschrift
ltUgt lt/Ugt
unterstrichen
6
weitere Tags
ltFONT ...gt lt/FONTgt
Schriftart, -größe
ltHRgt
Linien
ltIMG SRC ... gt
Grafik einfügen
ltA HREF ... gt lt/Agt
Link (Verweis) einfügen
lt!-- --gt
Kommentar einfügen
ltCENTERgt lt/CENTERgt
Zentrier-Anweisung
ltTABLEgt lt/TABLEgt
umschließt eine Tabelle
ltTRgt
erzeugt eine Tabellenzeile
ltTDgt
erzeugt eine Tabellenzelle
7
Aufbau einer HTML-Seite
Der Kopf (HEAD)
ltHEADgt lt/HEADgt
Der Körper (BODY)
ltBODYgt lt/BODYgt
8
Inhalt einer Frontpageseite
lthtmlgt ltheadgt ltmeta http-equiv"Content-Type"
content"text/html charsetwindows-1252"gt ltmeta
name"GENERATOR" content"Microsoft FrontPage
4.0"gt ltmeta name"ProgId" content"FrontPage.Edito
r.Document"gt lttitlegtHTML-Crash-Kurslt/titlegt lt/head
gt ltbody bgcolor"0000FF"gt lt/bodygt lt/htmlgt
der Kopf
Beschreibung, die auf eine HTML-Seite der Version
4.0 hinweist.
Der Seiten-Titel
Mit den Tags ltHTMLgt und lt/HTMLgt wird die Seite
eingerahmt.
gibt die Hintergrundfarbe an
der Körper
9
hexadezimale Ziffern für Farbwerte
0 (entspricht dezimal 0) 1 (entspricht dezimal
1) 2 (entspricht dezimal 2) 3 (entspricht dezimal
3) 4 (entspricht dezimal 4) 5 (entspricht dezimal
5) 6 (entspricht dezimal 6) 7 (entspricht dezimal
7) 8 (entspricht dezimal 8) 9 (entspricht dezimal
9) A (entspricht dezimal 10) B (entspricht
dezimal 11) C (entspricht dezimal 12) D
(entspricht dezimal 13) E (entspricht dezimal
14) F (entspricht dezimal 15)
ltbody bgcolor"0000FF"gt
Eine hexadezimale Ziffer kann also 16 Zustände
haben
Für jeden Farbwert (Rot oder Grün oder Blau)
stehen 2 Ziffern zur Verfügung
Das macht 16 x 16 ( 256) mögliche Zustände pro
Farbwert
256 hoch 3 ergibt folglich 16,7 Mio. Farben
10
SW, Primär und Sekundärfarben
11
Kommentar (html)
lthtmlgt ltheadgt ltmeta http-equiv"Content-Type"
content"text/html charsetwindows-1252"gt ltmeta
name"GENERATOR" content"Microsoft FrontPage
4.0"gt ltmeta name"ProgId" content"FrontPage.Edito
r.Document"gt lttitlegtHTML-Crash-Kurslt/titlegt lt/head
gt lt!-- Das ist ein Kommentar, er wird auf der
Seite nicht mit angezeigt. --gt ltbody
bgcolor"0000FF TEXT"000000" LINK"800000"
VLINK"800080"gt lt/bodygt lt/htmlgt
Kommentar
Textfarbe
Farbe der Links, der Verweise.
Hintergrundfarbe
12
Kommentar (normal)
13
Überschrift (html)
lthtmlgt ltheadgt ltmeta http-equiv"Content-Type"
content"text/html charsetwindows-1252"gt ltmeta
name"GENERATOR" content"Microsoft FrontPage
4.0"gt ltmeta name"ProgId" content"FrontPage.Edito
r.Document"gt lttitlegtHTML-Crash-Kurslt/titlegt lt/head
gt lt!-- Das ist ein Kommentar, er wird auf der
Seite nicht mit angezeigt. --gt ltbody
bgcolor"0000FF TEXT"000000" LINK"800000"
VLINK"800080"gt ltH1gt ltBgt ltCENTERgtUnsere erste
Web-Seitelt/CENTERgt lt/Bgt lt/H1gt lt/bodygt lt/htmlgt
14
Überschrift (normal)
15
Linie (html)
lthtmlgt ltheadgt ltmeta http-equiv"Content-Type"
content"text/html charsetwindows-1252"gt ltmeta
name"GENERATOR" content"Microsoft FrontPage
4.0"gt ltmeta name"ProgId" content"FrontPage.Edito
r.Document"gt lttitlegtHTML-Crash-Kurslt/titlegt lt/head
gt lt!-- Das ist ein Kommentar, er wird auf der
Seite nicht mit angezeigt. --gt ltbody
bgcolor"0000FF TEXT"000000" LINK"800000"
VLINK"800080"gt ltH1gt ltBgt ltCENTERgtUnsere erste
Web-Seitelt/CENTERgt lt/Bgt lt/H1gt ltHR WIDTH"95"
ALIGNCENTERgt ltBRgt lt/bodygt lt/htmlgt
16
Linie (normal)
17
Text 1 (html)
lthtmlgt ltheadgt ltmeta http-equiv"Content-Type"
content"text/html charsetwindows-1252"gt ltmeta
name"GENERATOR" content"Microsoft FrontPage
4.0"gt ltmeta name"ProgId" content"FrontPage.Edito
r.Document"gt lttitlegtHTML-Crash-Kurslt/titlegt lt/head
gt lt!-- Das ist ein Kommentar, er wird auf der
Seite nicht mit angezeigt. --gt ltbody
bgcolor"0000FF TEXT"000000" LINK"800000"
VLINK"800080"gt ltH1gt ltBgt ltCENTERgtUnsere erste
Web-Seitelt/CENTERgt lt/Bgt lt/H1gt ltHR WIDTH"95"
ALIGNCENTERgt ltBRgt ltCENTERgt Willkommen auf der
Test-Web-Seite des HTML-Crash-Kurses. In HTML zu
programmieren ist ganz einfach. Das werdet Ihr
gleich sehen.lt/CENTERgt lt/bodygt lt/htmlgt
18
Text 1 (normal)
19
Text 2 (html)
lt!-- Das ist ein Kommentar, er wird auf der Seite
nicht mit angezeigt. --gt ltbody bgcolor"0000FF
TEXT"000000" LINK"800000" VLINK"800080"gt ltH1
gt ltBgt ltCENTERgtUnsere erste Web-Seitelt/CENTERgt
lt/Bgt lt/H1gt ltHR WIDTH"95" ALIGNCENTERgt ltBRgt
ltCENTERgt Willkommen auf der Test-Web-Seite des
HTML-Crash-Kurses. In HTML zu programmieren ist
ganz einfach. Das werdet Ihr gleich
sehen.lt/CENTERgt ltPgtDieser Absatz ist linksbuendig
ausgerichtet.ltBgt Der Text ist fett. lt/Bgtlt/Pgt ltP
ALIGNCENTERgtWas diesen Absatz ziert Er ist
zentriert. ltIgt Der Text ist kursiv lt/Igtlt/Pgt ltP
ALIGNRIGHTgtDieser Absatz, oh wie schoen, ist am
rechten Rand zu sehn.ltUgt Der Text ist
unterstrichen. lt/Ugtlt/Pgt lt/bodygt lt/htmlgt
20
Text 2 (normal)
21
Bild (html)
lt!-- Das ist ein Kommentar, er wird auf der Seite
nicht mit angezeigt. --gt ltbody bgcolor"0000FF
TEXT"000000" LINK"800000" VLINK"800080"gt ltH1
gt ltBgt ltCENTERgtUnsere erste Web-Seitelt/CENTERgt
lt/Bgt lt/H1gt ltHR WIDTH"95" ALIGNCENTERgt ltBRgt
ltCENTERgt Willkommen auf der Test-Web-Seite des
HTML-Crash-Kurses. In HTML zu programmieren ist
ganz einfach. Das werdet Ihr gleich
sehen.lt/CENTERgt ltP ALIGNCENTERgtWas diesen Absatz
ziert Er ist zentriert. ltIgt Der Text ist kursiv
lt/Igtlt/Pgt ltP ALIGNRIGHTgtDieser Absatz, oh wie
schoen, ist am rechten Rand zu sehn.ltUgt Der Text
ist unterstrichen. lt/Ugtlt/Pgt ltCENTERgtltIMG
SRC"Bild1.gif" WIDTH"200" ALT"Das ist ein
Bild"gt lt/CENTERgt lt/bodygt lt/htmlgt
22
Bild (normal)
23
Bildunterschrift (html)
lt!-- Das ist ein Kommentar, er wird auf der Seite
nicht mit angezeigt. --gt ltbody bgcolor"0000FF
TEXT"000000" LINK"800000" VLINK"800080"gt ltH1
gt ltBgt ltCENTERgtUnsere erste Web-Seitelt/CENTERgt
lt/Bgt lt/H1gt ltHR WIDTH"95" ALIGNCENTERgt ltBRgt
ltCENTERgt Willkommen auf der Test-Web-Seite des
HTML-Crash-Kurses. In HTML zu programmieren ist
ganz einfach. Das werdet Ihr gleich
sehen.lt/CENTERgt ltP ALIGNCENTERgtWas diesen Absatz
ziert Er ist zentriert. ltIgt Der Text ist kursiv
lt/Igtlt/Pgt ltP ALIGNRIGHTgtDieser Absatz, oh wie
schoen, ist am rechten Rand zu sehn.ltUgt Der Text
ist unterstrichen. lt/Ugtlt/Pgt ltCENTERgtltIMG
SRC"Bild1.gif" WIDTH"200" ALT"Das ist ein
Bild"gt lt/CENTERgt ltBRgt ltCENTERgtltBgtEin Bild - wie
nett.lt/Bgtlt/CENTERgt lt/bodygt lt/htmlgt
24
Bildunterschrift (normal)
25
Link (html)
ltCENTERgt Willkommen auf der Test-Web-Seite des
HTML-Crash-Kurses. In HTML zu programmieren ist
ganz einfach. Das werdet Ihr gleich
sehen.lt/CENTERgt ltP ALIGNCENTERgtWas diesen Absatz
ziert Er ist zentriert. ltIgt Der Text ist kursiv
lt/Igtlt/Pgt ltP ALIGNRIGHTgtDieser Absatz, oh wie
schoen, ist am rechten Rand zu sehn.ltUgt Der Text
ist unterstrichen. lt/Ugtlt/Pgt ltCENTERgtltIMG
SRC"Bild1.gif" WIDTH"200" ALT"Das ist ein
Bild"gt lt/CENTERgt ltBRgt ltCENTERgtltBgtEin Bild - wie
nett.lt/Bgtlt/CENTERgt ltBRgt Nun wollen wir aber mal
nicht vergessen, warum HTML Hyper Text Markup
Language heisst wegen der ltIgtVerweiselt/Igt, den
ltIgtLINKSlt/Igt. ltBRgt Unser erster Link verweist
auf ltA HREF"2.Web.htm"gteine Seite von
mirlt/Agt lt/bodygt lt/htmlgt
26
Link (normal)
27
E-Mail (html)
ltCENTERgt Willkommen auf der Test-Web-Seite des
HTML-Crash-Kurses. In HTML zu programmieren ist
ganz einfach. Das werdet Ihr gleich
sehen.lt/CENTERgt ltP ALIGNCENTERgtWas diesen Absatz
ziert Er ist zentriert. ltIgt Der Text ist kursiv
lt/Igtlt/Pgt ltP ALIGNRIGHTgtDieser Absatz, oh wie
schoen, ist am rechten Rand zu sehn.ltUgt Der Text
ist unterstrichen. lt/Ugtlt/Pgt ltCENTERgtltIMG
SRC"Bild1.gif" WIDTH"200" ALT"Das ist ein
Bild"gt lt/CENTERgt ltBRgt ltCENTERgtltBgtEin Bild - wie
nett.lt/Bgtlt/CENTERgt ltBRgt Nun wollen wir aber mal
nicht vergessen, warum HTML Hyper Text Markup
Language heisst wegen der ltIgtVerweiselt/Igt, den
ltIgtLINKSlt/Igt. ltBRgt Unser erster Link verweist
auf ltA HREF"2.Web.htm"gteine Seite von mirlt/Agt
ltBRgt Und hier? Hier kann man mir eine ltA
HREF"mailtojohannes.pasquay_at_pascom.de"gtelektroni
sche Postlt/Agt schicken! lt/bodygt lt/htmlgt
28
E-Mail (normal)
29
Schriftattribute (html)
ltCENTERgt Willkommen auf der Test-Web-Seite des
HTML-Crash-Kurses. In HTML zu programmieren ist
ganz einfach. Das werdet Ihr gleich
sehen.lt/CENTERgt ltP ALIGNCENTERgtWas diesen Absatz
ziert Er ist zentriert. ltIgt Der Text ist kursiv
lt/Igtlt/Pgt ltP ALIGNRIGHTgtDieser Absatz, oh wie
schoen, ist am rechten Rand zu sehn.ltUgt Der Text
ist unterstrichen. lt/Ugtlt/Pgt ltCENTERgtltIMG
SRC"Bild1.gif" WIDTH"200" ALT"Das ist ein
Bild"gt lt/CENTERgt ltBRgt ltCENTERgtltBgtEin Bild - wie
nett.lt/Bgtlt/CENTERgt ltBRgt Nun wollen wir aber mal
nicht vergessen, warum HTML Hyper Text Markup
Language heisst wegen der ltIgtVerweiselt/Igt, den
ltIgtLINKSlt/Igt. ltBRgt Unser erster Link verweist
auf ltA HREF"2.Web.htm"gteine Seite von mirlt/Agt
ltBRgt Und hier? Hier kann man mir eine ltA
HREF"mailtojohannes.pasquay_at_pascom.de"gtelektroni
sche Postlt/Agt schicken! ltBRgt ltFONT
SIZE"2"gtltBgtNA? War das etwa schwer?lt/Bgtlt/FONTgt
lt/bodygt lt/htmlgt
30
Schriftattribute (normal)
31
2. Webseite (html)
lthtmlgt ltheadgt ltmeta http-equiv"Content-Type"
content"text/html charsetwindows-1252"gt ltmeta
name"GENERATOR" content"Microsoft FrontPage
4.0"gt ltmeta name"ProgId" content"FrontPage.Edito
r.Document"gt lttitlegtHTML-Crash-Kurslt/titlegt lt/head
gt ltBODY BGCOLOR"00ffff" TEXT"000000"
LINK"0000ff" VLINK"800080" ALINK"ff0000"gt ltH
1gt ltBgt ltCENTERgtUnsere zweite Web-Seitelt/CENTERgt
lt/Bgt lt/H1gt ltHR WIDTH"95" ALIGNCENTERgt ltBRgt ltBRgt
ltA HREF"1.Web.htm"gtZurück zur 1.
Webseitelt/Agt. ltBRgt lt/bodygt lt/htmlgt
Johannes M. L. Pasquay
32
2. Webseite (normal)
33
Tabelle (html)
ltBODY BGCOLOR"00ffff" TEXT"000000"
LINK"0000ff" VLINK"800080" ALINK"ff0000"gt ltH
1gt ltBgt ltCENTERgtUnsere zweite Web-Seitelt/CENTERgt
lt/Bgt lt/H1gt ltHR WIDTH"95" ALIGNCENTERgt ltBRgt ltBRgt
ltA HREF"1.Web.htm"gtZurück zur 1.
Webseitelt/Agt. ltBRgt ltCENTERgtltTABLE
BORDER"1"gtlt/CENTERgt ltTRgt ltTD WIDTH"200"gtltSTRONGgt
Überschrift 1lt/STRONGgtlt/TDgt ltTDgtltSTRONGgtÜberschrif
t 2lt/STRONGgtlt/TDgt lt/TRgt ltTRgt ltTD WIDTH"200"gtText
1lt/TDgt ltTDgtText 2lt/TDgt lt/TRgt lt/TABLEgt
lt/bodygt lt/htmlgt
Johannes M. L. Pasquay
34
Tabelle (normal)