HTML Beispiele


Viele dieser Beispiele sind dem Buch
HTML und CGI Programmierung
von Rainer Maurer entnommen.


Beispiele


Die ersten Schritte

die erste Seite
tags: HTML, HEAD, TITLE, BODY, Kommentar
Sonderzeichen
die Codierung von HTML-speziellen Zeichen und Sonderzeichen, Umlauten, ...


Formatierung und Schriften

Überschriften
tags: H1, ..., H6
Zeilenumbruch
tags: BR
Absätze
tags: P
Horizontale Linien
tags: HR
Formatieren von Texten: "Physikalische" Stile
tags: B, I, TT, U, STRIKE
Formatieren von Texten: "Logische" Stile
tags: EM, STRONG, CITE, SAMP, CODE, KBD, VAR


Listen und Absätze

Ungeordnete Aufzählung
tags: UL, LI
Geordnete Aufzählung
tags: OL, LI
Definitionslisten
tags: DL, DT, DD
Absätze
tags: PRE, ADDRESS, BLOCKQUOTE


Verweise

Verweise auf andere Dokumente und Dateien
tag: A
attr: HREF
Protokolle: http, ftp, mailto, file
Verweise innerhalb von Dokumenten
tag: A
attr: NAME


Bilder

ein GIF Bild
Verweise auf Bilder funktionieren wie Verweise auf andere Seiten
Grafiken in HTML-Seiten
tag: IMG
attr: SRC, ALT
Grafiken und Textausrichtung
tag: IMG
attr: ALIGN=TOP, MIDDLE, BOTTOM, LEFT, RIGHT
Grafiken als Referenzen
tags: A, IMG
Transparente Bilder
tools: giftrans
inkrementeller Bildaufbau
tools: pbmtools
Wackelbilder unter Netscape
tools: gifmerge
Bilder mit expliziter Größenangabe
tag: IMG
attr: HEIGHT WIDTH
Bilder mit Client Side Image Maps
tags: MAP, AREA
attr: SHAPE, COORDS, USEMAP


Formulare

Einzeilige Textfelder
tags: FORM, INPUT
attr: NAME, SIZE, VALUE, TYPE
Mehrzeilige Textfelder
tag: TEXTAREA
attr: NAME, ROWS, COLS
Auswahlelemente: Radiobuttons
tag: INPUT
attr: TYPE=RADIO, CHECKED
Auswahlelemente: Checkboxes
tag: INPUT
attr: TYPE=CHECKBOX, NAME, VALUE
Auswahlelemente: Listen mit Einfachselektion
tags: SELECT, OPTION
attr: SELECTED
Auswahlelemente: Listen mit Mehrfachselektion
tags: SELECT, OPTION
attr: MULTIPLE
Auswahlelemente: Pop-Up-Menüs
tags: SELECT, OPTION
attr: SIZE=1
Bestätigen der Eingabe
tag: INPUT
attr: TYPE=SUBMIT, TYPE=RESET, VALUE


Tabellen

Prinzipieller Aufbau von Tabellen
tags: TABLE, TR, TD, TH, CAPTION
Rahmen und Abstände
tag: TABLE
attr: BORDER, CELLSPACING
Mehrspaltige und mehrzeilige Zellen
tag: TD
attr: ROWSPAN, COLSPAN
Ausrichtung von Zellinhalten
tag: TD
attr: ALIGN=LEFT, ALIGN=CENTER, ALIGN=RIGHT, VALIGN=TOP, VALIGN=MIDDLE, VALIGN=BOTTOM
Ausrichten von Eingabemasken mit Tabellen
tags: FORM, TABLE
attr: ALIGN


Netscape Specials

Schriftgrößen (ein 2. Beispiel)
tags: FONT, BASEFONT
Zentrieren von Texten
tag: CENTER
Hintergrund-Bilder
tag: BODY
attr: BACKGROUND
Farben
tag: BODY
attr: BGCOLOR, TEXT, LINK, ALINK, VLINK
Horizontale Linien
tag: HR
attr: WIDHT, SIZE


CGI Skripts

das aktuelle Datum
Skript: /cgi-bin/date.cgi in dem cgi-bin Verzeichnis des lokalen servers
The Message Of The Day
ein CGI Test Skript
dieses Skript wird immer mitgeliefert. Es zeigt die Umgebungsvariablen an, die von gängigen servern gesetzt werden. Es erzeugt reinen ASCII text (mime type: text/plain).
Hier die Quelle.

Parameterübergabe
Skripts können mit Parametern versorgt werden, indem an den URL ein Suchstring angehängt wird:

http://localhost/cgi-bin/test-cgi?NAME=wert

Hierbei ist zu beachten, daß viele Zeichen durch Ersatzdarstellungen zu ersetzen sind, zum Beispiel werden NAME=wert Paare durch ein & getrennt, ein Zwischenraum wird durch ein + Zeichen ersetzt, Sonderzeichen werden durch eine Hexadezimalzahl ( %xx ) repräsentiert. Bei Formularen macht dies der Browser, ruft man die Skripts direkt auf, muß man diese Codierung selbst machen.

versteckte Felder
versteckte Felder (hidden input fields) können zusätzlich zu den sichtbaren Feldern Information an den server enthalten. Diese werden häufig zur Speicherung eines Zustandes bei einem Dialog verwendet, hier das schon bekannte Formular mit einem versteckten Feld.