XHTML+CSS C3O 2003
XHTML+CSS XHTML+CSS
XHTML+CSS EINFÜHRUNG XHTML beschreibt Inhalt semantisch: „Das ist eine Überschrift x-ter Hierarchie“ „Das gehört betont“ „Das ist ein Zitat“ CSS formatiert diesen Inhalt „Überschriften x-ter Hierarchie sind rot, fett, und mit 20px Abstand“ „Betonte Stellen sind fett gedruckt“ 01
XHTML+CSS XHTML+CSS XHTML XHTML XHTML besteht aus Tags <tag attributname="attributwert"> inhalt </tag> inhaltlos: <tag /> hierarchisch angeordnet, verschachtelt XHTML-Regeln: (HTML nach XML-Regeln) alles klein geschrieben alle Attribute unter Anführungszeichen alle Tags geschlossen korrekte Verschachtelung XHTML besteht aus Tags <tag attributname="attributwert"> inhalt </tag> inhaltlos: <tag /> hierarchisch angeordnet, verschachtelt XHTML-Regeln: alles klein geschrieben alle Attribute unter Anführungszeichen alle Tags geschlossen korrekte Verschachtelung 02 02
XHTML+CSS XHTML XHTML-Grundgerüst <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Meine erste XHTML-Seite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body lang="de"> Hallo Welt! </body> </html> 03
Welcher (X)HTML-Standard? XHTML+CSS XHTML XHTML-Grundgerüst <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Meine erste XHTML-Seite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body lang="de"> Hallo Welt! </body> </html> Welcher (X)HTML-Standard? 04
XHTML+CSS XHTML XHTML-Grundgerüst <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Meine erste XHTML-Seite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body lang="de"> Hallo Welt! </body> </html> Die HTML-Seite beginnt. Sie besteht aus 2 Teilen: 05
Im Head werden Meta-Informationen angegeben XHTML+CSS XHTML XHTML-Grundgerüst <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Meine erste XHTML-Seite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body lang="de"> Hallo Welt! </body> </html> Im Head werden Meta-Informationen angegeben Der Body enthält das, was auf der Seite angezeigt werden soll. Als lang-Attribut die Sprache des Inhalts (de = deutsch) 06
Der Titel -- für Browserfenster, XHTML+CSS XHTML XHTML-Grundgerüst <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Meine erste XHTML-Seite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body lang="de"> Hallo Welt! </body> </html> Der Titel -- für Browserfenster, Bookmarks usw. Welcher Zeichensatz ver- wendet wurde: Am besten Unicode (utf-8) oder Western (iso-8895-1) 07
Und da der ganze Rest rein… XHTML+CSS XHTML XHTML-Grundgerüst <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Meine erste XHTML-Seite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body lang="de"> Hallo Welt! </body> </html> Und da der ganze Rest rein… 08
XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Struktur <html> <head> <body> <title> <meta> Absätze <p> <br /> Container <div> <span> Schrift <h1> … <h6> <strong> <em> Listen <ul> <li> Links <a> Multimedia <img> <object> CSS & JS <style> <link> <script> Tabellen <table> <tr> <td> Formulare <form> <input> <textarea> <select> <label> 09 02
XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Absätze <p> <br /> <p> Ich bin der erste Absatz. </p> Und ich der zweite.<br /> Zweizeilig. 10 02
XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Container <div> <span> <div> <p> Ich bin der <span>erste Absatz</span>. </p> Und ich der zweite.<br /> Zweizeilig. </div> 11 02
XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Schrift <h1> … <h6> <strong> <em> <h1>Eine wichtige Überschrift</h1> <h2>Eine weniger wichtige</h2> <p> Ein <strong>wichtiges</strong> Wort, und ein <em>betontes</em>. </p> 12 02
XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Listen <ul> <li> <ul> <li>Listeneintrag 1</li> <li>Listeneintrag 2</li> <li> … </li> </ul> 13 02
XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Links <a> In XHTML kann man nicht definieren, ob ein Link ein neues Fenster öffnen soll. Das geht nur mehr mit JavaScript. Hier sind <a href="zielseite.html">zwei Wörter</a> verlinkt 14 02
XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Multimedia <img> <object> alt alternativer Text, falls das Bild nicht angezeigt wird title Tooltip, Ergänzung zum Bild Das alt-Attribut ist Pflicht, wenn es keinen sinnvollen Inhalt haben kann, leer lassen: <img src="bla.jpg" alt="" /> <img src="fh.jpg" alt="Bild: Die FH JOANNEUM im Sonnen- untergang" title="Die FH JOANNEUM" /> 15 02
PORTFOLIO GRUNDÜBERLEGUNGEN Was soll die Portfolio-Website können? Projekte nach bestimmten Kriterien aus einer Datenbank auslesen und auflisten Kriterien: Zeit, Thema, … 2 Arten von Seiten: Übersichtsseite/Liste Detailansicht eines Projektes 16 02
PORTFOLIO STRUKTUR Aufgabe: HTML-Vorlagen für die beiden Seiten anlegen Übersichtsseite/Liste Detailansicht eines Projektes Mit folgenden HTML-Tags Absätze <p> <br /> Container <div> <span> Schrift <h1> … <h6> <strong> <em> Listen <ul> <li> Links <a> Multimedia <img> 17
XHTML+CSS CSS CSS: Orte der Anwendung Extern: für mehrere HTML-Dokumente auf einmal Head: <link rel="stylesheet" href="datei.css" type="text/css" /> Style-Tag: fürs aktuelle Dokument Head: <style type="text/css"> … </a> Inline (Style-Attribut): für genau ein Element <tag style="…"> 14 02
XHTML+CSS CSS Anwendung auf… IDs HTML-Element bekommt eindeutige ID, dieser wird Stil gegeben z.B. ein Logo, das genau positioniert ist: <div id="name"> Klassen wie IDs, nur nicht eindeutig: mehrere HTML- Elemente können gleiche Klasse haben z.B. Menübuttons: <img class="name"> Tags Bestimmten HTML-Tags immer die gleiche Formatierung geben z.B. <h1> hat Schriftart X, <strong> ist immer rot, usw. 14 02
XHTML+CSS CSS CSS-Schreibweise <style type="text/css"> #idname { z.B. #logo css-eigenschaft:wert; } .klassenname { z.B. .menu tagname { z.B. h1 </style> 14 02
XHTML+CSS CSS CSS-Schreibweise 2 <style type="text/css"> p.klassenname { alle p-Tags mit dieser Klasse css-eigenschaft:wert; } #idname, #idname2 { beide IDs haben denselben Stil #idname p { alle Absätze die innerhalb des css-eigenschaft:wert; Elements mit dieser ID sind </style> 14 02
XHTML+CSS CSS CSS-Eigenschaften Positionierung position left right top bottom width height float clear Container border margin padding -right/-left/-top/-bottom overflow overflow-x overflow-y Typographie font-family font-weight font-size color line-height text-decoration letter-spacing line-indent … Hintergrund background-color background-image background-attachment Druck page-break-after Transparenz -moz-opacity/filter:alpha() 14 02
XHTML+CSS CSS CSS-Einheiten Abstände & Größen px pt em % cm in … z.B.: border-right:20px; font-size:200%; Farben #AABBCC #ABC rgb(1,2,3) farbnamen z.B.: border-color:black; URLs url('datei.ext') z.B. background-image:url('bg.gif'); 14 02
XHTML+CSS CSS CSS Box Model margin border padding Abhilfe: Standardkonformen Browsern sagen, sie sollen wie IE5 messen: div { -moz-box-sizing:border-box; box-sizing:border-box; } Und IE6 keinen gültigen Doctype erkennen lassen. Lorem ipsum… margin border padding width laut IE 5 width laut Standard 14 02
XHTML+CSS CSS CSS-Eigenschaften im Detail Positionierung position left right top bottom width height float clear Elemente haben eine logische Position -- die Eigenschaft position bringt sie aus dieser heraus Neue Position im Verhältnis… position: absolute zum nächsten absolut pos. Elternelement relative zur logischen Position fixed zum Browserfenster. Scrollt nicht mit! left, top, right, bottom Abstand width, height Größe (IE: height = mind. 1 Zeilenhöhe) 14 02
XHTML+CSS CSS CSS-Eigenschaften im Detail Positionierung position left right top bottom width height float clear float: left right float:left; float:right; float:left; (2x) 14 02
XHTML+CSS CSS CSS-Eigenschaften im Detail Container border margin padding -right/-left/-top/-bottom overflow overflow-x overflow-y border :breite solid farbe -right dashed -left dotted -top inset -bottom outset ridge none z.B.: border:2px solid pink; border-right:1px dotted #FCC; 14 02
XHTML+CSS CSS CSS-Eigenschaften im Detail Positionierung position left right top bottom width height float clear Elemente haben eine logische Position -- die Eigenschaft position bringt sie aus dieser heraus Neue Position im Verhältnis… position: absolute zum nächsten absolut pos. Elternelement relative zur logischen Position fixed zum Browserfenster. Scrollt nicht mit! left, top, right, bottom Abstand width, height Größe (IE: height = mind. 1 Zeilenhöhe) 14 02
XHTML+CSS CSS CSS-Eigenschaften im Detail Positionierung position left right top bottom width height float clear Elemente haben eine logische Position -- die Eigenschaft position bringt sie aus dieser heraus Neue Position im Verhältnis… position: absolute zum nächsten absolut pos. Elternelement relative zur logischen Position fixed zum Browserfenster. Scrollt nicht mit! left, top, right, bottom Abstand width, height Größe (IE: height = mind. 1 Zeilenhöhe) 14 02