Benutzerfreundliches     Webdesign  Technische Grundlagen
InhaltWebstandards (X)HTML    CSS
Webstandards
Was steckt dahinter? W3C (World Wide Web Consortium) Standardisierte Sprachen, u.a.  HTML/XHTML  XML  Cascading Style Shee...
Worum geht es dabei? Zugänglichkeit und Nutzen Lebensdauer von Dokumenten Vereinfachen des Codes
Wie soll daserreicht werden?
Trennung von …Struktur    (X)HTMLAussehen    CSSVerhalten   JavaScript
Valider CodeKontrollierteDarstellung
Was bringt das?Zunächst AnlaufwiderstandKontrollierte DarstellungKlarere Struktur des InhaltsLeichtere Pflege (v.a. im Team...
(X)HTML
Aufbau eines (X)HTML Tags
Wichtige Attribute<p class="hervorgehoben">WichtigerText</p><div id="inhalt"> … Inhalt … </div>
(X)HTML-Regeln  Kleinschreibung  Tags korrekt verschachtelt  Tags immer geschlossen
Doctypes<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">      ...
Semantisches Markup       Nicht-semantisch                      Semantisch<font                               <h1>Hauptübe...
Frames: nicht zu empfehlen       Drucken       URL & Bookmarks       Webseite ≠ Webseite       Suchmaschinen       Mobile ...
(X)HTML ist nurstrukturierter Inhalt
Komplette Website =  (X)HTML + CSS
NEUHTML 5
Grundlage: HTML 4 – nichts vergessen,nur dazulernenAnpassung an heutige Bedürfnisse  Direkte Videowiedergabe  Layout-Eleme...
CSSCascading Stylesheets
XHTML ⚭ CSS<head>… <link rel="stylesheet" type="text/css" href="meinstylesheet.css" />…</head>
Wie funktioniert CSS?
h1 { font-size: 3em;}h1, h2, h3, h4, h5, h6, p { font-family: Verdana, Arial, sans-serif; }#inhalt { margin: 0 0 25px 0; }...
Wichtige CSS Eigenschaftenfont-size, font-family … kurz: fontline-heightcolorbackground-color, background-image … kurz:bac...
Ans Werk!
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
Nächste SlideShare
Wird geladen in …5
×

Fortbildung Schulwebsite: Technische Grundlagen

2.359 Aufrufe

Veröffentlicht am

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.359
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
956
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Fortbildung Schulwebsite: Technische Grundlagen

  1. 1. Benutzerfreundliches Webdesign Technische Grundlagen
  2. 2. InhaltWebstandards (X)HTML CSS
  3. 3. Webstandards
  4. 4. Was steckt dahinter? W3C (World Wide Web Consortium) Standardisierte Sprachen, u.a. HTML/XHTML XML Cascading Style Sheets (CSS) ECMAScript 262 („JavaScript“)
  5. 5. Worum geht es dabei? Zugänglichkeit und Nutzen Lebensdauer von Dokumenten Vereinfachen des Codes
  6. 6. Wie soll daserreicht werden?
  7. 7. Trennung von …Struktur (X)HTMLAussehen CSSVerhalten JavaScript
  8. 8. Valider CodeKontrollierteDarstellung
  9. 9. Was bringt das?Zunächst AnlaufwiderstandKontrollierte DarstellungKlarere Struktur des InhaltsLeichtere Pflege (v.a. im Team)Schnellere LadezeitenNutzbarkeit auch in Zukun
  10. 10. (X)HTML
  11. 11. Aufbau eines (X)HTML Tags
  12. 12. Wichtige Attribute<p class="hervorgehoben">WichtigerText</p><div id="inhalt"> … Inhalt … </div>
  13. 13. (X)HTML-Regeln Kleinschreibung Tags korrekt verschachtelt Tags immer geschlossen
  14. 14. Doctypes<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML-Version Info für den Browser, wie das Markup darzustellen ist Ohne Doctype: „uirks“-Mode beim IE
  15. 15. Semantisches Markup Nicht-semantisch Semantisch<font <h1>Hauptüberschrift</h1>size="7">Hauptüberschrift</font> <p>Dies ist ein Blindtext-Satz. Er<font size="3">Dies ist ein steht hier, damit überhaupt einBlindtext-Satz. Er steht hier, wenig Text hier steht</p>damit überhaupt ein wenig Text <h2>Unter-Überschrift</h2>hier steht</font> <p class="eingerueckt" >Dieser<font size="3">Unter- Abschnitt soll eingerückt sein.Überschrift</font> </p><blockquote>Dieser Abschnitt <p class="abstand-oben">Hier istsoll eingerückt sein.<blockquote> Abstand nötig</p><br><font size="3">Hier ist Abstandnötig</font>
  16. 16. Frames: nicht zu empfehlen Drucken URL & Bookmarks Webseite ≠ Webseite Suchmaschinen Mobile Browser
  17. 17. (X)HTML ist nurstrukturierter Inhalt
  18. 18. Komplette Website = (X)HTML + CSS
  19. 19. NEUHTML 5
  20. 20. Grundlage: HTML 4 – nichts vergessen,nur dazulernenAnpassung an heutige Bedürfnisse Direkte Videowiedergabe Layout-Elemente, z.B. <article>, <section>, <header>, <nav> Zusätzliche Formularelemente, z.B. Schieberegler, Datumauswahl, E-Mail-Feld etc. …
  21. 21. CSSCascading Stylesheets
  22. 22. XHTML ⚭ CSS<head>… <link rel="stylesheet" type="text/css" href="meinstylesheet.css" />…</head>
  23. 23. Wie funktioniert CSS?
  24. 24. h1 { font-size: 3em;}h1, h2, h3, h4, h5, h6, p { font-family: Verdana, Arial, sans-serif; }#inhalt { margin: 0 0 25px 0; }#inhalt .hervorgehoben { background-color:#ffffcc; }
  25. 25. Wichtige CSS Eigenschaftenfont-size, font-family … kurz: fontline-heightcolorbackground-color, background-image … kurz:background margin paddingmargin, padding, border Blindtext border Box Model
  26. 26. Ans Werk!

×