Transcript HTML
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://www.heavenscommunity.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“> 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://www.teamone.de/selfaktuell/index.htm