Einführung in HTML Hui Dai Hui Dai dai@in.tum.de 1
Elemente einer Internetseite: Textabsätze Farben Layout, d.h. Anordnung und Ausrichtung der einzelnen Elemente Überschriften Listen Tabellen Links Grafiken Hui Dai dai@in.tum.de 2
HTML = Hyper Text Markup Language (Hypertext-Auszeichnungssprache) Beschreibungssprache der Internetseiten Hypertext = übergeordneter Text; Dokumente, die viele Verweise zu anderen Dateien enthalten Definition des Aufbaus einer Internetseite: Elemente, Strukturen, Verweise, referenzierte Elemente (Grafiken, Multimedia...) beschreibt die logischen Bestandteile eines textorientierten Dokuments: Auszeichnung typischer Elemente wie Überschriften, Textabsätze, Listen, Tabellen... Hui Dai dai@in.tum.de 3
H T M L sc h reib en A nsic h t im B ro w ser 1. HTML schreiben im Editor (vi,notpad) 2. Speichern unter: dateiname.html/htm 3. im Browser (IE oder Netscape) Datei öffnen Hui Dai dai@in.tum.de 4
Tags: HTML-E l e m e n t e w e r d e n d u r c h s o g. Ta g s m a r k i e r t D i e Ta g s w e r d e n i n s p i t z e n K l a m m e r n (<, >) n o t i e r t f a s t a l l e HTML-E l e m e n t e w e r d e n d u r c h e i n e i n l e i t e n d e s (<>) u n d e i n a b s c h l i e ße n d e s (</ >) Ta g m a r k i e r t Hui Dai dai@in.tum.de 5
Dokumenttyp-Deklaration Mehrjährige Geschichte, viele verschiedene Versionen Wichtige Normen: HTML 4.0, XHTML 1.0, XHTML 1.1 Beispiel einer Dokumenttyp-Deklaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> Hui Dai dai@in.tum.de 6
D as H TM L -G r u n d ge r üst : < h t m l > < h e a d > < / h e a d > < b o d y > < / b o d y > < / h t m l > Hui Dai dai@in.tum.de 7
D i e K o p f d at e n ( h e ad e r ) : Tags: <head></head> Titel der Seite: <title> Text des Titels </title> Hui Dai dai@in.tum.de 8
D e r Te x t k ör p e r ( b o d y ) : Tags: <b o dy ></b o dy > Hier wird der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster des Internet-Browsers angezeigt werden soll Hui Dai dai@in.tum.de 9
D S o n d e r z e i c h e n Deutsche Umlaute und scharfes S: e u t s c h ä ö ü Ä Ö Ü ß u m l u m l u m l u m l u m l u m l z l i g HTML &a ; &o ; &u ; &A ; &O ; &U ; &s ; Hui Dai dai@in.tum.de 10
Überschriften 6 Überschriftenebenen <h1...6> </h1 6> Hierarchieverhältnisse abbilden Beispiel Hui Dai dai@in.tum.de 11
Te x t ab sät z e d e f i n i e r e n : <p > (p = p a r a g r a p h = A b s a t z ) l e i t e t e i n e n Te x t a b s a t z e i n, </ p > s t e h t a m E n d e d e s A b s a t z t e x t e s z u b e a c h t e n : D a s < p > -E l e m e n t d a r f k e i n e a n d e r e n b l o c k e r z e u g e n d e n E l e m e n t e w i e z. B. Üb e r s c h r i f t e n, Te x t a b s ät z e, Li s t e n u. a. e n t h a l t e n Hui Dai dai@in.tum.de 12
Te x t ab sät z e au sr i c h t e n : W e n n n i c h t a n d e r s a n g e g e b e n w e r d e n T e x t a b s ät z e l i n k s b ün d i g a u s g e r i c h t e t < p a l i g n = " c e n t e r " > D i e s i s t e i n z e n t r i e r t e r A b s a t z. < / p > < p a l i g n = " r i g h t " > D i e s i s t e i n A b s a t z, d e r r e c h t s a u s g e r i c h t e t i s t. < / p > < p a l i g n = " j u s t i f y " > D i e s i s t e i n A b s a t z i m B l o c k s a t z. < / p > Hui Dai dai@in.tum.de 13
w Einf üg en v o n N o tiz en in eine H T M L -D a tei: <!- - Hier kön n en N o t iz en ein g ef üg t erd en, d ie n ic h t a u f d er I n t ern et s eit e z u s eh en s in d. D a s ka n n d er Üb ers ic h t l ic h keit d ien en. --> Hui Dai dai@in.tum.de 14
F ar b e n i n H TM L : 1. D a t e i w e i t e H i n t e r - u n d V o r d e r g r u n d f a r b e n 2. S c h r i f t f a r b e n f ür T e x t a b s c h n i t t e 3. H i n t e r g r u n d f a r b e n i n T a b e l l e n Hui Dai dai@in.tum.de 15
D ef initio n v o n F a rb en in H T M L : 1. Durch Angabe eines Farbnamens ->16 Farben zur Auswahl 2. Durch Angabe der RGB-Werte der gewünschten Farbe in Hexadezimalform (RGB = Rot/Grün/Blau-Wert der Farbe) -> 16,7 Mio. Farben zur Auswahl Hui Dai dai@in.tum.de 16
B e i sp i e l e f ür d i e F ar b e n H i n t e r g r u n d f a r b e : <b o d y b g c o l o r =" b l u e " > T a b e l l e n h i n t e r g r u n d f a r b e : <t a b l e b g c o l o r = #0 0 0 0 F F > Hui Dai dai@in.tum.de 17
Listen Aufzählungsliste (unordered list) Nummerierte Liste (ordered list) Definitionsliste (definition list) Verzeichnis- oder Menüliste (kaum verwendet) Beispiel Hui Dai dai@in.tum.de 18
Tab e l l e n i n H TM L : 1. D a r s t e l l u n g t a b e l l a r i s c h e r D a t e n 2. S e i t e n -L a y o u t Hui Dai dai@in.tum.de 19
Tab e l l e n i n H TM L : <t a b l e >T a b e l l e n -T a g s </ t a b l e > <t r >t a b l e r o w =T a b e l l e n z e i l e </ t r > <t h >t a b l e h e a d e r =Z e i l e n k o p f </ t h > <t d >t a b l e d a t a =T a b e l l e n d a t e n </ t d > Hui Dai dai@in.tum.de 20
B e i sp i e l : <table border="1"> <tr> <th >1. Z ei le, 1. S p alte</ th > <th >1. Z ei le, 2. S p alte</ th > </ tr> <tr> <td>2. Z ei le, 1. S p alte</ td> <td>2. Z ei le, 2. S p alte</ td> </ tr> </ table> Hui Dai dai@in.tum.de 21
V e r w e i se ( L i n k s) : Dienen der Strukturierung eines Internetprojektes Verweise innerhalb des Internetprojektes (Bsp: "Zurück zur Einstiegsseite") Verweise auf Dateien Verweise auf andere Internetadressen Verweise auf E-Mail-Adressen Hui Dai dai@in.tum.de 22
V e r w e i se ( L i n k s) : Alle Verweise ( eg al ob z u D atei en, I n tern etadres s en, E - M ai ls -A dres s en... ) h a b en ein en ein h eit lic h en Au f b a u in H T M L : < a h ref = " " > < / a > ( a: an c h or; h ref : h y p er ref eren c e) als W ert an das h ref -A ttri bu t w i rd das V erw ei s z i el an g eg eben Z w i s c h en <a> u n d </ a> w i rd der T ex t an g eg eben, der au f dem B i lds c h i rm als V erw ei s ers c h ei n t ( m ei s t an ders f arbi g u n d u n ters tri c h en ) Hui Dai dai@in.tum.de 23
G r af i k e n e i n b i n d e n : T a g f ür G r a f i k r e f e r e n z e n : < i m g > (image) S t a n d a l o n e -T a g, d. h. k e i n a b s c h l i e ße n d e s T a g e r f o r d e r l i c h 2 A t t r i b u t e s i n d P f l i c h t : s r c : g i b t d e n Q u e l l o r t d e r G r a f i k a n (s o u r c e) a l t : g i b t e i n e n A l t e r n a t i v t e x t a n f ür d e n F a l l, d a ß d i e G r a f i k n i c h t g e l a d e n w e r d e n k a n n < i m g s r c = " g r a f i k. g i f " a l t = " G r a f i k " > Hui Dai dai@in.tum.de 24
B reite u nd H öh e v o n G ra f ik en: D i e A n g a b e d e r Ma ße v o n G r a f i k e n d i e n t d e m s c h n e l l e r e n S e i t e n a u f b a u d u r c h d e n B r o w s e r G r ö ße n a n g a b e n (w i e b e i Ta b e l l e n ) d u r c h d i e A t t r i b u t e w i d t h = u n d h e i g h t = i n P i x e l n o d e r i n % Hui Dai dai@in.tum.de 25
G r af i k e n au sr i c h t e n : m i t d e m H T M L -A t t r i b u t a l i g n = i m < i m g > -T a g k a n n e i n e G r a f i k i n d e r s e l b e n Z e i l e z u m T e x t a u s g e r i c h t e t w e r d e : a l i g n = " t o p " : T e x t o b e n b ün d i g z u r G r a f i k a l i g n = " m i d d l e " : T e x t m i t t i g z u r G r a f i k a l i g n = " b o t t o m " : T e x t u n t e n b ün d i g z u r G r a f i k Hui Dai dai@in.tum.de 26
Auf der Grundlage von und mit Z itaten aus SelfHTML von Münz/Nefzger (Version 8.1 vom 25.03.2005) --> http://de.selfhtml.org/ Hinweis: Ein Beispiel zur Übung finden Sie unter http://home.in.tum.de/~dai/ Hui Dai dai@in.tum.de 27
Danke für die Aufmerksamkeit! Hui Dai dai@in.tum.de 28