Fortbildung Schulwebsite: Technische Grundlagen

2,455 views

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,455
On SlideShare
0
From Embeds
0
Number of Embeds
991
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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!

×