Embed Size (px)
Citation preview
HTML 4.0HTML 4.0
Einführung
Prof. Peter Altmann
HTML Basics
Tags treten normalerweise paarweise auf <tag> ....... </tag><tag> ....... </tag>
Tags können Parameter haben <tag param = wert> ... </tag><tag param = wert> ... </tag>
HTML Dokumentstruktur<HTML><HTML> <HEAD><HEAD> ........ <TITLE> .... </TITLE><TITLE> .... </TITLE> </HEAD></HEAD>
<BODY><BODY> ........ </BODY></BODY></HTML></HTML>
HTML Dokumentstruktur
Zusätzliche Informationen im Header<meta name="description"<meta name="description" content="Dieser content="Dieser Beschreibungstext soll einem Anwender im Beschreibungstext soll einem Anwender im Suchdienst bei Auffinden dieser Datei Suchdienst bei Auffinden dieser Datei erscheinen"> erscheinen">
<meta name="author"<meta name="author" content="Ihr Name"> content="Ihr Name"> <meta name="keywords"<meta name="keywords" content="HTML, Meta- content="HTML, Meta-Informationen, Suchprogramme, HTTP-Informationen, Suchprogramme, HTTP-Protokoll">Protokoll">
<BASE HREF=“http://www.xy.com/index.htm“><BASE HREF=“http://www.xy.com/index.htm“><BASE TARGET=“document“><BASE TARGET=“document“>
HTML Body Parameter Hintergrundgrafik <BODY BACKGROUND="xy.gif"><BODY BACKGROUND="xy.gif">
Hintergrundfarbe<BODY BGCOLOR="#RRGGBB"><BODY BGCOLOR="#RRGGBB">
Textfarbe<BODY TEXT="#RRGGBB"><BODY TEXT="#RRGGBB">
Linkfarben<BODY LINK="#RRGGBB" VLINK="#RRGGBB" <BODY LINK="#RRGGBB" VLINK="#RRGGBB" ALINK="#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> fett </B></B><I> <I> kursivkursiv </I></I><U> <U> unterstrichenunterstrichen<S> durchgestrichen<S> durchgestrichen<SUB> tiefgestellt<SUB> tiefgestellt<SUP> hochgestellt<SUP> hochgestellt<SMALL> klein<SMALL> klein<EM> hervorheben<EM> hervorheben<CODE> Codebeispiel<CODE> Codebeispiel
<TT> fixed Text<TT> fixed Text
<FONT SIZE="+2"><FONT SIZE="+2"><FONT SIZE="5"> (1-7)<FONT SIZE="5"> (1-7)<FONT COLOR="#RRGGBB"><FONT COLOR="#RRGGBB"><FONT FACE="ARIAL"><FONT FACE="ARIAL">
<H1>Überschrift 1</H1><H1>Überschrift 1</H1><H2>Überschrift 2</H2><H2>Überschrift 2</H2><H3>Überschrift 3</H3><H3>Überschrift 3</H3><H4>Überschrift 4</H4><H4>Überschrift 4</H4><H5>Überschrift 5</H5><H5>Überschrift 5</H5><H6>Überschrift 6</H6><H6>Überschrift 6</H6>
HTML Absätze Standardabsatz <P> Ausrichtung über ALIGN Parameter<P ALIGN="RIGHT"> ... </P><P ALIGN="RIGHT"> ... </P> right, left, center, justifyright, left, center, justify
Zeilenumbruch <BR> Elemente zentrieren mit
<CENTER> … </CENTER>
HTML Links lokale Verweise (selbe Seite)
<A NAME=”Anker1”>Sprung hierher</A><A NAME=”Anker1”>Sprung hierher</A><A HREF=”#Anker1”>Sprung hinauf</A><A HREF=”#Anker1”>Sprung hinauf</A>
lokale Verweise (andere Seite)<A HREF=”Kurse.html”>Klick mich</A><A HREF=”Kurse.html”>Klick mich</A><A HREF=”Kurse.html#Anker1”>Klick <A HREF=”Kurse.html#Anker1”>Klick mich</A>mich</A>
URL (Link auf website)<A HREF=”http://www.xyz.com”>xyz</A><A HREF=”http://www.xyz.com”>xyz</A>
E-Mail-Link<A HREF=”mailto:[email protected]”>mail</A><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://www.heavens-community.de/selfhtml/selfhtml80.zip
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“><IMG SRC=“logo.gif“>
Größe über WIDTHWIDTH und HEIGHTHEIGHT Alternativtext über ALTALT Abstände mit HSPACEHSPACE und VSPACEVSPACE Umrahmung mit BORDERBORDER Ausrichten im Text mit ALIGNALIGN Grafik als Verweis <A HREF=“http://www.orf.at“><A HREF=“http://www.orf.at“> <IMG SRC=“orf.gif“> </A><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“><MAP NAME=“mymap“>
<AREA SHAPE=CIRCLE COORDS=“x,y,r“ HREF=..><AREA SHAPE=CIRCLE COORDS=“x,y,r“ HREF=..>
<AREA SHAPE=RECT COORDS=“x1,y1,x2,y2“ HREF=..><AREA SHAPE=RECT COORDS=“x1,y1,x2,y2“ HREF=..>
<AREA SHAPE=POLYGON COORDS=“x1,y1,x2,y2,...“<AREA SHAPE=POLYGON COORDS=“x1,y1,x2,y2,...“HREF=..>HREF=..>
</MAP></MAP>
<IMG SRC=“a.gif“ USEMAP=“#mymap“><IMG SRC=“a.gif“ USEMAP=“#mymap“>
HTML Listen Aufzählung <UL TYPE=DISC><UL TYPE=DISC> <LH> Listenkopf </LH><LH> Listenkopf </LH> <LI> Item1<LI> Item1 </LI></LI> <LI> Item2<LI> Item2 </LI></LI> </UL></UL> Aufzählungszeichen über TYPE
DISC CIRCLE SQUARE
HTML Listen Nummerierung <OL TYPE=A><OL TYPE=A> <LI> Item1 </LI><LI> Item1 </LI> <LI VALUE=5> Item2 </LI><LI VALUE=5> Item2 </LI> </OL></OL> Zahlenformat über TYPE
A Großbuchstaben a Kleinbuchstaben I große römische Ziffern i kleine römische Ziffern 1 normale Ziffern
HTML Listen
Definitionsliste<DL><DL>
<DT> URL </DT> <DT> URL </DT>
<DD> Uniform Resource Locator </DD><DD> Uniform Resource Locator </DD>
<DT> HTML </DT> <DT> HTML </DT>
<DD> Hypertext Markup Language </DD><DD> Hypertext Markup Language </DD>
</DL></DL>
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%><TABLE BORDER WIDTH=80%><CAPTION><CAPTION>TabellenüberschriftTabellenüberschrift</CAPTION></CAPTION><TR><TD><TR><TD>Spalte1-1Spalte1-1</TD><TD></TD><TD>Spalte1-2Spalte1-2</TD></TR></TD></TR><TR><TD><TR><TD>Spalte2-1Spalte2-1</TD><TD></TD><TD>Spalte2-2Spalte2-2</TD></TR></TD></TR><TR><TD COLSPAN=2><TR><TD COLSPAN=2>über 2 Spaltenüber 2 Spalten</TD></TR></TD></TR></TABLE></TABLE>
ROWSPAN = n ROWSPAN = n für mehrere Zeilenfür mehrere Zeilen<TD ALIGN = left/center/right><TD ALIGN = left/center/right><TD VALIGN = top/middle/bottom><TD VALIGN = top/middle/bottom><TH> <TH> Kopfzellen Kopfzellen </TH></TH>
HTML Tabellen Zellbreite über <TD WIDTH=...><TD WIDTH=...>
Abstand zwischen Zellwand und Inhalt mit <TABLE CELLPADDING=...><TABLE CELLPADDING=...>
Abstand Zellwand zu Zellwand<TABLE CELLSPACING=...><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><HTML><HEAD> ... </HEAD><HEAD> ... </HEAD><<FRAMESETFRAMESET ROWS=“30%,70%“> ROWS=“30%,70%“> <FRAME SRC=“kopf.htm“ NAME=“kopf“><FRAME SRC=“kopf.htm“ NAME=“kopf“> <<FRAMESETFRAMESET COLS=“20%,300,*“> COLS=“20%,300,*“> <FRAME SRC=“inhalt.htm“ NAME=“inhalt“><FRAME SRC=“inhalt.htm“ NAME=“inhalt“> <FRAME SRC=“doku.htm“ NAME=“dokument“> <FRAME SRC=“doku.htm“ NAME=“dokument“>
<FRAME SRC=“right.htm“ NAME=“right“><FRAME SRC=“right.htm“ NAME=“right“> <</FRAMESET/FRAMESET>><</FRAMESET/FRAMESET>></HTML></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><HR> Blinken mit <BLINK> ... </BLINK><BLINK> ... </BLINK> Scroll-Text mit <MARQUEE><MARQUEE> eingebettete Objekte mit <EMBED><EMBED>
Weitere Information:Weitere Information: SELFHTML SELFHTMLhttp://www.teamone.de/selfaktuell/index.htmhttp://www.teamone.de/selfaktuell/index.htm
