Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Einführung Prof. Peter Altmann

Ähnliche Präsentationen


Präsentation zum Thema: "Einführung Prof. Peter Altmann"—  Präsentation transkript:

1 Einführung Prof. Peter Altmann
HTML 4.0 Einführung Prof. Peter Altmann

2 HTML Basics Tags treten normalerweise paarweise auf
<tag> </tag> Tags können Parameter haben <tag param = wert> ... </tag>

3 HTML Dokumentstruktur
<HEAD> .... <TITLE> .... </TITLE> </HEAD> <BODY> </BODY> </HTML>

4 HTML Dokumentstruktur
Zusätzliche Informationen im Header <meta name="description" content="Dieser Beschreibungstext soll einem Anwender im Suchdienst beim Auffinden dieser Datei erscheinen"> <meta name="author" content="Ihr Name"> <meta name="keywords" content="Stichwörter, HTML, Meta-Informationen, Suchprogramme"> <BASE HREF="http://www.xy.com/index.htm"> <BASE TARGET="document">

5 HTML Body Parameter Hintergrundgrafik <BODY BACKGROUND=xy.gif>
Hintergrundfarbe <BODY BGCOLOR=#RRGGBB> Textfarbe <BODY TEXT=#RRGGBB> Linkfarben <BODY LINK=#RRGGBB VLINK=#RRGGBB ALINK=#RRGGBB>

6 HTML Schriftformat <B> fett </B> <SMALL> klein
<I> kursiv </I> <U> unterstrichen <S> durchgestrichen <SUB> tiefgestellt <SUP> hochgestellt <SMALL> klein <BIG> groß <EM> hervorheben <CODE> Codebeispiel <TT> fixed Text <FONT SIZE=5> Schriftgrößen: 1 bis 7 </FONT> <FONT SIZE=+2> <FONT COLOR=#RRGGBB> <FONT FACE=“ARIAL“>

7 HTML Absätze <H1> Überschrift 1 </H1>
<P> Standardabsatz </P> Ausrichtung über ALIGN Parameter <P ALIGN=RIGHT> ... </P> right, left, center, justify Zeilenumbruch <BR> Elemente zentrieren mit <CENTER>

8 CSS – Stylesheets Formatvorlagen Stylesheet – Editor
Schriftformatierung Ausrichtung Abstände Hintergrundfarben Rahmen ...

9 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</A> URL <A HREF=”http://www.xyz.com”>xyz</A> Mailto-Link: <A

10 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>

11 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“>

12 HTML Listen Aufzählung Aufzählungszeichen über TYPE DISC CIRCLE SQUARE
<UL TYPE=DISC> <LH> Listenkopf </LH> <LI> Item1 </LI> <LI> Item2 </LI> </UL> Aufzählungszeichen über TYPE DISC CIRCLE SQUARE

13 HTML Listen Nummerierung Zahlenformat über TYPE <OL TYPE=A>
<LI> Item1 </LI> <LI VALUE=5> Item2 </LI> </OL> Zahlenformat über TYPE A Großbuchstaben a Kleinbuchstaben I große römische Ziffern i kleine römische Ziffern l normale Ziffern

14 HTML Listen Definitionsliste <DL> <DT> URL </DT>
<DD> Uniform Resource Locator </DD> <DT> HTML </DT> <DD> Hypertext Markup Language </DD> </DL>

15 HTML Tabellen <TABLE BORDER=1 WIDTH=40% Height=150>
<CAPTION>Tabellenüberschrift</CAPTION> <TR><TD>Spa 1, Zei 1</TD><TD>Spa 2, Zei 1 <TR><TD>Spa 1, Zei 2<TD>Spa 2, Zei 2 <TR><TD COLSPAN=2>über 2 Spalten </TD></TR> </TABLE> ROWSPAN = n für mehrere Zeilen <TH> Kopfzellen <TD ALIGN = left/center/right/justify> <TD VALIGN = top/middle/bottom>

16 HTML Tabellen Zellbreite über <TD WIDTH=...>
Abstand zwischen Zellwand und Inhalt mit <TABLE CELLPADDING=...> Abstand Zellwand zu Zellwand <TABLE CELLSPACING=...>

17 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

18 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> </HTML>

19 Sonstiges Horizontale Linie mit <HR>
Blinken mit <BLINK> ... </BLINK> Scroll-Text mit <MARQUEE> eingebettete Objekte mit <EMBED> Weitere Information: SELFHTML


Herunterladen ppt "Einführung Prof. Peter Altmann"

Ähnliche Präsentationen


Google-Anzeigen