XHTML & CSS
Lektionen 5-8




 © 2009 by Noël Bossart
welcome.

                          « The internet,
                            it will never catch on. »
                ...
Ablauf heute
               XHTML Syntax

        XHTML Elemente kennenlernen
Pause


                 CSS Syntax

       ...
?
?
σύνταξις
σύνzusammen ταξιςOrdnung




   Modernes Webdesign Seite 21
XHTML Syntax
Wir haben bereits gesehen, dass wir mit XHTML im
Prinzip einfach einen Text auszeichnen. Also mit
sogenannten...
Titel Anfang
                                   Titel Ende

 XHTML Syntax
 Wir haben bereits gesehen, dass wir mit XHTML i...
Titel Anfang
                                     Titel Ende

   XHTML Syntax
   Wir haben bereits gesehen, dass wir mit X...
Titel Anfang
                                     Titel Ende

   XHTML Syntax
   Wir haben bereits gesehen, dass wir mit X...
XML:

<titel>XHTML Syntax</titel>
<paragraf>Wir haben bereits gesehen, dass wir mit
XHTML im Prinzip einfach einen Text au...
Doctype: XHTML 1.0:

<h1>XHTML Syntax</h1>
<p>
  Wir haben bereits gesehen, dass wir mit XHTML im
  Prinzip einfach einen ...
Tags
Theorie:

<tag>Inhalt</tag>

Praxis:
<a>Eine E-Mail schreiben</a>

Jeder Tag hat einen Anfang und ein Ende. Er Umschl...
Tags
     Anfang
Theorie:

<tag>Inhalt</tag>

Praxis:
<a>Eine E-Mail schreiben</a>

Jeder Tag hat einen Anfang und ein End...
Tags
     Anfang
Theorie:

<tag>Inhalt</tag>
                           Ende
Praxis:
<a>Eine E-Mail schreiben</a>

Jeder T...
Tags
                                        Huhn

     Anfang
Theorie:

<tag>Inhalt</tag>
                           Ende...
Attribute
Theorie:

<tag attribut>Inhalt</tag>

Praxis:
<a href>Eine E-Mail schreiben</a>

Attribute geben den Tags gewiss...
Attribute                       Huhn: Farbe



Theorie:

<tag attribut>Inhalt</tag>

Praxis:
<a href>Eine E-Mail schreiben...
Attribut-Wert
Theorie:

<tag attribut=”Wert”>Inhalt</tag>

Praxis:
<a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben<...
Attribut-Wert
                        Huhn: Farbe: pink
Theorie:

<tag attribut=”Wert”>Inhalt</tag>

Praxis:
<a href=”mail...
XHTML Syntax
Theorie:

<tag attribut=”Wert”>Inhalt</tag>

Praxis:
<a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</...
XHTML Syntax
                                       Susi
Theorie:

<tag attribut=”Wert”>Inhalt</tag>

Praxis:
<a href=”mai...
Verbotene Zeichen
Wie immer, es gibt ein paar Dinge, die verboten sind:
Folgende Zeichen sind im Inhalt verboten und müsse...
XHTML Syntax
Neben Tags welche einen Inhalt umschliessen, gibt es auch
welche, die keinen Inhalt haben. Es sind leere Tags...
XHTML Syntax
Neben Tags welche einen Inhalt umschliessen, gibt es auch
welche, die keinen Inhalt haben. Es sind leere Tags...
XHTML Syntax
Neben Tags welche einen Inhalt umschliessen, gibt es auch
welche, die keinen Inhalt haben. Es sind leere Tags...
XHTML Syntax
Ein solcher leerer Tag kann selbstverständlich auch eines oder
mehrere Attribute enthalten:
Theorie:

<tag at...
XHTML Syntax
Ein solcher leerer Tag kann selbstverständlich auch eines oder
mehrere Attribute enthalten:
Theorie:

<tag at...
XHTML Syntax
Ein solcher leerer Tag kann selbstverständlich auch eines oder
mehrere Attribute enthalten:
Theorie:

<tag at...
Alles hat ein Ende...
Alles was ein Anfang hat, hat ein Ende. Das ist bei
HTML nicht anders – wenn ein Titel-Tag beginnt, ...
Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen...
Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen...
Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen...
Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen...
Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen...
Einrückung
Damit verschachtelte Elemente nicht unübersichtlich
werden, werden die eingeschlossenen Elemente auf
einer neue...
XHTML Syntax Regeln
Tags und Attribute wird immer klein geschrieben

Tags müssen immer geschlossen werden />

Tags müssen ...
XHTML Syntax
   Fehler im Code kann zu
   falscher Darstellung führen
   und behinderten Menschen
   sowie Maschinen (goog...
just do it.
Hausaufgaben




 © 2009 by Noël Bossart
Hausaufgaben
 Kapitel 1.3.5 Seite 37 - 40 und Seit 189 - 200
 Was bedeutet semantisches HTML?
Fehler finden
 Zeichne die Syntaxfehler an und korrigiere sie.
 Es wird davon ausgegangen, dass alle im Code
 vorhandenen T...
hello
hello world.
Grundsätzlicher Aufbau:

<html />

Das <html> Tag umschliesst das gesamte Dokument
(ausser der Doctype Definit...
hello world.
Grundsätzlicher Aufbau:

<html />
   <head />
   Das Head Element enthält grundlegende
   Informationen zum D...
hello world.
Grundsätzlicher Aufbau:

<html />
   <head />


   <body />
   Der Body beinhaltet die eigentliche Seite mit ...
HTML Grundelemente

<html />
  <head />


  <body />




             Modernes Webdesign Seite 188-91
hello world.
Los geht’s, wir erstellt mit dem heute angeeigneten Wissen eine Webseite
mit folgenden Kriterien:

  Liste de...
facelifting.
CSS Syntax




 © 2009 by Noël Bossart   Modernes Webdesign Seite 213+
CSS Einbinden
Inline: Sollte vermieden werden da schwer zu überschreiben und Trennung von
Inhalt und Design nicht gegeben....
CSS Einbinden
Im Head verlinken: Dies ist die beste Methode um CSS einzubinden da sie
Inhalt von Design trennt, und ausser...
CSS Syntax - Aufbau
Aufbau                                 Beispiel

selektor {                             ul li.wichtig ...
Selektoren
Es zählt jeweils die letzte Eigenschaft:             Beispiel:

Element { ... }                                ...
Eigenschaften & Werte
Mehrere CSS Eigenschaften können mittels ; separiert werden und dürfen
nacheinander auf einer Zeile ...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Gewichtung / Spezifität
Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner
Zusammensetzung aus Tags, ID’s und K...
Gewichtung / Spezifität
Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner
Zusammensetzung aus Tags, ID’s und K...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Überschreiben
Werte können sich überschreiben.          Beispiel:

Dabei wird der letzte Wert welcher        h2 {
einem El...
CSS - Ordnung
Lies selbständig Kapitel 8.4 (Seite 219)
aus “Modernes Webdesign”. Falls Du
Fragen hast, löse diese mit dein...
the box model.
Das Box Model




          Modernes Webdesign Kapitel 2.2.5
Das Box Model



   Inhalt




            Modernes Webdesign Kapitel 2.2.5
Das Box Model
            width




   Inhalt




               Modernes Webdesign Kapitel 2.2.5
Das Box Model
            width




   Inhalt




                                                  height
               ...
Das Box Model
             width



  Innenabstand
    Inhalt




                                                    heig...
Das Box Model
             width                         border



  Innenabstand
    Inhalt




                         ...
Das Box Model
                width                        border


Aussenabstand
   Innenabstand
     Inhalt




        ...
Das Box Model

Aussenabstand                             Lorem ipsu
                                          amet, cons
 ...
Das Box Model

margin                                    Lorem ipsu
                                          amet, cons
 ...
Das Box Model

margin                                    Lorem ipsu
                                          amet, cons
 ...
Das Box Model

                                          Lorem ipsu
                                          amet, cons
 ...
Das Box Model... immer?

                                          Lorem ipsu
                                          am...
Das Box Model... immer?

                                          Lorem ipsu
                                          am...
Das Box Model... immer?



                          I N !           Lorem ipsu



                E
                     ...
Box Model Bug
                                                           width

                                   margin
...
CSS Notation
margin:    ;
                   margin
padding:       ;       padding
                            object
CSS Notation
margin:    ;                        top
                          margin
padding:       ;              paddin...
CSS Notation
margin: 10px ;                     top
                         margin
padding: 10px ;              padding

...
CSS Notation
margin-right:   ;
                    margin
padding-left:   ;       padding
                        object
CSS Notation
margin-right: 0 ;
                    margin
padding-left:   ;       padding
                        object
 ...
CSS Notation
margin-right: 0 ;
                           margin
padding-left: 0 ;              padding

                 ...
Short Notation
margin:    ;
                   margin
padding:       ;    padding
                    object
Short Notation
margin:    ;                 top
                   margin
padding:       ;    padding
                    ...
Short Notation
margin: 10px    ;                 top
                        margin
padding: 10px       ;    padding
     ...
Short Notation
margin: 10px    ;                        top
                               margin
padding: 10px       ;   ...
Short Notation
margin: 10px 0 ;                     top
                           margin
padding: 10px 0 ;           padd...
Short Notation
margin: 10px 0 ;             ➊
                           margin
                                     top
p...
Short Notation
margin: 10px 0 ;               ➊
                             margin
                                      ...
CSS Notation
margin:               ;


          margin

            padding
             object
CSS Notation
margin: 10px                  ;

                        top
               margin

                 padding
...
CSS Notation
margin: 10px 0                  ;

                          top
                 margin

                   ...
CSS Notation
margin: 10px 0 20px          ;

                       top
              margin

                padding
    ...
CSS Notation
margin: 10px 0 20px 5px ;

                          top
                 margin

                   padding
...
CSS Notation
margin: 10px 0 20px 5px ;

                  top


          left            right



                 bottom
CSS Notation
padding:                        ;


           margin

             padding
              object




        ...
CSS Notation
padding: 10px 5px 15px 5px ;

                          top
                 margin

                   paddi...
CSS Notation
padding: 10px 5px 15px 5px ;

                   top


          left                 right



              ...
Block vs. Inline




            Modernes Webdesign Seite 69 - 75
Block vs. Inline




            Modernes Webdesign Seite 69 - 75
Block vs. Inline
  Block Elemente nehmen den ganzen Platz ein.




                    Modernes Webdesign Seite 69 - 75
Block vs. Inline
   Block Elemente nehmen den ganzen Platz ein.

 Auch wenn sie ihn nicht brauchen.




                  ...
Block vs. Inline
   Block Elemente nehmen den ganzen Platz ein.

 Auch wenn sie ihn nicht brauchen.

Inline   sind   spars...
Block vs. Inline
   Block Elemente nehmen den ganzen Platz ein.

 Auch wenn sie ihn nicht brauchen.

Inline   sind   spars...
Block vs. Inline
   Block Elemente nehmen den ganzen Platz ein.

 Auch wenn sie ihn nicht brauchen.

Inline    sind   spar...
Block vs. Inline
   Block Elemente nehmen den ganzen Platz ein.

 Auch wenn sie ihn nicht brauchen.

Inline    sind   spar...
find it.
Sherlock Holmes




  © 2009 by Noël Bossart
Sherlock Holmes
Verwende das Bild der Original-Seite als Vorlage und
vervollständige den Code.
Tipp: Beachte die CSS-Dekla...
?
?
home
work
homework
Lesen Modernes Webdesign Seite 213 - 226
“Hello World” HTML fertig machen
Ressourcen public.me.com/noelboss

            Links delicious.com/noelboss+zbw

        Link Feed feeds.delicious.com/rss...
Hello World // MM 08-11
Hello World // MM 08-11
Hello World // MM 08-11
Hello World // MM 08-11
Hello World // MM 08-11
Hello World // MM 08-11
Hello World // MM 08-11
Nächste SlideShare
Wird geladen in …5
×

Hello World // MM 08-11

928 Aufrufe

Veröffentlicht am

MM 08-11 - Präsentation vom 7.12.2009

XHTML Syntax, Grundlagen CSS, Verlinkung, Grundlegender Aufbau einer Webseite

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
928
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
161
Aktionen
Geteilt
0
Downloads
14
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Fragen, Verbesserungsvorschl&amp;#xE4;ge, Kritik, Lob?
  • Little Boxes Seite 46 unten und 47
  • Little Boxes Seite 57
  • Little Boxes Seite 57
  • Little Boxes Seite 57
  • Little Boxes Seite 57
  • Fehler im Code finden (Arbeitsblatt). Ausserdem, was kann man noch besser machen?- Charset- XML Deklaration- CSS einbinden
  • Lies Seite 43 bis 49 als Vertiefung (Little Boxes)
  • Wir gehen durch den Code und besprechen alle Fehler
  • little boxes Seite 43 - 46
  • Die wichtigsten HTML Elemente: little boxes Seite 51...
  • Die wichtigsten HTML Elemente: little boxes Seite 51...
  • little boxes Seite 97
  • little boxes Seite 97
  • little boxes Seite 97
  • little boxes Seite 115 - 118
  • little boxes Seite 118 -124
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 118 - 120
  • &amp;#xDC;bungsblatt
    little boxes Seite 118 - 120
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • Fragen, Verbesserungsvorschl&amp;#xE4;ge, Kritik, Lob?
  • Lies Seite 43 bis 49 als Vertiefung (Little Boxes)
  • Hello World // MM 08-11

    1. 1. XHTML & CSS Lektionen 5-8 © 2009 by Noël Bossart
    2. 2. welcome. « The internet, it will never catch on. » George W. Bush 1986 © 2009 by Noël Bossart
    3. 3. Ablauf heute XHTML Syntax XHTML Elemente kennenlernen Pause CSS Syntax Box Model & Block vs. Inline
    4. 4. ? ?
    5. 5. σύνταξις σύνzusammen ταξιςOrdnung Modernes Webdesign Seite 21
    6. 6. XHTML Syntax Wir haben bereits gesehen, dass wir mit XHTML im Prinzip einfach einen Text auszeichnen. Also mit sogenannten Tags (auch HTML Elemete) gewisse Breiche in einem Text markieren und dem System mitteilen, welcher Art der Bereich ist.
    7. 7. Titel Anfang Titel Ende XHTML Syntax Wir haben bereits gesehen, dass wir mit XHTML im Prinzip einfach einen Text auszeichnen. Also mit sogenannten Tags (auch HTML Elemete) gewisse Breiche in einem Text markieren und dem System mitteilen, welcher Art der Bereich ist.
    8. 8. Titel Anfang Titel Ende XHTML Syntax Wir haben bereits gesehen, dass wir mit XHTML im Prinzip einfach einen Text auszeichnen. Also mit sogenannten Tags (auch HTML Elemete) gewisse Breiche in einem Text markieren und dem System Paragraf Anfang mitteilen, welcher Art der Bereich ist. Paragraf Ende
    9. 9. Titel Anfang Titel Ende XHTML Syntax Wir haben bereits gesehen, dass wir mit XHTML im Wichtig Anfang Prinzip einfach einen Text Wichtig Ende Also mit auszeichnen. sogenannten Tags (auch HTML Elemete) gewisse Breiche in einem Text markieren und dem System Paragraf Anfang mitteilen, welcher Art der Bereich ist. Paragraf Ende
    10. 10. XML: <titel>XHTML Syntax</titel> <paragraf>Wir haben bereits gesehen, dass wir mit XHTML im Prinzip einfach einen Text auszeichnen. Also mit sogenannten <wichtig>Tags</wichtig> gewisse Bereiche in einem Text markieren und dem System mitteilen, welcher Art der Bereich ist.</paragraf>
    11. 11. Doctype: XHTML 1.0: <h1>XHTML Syntax</h1> <p> Wir haben bereits gesehen, dass wir mit XHTML im Prinzip einfach einen Text auszeichnen. Also mit sogenannten <strong>Tags</strong> gewisse Breiche in einem Text markieren und dem System mitteilen, welcher Art der Bereich ist. </p>
    12. 12. Tags Theorie: <tag>Inhalt</tag> Praxis: <a>Eine E-Mail schreiben</a> Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen gewissen Bereich und definiert damit, was dieser Bereich ist. Zum Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite werden durch den Browser nicht angezeigt, sie sind also unsichtbar. Nur deren Inhalt wird dargestellt.
    13. 13. Tags Anfang Theorie: <tag>Inhalt</tag> Praxis: <a>Eine E-Mail schreiben</a> Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen gewissen Bereich und definiert damit, was dieser Bereich ist. Zum Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite werden durch den Browser nicht angezeigt, sie sind also unsichtbar. Nur deren Inhalt wird dargestellt.
    14. 14. Tags Anfang Theorie: <tag>Inhalt</tag> Ende Praxis: <a>Eine E-Mail schreiben</a> Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen gewissen Bereich und definiert damit, was dieser Bereich ist. Zum Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite werden durch den Browser nicht angezeigt, sie sind also unsichtbar. Nur deren Inhalt wird dargestellt.
    15. 15. Tags Huhn Anfang Theorie: <tag>Inhalt</tag> Ende Praxis: <a>Eine E-Mail schreiben</a> Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen gewissen Bereich und definiert damit, was dieser Bereich ist. Zum Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite werden durch den Browser nicht angezeigt, sie sind also unsichtbar. Nur deren Inhalt wird dargestellt.
    16. 16. Attribute Theorie: <tag attribut>Inhalt</tag> Praxis: <a href>Eine E-Mail schreiben</a> Attribute geben den Tags gewisse zusätzliche Eigenschaften mit, um das Tag genauer zu beschreiben oder es um Funktionen zu erweitern. Das Element bestimmt, welche Attribute optional oder zwingend nötig sind. Einem Tag kann auch mehrere Attribute (durch ein Leerzeichen getrennt) zugeordnet werden.
    17. 17. Attribute Huhn: Farbe Theorie: <tag attribut>Inhalt</tag> Praxis: <a href>Eine E-Mail schreiben</a> Attribute geben den Tags gewisse zusätzliche Eigenschaften mit, um das Tag genauer zu beschreiben oder es um Funktionen zu erweitern. Das Element bestimmt, welche Attribute optional oder zwingend nötig sind. Einem Tag kann auch mehrere Attribute (durch ein Leerzeichen getrennt) zugeordnet werden.
    18. 18. Attribut-Wert Theorie: <tag attribut=”Wert”>Inhalt</tag> Praxis: <a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a> Attribute benötigen immer eine Wertzuweisung. Ein alleinstehendes Attribut gibt es nicht (Als Beispiel: nicht nur selected, sondern selected=”selected”). Der Wert wird dem Attribut mit einem Gleichheitszeichen und umschlossen mit einfachen oder zweifachen Anführungszeichen zugewiesen.
    19. 19. Attribut-Wert Huhn: Farbe: pink Theorie: <tag attribut=”Wert”>Inhalt</tag> Praxis: <a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a> Attribute benötigen immer eine Wertzuweisung. Ein alleinstehendes Attribut gibt es nicht (Als Beispiel: nicht nur selected, sondern selected=”selected”). Der Wert wird dem Attribut mit einem Gleichheitszeichen und umschlossen mit einfachen oder zweifachen Anführungszeichen zugewiesen.
    20. 20. XHTML Syntax Theorie: <tag attribut=”Wert”>Inhalt</tag> Praxis: <a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a> Der Inhalt welcher von einem Tag umschlossen wird, kann fast beliebig sein, und stellt den sichtbaren Bereich der Webseite dar, während Tags und Attribute für den Benutzer unsichtbar sind (Attribut-Werte können direkten Einfluss auf die Darstellung haben, wären die Tags höchstens implizit Einflüsse haben). Modernes Webdesign Seite 188
    21. 21. XHTML Syntax Susi Theorie: <tag attribut=”Wert”>Inhalt</tag> Praxis: <a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a> Der Inhalt welcher von einem Tag umschlossen wird, kann fast beliebig sein, und stellt den sichtbaren Bereich der Webseite dar, während Tags und Attribute für den Benutzer unsichtbar sind (Attribut-Werte können direkten Einfluss auf die Darstellung haben, wären die Tags höchstens implizit Einflüsse haben). Modernes Webdesign Seite 188
    22. 22. Verbotene Zeichen Wie immer, es gibt ein paar Dinge, die verboten sind: Folgende Zeichen sind im Inhalt verboten und müssen maskiert werden: > &gt; < &lt; “ &quote; & &amp;
    23. 23. XHTML Syntax Neben Tags welche einen Inhalt umschliessen, gibt es auch welche, die keinen Inhalt haben. Es sind leere Tags. Sie haben also keine separaten Bereich in denen sie geöffnet und geschlossen werden sondern werden in einem Tag geöffnet und geschlossen: Theorie: <tag /> Praxis: <br />
    24. 24. XHTML Syntax Neben Tags welche einen Inhalt umschliessen, gibt es auch welche, die keinen Inhalt haben. Es sind leere Tags. Sie haben also keine separaten Bereich in denen sie geöffnet und geschlossen werden sondern werden in einem Tag geöffnet und geschlossen: Anfang Theorie: <tag /> Praxis: <br />
    25. 25. XHTML Syntax Neben Tags welche einen Inhalt umschliessen, gibt es auch welche, die keinen Inhalt haben. Es sind leere Tags. Sie haben also keine separaten Bereich in denen sie geöffnet und geschlossen werden sondern werden in einem Tag geöffnet und geschlossen: Anfang Theorie: <tag /> Ende Praxis: <br />
    26. 26. XHTML Syntax Ein solcher leerer Tag kann selbstverständlich auch eines oder mehrere Attribute enthalten: Theorie: <tag attribut1=”Wert1” attribut2=”Wert1” /> Praxis: <input type=”button” value=”Senden” />
    27. 27. XHTML Syntax Ein solcher leerer Tag kann selbstverständlich auch eines oder mehrere Attribute enthalten: Theorie: <tag attribut1=”Wert1” attribut2=”Wert1” /> Anfang Praxis: <input type=”button” value=”Senden” />
    28. 28. XHTML Syntax Ein solcher leerer Tag kann selbstverständlich auch eines oder mehrere Attribute enthalten: Theorie: <tag attribut1=”Wert1” attribut2=”Wert1” /> Anfang Praxis: <input type=”button” value=”Senden” /> Ende
    29. 29. Alles hat ein Ende... Alles was ein Anfang hat, hat ein Ende. Das ist bei HTML nicht anders – wenn ein Titel-Tag beginnt, muss er auch irgendwo wieder ein Ende haben. Das selbe gilt auch für Abschnitte, Links und Bilder. Bevor HTML an den XML Standard angelehnt wurde, musste man nicht alle Tags schliessen. XML verlangt jedoch zwingend, dass alles immer geschlossen werden muss. So erhält man eine strukturierte Übersicht über ein Dokument.
    30. 30. Verschachtelung First in, last out. XHTML Elemente können verschachtelt werden. So kann ein Abschnitt beispielsweise einen Link enthalten, und ein Block einen Abschnitt. Dies nennt man den Dokument-Baum oder auch DOM (Document Object Model). Wichtig ist, dass die Tags in der richtigen Reihenfolge geschlossen werden. Der Tag der zuerst geöffnet wurde, muss zuletzt geschlossen werden: <p> Suche auf <a href=”www.google.com”>google</a>! </p>
    31. 31. Verschachtelung First in, last out. XHTML Elemente können verschachtelt werden. So kann ein Abschnitt beispielsweise einen Link enthalten, und ein Block einen Abschnitt. Dies nennt man den Dokument-Baum oder auch DOM (Document Object Model). Wichtig ist, dass die Tags in der richtigen Reihenfolge geschlossen werden. Der Tag der zuerst geöffnet wurde, muss 1 zuletzt geschlossen werden: <p> Suche auf <a href=”www.google.com”>google</a>! </p>
    32. 32. Verschachtelung First in, last out. XHTML Elemente können verschachtelt werden. So kann ein Abschnitt beispielsweise einen Link enthalten, und ein Block einen Abschnitt. Dies nennt man den Dokument-Baum oder auch DOM (Document Object Model). Wichtig ist, dass die Tags in der richtigen Reihenfolge geschlossen werden. Der Tag der zuerst geöffnet wurde, muss 1 zuletzt geschlossen werden: 2 <p> Suche auf <a href=”www.google.com”>google</a>! </p>
    33. 33. Verschachtelung First in, last out. XHTML Elemente können verschachtelt werden. So kann ein Abschnitt beispielsweise einen Link enthalten, und ein Block einen Abschnitt. Dies nennt man den Dokument-Baum oder auch DOM (Document Object Model). Wichtig ist, dass die Tags in der richtigen Reihenfolge geschlossen werden. Der Tag der zuerst geöffnet wurde, muss 1 zuletzt geschlossen werden: 2 <p> Suche auf <a href=”www.google.com”>google</a>! </p> 3
    34. 34. Verschachtelung First in, last out. XHTML Elemente können verschachtelt werden. So kann ein Abschnitt beispielsweise einen Link enthalten, und ein Block einen Abschnitt. Dies nennt man den Dokument-Baum oder auch DOM (Document Object Model). Wichtig ist, dass die Tags in der richtigen Reihenfolge geschlossen werden. Der Tag der zuerst geöffnet wurde, muss 1 zuletzt geschlossen werden: 2 <p> Suche auf <a href=”www.google.com”>google</a>! </p> 3 4
    35. 35. Einrückung Damit verschachtelte Elemente nicht unübersichtlich werden, werden die eingeschlossenen Elemente auf einer neuen Zeile und eingerückt geschrieben:
    36. 36. XHTML Syntax Regeln Tags und Attribute wird immer klein geschrieben Tags müssen immer geschlossen werden /> Tags müssen immer richtig verschachtelt sein XHTML Dokumente haben immer nur 1 Root-Element (<html>) Tags können ein oder mehrere, bestimmte Attribute haben Attribute haben immer einen Wert und sind immer mit “” versehen Jedes id und name Attribut muss mit einem Buchstaben beginnen und darf im Dokument nur einmal vorkommen
    37. 37. XHTML Syntax Fehler im Code kann zu falscher Darstellung führen und behinderten Menschen sowie Maschinen (google) den Zugriff erschweren oder verunmöglichen!
    38. 38. just do it. Hausaufgaben © 2009 by Noël Bossart
    39. 39. Hausaufgaben Kapitel 1.3.5 Seite 37 - 40 und Seit 189 - 200 Was bedeutet semantisches HTML?
    40. 40. Fehler finden Zeichne die Syntaxfehler an und korrigiere sie. Es wird davon ausgegangen, dass alle im Code vorhandenen Tags grundsätzlich erlaubt sind.
    41. 41. hello
    42. 42. hello world. Grundsätzlicher Aufbau: <html /> Das <html> Tag umschliesst das gesamte Dokument (ausser der Doctype Definition) und dient als absolutes Elternelement (auch Root-Element). Es ist meist unsichtbar. Modernes Webdesign Seite 188
    43. 43. hello world. Grundsätzlicher Aufbau: <html /> <head /> Das Head Element enthält grundlegende Informationen zum Dokument wie Titel, Sprache, Zusammenfassung und Links auf benötigte Dateien wie CSS und JavaScript Files. Es ist unsichtbar. Modernes Webdesign Seite 190
    44. 44. hello world. Grundsätzlicher Aufbau: <html /> <head /> <body /> Der Body beinhaltet die eigentliche Seite mit allen Inhalten. Es ist der sichtbare Bereich der Webseite. Modernes Webdesign Seite 191
    45. 45. HTML Grundelemente <html /> <head /> <body /> Modernes Webdesign Seite 188-91
    46. 46. hello world. Los geht’s, wir erstellt mit dem heute angeeigneten Wissen eine Webseite mit folgenden Kriterien: Liste der persönliche Daten (Name, Adresse, E-Mail etc. Hobbies) Foto von sich falls vorhanden, oder sonst ein Bild einer Person Links zu den Seiten der Banknachbarn (links & rechts) Nummerierte Link-Liste mit persönlichen Lieblingswebseiten Externe CSS-Datei einbinden Wichtige Tags: Modernes Webdesign Seite 194-208
    47. 47. facelifting. CSS Syntax © 2009 by Noël Bossart Modernes Webdesign Seite 213+
    48. 48. CSS Einbinden Inline: Sollte vermieden werden da schwer zu überschreiben und Trennung von Inhalt und Design nicht gegeben. <tag style=”eigenschaft1: wert1 wert2;” /> <h1 style=”color: #ff0000;”>Hallo Welt</h1> Direkt im head-Tag: Sollte vermieden werden weil der weitere Aufbau der Seite dadurch verzögert wird, bis das CSS geladen ist. Ausserdem ist die Trennung von Design und Inhalt nicht gegeben. <head> <style type="text/css" media="screen"> h1 { color: #ff0000; } </style> </head>
    49. 49. CSS Einbinden Im Head verlinken: Dies ist die beste Methode um CSS einzubinden da sie Inhalt von Design trennt, und ausserdem auch Performance Vorteile hat – Caching der Dateien, Weiterladen der Seite wärend das CSS geladen wird, weniger Code als bei Inline Styles, usw. <head> <link type="text/css" rel="stylesheet" href="css/main.css" /> <link type="text/css" rel="stylesheet" href="css/forms.css" /> <link type="text/css" rel="stylesheet" href="css/print.css" media= "print"/> </head> Tipp: Es können auch mehrere CSS-Dateien eingebunden werden. Sollten zwei Rules in Konflikt miteinander geraten, wird diejenige aus dem zuletzt geladenen File Anwendung finden. Modernes Webdesign Kapitel 8.1 & 8.3
    50. 50. CSS Syntax - Aufbau Aufbau Beispiel selektor { ul li.wichtig { eigenschaft1: wert1 wert2; font-weight: bold; eigenschaft2: wert1 wert2 wert3; border: 1px solid #f5a5e6; } } Modernes Webdesign Kapitel 8
    51. 51. Selektoren Es zählt jeweils die letzte Eigenschaft: Beispiel: Element { ... } ul li { ... } Klassen { ... } .wichtig { ... } Pseudo-Klassen { ... } a:hover { ... } ID’s { ... } #hauptmenu { ... } Kombination: tag#id tag.klasse tag { ... } ul#main li.wichtig a { ... } Mehrere Selektoren: selektor1, selektor2 { ... } h1, h2, .titel { ... } Modernes Webdesign Seite 213
    52. 52. Eigenschaften & Werte Mehrere CSS Eigenschaften können mittels ; separiert werden und dürfen nacheinander auf einer Zeile stehen. CSS Ignoriert Leerzeichen zwischen Eigenschaften. Die meisten Eigenschaften können einen oder mehrere Werte haben: border: 3px dotted blue; color: red; margin: 0px 12px 3em; padding-right: 2%; background: red url(verlauf.jpg) repeat-x top left; overflow: hidden; float: left; font: italic normal bold 1em/1.5em Arial, sans-serif; Modernes Webdesign Kapitel 8.2
    53. 53. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung Modernes Webdesign Kapitel 8.3 und Seite 29-30
    54. 54. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung Modernes Webdesign Kapitel 8.3 und Seite 29-30
    55. 55. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität Modernes Webdesign Kapitel 8.3
    56. 56. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität enu li { col or: blue; } ul#m ul li { colo r: yellow; } li.box { co lor: red; } #menu lor: grey; } l i.wichtig { co li { colo r: black; } Modernes Webdesign Kapitel 8.3
    57. 57. Gewichtung / Spezifität Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner Zusammensetzung aus Tags, ID’s und Klassen ergibt. Für die Deklaration immer die schwächst mögliche Form wählen damit sich Werte überschreiben lassen! Tags = 1 Punkt Klassen = 10 Punkte ID’s = 100 Punkte Inline-Styles = 1000 Punkte !important = 8 Important wenn immer möglich vermeiden! Modernes Webdesign Kapitel 8.3
    58. 58. Gewichtung / Spezifität Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner Zusammensetzung aus Tags, ID’s und Klassen ergibt. Für die Deklaration immer die schwächst mögliche Form wählen damit sich Werte überschreiben lassen! Tags = 1 Punkt Klassen = 10 Punkte ul li = 2 ID’s = 100 Punkte li.wichtig = 11 Inline-Styles = 1000 Punkte ul#menu li.box a = 113 !important = u l#menu = 101 8 li a:hover = 12 Important wenn immer möglich <p style=”...”></p> = 1000 vermeiden! Modernes Webdesign Kapitel 8.3
    59. 59. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität 3. Sortieren nach Reihenfolge im CSS Modernes Webdesign Kapitel 8.3
    60. 60. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität body { 3. Sortieren nach Reihenfolge im CSS color: red; color: blue; color: yellow; } Modernes Webdesign Kapitel 8.3
    61. 61. Überschreiben Werte können sich überschreiben. Beispiel: Dabei wird der letzte Wert welcher h2 { einem Element zugeordnet wird border: 1px solid red ; verwendet. border-color: blue; Sich überschreibende Werte können } auch an unterschiedlichen Stellen in der CSS Datei, in einem anderen File, oder Der Rand ist blau. sogar direkt im HTML stehen. Es ist daher wichtig, eine gute Ordnung im CSS zu behalten. Modernes Webdesign Kapitel 8.3
    62. 62. CSS - Ordnung Lies selbständig Kapitel 8.4 (Seite 219) aus “Modernes Webdesign”. Falls Du Fragen hast, löse diese mit deinem Partner.
    63. 63. the box model.
    64. 64. Das Box Model Modernes Webdesign Kapitel 2.2.5
    65. 65. Das Box Model Inhalt Modernes Webdesign Kapitel 2.2.5
    66. 66. Das Box Model width Inhalt Modernes Webdesign Kapitel 2.2.5
    67. 67. Das Box Model width Inhalt height Modernes Webdesign Kapitel 2.2.5
    68. 68. Das Box Model width Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
    69. 69. Das Box Model width border Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
    70. 70. Das Box Model width border Aussenabstand Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
    71. 71. Das Box Model Aussenabstand Lorem ipsu amet, cons Innenabstand adipiscing Inhalt Quisque ve sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    72. 72. Das Box Model margin Lorem ipsu amet, cons adipiscing Inhalt Quisque ve sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    73. 73. Das Box Model margin Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    74. 74. Das Box Model Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    75. 75. Das Box Model... immer? Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    76. 76. Das Box Model... immer? Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    77. 77. Das Box Model... immer? I N ! Lorem ipsu E amet, cons N adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    78. 78. Box Model Bug width margin padding Modernes Webdesign Kapitel 6.8.8 Normal height margin padding height IE kleiner 7
    79. 79. CSS Notation margin: ; margin padding: ; padding object
    80. 80. CSS Notation margin: ; top margin padding: ; padding left object right bottom
    81. 81. CSS Notation margin: 10px ; top margin padding: 10px ; padding left object right bottom
    82. 82. CSS Notation margin-right: ; margin padding-left: ; padding object
    83. 83. CSS Notation margin-right: 0 ; margin padding-left: ; padding object right
    84. 84. CSS Notation margin-right: 0 ; margin padding-left: 0 ; padding left object right
    85. 85. Short Notation margin: ; margin padding: ; padding object
    86. 86. Short Notation margin: ; top margin padding: ; padding object bottom
    87. 87. Short Notation margin: 10px ; top margin padding: 10px ; padding object bottom
    88. 88. Short Notation margin: 10px ; top margin padding: 10px ; padding left object right bottom
    89. 89. Short Notation margin: 10px 0 ; top margin padding: 10px 0 ; padding left object right bottom
    90. 90. Short Notation margin: 10px 0 ; ➊ margin top padding: 10px 0 ; padding left object right bottom
    91. 91. Short Notation margin: 10px 0 ; ➊ margin top padding: 10px 0 ; padding ➋ left object right bottom
    92. 92. CSS Notation margin: ; margin padding object
    93. 93. CSS Notation margin: 10px ; top margin padding object
    94. 94. CSS Notation margin: 10px 0 ; top margin padding object right
    95. 95. CSS Notation margin: 10px 0 20px ; top margin padding object right bottom
    96. 96. CSS Notation margin: 10px 0 20px 5px ; top margin padding object left right bottom
    97. 97. CSS Notation margin: 10px 0 20px 5px ; top left right bottom
    98. 98. CSS Notation padding: ; margin padding object Modernes Webdesign Seite 220+221
    99. 99. CSS Notation padding: 10px 5px 15px 5px ; top margin padding object left right bottom Modernes Webdesign Seite 220+221
    100. 100. CSS Notation padding: 10px 5px 15px 5px ; top left right bottom Modernes Webdesign Seite 220+221
    101. 101. Block vs. Inline Modernes Webdesign Seite 69 - 75
    102. 102. Block vs. Inline Modernes Webdesign Seite 69 - 75
    103. 103. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Modernes Webdesign Seite 69 - 75
    104. 104. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Modernes Webdesign Seite 69 - 75
    105. 105. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Modernes Webdesign Seite 69 - 75
    106. 106. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Inline Elemente sind nur so gross wie ihr Inhalt & brechen am Zeilenende um. Modernes Webdesign Seite 69 - 75
    107. 107. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Inline Elemente sind nur so gross wie ihr Inhalt & brechen am Zeilenende um. Block erzwingt immer einen Umbruch. Modernes Webdesign Seite 69 - 75
    108. 108. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Inline Elemente sind nur so gross wie ihr Inhalt & brechen am Zeilenende um. Block erzwingt immer einen Umbruch. Selbst wenn etwas daneben Platz hätte. Modernes Webdesign Seite 69 - 75
    109. 109. find it. Sherlock Holmes © 2009 by Noël Bossart
    110. 110. Sherlock Holmes Verwende das Bild der Original-Seite als Vorlage und vervollständige den Code. Tipp: Beachte die CSS-Deklarationen um Hinweise zu erhalten, welche HTML Elemente fehlen und welche Klassen und ID’s sie haben.
    111. 111. ? ?
    112. 112. home work
    113. 113. homework Lesen Modernes Webdesign Seite 213 - 226 “Hello World” HTML fertig machen
    114. 114. Ressourcen public.me.com/noelboss Links delicious.com/noelboss+zbw Link Feed feeds.delicious.com/rss/noelboss/zbw Fragen & Feedback noel.zbw@me.com more.

    ×