HTML 4.0
Einführung
Prof. Peter Altmann
HTML Basics

Tags treten normalerweise
paarweise auf
<tag> ....... </tag>

Tags können Parameter haben
<tag param = wert> ... </tag>
HTML Dokumentstruktur
<HTML>
<HEAD>
....
<TITLE> .... </TITLE>
</HEAD>
<BODY>
....
</BODY>
</HTML>
HTML Dokumentstruktur
Zusätzliche Informationen im Header
<meta name="description" content="Dieser
Beschreibungstext soll einem Anwender im
Suchdienst bei Auffinden dieser Datei
erscheinen">
<meta name="author" content="Ihr Name">
<meta name="keywords" content="HTML, MetaInformationen, Suchprogramme, HTTPProtokoll">
<BASE HREF=“http://www.xy.com/index.htm“>
<BASE TARGET=“document“>
HTML Body Parameter

Hintergrundgrafik
<BODY BACKGROUND="xy.gif">

Hintergrundfarbe
<BODY BGCOLOR=#RRGGBB>

Textfarbe
<BODY TEXT=#RRGGBB>

Linkfarben
<BODY LINK=#RRGGBB VLINK=#RRGGBB
ALINK=#RRGGBB>
Beispiel 1





Grüner Hintergrund
Schwarze Textfarbe
Linkfarbe: blau
Aktivierter Link: rot
Besuchter Link: gelb
<BODY BGCOLOR=#00FF00 TEXT=#000000>
<BODY LINK=#0000FF ALINK=#FF0000 VLINK=#FFFF00>
HTML Schriftformat
<B>
fett
</B>
<I>
kursiv </I>
<U>
unterstrichen
<S>
durchgestrichen
<SUB>
tiefgestellt
<SUP>
hochgestellt
<SMALL> klein
<EM>
hervorheben
<CODE> Codebeispiel
<TT>
fixed Text
<FONT
<FONT
<FONT
<FONT
SIZE="+2">
SIZE="5"> (1-7)
COLOR="#RRGGBB">
FACE="ARIAL">
<H1>Überschrift
<H2>Überschrift
<H3>Überschrift
<H4>Überschrift
<H5>Überschrift
<H6>Überschrift
1</H1>
2</H2>
3</H3>
4</H4>
5</H5>
6</H6>
HTML Absätze


Standardabsatz <P>
Ausrichtung über ALIGN Parameter
<P ALIGN="RIGHT"> ... </P>
 right, left, center, justify


Zeilenumbruch <BR/>
Elemente zentrieren mit
<CENTER> … </CENTER>
HTML Links

lokale Verweise (selbe Seite)
<A NAME=”Anker1”>Sprung hierher</A>
<A HREF=”#Anker1”>Sprung hinauf</A>

lokale Verweise (andere Seite)
<A HREF=”Kurse.html”>Klick mich</A>
<A HREF=”Kurse.html#Anker1”>Klick
mich</A>

URL (Link auf website)
<A HREF=”http://www.xyz.com”>xyz</A>

E-Mail-Link
<A HREF=”mailto:[email protected]>mail</A>
Beispiel 2






Hintergrundgrafik: du_midi.jpg
Lokaler Link:  beispiel01.htm
URL – Link: www.chamonix.com
Download – Link: http://de.selfhtml.org
Email Link: [email protected]
Lokaler Link: Seitenende  Anfang
Beispiel 2 Lösung
<CENTER> <A NAME = "oben">Aiguille du Midi</A> </CENTER>
...
<A HREF ="beispiel01.htm">Beispiel 1</A> <BR>
<A HREF ="http://www.chamonix.com">Chamonix</A> <BR>
<A HREF ="http://www.teamone.de/download/selfhtml.zip">
Dokument downloaden</A> <BR>
<P ALIGN = CENTER>
<A HREF ="mailto:[email protected]">Altmann Peter</A>
</P>
<A HREF = #oben> Hinauf </A>
HTML Grafik







Über IMG-Tag <IMG SRC=“logo.gif“>
Größe über WIDTH und HEIGHT
Alternativtext über ALT
Abstände mit HSPACE und VSPACE
Umrahmung mit BORDER
Ausrichten im Text mit ALIGN
Grafik als Verweis
<A HREF=“http://www.orf.at“>
<IMG SRC=“orf.gif“> </A>
Beispiel 3
<img src = "../Grafik/download.gif"
width = 588 height = 440
border = 5
align = left
hspace = 50 vspace = 15
alt = "Das Bild zeigt das
Verzeichnissystem" >
HTML ImageMap
<MAP NAME=“mymap“>
<AREA SHAPE=CIRCLE COORDS=“x,y,r“ HREF=..>
<AREA SHAPE=RECT COORDS=“x1,y1,x2,y2“ HREF=..>
<AREA SHAPE=POLYGON COORDS=“x1,y1,x2,y2,...“
HREF=..>
</MAP>
<IMG SRC=“a.gif“ USEMAP=“#mymap“>
HTML Listen

Aufzählung
<UL TYPE=DISC>
<LH> Listenkopf </LH>
<LI> Item1
</LI>
<LI> Item2
</LI>
</UL>

Aufzählungszeichen über TYPE



DISC
CIRCLE
SQUARE
HTML Listen

Nummerierung
<OL TYPE=A>
<LI>
Item1 </LI>
<LI VALUE=5> Item2 </LI>
</OL>

Zahlenformat über TYPE





A
a
I
i
1
Großbuchstaben
Kleinbuchstaben
große römische Ziffern
kleine römische Ziffern
normale Ziffern
HTML Listen

Definitionsliste
<DL>
<DT>
<DD>
<DT>
<DD>
</DL>
URL </DT>
Uniform Resource Locator </DD>
HTML </DT>
Hypertext Markup Language </DD>
Beispiel 4
<ol Type = i>
<li>Aufzählung</li>
<li>Nummerierung</li>
<li>Definitionsliste</li>
</ol>
<dl>
<dt>Definitionsliste</dt>
<dd>dient zur näheren Erklärung</dd>
</dl>
HTML Tabellen
<TABLE BORDER WIDTH=80%>
<CAPTION>Tabellenüberschrift</CAPTION>
<TR><TD>Spalte1-1</TD><TD>Spalte1-2</TD></TR>
<TR><TD>Spalte2-1</TD><TD>Spalte2-2</TD></TR>
<TR><TD COLSPAN=2>über 2 Spalten</TD></TR>
</TABLE>
ROWSPAN = n für mehrere Zeilen
<TD ALIGN = left/center/right>
<TD VALIGN = top/middle/bottom>
<TH> Kopfzellen </TH>
HTML Tabellen



Zellbreite über <TD WIDTH=...>
Abstand zwischen Zellwand und Inhalt
mit <TABLE CELLPADDING=...>
Abstand Zellwand zu Zellwand
<TABLE CELLSPACING=...>
Beispiel 5
<table>
<tr ALIGN = center>
<td><img src=„1.jpg" width="203" height="306" ></td>
<td><img src=„2.jpg" width="306" height="203" ></td>
</tr>
<tr ALIGN = center>
<td>1</td>
<td>2</td>
</tr>
...
</table>
HTML Frames



Statt BODY wird Schirm in kleine
Bereiche (Frames) geteilt
Frames können verschachtelt werden
Bereich für Frames wird entweder
horizontal oder vertikal geteilt
HTML Frames
<HTML>
<HEAD> ... </HEAD>
<FRAMESET ROWS=“30%,70%“>
<FRAME SRC=“kopf.htm“ NAME=“kopf“>
<FRAMESET COLS=“20%,300,*“>
<FRAME SRC=“inhalt.htm“ NAME=“inhalt“>
<FRAME SRC=“doku.htm“ NAME=“dokument“>
<FRAME SRC=“right.htm“ NAME=“right“>
</FRAMESET>
</FRAMESET>
</HTML>
Beispiel 6
<frameset cols = 120,*>
<frame src = "left.htm" name = "left">
<frameset rows = 20%,*>
<frame src = "top.htm" name = "top">
<frame src = "document.htm" name = "docu">
</frameset>
</frameset>
Sonstiges





Horizontale Linie mit <HR/>
Blinken mit <BLINK> ... </BLINK>
Scroll-Text mit <MARQUEE>
eingebettete Objekte mit <EMBED>
Weitere Information: SELFHTML
http://de.selfhtml.org

HTML - BORG 2700