Hochgeladen vonAndreas Kalt
Fortbildung Schulwebsite: Technische Grundlagen
Das Dokument behandelt die technischen Grundlagen des benutzerfreundlichen Webdesigns, insbesondere im Hinblick auf Webstandards wie (X)HTML, CSS und JavaScript. Es hebt die Bedeutung der Trennung von Struktur, Layout und Verhalten hervor sowie die Vorteile von validem Code, einschließlich besserer Wartbarkeit und schnellerer Ladezeiten. Darüber hinaus werden Grundlagen von HTML5 und CSS beschrieben, um die Anpassung an moderne Bedürfnisse zu unterstützen.
Fortbildung Schulwebsite: Technische Grundlagen
- 1. Benutzerfreundliches Webdesign Technische Grundlagen
- 2.
- 3.
- 4. Was steckt dahinter? W3C (World Wide Web Consortium) Standardisierte Sprachen, u.a. HTML/XHTML XML Cascading Style Sheets (CSS) ECMAScript 262 („JavaScript“)
- 5. Worum geht esdabei? Zugänglichkeit und Nutzen Lebensdauer von Dokumenten Vereinfachen des Codes
- 6. Wie soll das erreichtwerden?
- 7. Trennung von … Struktur (X)HTML Aussehen CSS Verhalten JavaScript
- 10.
- 11. Was bringt das? ZunächstAnlaufwiderstand Kontrollierte Darstellung Klarere Struktur des Inhalts Leichtere Pflege (v.a. im Team) Schnellere Ladezeiten Nutzbarkeit auch in Zukun
- 12.
- 13.
- 14. Wichtige Attribute <p class="hervorgehoben">Wichtiger Text</p> <divid="inhalt"> … Inhalt … </div>
- 15. (X)HTML-Regeln Kleinschreibung Tags korrekt verschachtelt Tags immer geschlossen
- 16. 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
- 17. 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 ein Blindtext-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 ist soll eingerückt sein.<blockquote> Abstand nötig</p> <br> <font size="3">Hier ist Abstand nötig</font>
- 18. Frames: nicht zuempfehlen Drucken URL & Bookmarks Webseite ≠ Webseite Suchmaschinen Mobile Browser
- 19.
- 21. Komplette Website = (X)HTML + CSS
- 23.
- 24. Grundlage: HTML 4– nichts vergessen, nur dazulernen Anpassung 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. …
- 25.
- 27. XHTML ⚭ CSS <head> … <link rel="stylesheet" type="text/css" href="meinstylesheet.css" /> … </head>
- 29.
- 31. 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; }
- 32. Wichtige CSS Eigenschaften font-size,font-family … kurz: font line-height color background-color, background-image … kurz: background margin padding margin, padding, border Blindtext border Box Model
- 33.