ETH Logo

Die Sprache des Web: HTML

Pour comprendre, il faut agir et construire.
Jean Piaget


Einleitende Bemerkung

Die Unterlagen zu diesem Kursteil dienen gleichzeitig als Beispiel eines html-Textes. Sie sind deshalb elektronisch verfügbar und befinden sich auf dem Server:
Die CGI-Skripts befinden sich in "http://www.cs.inf.ethz.ch/cgi-bin-af/".


Kursziele


Kursplan

HTML Teil 1

Quelle: Die Sprache des Web: HTML 3

[ Teil 2 | Index ]

HTML = Hypertext Markup Language
SGML = Standard Generalized Markup Language


Tags

Markup von Textpassagen mit Tags.

Beispiel:
<I>Geben Sie <B>Enter</B> ein</I> gibt:   Geben Sie Enter ein.

Regeln:


Dokumentstruktur


Überschriftenhierarchie

Attribut ALIGN= LEFT | CENTER | RIGHT
Beispiele:

Stufe 1

Stufe 2 - ALIGN=LEFT

Stufe 3 - ALIGN=CENTER

Stufe 4 - ALIGN=RIGHT

Blockstrukturen

Beispiele:

Absatz 1 wwwwwwwwww wwwwwwwwww wwwwwwwwww wwwwwwwwww wwwwwwwwww wwwwwwwwww wwwwwwwwww

Absatz 2
Nach Zeilenumbruch







Listen

Beispiel:

Attribut TYPE
UL TYPE=DISC
  • Erster
  • Letzter
UL TYPE=CIRCLE
  • Erster
  • Letzter
UL TYPE=SQUARE
  • Erster
  • Letzter

Beispiel:
  1. ...
  2. ...
    1. ---
    2. ---
  3. ...
  4. ...

Attribut TYPE
OL TYPE=1
  1. Erster
  2. Letzter
OL TYPE=a
  1. Erster
  2. Letzter
OL TYPE=A
  1. Erster
  2. Letzter
OL TYPE=i
  1. Erster
  2. Letzter
OL TYPE=I
  1. Erster
  2. Letzter

Begriff 1
Definition 1
Begriff 2
Definition 2
Begriff 3
Definition 3

Formatierung

Blockformatierung

Die in <PRE> eingeschlossene Passage ist vorformatiert (ein Ausschnitt aus einem Programm):

	MODULE Demo;
	IMPORT Out;	
	BEGIN
		Out.String("Hello, World.")
	END Demo.

<BLOCKQUOTE> dient der Darstellung von Textpassagen aus anderen Quellen und <ADDRESS> wird verwendet um Informationen über den Autor einer Seite und dessen Adresse.
<CENTER>

zentriert eine Textpassage.

Textlook

Text kann verschiedenartig ausgezeichnet werden:
Schriftarten können kombiniert werden, z. B. als fett und kursiv.

Beispiele:
1 winzig 2 klein 3 normal 4 grösser 5 gross 6 sehr gross 7 riesig
Im normalen Text ein Wort groesser oder kleiner darstellen. KAPITAELCHEN.

Attribut COLOR = #RRGGBB

Text-Farbe: <BODY TEXT=_ >

Die Textpassage wird mit <EM> hervorgehoben und mit <STRONG> betont angezeigt. <CITE> zeichnet ein Zitat aus.


Zusammenfassung Textauszeichnung

StrukturDokument
Überschrift
Absatz
Zeilenumbruch
Linie
Ungeordnete Liste
Geordnete Liste
Definitionsliste
Formatierung ganzer
Block
Vorformatierter Text
Blockzitat
Adresse
Zentriert
physischKursivdruck
Fettdruck
Nicht proportional
Schriftgrösse relativ
Schriftgrösse absolut
Schriftfarbe
logischHervorhebung
Starke Hervorhebung
Zitat


Links

Beispiele:

Tabellen - "#TABLE"
Formular - "skript2b.htm#FORM"
- "images/mailbox.gif"
Button-Beschreibung - "/oberon/system3/tutorial/GadgetsUse.html#Button"
ETH - "http://www.ethz.ch"
MS Internet Explorer - "http://www.microsoft.com/ie/download"
Ungütige Adresse - "http://www.ethz.ch/inval.html"
Unerlaubte Adresse - "http://www.math.ethz.ch/~trottman/"
CGI Fehler - "http://www.ethz.ch/cgi-bin/inval.pl"

Link-Farbe: <BODY LINK=_ VLINK=_ ALINK=_ >


Bilder

Bildquellen

Bildarten
normal transparent interlaced animiert
Interlaced Animation

Werkzeuge: giftool, Paint Shop Pro, GIF Construction Set 32, ...

Animationen bei Netscape

Attribut SRC bestimmt Bildadresse. Wenn ungültig: Broken image

Attribut ALT bestimmt Alternativtext.

Attribute WIDTH und HEIGHT bestimmen die Bildgrösse. ( x | x% )

Linenformen: Alternativen zu <HR>




Netscape Rules and Bullets

Positionieren von Bildern

Attribut ALIGN bestimmt die Positionierung im Text.

TEXTTOP MIDDLE BOTTOM TOP ABSMIDDLE ABSBOTTOM

Ein Absatz mit einer Markierung am linken Rand.

Ein Absatz mit einer Markierung am rechten Rand.

Ein anfangs um 30 Pixel eingerückter Absatz, der dann in normaler Breite weiterläuft. Damit man nicht sieht, ist die Grafik transparent und nur 1 Pixel breit und hoch. Man kann ihn auch rechts einrücken, indem man die Grafik an den rechten Rand rückt.

Bilder als Hintergrund

Hintergrund: <BODY BACKGROUND=_ >


Images Tips.
Background Tips
Animierte GIFs.


Tabellen

CAPTION Attribut = TOP | BOTTOM

TR, TD, TH Attribute:

  1. ALIGN = LEFT | CENTER | RIGHT
  2. VALIGN = TOP | MIDDLE | BOTTOM
  3. COLSPAN = i
  4. ROWSPAN = i
  5. WIDTH = i | %i

Beispiel einer einfachen Tabelle:
196819781987
Gesamt2141 19102013
Davon weiblich 59,6%55,4%53,5%
Beispiel einer komplexen Tabelle:
Einheit Alt-Berlin
187118951910
qkm596363
Quelle: Stat. Landesamt

Tabellen zur Darstellung von Textspalten

Normaler einspaltiger Text, der jetzt von einem zweispaltigen unterbrochen wird:
Die erste Spalte in dem zweispaltigen Text, die in der ersten Tabellenzelle dieser Reihe steht. Die zweite Spalte in dem zweispaltigen Text, die in der zweiten Tabellenzelle dieser Reihe steht.

Hier geht es wieder einspaltig über die ganze Breite weiter.
HTML Tips.

Dokument-Design Tips.


HTML Dokument installieren

Mit FTP, unter z.B Netscape, wird ein Dokument auf einem Server abgelegt.
  1. Location: ftp://kursi@www.cs.inf.ethz.ch - ( i = 1..25 )
  2. Passwort eingeben
  3. "Upload File..." im "File"-Menü wählen
  4. Unter-Verzeichnis "public_html" selektieren
  5. Datei selektieren und schicken


Ende Teil 1.

[ Teil 2 ]