1 / 31

XHTML+CSS

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

sloane-fitzgerald
Download Presentation

XHTML+CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XHTML+CSS C3O 2003

  2. XHTML+CSS XHTML+CSS

  3. 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

  4. XHTML+CSS XHTML+CSS XHTML XHTML 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 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 02 02

  5. 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> <bodylang="de"> Hallo Welt! </body> </html> 03

  6. 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

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

  8. 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

  9. 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

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

  11. 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> 02 09

  12. XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Absätze <p> <br /> <p> Ich bin der erste Absatz. </p> <p> Und ich der zweite.<br /> Zweizeilig. </p> 02 10

  13. XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Container <div> <span> <div> <p> Ich bin der <span>erste Absatz</span>. </p> <p> Und ich der zweite.<br /> Zweizeilig. </p> </div> 02 11

  14. XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Schrift <h1> … <h6> <strong> <em> <h1>Eine wichtige &Uuml;berschrift</h1> <h2>Eine weniger wichtige</h2> <p> Ein <strong>wichtiges</strong> Wort, und ein <em>betontes</em>. </p> 02 12

  15. XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Listen <ul> <li> <ul> <li>Listeneintrag 1</li> <li>Listeneintrag 2</li> <li> … </li> </ul> 02 13

  16. 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&ouml;rter</a> verlinkt 02 14

  17. XHTML+CSS XHTML+CSS XHTML XHTML XHTML-Tags Multimedia <img> <object> alt alternativer Text, falls das Bild nicht angezeigt wird title Tooltip, Ergänzungzum 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" /> 02 15

  18. 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 02 16

  19. 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

  20. 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="…"> 02 14

  21. 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. 02 14

  22. XHTML+CSS CSS CSS-Schreibweise <style type="text/css"> #idname { z.B. #logo css-eigenschaft:wert; } .klassenname { z.B. .menu css-eigenschaft:wert; } tagname { z.B. h1 css-eigenschaft:wert; } </style> 02 14

  23. 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 css-eigenschaft:wert; } #idname p { alle Absätze die innerhalb des css-eigenschaft:wert; Elements mit dieser ID sind } </style> 02 14

  24. 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 Druckpage-break-after Transparenz-moz-opacity/filter:alpha() 02 14

  25. 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'); 02 14

  26. Lorem ipsum… XHTML+CSS CSS CSS Box Model 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. marginborderpadding width laut IE 5width laut Standard 02 14

  27. 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. Elternelementrelative zur logischen Positionfixed zum Browserfenster. Scrollt nicht mit! left, top, right, bottom Abstand width, height Größe (IE: height = mind. 1 Zeilenhöhe) 02 14

  28. 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) 02 14

  29. XHTML+CSS CSS CSS-Eigenschaften im Detail Container border margin padding -right/-left/-top/-bottom overflow overflow-x overflow-y border :breitesolidfarbe -rightdashed -left dotted -top inset -bottom outset ridge none z.B.: border:2px solid pink; border-right:1px dotted #FCC; 02 14

  30. 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. Elternelementrelative zur logischen Positionfixed zum Browserfenster. Scrollt nicht mit! left, top, right, bottom Abstand width, height Größe (IE: height = mind. 1 Zeilenhöhe) 02 14

  31. 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. Elternelementrelative zur logischen Positionfixed zum Browserfenster. Scrollt nicht mit! left, top, right, bottom Abstand width, height Größe (IE: height = mind. 1 Zeilenhöhe) 02 14

More Related