HTML und CSS - Websites erstellen
Editor
HTML-Seiten können mit jedem beliebigen Text-Editor geschrieben werden. Empfohlen wird Notepad++
HTML
Gehe auf W3Schools und arbeite die Kapitel "Introduction" bis "Links" durch. Erstelle dabei auch einige eigene HTML-Dateien mit einem Editor und betrachte sie in einem oder mehreren Browsern.
Gehe auf W3Schools und arbeite die Kapitel "Links" bis "Entities" durch (IFrames und Javascript können vorerst ausgelassen werden, probier dafür bei den Entities auch ü , ä etc. aus).
CSS
Gehe auf W3Schools und arbeite das CSS-Tutorial von "Introduction" bis "Dropdowns" (letzteres wie auch "Navigation Bar" und "Box Model" besonders wichtig, daher unbedingt auch in eigenen Dateien probieren!!!) durch. Fleißaufgabe: "Image Gallery"
HTML und CSS Übungen
Die Inhalte der Microsoft-Zertifikate für CSS und HTML decken sich etwa mit den Übungen im Dokument html-css-uebungen.docx. Achtung: das Dokument wird regelmäßig erweitert!
Praktische Aufgabenstellung
Gestalte einen Webauftritt, der mindestens folgende Bedingungen erfüllt:
- die Inhalte sind sinnvoll und gehören zu einer (fiktiven) Firma, einem Verein oder einer anderen Institution.
- mindestens 6 Seiten, also 6 HTML-Dateien (Namensgebung: Datei- und Ordnernamen dürfen keine Leerzeichen, Umlaute und Sonderzeichen enthalten).
- Seiten über Menü erreichbar
- Menüleiste als unordered list mit Verlinkungen, aber waagrecht
- Gliederung der Seiten in mindestens 4 Blöcken (zB: Kopfzeile, Menü, Hauptteil, Fußzeile - man kann zum Beispiel die moderne HTML5-Version mit header, nav, article, footer, etc. verwenden). Mindestens eine Seite mit zwei Spalten (zB. mit aside). Konsultiere für das Layout das entsprechende Kapitel im HTML-Kurs von w3schools.
- Bilder, mind. eine Tabelle, mind eine Liste (zusätzlich zum Menü), externe Verlinkung
- Head mit Doctype und Metatags (title,link,...)
- CSS-Formatierungen in externem Stylesheet
- Umlaute als Entities oder zumindest ein korrektes charset in den Metatags im head.
Plane vor Beginn der eigentlichen Arbeit entweder in einer Software oder mit Entwurfsskizzen auf Papier. Siehe dazu: Bootstrap_02_Wireframes.pdf
Stelle den Webauftritt ins ILIAS: Kurs Informatik itm6, Passwort leibniz, Ordner Webauftritt, Mach eine HTML-Lerneinheit. Lade den Webauftritt hinein (am besten als zip-Datei, die dann entzippt wird). Gib einen sinnvollen Titel, schreib in die Beschreibung deinen Namen
Termin für die Abgabe: 22.1.2025