HTML und CSS Kurs
Werbung
Agenda Einleitung Grundelemente Übungen Résumé HTML und CSS Kurs Christoph Neumann Student der Informatik, FAU Erlangen-Nürnberg Seminar Fit@Webdesign, THA Gummersbach, 17.-19. September 2004 Christoph Neumann HTML und CSS Kurs 1/36 Agenda Einleitung Grundelemente Übungen Résumé Inhaltsübersicht 1 2 Einleitung Benötigte Programme (X)HTML-Grundgerüst Doctype Grundelemente Text Bilder CSS-Einführung Links Anchors Christoph Neumann 3 Übungen HTML-Kit Erste Seite Vorschau Inhalte Shortcuts Plug-ins HTML und CSS Kurs 2/36 Agenda Einleitung Grundelemente Übungen Résumé Benötigte Programme (X)HTML-Grundgerüst Doctype Benötigte Programme Praktisch keine Voraussetzungen! HTML ist reiner (ASCII-)Text. Wenn man alle Elemente von HTML und CSS mehr oder weniger auswendig beherrscht, dann reicht der simpelste Texteditor wie notepad aus. ASCII: American Standard Code for Information Interchange [ ASCII beinhaltet keinerlei Sonderzeichen, wie dt. Umlaute. Ebenso die Codierung von asiat., hebrä. oder arab. Zeichen erfordert (eine später diskutierte) Vorgehensweise. ] Trotzdem kann man sich das Editieren durch einige Programme einfacher machen (hier nur Windows-Freeware!): HTML-Kit – HTML Source-code Editor Nvu – WYSIWYG TopStyle – CSS Editor Mozilla ActiveX Control – Gecko als Browser-preview FTP-Uploader – für späteren Upload ins Internet HTML-Kit Plug-ins: includeHTML , w3c offline Referenzen Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé HTML und CSS Kurs 3/36 Benötigte Programme (X)HTML-Grundgerüst Doctype (X)HTML-Grundgerüst <!DOCTYPE h t m l PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN ” ” h t t p : //www . w3 . o r g /TR/ x h t m l 1 /DTD/ xhtml1− s t r i c t . d t d ”> <h t m l x m l n s=” h t t p : //www . w3 . o r g /1999/ x h t m l ”> <head> < t i t l e > T i t e l t e x t d e r S e i t e</ t i t l e > </ head> <body> . . . TEXT . . . </ body> </ h t m l> Das html-Element beinhaltet zwei Elemente: das head- und das body-Element. Das head-Element beinhaltet Metadaten über die Seite. Das body-Element enthält den eigentlichen (vom Browser angezeigten) Inhalt. Christoph Neumann HTML und CSS Kurs 4/36 Agenda Einleitung Grundelemente Übungen Résumé Zusammenfassung Noch Fragen? Agenda Einleitung Grundelemente Übungen Résumé Zusammenfassung Doctype – von HTML und XML zu XHTML+CSS HTML als Auszeichnungssprache brauchte (wie jede Programmiersprache auch!) 10 Jahre, von 1990 bis 2000, um über ihre Kinderkrankheiten hinwegzukommen. Im Jahr 1999 endete mit HTML 4.01 der Sprachzweig, der Inhalt/Struktur und Präsentation vermischte. Im Jahr 2000 wurde XHTML in Version 1.0 standardisiert. XHTML enthält ausschließlich Inhalt und Struktur, entsprechend dem XML-Vorbild. Die Präsentations-Elemente sind vollständig durch die Cascading Style Sheet (CSS) Sprache ersetzt worden. Im diesem ersten Teil des Seminars haben wir kennengelernt: 1 Doctype und Grundgerüst 2 Text und Überschriften 3 Bilder 4 CSS – Erste Einführung 5 Links and Anchors 6 HTML-Kit – Installation und erste Schritte Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé Benötigte Programme (X)HTML-Grundgerüst Doctype HTML und CSS Kurs Vorteil Die strikte Trennung erlaubt die einfachere Verarbeitung und Erstellung von HTML. (Browser-Implementierung, Konformität in der Anzeige, ...) 35/36 Zusammenfassung Noch Fragen? Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé Noch Fragen? HTML und CSS Kurs 5/36 Benötigte Programme (X)HTML-Grundgerüst Doctype Doctype(2) Der Vollständigkeit halber soll angegeben werden wie ein HTML 4.01 Dokument deklariert wird: <!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4 . 0 1 T r a n s i t i o n a l //EN ” ” h t t p : //www . w3 . o r g /TR/ h t m l 4 / l o o s e . d t d ”> <h t m l> . . . Folien erstellt mit LATEX (MiKTeX), TeXnicCenter Editor und den latex-beamer Klassen. Folien erhältlich unter http://www.8ung.at/chr15t0ph/pdf/htmlSeminar.pdf Die Verknüpfung von (X)HTML und CSS findet im html-Dokument statt: Christoph Neumann – Quellcode der Folien auf Anfrage: [email protected] <head> . . . < l i n k r e l =” s t y l e s h e e t ” t y p e=” t e x t / c s s ” h r e f=” y o u r C S S f i l e . c s s ” media=” a l l ” /> </ head> (Der Laie möge beachten, dass dies auch auf viele andere Arten möglich wäre, z.B. in Form einer dritten Datei, die als Katalog-Datei die Zuweisung zwischen HTML- und CSS-Dateien beschreiben könnte.) Christoph Neumann HTML und CSS Kurs 36/36 Christoph Neumann HTML und CSS Kurs 6/36 Agenda Einleitung Grundelemente Übungen Résumé Benötigte Programme (X)HTML-Grundgerüst Doctype Doctype(3) – XHTML als XML Agenda Einleitung Grundelemente Übungen Résumé HTML-Kit – Keyboard Shortcuts(2) 1 2 <? xml v e r s i o n=”1 . 0 ”?> <!DOCTYPE . . . XHTML . . . Agenda Einleitung Grundelemente Übungen Résumé 3 Copy Output to Editor “Shortcut key”: Ctrl-Shift-Alt-C “New Command” À “Menu command”: “MCopyOutputToEditor” 7/36 Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé Text Bilder CSS-Einführung Links Anchors Text – Absätze und Zeilenumbrüche HTML und CSS Kurs 33/36 HTML-Kit Erste Seite Vorschau Inhalte Shortcuts Plug-ins HTML-Kit – Plug-ins Zusätzlich noch die wichtigsten HTML-Kit Plug-ins: Normaler Fließtext ist meist in verschiedene Absätze unterteilt. In html deklariert das paragraph-Tag einen Absatz: 1 includeHTML “Next”, “Yes”, “Next”, wähle “Full installation”, “Next”, “Next”, “Next”, “Install” ... (dann: deaktiviere “run” und “open help” Auswahl) “Finish” <p> . . . ganz v i e l A b s a t z Text . . . </p> 2 Browser zeigen Absätze meist durch eine Zeilenabstand etwas abgesetzt von anderen Elementen (wie z.B. anderen Absätzen) an. Möchte man (z.B. innerhalb eines Absatzes) einen Zeilenumbruch – der sich im Gegensatz zu einem neuen Absatz nicht absetzt – dann benötigt man das break-Tag: Beachte: Die obigen Plug-ins sind mit die einzigen, die einen eigenen Installer Diese spezielle Schreibweise mit dem “/” am Ende des Tags, erspart ein Ende-Tag zu schreiben. Es wird immer dann eingesetzt, wenn ein Tag für sich selbst steht und keinen Text umschließt. (z.B. auch Bilder: img-Tag → siehe später) HTML und CSS Kurs w3c offline Referenzen “Next”, “Yes”, “Next”, “Install” ... “Finish” HTML-Kit starten, und unter [Edit À Preferences À Help:“Help Options”] die Option “Use only local keyword help files” aktivieren!) Mit F1 wird in der Editor-Ansicht dann die kontext-sensitive Referenz aufgerufen. <b r /> Christoph Neumann HTML Tidy: Beautify “Shortcut key”: Ctrl-Shift-Alt-B “New Command” À “Action”: “Tools > HTML Tidy” plus “Indent tags / beautify” Allerdings sollte im Moment darauf verzichtet werden, weil: ... unvollständiger Browser-Support ... ... HTML-Engine versus XML-Engine ... HTML und CSS Kurs HTML Tidy “Shortcut key”: Ctrl-Shift-Alt-T “New Command” À “Action”: “Tools > HTML Tidy” plus “Convert to XHTML” Ausserdem macht alleine die Doctype-Deklaration eines XHTML-Dokuments dieses Dokument noch nicht zu gültigem XML. Dies wird erst durch folgenden Zusatz gewährleistet: Christoph Neumann HTML-Kit Erste Seite Vorschau Inhalte Shortcuts Plug-ins mitbringen. Normalerweise laufen Plug-in Installationen aus dem gestartetem HTML-Kit heraus – über: [Tools À Install À “Install Plugin...”]. 8/36 Christoph Neumann HTML und CSS Kurs 34/36 Agenda Einleitung Grundelemente Übungen Résumé HTML-Kit Erste Seite Vorschau Inhalte Shortcuts Plug-ins HTML-Kit – Text-Inhalte Agenda Einleitung Grundelemente Übungen Résumé Text Bilder CSS-Einführung Links Anchors Text(2) – Überschriften Freies üben Bitte jetzt einige Überschriften und Absätze eingeben. Ein bisschen CSS: z.B. Schriftart auf Arial. Dann vielleicht ein Bild einbinden? Schließlich mindestens einen Link setzen (z.B. zu www.google.de). Nach Lust und Laune Anchors setzen und “anspringende” Links erstellen. Überschriften (= headings) gibt es in sechs Stufen: <h1>Ü b e r s c h r i f t d e r S t u f e 1</ h1> ... <h6>Ü b e r s c h r i f t d e r S t u f e 6</ h6> Diese werden von Browsern meist in unterschiedlicher Größe dargestellt. Aber nicht vorschnell sein!! Unter keinen Umständen ungeduldig sein! Auf keinen Fall ausprobieren: Listen und Tabellen. Immer eins nach dem anderen! Noch ein paar erleichternde Tips zu Keyboard Shortcuts auf den folgenden Folien: p.t.o. → Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé HTML und CSS Kurs 31/36 HTML-Kit Erste Seite Vorschau Inhalte Shortcuts Plug-ins HTML-Kit – Keyboard Shortcuts Links Das geschützte Leerzeichen (&nbsp), die Umlaute ä (&auml;) ö (&ouml;) ü (&uuml;), (&euro;) und das Copyright Zeichen das scharfe ß (&szlig;), das Euro Zeichen (&copy;). “¿ Add” nicht vergessen, erst dann “OK” Nicht auswendig merken! Anchors Mit HTML Tidy, integriert in HTML-Kit, läßt sich die Zeichentransformation automatisieren. Es dürfen also deutsche Zeichen eingegeben werden! “Shortcut key”: Ctrl-Shift-A “New Command” À “Instert text”: <a i d=”{{SELTEXT } } | ”></ a>{{SELTEXT}} HTML und CSS Kurs Text Bilder CSS-Einführung Links Anchors Beispiele <a h r e f=” | ”>{{SELTEXT}}</ a> Christoph Neumann 9/36 Viele Zeichen sind in der ASCII-Kodierung nicht enthalten, z.B. deutsche Umlaute. Daher muss man sie mit einer speziellen ASCII-codierten Zeichenkette umschreiben. “Shortcut key”: Ctrl-Shift-L “New Command” À “Instert text”: 2 Agenda Einleitung Grundelemente Übungen Résumé HTML und CSS Kurs Text(3) – Zeichenkodierung Keyboard Shortcuts kann man eingeben unter: [Tools À Customize À “Customize Keyboard Shortcuts...” (Ctrl-F10) && “Add...”] 1 Christoph Neumann 32/36 Christoph Neumann HTML und CSS Kurs 10/36 Agenda Einleitung Grundelemente Übungen Résumé Text Bilder CSS-Einführung Links Anchors Agenda Einleitung Grundelemente Übungen Résumé Bilder HTML-Kit Erste Seite Vorschau Inhalte Shortcuts Plug-ins HTML-Kit – Die erste HTML Seite 1 Bilder können durch einen Verweis auf die Bild-Datei “eingefügt” werden. Dies geschieht mit dem image-Tag: 2 <img a l t=”XHTML Logo ” s r c=”l o g o / v a l i d −xhtml − 1 . 0 . g i f ” h e i g h t=”15 px ” w i d t h=”80 px ” /> Das src=“”-Attribut gibt den Dateinamen an. Da das Bild erst durch den Browser eingefügt wird, und da es auch nicht-graphische Browser gibt (z.B. für Behinderte oder auch Linux-User ;-), sollte immer mit dem alt=“”-Attribut ein ersatzweiser Text angegeben werden. Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé HTML und CSS Kurs Schließlich erscheint der Standard-Begrüßungs-Wizard: Und wir können gleich mal “Create a new file” mit “OK” bestätigen. Wir löschen als erstes mit Strg+A (“alles markieren”) und Delete das Standard-Grundgerüst, weil es für das veraltete HTML 4.01 ist. Dann erstellt man das XHTML 1.0 Grundgerüst ganz einfach mit: [Actions À Document À “HTML 4.01 Document - Transitional” À “XHTML 1.0 Document - Strict”] (Der Zwischenmenü-Eintrag “HTML 4.01 Document Transitional” heisst so, weil’s der erste Eintrag in der darauffolgenden List ist. Blöd, is’ aber so ;-) Das Menü unter [Actions] ist übrigens über die Symbolleiste eins-zu-eins abgebildet! Also [SymbL À Document À [rechtestes Symb→Dropdown] À “XHTML 1.0 Document Strict”] 11/36 Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé Text Bilder CSS-Einführung Links Anchors CSS-Einführung – Einbindung oder Einbettung in XHTML HTML und CSS Kurs 29/36 HTML-Kit Erste Seite Vorschau Inhalte Shortcuts Plug-ins HTML-Kit – Browser-Vorschau Einleitung: CSS ist eine unmittelbare Ergänzung zu (X)HTML 1 CSS dient zur Definition von Formateigenschaften einzelner html-Tags 2 Die Taste F12 toggelt zwischen der “Editor”- und der “Preview”-Ansicht Gleich mal ausprobieren: mehrmals F12 drücken! In der Preview-Ansicht kann auch statt IE die Gecko Engine verwendet werden: Am unteren Rand der Preview-Ansicht auf [ Gecko Mode ] klicken. Möglichkeit: Formate zentral zu verwalten – spart Kodierarbeit und macht die HTML-Dateien kleiner Aktuelle Version: CSS 2.0 Drei Orte CSS Auszeichnungen zu schreiben: 1 In externer Datei (referenziert im Header) 2 Im html-Header 3 Tag-lokal (im style=“”-Attribut eines Tags) Christoph Neumann HTML und CSS Kurs Wir schreiben einen kurzen Text zwischen die body-Tags ... Browser-Vorschau: 12/36 Christoph Neumann HTML und CSS Kurs 30/36 Agenda Einleitung Grundelemente Übungen Résumé Text Bilder CSS-Einführung Links Anchors Agenda Einleitung Grundelemente Übungen Résumé Anchors(2) CSS-Einführung(2) – CSS in externer Datei Beachte: Der Anchor-Name entspricht der Id des a-Tags Um einen Anchor anzuspringen, muss man der entsprechenden Id ein # voranstellen. Man kann auch Anchors von “aussen” anspringen: Im html-Header wird die externe CSS Datei referenziert: <head> . . . < l i n k r e l =” s t y l e s h e e t ” t y p e=” t e x t / c s s ” h r e f=” y o u r C S S f i l e . c s s ” media=” a l l ” /> </ head> <p>So v e r w e i s e n w i r von ”a u s s e n ” <a h r e f=” h t t p : //www. 8 ung . a t / c h r 1 5 t 0 p h / w e b P u b l i s h i n g . h t m l#W e b S p a c e P r o v i d e r F r e e ”> i n e i n e m e i n e r S e i t e n h i n e i n</ a> . </p> In der yourCSSfile.css Datei steht dann einfach: body { f o n t −f a m i l y : A r i a l , s a n s − s e r i f ; c o l o r : #333333; b a c k g r o u n d : White ; } Überholt Seit XHTML 1.0 kann im Grunde jedes Element mit eigener Id durch einen #-Link angesprungen werden! Dadurch sind a-Tags für Ansprungpunkte eigentlich nicht mehr von Bedeutung! (In HTML gab es das name=“”-Attribut, anstelle der Id!) Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé HTML und CSS Kurs 27/36 HTML-Kit Erste Seite Vorschau Inhalte Shortcuts Plug-ins HTML-Kit – Installation 2 2 13/36 Text Bilder CSS-Einführung Links Anchors <head> . . . < s t y l e t y p e=” t e x t / c s s ”> <!−− body { f o n t −f a m i l y : A r i a l , s a n s − s e r i f ; c o l o r : #333333; b a c k g r o u n d : White ; } −−> </ s t y l e> . . . </ head> Das war’s schon. Jetzt wird in HTML-Kit die Gecko-Engine als Preview-Möglichkeit funktionieren. Klicke “Ja”, “Next”, “Yes”, “Next”, “Next” (Full Installation), “Next” und “Install” ... “Finish” HTML-Kit wird das erste mal gestartet: “Yes”, “OK” (Windows Integration Fenster), “Yes”; dann “No” (Download Web Links now?), “No” (Check for Updates) und “No” (take a web tour?) Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé HTML und CSS Kurs CSS kann für jede html-Datei einzeln definiert werden: “Install” ... “Close” Jetzt installieren wir HTML-Kit: 1 Christoph Neumann CSS-Einführung(3) – Im Header eingebettetes CSS Als erstes installieren wir als Vorbereitung “Mozilla ActiveX Control v1.6”: 1 Text Bilder CSS-Einführung Links Anchors HTML und CSS Kurs 28/36 Christoph Neumann HTML und CSS Kurs 14/36 Agenda Einleitung Grundelemente Übungen Résumé Text Bilder CSS-Einführung Links Anchors Agenda Einleitung Grundelemente Übungen Résumé CSS-Einführung(4) – Tag-lokales CSS Text Bilder CSS-Einführung Links Anchors Links(4) – Spezielles CSS Wenn der Benutzer einen Link schon besucht hat, weiß der Browser davon und ist in der Lage unbesuchte Links (a:link) und besuchte Links (a:visited) eine jeweils andere Farbe zu geben. Dies ist wiederum durch CSS steuerbar: Im style=“”-Attribut eines jeden Tags können lokale CSS Auszeichnungen beschrieben werden: a:link , <body s t y l e =”f o n t −f a m i l y : A r i a l , s a n s − s e r i f ; c o l o r : #333333; b a c k g r o u n d : White ; ” > ... </ body> a:visited , a:hover { c o l o r : #006699; t e x t −d e c o r a t i o n : none ; } a : v i s i t e d { c o l o r : #004466; } a : h o v e r { t e x t −d e c o r a t i o n : u n d e r l i n e ; } a:hover bestimmt das aussehen des Links, wenn der Benutzer den Maus-Cursor über den Link bewegt. Ausserdem sahen wir hier auch ein Beispiel, wie sich Definitionen für ein und dasselbe Element auch durchaus verteilen darf. Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé HTML und CSS Kurs 15/36 Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé Text Bilder CSS-Einführung Links Anchors CSS-Einführung(5) – CSS-Selektoren HTML und CSS Kurs 25/36 Text Bilder CSS-Einführung Links Anchors Anchors → anchor-Tag mit id= Die Formatierung durch CSS kann anhand von drei Kategorien vorgenommen werden: Das anchor-Tag, das zur Definition von HyperLinks dient, hat auch noch eine andere Bedeutung: Er erlaubt Anchors/“Ansprungspunkte” zu deklarieren, v.a. im Text, die dann z.B. durch eine Navigationsleiste angesprungen werden können. Tag-Namen Klassen (→ html class=“”-Attribut) Identifikatoren (→ html id=“”-Attribut) <a i d=”b e l i e b i g e r A n c h o r N a m e ”></ a>An d i e s e kann man p e r L i n k v e r w e i s e n . . . Tags derselben Klasse können mehrfach in einem html-Dokument vorkommen. Ein Tag mit einer spez. ID darf nur genau einmal ein einem html-Dokument existieren. Vererbung Stelle Und j e t z t v e r w e i s e n w i r an d i e <a h r e f=”#b e l i e b i g e r A n c h o r N a m e ”> S t e l l e m i t dem Anchor</ a> . CSS Formatierung eines übergeordneten Tags werden auf eingeschlossene Tags vererbt. Zum Beispiel gilt die “font”-Angabe des body-Tags für alle in body eingeschlossenen Tags – solange nicht eine Tag-spezifischere CSS-Formatierung dies “überschreibt”. Christoph Neumann HTML und CSS Kurs 16/36 Christoph Neumann HTML und CSS Kurs 26/36 Agenda Einleitung Grundelemente Übungen Résumé Text Bilder CSS-Einführung Links Anchors Agenda Einleitung Grundelemente Übungen Résumé Links(2) – Sprechend versus Nicht-sprechend Text Bilder CSS-Einführung Links Anchors CSS-Einführung(6) – CSS-Selektoren(2) Bsp: Ein nicht-sprechender Link: Den Download zu HTML−K i t f i n d e n S i e <a h r e f=” h t t p : //www . chami . com/ html−k i t / d ow n loa d / ”> h i e r</ a> . Bsp: Formate für HTML-Tags Bsp: Besser – aber nicht wirklich sprechend: p { ... } p, i { ... } p i { ... } HTML−K i t kann man k o s t e n l o s <a h r e f=” h t t p : //www . chami . com/ html−k i t / d ow n loa d / ”>d o w n l o a d e n</ a> . <p>YES<p> < i>YES</ i> <p>NO< i>YES</ i><p> < i>NO</ i> Bsp: Formate auf Basis der html-Klasse . classNameBeliebig { . . . } . classNameBeliebig { . . . } p . classNameBeliebig { . . . } Bsp: Jetzt der sprechende Link: <a h r e f=” h t t p : //www . chami . com/ html−k i t / ”>HTML−K i t</ a> kann man k o s t e n l o s d o w n l o a d e n . Bsp: Formate auf Basis einer html-ID So soll’s sein – Sprechend2 #i d N a m e B e l i e b i g { . . . } #i d N a m e B e l i e b i g { . . . } p#i d N a m e B e l i e b i g { . . . } <a h r e f=” h t t p : //www . chami . com/ html−k i t / ”>HTML−K i t</ a> kann man k o s t e n l o s <a h r e f=” h t t p : //www . chami . com/ html−k i t / d ow n loa d / ”>d o w n l o a d e n</ a> . Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé HTML und CSS Kurs 23/36 Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé Text Bilder CSS-Einführung Links Anchors Links(3) – Verlinkte Bilder HTML und CSS Kurs 17/36 Text Bilder CSS-Einführung Links Anchors CSS-Einführung(7) – CSS-Selektoren(3) advanced Es gibt noch weitere Möglichkeiten für verschachtelte HTML-Elemente: Um ein Bild mit einem HyperLink zu unterlegen, muss man das Bild einfach nur in ein a-Tag geben: <a h r e f=” h t t p : //www . w3 . o r g /TR/ x h t m l 1 / ”> <img a l t=”XHTML Logo ” s r c=”l o g o / v a l i d −xhtml − 1 . 0 . g i f ” h e i g h t=”15 px ” w i d t h=”80 px ” /> </ a> Genau eine Ebene unterhalb: div > p { . . . } <d i v> <p>YES</p> <p>YES</p> </ d i v> Genau zwei Ebenen unterhalb: In der Regel werden Browser dann das gesamte Bild mit einem Rahmen umgeben. Wenn man das nicht möchte muss man für solche Bilder eine CSS-Regel angeben: div i { ... } <d i v> < i>NO</ i> <p> . . < i>YES</ i> . . </p> </ d i v> Elemente unmittelbar auf ein Element folgenend: div + p { . . . } a img { b o r d e r : none ; } <d i v> <p>YES</p> <p>NO</p> </ d i v> “+” wird von den Browsern (leider) noch nicht gut unterstützt! Christoph Neumann HTML und CSS Kurs 24/36 Christoph Neumann HTML und CSS Kurs 18/36 Agenda Einleitung Grundelemente Übungen Résumé Text Bilder CSS-Einführung Links Anchors Agenda Einleitung Grundelemente Übungen Résumé CSS-Einführung(8) – Ausrichtung von Bildern Text Bilder CSS-Einführung Links Anchors CSS-Einführung(10) – Ausrichtung von Bildern(3) Bilder kann man durch CSS verschieden ausrichten: <img a l t=”XHTML Logo ” s r c=”l o g o / v a l i d −xhtml − 1 . 0 . g i f ” h e i g h t=”15 px ” w i d t h=”80 px ” s t y l e =” f l o a t : r i g h t ; p a d d i n g : 0 px 10 px 0 px 10 px ; m a r g i n : 0 5 px 5 px 0 ; ” /> Statt “absolute” gibt es z.B. auch “relative”: Wenn das Bild z.B. innerhalb eines speziellen Bereichs (div-Tag → später!) steht, der eine gewisse Position einnimmt, dann wird bei “relative” das Bild relativ zum umgebenden Bereich positioniert Neben “absolute” und “relative” gibt es auch “fixed”. Dies wirkt ähnlich zu “absolute”. Doch während “absolute” zur ganzen Seite hin positioniert, wirkt “fixed” bezüglich des Browser-Fensters! D.h. beim Scrollen des Inhalt wird das “position: fixed;”-positionierte Element nicht gescrollt! “float:” sorgt für eine “Textumfließung” und richtet das Bild am rechten oder linken Rand aus. (Nur nachfolgender Text wird zur Umfließung verwendet!) “padding:” ist der Rand nach aussen “margin:” ist der Rand nach innen Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé HTML und CSS Kurs 19/36 Christoph Neumann Agenda Einleitung Grundelemente Übungen Résumé Text Bilder CSS-Einführung Links Anchors CSS-Einführung(9) – Ausrichtung von Bildern(2) HTML und CSS Kurs 21/36 Text Bilder CSS-Einführung Links Anchors Links → anchor-Tag mit href= Man kann Bilder auch pixelgenau positionieren: Das eine Elemente durch das sich HTML im wesentlichen definiert ist der HyperLink: <img i d=” t e s t ” a l t=”XHTML Logo ” s r c=”l o g o / v a l i d −xhtml − 1 . 0 . g i f ” h e i g h t=”15 px ” w i d t h=”80 px ” /> <a h r e f=” h t t p : //www. 8 ung . a t / c h r 1 5 t 0 p h / ”>TEXT d e r nun v e r l i n k i s t</ a> img#t e s t { position: absolute ; t o p : 100 px ; l e f t : 300 px ; } Eine der wichtigsten Unterscheidungen ist die zwischen: Sprechende Links “top:” und “left:” sind Abstandsangaben (Es gibt auch “bottom:” und “right:”) Nicht-sprechende Links p.t.o → Durch “position: absolute” gelten die Abstände immer relativ zur gesamten html-Seite. Christoph Neumann HTML und CSS Kurs 20/36 Christoph Neumann HTML und CSS Kurs 22/36
