XHTML+CS S C3O 2003. XHTML+CS S 01 EINFÜHRUNG XHTMLbeschreibt Inhalt semantisch: Das ist eine Überschrift x-ter Hierarchie Das gehört betont Das ist

XHTML+CSSC3O 2003

XHTML+CSS

XHTML+CSS

XHTML+CSS

01

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“

XHTML+CSS

02

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+CSS

02

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+CSS

03

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>

XHTML+CSS

04

XHTML

XHTML-Grundgerüst


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

XHTML+CSS

05

XHTML

XHTML-Grundgerüst




Hallo Welt!</body>

</html>

Die HTML-Seite beginnt.Sie besteht aus 2 Teilen:

XHTML+CSS

06

XHTML

XHTML-Grundgerüst




Hallo Welt!</body>

</html>

Im Head werden Meta-Informationen angegeben

Der Body enthält das, was auf derSeite angezeigt werden soll.Als lang-Attribut die Sprache desInhalts (de = deutsch)

XHTML+CSS

07

XHTML

XHTML-Grundgerüst


<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 bestenUnicode (utf-8) oderWestern (iso-8895-1)

XHTML+CSS

08

XHTML

XHTML-Grundgerüst




Hallo Welt!</body>

</html>

Und da der ganze Rest rein…

XHTML+CSS

02

XHTMLXHTML+CSS

09

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>

XHTML+CSS

02

XHTMLXHTML+CSS

10

XHTML

XHTML-Tags

Absätze <p> <br />

<p>Ich bin der erste Absatz.

</p><p>

Und ich der zweite.<br />Zweizeilig.

</p>

XHTML+CSS

02

XHTMLXHTML+CSS

11

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>

XHTML+CSS

02

XHTMLXHTML+CSS

12

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>

XHTML+CSS

02

XHTMLXHTML+CSS

13

XHTML

XHTML-Tags

Listen <ul> <li>

<ul><li>Listeneintrag 1</li><li>Listeneintrag 2</li><li> … </li>

</ul>

XHTML+CSS

02

XHTMLXHTML+CSS

14

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

XHTML+CSS

02

XHTMLXHTML+CSS

15

XHTML

XHTML-Tags

Multimedia <img> <object>

alt alternativer Text, falls das Bild nicht angezeigt wirdtitle 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" />

02

PORTFOLIO

16

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

PORTFOLIO

STRUKTUR

17

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>

XHTML+CSS

02

CSS

14

CSS: Orte der Anwendung

Extern: für mehrere HTML-Dokumente auf einmalHead: <link rel="stylesheet" href="datei.css"

type="text/css" />

Style-Tag: fürs aktuelle DokumentHead: <style type="text/css"> … </a>

Inline (Style-Attribut): für genau ein Element<tag style="…">

XHTML+CSS

02

CSS

14

Anwendung auf…

IDsHTML-Element bekommt eindeutige ID,dieser wird Stil gegebenz.B. ein Logo, das genau positioniert ist: <div

id="name">Klassen

wie IDs, nur nicht eindeutig: mehrere HTML-Elemente können gleiche Klasse habenz.B. Menübuttons: <img class="name">

TagsBestimmten HTML-Tags immer die gleiche

Formatierung gebenz.B. <h1> hat Schriftart X, <strong> ist immer

rot, usw.

XHTML+CSS

02

CSS

14

CSS-Schreibweise

<style type="text/css">#idname { z.B. #logo

css-eigenschaft:wert;}.klassenname {

z.B. .menucss-eigenschaft:wert;

}tagname { z.B. h1

css-eigenschaft:wert;}

</style>

XHTML+CSS

02

CSS

14

CSS-Schreibweise 2

<style type="text/css">p.klassenname { alle p-Tags mit dieser Klasse

css-eigenschaft:wert;}#idname, #idname2 { beide IDs haben

denselben Stilcss-eigenschaft:wert;

}#idname p { alle Absätze die innerhalb

descss-eigenschaft:wert;Elements mit dieser ID sind

}</style>

XHTML+CSS

02

CSS

14

CSS-Eigenschaften

Positionierung position left right top bottom width height float clearContainer border margin padding -right/-left/-top/-bottom

overflow overflow-x overflow-yTypographie font-family font-weight font-size color line-height

text-decoration letter-spacing line-indent …Hintergrund background-color background-image

background-attachmentDruck page-break-afterTransparenz -moz-opacity/filter:alpha()

XHTML+CSS

02

CSS

14

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');

XHTML+CSS

02

CSS

14

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

Lorem ipsum…

XHTML+CSS

02

CSS

14

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)

XHTML+CSS

02

CSS

14



float: left right

float:left; float:right; float:left; (2x)

XHTML+CSS

02

CSS

14


Container border margin padding -right/-left/-top/-bottomoverflow overflow-x overflow-y

border :breite solid farbe-right dashed-left dotted-top inset-bottom outset

ridgenone

z.B.: border:2px solid pink; border-right:1px dotted #FCC;

XHTML+CSS

02

CSS

14






mit!


XHTML+CSS

02

CSS

14






mit!


Documents

XHTML+CS S C3O 2003. XHTML+CS S 01 EINFÜHRUNG XHTMLbeschreibt Inhalt semantisch: Das ist eine Überschrift x-ter Hierarchie Das gehört betont Das ist