Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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.

Ähnliche Präsentationen


Präsentation zum Thema: "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."—  Präsentation transkript:

1 XHTML+CS S C3O 2003

2 XHTML+CS S

3 01 EINFÜHRUNG XHTMLbeschreibt Inhalt semantisch: Das ist eine Überschrift x-ter Hierarchie Das gehört betont Das ist ein Zitat CSSformatiert diesen Inhalt Überschriften x-ter Hierarchie sind rot, fett, und mit 20px Abstand Betonte Stellen sind fett gedruckt

4 XHTML+CS S 02 XHTML XHTML besteht aus Tags inhalt inhaltlos: hierarchisch angeordnet, verschachtelt XHTML-Regeln: alles klein geschrieben alle Attribute unter Anführungszeichen alle Tags geschlossen korrekte Verschachtelung XHTML+CS S 02 XHTML XHTML besteht aus Tags inhalt inhaltlos: hierarchisch angeordnet, verschachtelt XHTML-Regeln: (HTML nach XML-Regeln) alles klein geschrieben alle Attribute unter Anführungszeichen alle Tags geschlossen korrekte Verschachtelung

5 XHTML+CS S 03 XHTML XHTML-Grundgerüst Meine erste XHTML-Seite Hallo Welt!

6 XHTML+CS S 04 XHTML XHTML-Grundgerüst Meine erste XHTML-Seite Hallo Welt! Welcher (X)HTML-Standard?

7 XHTML+CS S 05 XHTML XHTML-Grundgerüst Meine erste XHTML-Seite Hallo Welt! Die HTML-Seite beginnt. Sie besteht aus 2 Teilen:

8 XHTML+CS S 06 XHTML XHTML-Grundgerüst Meine erste XHTML-Seite Hallo Welt! 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)

9 XHTML+CS S 07 XHTML XHTML-Grundgerüst Meine erste XHTML-Seite Hallo Welt! Der Titel -- für Browserfenster, Bookmarks usw. Welcher Zeichensatz ver- wendet wurde: Am besten Unicode (utf-8) oder Western (iso )

10 XHTML+CS S 08 XHTML XHTML-Grundgerüst Meine erste XHTML-Seite Hallo Welt! Und da der ganze Rest rein…

11 XHTML+CS S 02 XHTML XHTML+CS S 09 XHTML XHTML-Tags Struktur Absätze Container Schrift … Listen Links Multimedia CSS & JS Tabellen Formulare

12 XHTML+CS S 02 XHTML XHTML+CS S 10 XHTML XHTML-Tags Absätze Ich bin der erste Absatz. Und ich der zweite. Zweizeilig.

13 XHTML+CS S 02 XHTML XHTML+CS S 11 XHTML XHTML-Tags Container Ich bin der erste Absatz. Und ich der zweite. Zweizeilig.

14 XHTML+CS S 02 XHTML XHTML+CS S 12 XHTML XHTML-Tags Schrift … Eine wichtige Überschrift Eine weniger wichtige Ein wichtiges Wort, und ein betontes.

15 XHTML+CS S 02 XHTML XHTML+CS S 13 XHTML XHTML-Tags Listen Listeneintrag 1 Listeneintrag 2 …

16 XHTML+CS S 02 XHTML XHTML+CS S 14 XHTML XHTML-Tags Links In XHTML kann man nicht definieren, ob ein Link ein neues Fenster öffnen soll. Das geht nur mehr mit JavaScript. Hier sind zwei Wörter verlinkt

17 XHTML+CS S 02 XHTML XHTML+CS S 15 XHTML XHTML-Tags Multimedia alt alternativer Text, falls das Bild nicht angezeigt wird titleTooltip, Ergänzung zum Bild Das alt-Attribut ist Pflicht, wenn es keinen sinnvollen Inhalt haben kann, leer lassen: Bild: Die FH JOANNEUM im Sonnen- untergang

18 02 PORTFOLI O 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

19 PORTFOLI O STRUKTUR 17 Aufgabe: HTML-Vorlagen für die beiden Seiten anlegen Übersichtsseite/Liste Detailansicht eines Projektes Mit folgenden HTML-Tags Absätze Container Schrift … Listen Links Multimedia

20 XHTML+CS S 02 CSS 14 CSS: Orte der Anwendung Extern: für mehrere HTML-Dokumente auf einmal Head: Style-Tag: fürs aktuelle Dokument Head: … Inline (Style-Attribut): für genau ein Element

21 XHTML+CS S 02 CSS 14 Anwendung auf… IDs HTML-Element bekommt eindeutige ID, dieser wird Stil gegeben z.B. ein Logo, das genau positioniert ist: Klassen wie IDs, nur nicht eindeutig: mehrere HTML- Elemente können gleiche Klasse haben z.B. Menübuttons: Tags Bestimmten HTML-Tags immer die gleiche Formatierung geben z.B. hat Schriftart X, ist immer rot, usw.

22 XHTML+CS S 02 CSS 14 CSS-Schreibweise #idname {z.B. #logo css-eigenschaft:wert; }.klassenname {z.B..menu css-eigenschaft:wert; } tagname {z.B. h1 css-eigenschaft:wert; }

23 XHTML+CS S 02 CSS 14 CSS-Schreibweise 2 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 }

24 XHTML+CS S 02 CSS 14 CSS-Eigenschaften Positionierungposition left right top bottom width height float clear Containerborder margin padding -right/-left/-top/-bottom overflow overflow-x overflow-y Typographiefont-family font-weight font-size color line-height text-decoration letter-spacing line-indent … Hintergrundbackground-color background-image background-attachment Druckpage-break-after Transparenz-moz-opacity/filter:alpha()

25 XHTML+CS S 02 CSS 14 CSS-Einheiten Abstände & Größenpx 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; URLsurl('datei.ext') z.B. background-image:url('bg.gif');

26 XHTML+CS S 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. margin border padding width laut IE 5 width laut Standard Lorem ipsum…

27 XHTML+CS S 02 CSS 14 CSS-Eigenschaften im Detail Positionierungposition 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 relativezur logischen Position fixedzum Browserfenster. Scrollt nicht mit! left, top, right, bottomAbstand width, heightGröße (IE: height = mind. 1 Zeilenhöhe)

28 XHTML+CS S 02 CSS 14 CSS-Eigenschaften im Detail Positionierungposition left right top bottom width height float clear float: left right float:left; float:right;float:left; (2x)

29 XHTML+CS S 02 CSS 14 CSS-Eigenschaften im Detail Containerborder margin padding -right/-left/-top/-bottom overflow overflow-x overflow-y border :breite solid farbe -rightdashed -leftdotted -topinset -bottomoutset ridge none z.B.: border:2px solid pink;border-right:1px dotted #FCC;

30 XHTML+CS S 02 CSS 14 CSS-Eigenschaften im Detail Positionierungposition 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 relativezur logischen Position fixedzum Browserfenster. Scrollt nicht mit! left, top, right, bottomAbstand width, heightGröße (IE: height = mind. 1 Zeilenhöhe)

31 XHTML+CS S 02 CSS 14 CSS-Eigenschaften im Detail Positionierungposition 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 relativezur logischen Position fixedzum Browserfenster. Scrollt nicht mit! left, top, right, bottomAbstand width, heightGröße (IE: height = mind. 1 Zeilenhöhe)


Herunterladen ppt "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."

Ähnliche Präsentationen


Google-Anzeigen