statische webprogrammierung€¦ · tabellen in der stildatei (css) formatieren platzierung der...
TRANSCRIPT
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
StatischeWebprogrammierung
Unterrichtsdokumentation
Modulname: Statische Webprogrammierung ind der Sekundarstufe 2
Stand: 22. Apr 2020
© BS-Wangen
Berufliches Schulzentrum Wangen Seite 1 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
Inhaltsverzeichnis 1 Statische Webprogrammierung.......................................................................3
1.1 Das Grundgerüst in HTML.........................................................................3 1.2 Texte und Listen......................................................................................4 1.3 Sonderzeichen und Umlaute......................................................................5 1.4 Formatierung mit einem Cascading Style Sheet (CSS), Verweise.....................6 1.5 Tabellen und deren Formatierung mit einem CSS, Box-Modell.........................9 1.6 Grafiken und Bilder in HTML und via CSS (Box-Modell)................................11
2 Vertiefung Statische Webprogrammierung......................................................13 2.1 Formatierung der Navigation im CSS.........................................................13 2.2 Responsive Web Design – Verweise & Bilder...............................................15 2.3 Übung: Neues in CSS3 und HTML5 – Farbschemen in CSS, Selektoren & Co. . .17
Berufliches Schulzentrum Wangen Seite 2 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
1 Statische Webprogrammierung
1.1 Das Grundgerüst in HTML
Im Browser (Chrome, Firefox)Im Notepad oder einer anderen
Entwicklungsumgebung
HTML = Hypertext Markup Language
Aktueller Standard HTML5→
Berufliches Schulzentrum Wangen Seite 3 von 18
HTML4HTML4 XHTMLXHTML
HTML5HTML5
<br> <br />
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
1.2 Texte und Listen
View - Browser „listen.htm“
Quellcode der Datei „listen.htm“ inder Entwicklungsumgebung Notepad++
Berufliches Schulzentrum Wangen Seite 4 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
1.3 Sonderzeichen und Umlaute
View - Browser „umlaute.htm“
Quellcode der Datei „umlaute.htm“in der Entwicklungsumgebung Notepad++
Berufliches Schulzentrum Wangen Seite 5 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
1.4 Formatierung mit einem Cascading Style Sheet (CSS), Verweise
Ansicht im Browser.(View)
Boxmodell mit Inhalt
Erstes Teilergebnis
Ansicht im Browser.(View)
Boxmodell mit Inhalt
Zweites Teilergebnis
HTML-Datei mit reinem Box-Modell-Layout.
Alle Seitenbestandteile werden in sogenannte Boxen gesteckt:
1. header-Box Kopfzeile→2. content-Box Inhalte→3. navigation-Box Navigation→4. footer-Box Fußzeile→
Berufliches Schulzentrum Wangen Seite 6 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
HTML-Datei mit Inhalt Box-Modell-Layout.
Einbindung des CSS in eine HTML-Datei.
WICHTIG!!!
Ohne die Einbindung des CSS werden keine der Formatangaben aus dem CSS angezeigt!
Definitionen im CSS.
Im CSS werden die Formatierungsangaben für die einzelnen Boxen festgelegt.
Verweise.
Verweis auf eine Bildquelle im Internet:
Berufliches Schulzentrum Wangen Seite 7 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
Navigation – Startseite:
Navigation – Unterseiten:
<a href="http://www.w3.org/html/logo/"><img src="http://www.w3.org/html/logo/badge/
html5-badge-h-solo.png" width="63" height="64" alt="HTML5 Powered"title="HTML5 Powered">
</a>
Verweise auf Unterseiten:<a href="htdocs/grundgeruest.html"
target="_parent">01_übung: Grundgerüst
</a>
Hinweis:a href steht für active hypertextreference → sind Links, Verweise!
Wir geben das Ziel an!!!
Stylesheet in die Unterseiten einbetten:
../
um aus dem Unterverzeichnis raus zu gehen.
Berufliches Schulzentrum Wangen Seite 8 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
1.5 Tabellen und deren Formatierung mit einem CSS, Box-Modell
Tabellen in HTML definieren
Berufliches Schulzentrum Wangen Seite 9 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
<tr> steht table row<th> steht für table head<td> steht für table data
Tabellen in der Stildatei (CSS) formatieren Platzierung der TabelleRahmen formatierenAbstände Ausrichtung innerhalb der Tabelle
2. Zwischenergebnis
Beispiel individueller Gestaltung einer Ta-belle:
3. Zwischenergebnis
Berufliches Schulzentrum Wangen Seite 10 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
1.6 Grafiken und Bilder in HTML und via CSS (Box-Modell)
Bild via CSS einbetten und Ausrichten
in html:
Tabelle Zentrieren
margin: auto;
Berufliches Schulzentrum Wangen Seite 11 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
Innenabstand für die Paragrafen-Box im Content (Inhalt).
Textausrichtung für die headline-Box im Header (Kopfzeile).
Tabelle mit Bildern in HTML
colspan=“2“ um Spalten zu fusionieren
Berufliches Schulzentrum Wangen Seite 12 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
2 Vertiefung Statische Webprogrammierung
2.1 Formatierung der Navigation im CSS
Berufliches Schulzentrum Wangen Seite 13 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
Berufliches Schulzentrum Wangen Seite 14 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
2.2 Responsive Web Design – Verweise & Bilder
Berufliches Schulzentrum Wangen Seite 15 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
Quellcode: galerie.html
Der HTML-Quellcode der minigallerie.
Quellcode: styles.css
Der CSS-Quellcode für die minigallerie(siehe Erklärung Neues in HTML5...)→
Berufliches Schulzentrum Wangen Seite 16 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
2.3 Übung: Neues in CSS3 und HTML5 – Farbschemen in CSS, Selektoren & Co
HTML5 und CSS (Neues und Besonderheiten)
Farbverläufe
Abgerundete Boxen
Schatteneffekte
Berufliches Schulzentrum Wangen Seite 17 von 18
Dokumentation_Statische_Webprogrammierung.odt Autor: Christine Janischek
Effekte und Grafiken(im CSS)
Effekte und Grafiken(im HTML-Dokument)
Optimierung, Abgleich mitden unterschiedlichen Browsern
Mozilla Firefox→ Opera→ Safari, Google Chrome→ Internet Explorer→
Browser-Kompatibilität:
Speziell für den Internet Explorer ergibt sich immer wiederdie Notwendigkeit der Nachregulierung. Im Gegensatz zu al-len anderen Browsern folgt er nicht den Standards und setztdas Box-Modell fehlerhaft um.
Der Webprogrammierer ist immer wieder auf der Suchenach sog. „CSS-Hacks“ um diese Anzeigefehler zu beglei-chen.
Testen Sie bitte Ihre Projekte immer auf allen gängigenBrowserversionen! Vor allem auf dem IE, um Anzeigefehlerzu vermeiden.
Berufliches Schulzentrum Wangen Seite 18 von 18