Description / Abstract

Table of content

• HTML5 und CSS3 für Einsteiger
• Inhalt
• 1. Einführung
• 1.1. HTML: wesentliche Technik seit der Entstehung des Internets
• 1.2. CSS als wichtige Ergänzung zu HTML-Seiten
• 1.3. HTML – eine Auszeichnungssprache
• 1.4. Statische und dynamische Internetseiten
• 1.5. HTML als Grundlage für die Programmierung mit PHP, JavaScript und anderen Sprachen
• 2. HTML: Entstehungsgeschichte und Versionen
• 2.1. HTML: Die Urversion für reine Textauszeichnungen
• 2.2. Zahlreiche Weiterentwicklungen im Laufe der Jahre
• 2.3. XHTML: Eine Abwandlung von HTML
• 2.4. HTML5: Umfangreiche Anpassungen für eine zeitgemäße Darstellung von Internetseiten
• 3. CSS: Unzählige Möglichkeiten für die Gestaltung einer Internetseite
• 3.1. Das Layout der Internetseiten wurde immer wichtiger
• 3.2. Einführung von CSS: Trennung von Inhalt und Design
• 3.3. Das Zusammenspiel zwischen HTML und CSS
• 4. Die Vorbereitungsmaßnahmen für die Gestaltung von Internetseiten mit HTML und CSS
• 4.1. Verschiedene Webbrowser für die Darstellung der Seiten
• 4.2. Texteditor für die Gestaltung des Codes
• 4.3. WYSIWYG-Editoren als Alternative
• 5. Der Aufbau einer HTML-Seite
• 5.1. HTML-Seiten: aufgeteilt in head und body
• 5.2. Wichtige Elemente innerhalb des head-Bereichs
• 5.3. Die Doctype-Angabe
• 5.4. Die Sprache der Seite angeben
• 5.5. Die Seite validieren
• 5.5. Übungsaufgabe: die Struktur einer HTML-Seite gestalten
• 6. Der body-Bereich für die Inhalte der Seite
• 6.1. Überschriften für die einzelnen Bereiche der Seite
• 6.2. Absätze in die Seite einfügen
• 6.3. Zeilenumbrüche
• 6.4. Verschiedene Textabschnitte hervorheben
• 6.5. Einzelne Bereiche mit div- und span-Tags kennzeichnen
• 6.6. Kommentare für ein besseres Verständnis des Codes
• 6.7. Übungsaufgabe: Inhalte in die Seite einfügen
• 7. Links in die Seite einbinden
• 7.1. Das a-Tag: Linktext und Linkziel
• 7.2. Weitere Attribute für den Link vorgeben
• 7.3. Links innerhalb der Seite setzen
• 7.4. Übungsaufgaben: Seiten mit Links erstellen
• 8. Bilder und weitere Medien-Inhalte in die HTML-Seite einbauen
• 8.1. Das img-Tag für den Einbau von Grafiken
• 8.2. Breite und Höhe festlegen
• 8.3. Einen Alternativtext vorgeben
• 8.4. figure, figcaption: neue Möglichkeiten durch HTML5
• 8.5. Sound-Dateien in die Seite integrieren
• 8.6. Videos und Animationen einbinden
• 8.7. Übungsaufgabe: Medien-Inhalte in die Seite einbauen
• 9. Listen mit HTML gestalten
• 9.1. Ungeordnete Listen
• 9.2. Geordnete Listen
• 9.3. Description List: Listen mit weiterführenden Angaben zu den Einträgen
• 9.4. Listen für die Navigation der Seite verwenden
• 9.5. Übungsaufgabe: mit Listen arbeiten
• 10. Tabellen
• 10.1. Die Tabelle anlegen
• 10.2. Beschriftungen hinzufügen
• 10.3. Zellen miteinander verbinden
• 10.4. Weitere Einteilungen für die Tabelle vornehmen
• 10.5. Das Layout mit Tabellen vorgeben: eine veraltete Technik
• 10.6. Übungsaufgabe: Tabellen selbst gestalten
• 11. Formulare mit HTML erstellen
• 11.1. Ein Formular mit dem form-Tag erstellen
• 11.2. Textfelder erstellen
• 11.3. Radiobuttons für verschiedene Auswahlmöglichkeiten
• 11.4. Checkbox: Weitere Auswahlmöglichkeiten
• 11.5. Auswahllisten
• 11.6. Mehrzeilige Textfelder
• 11.7. Versteckte Felder in das Formular einfügen
• 11.8. Submit- und Reset-Button einfügen
• 11.9. Ein Beispiel-Formular erstellen
• 11.10. Übungsaufgabe: Seiten mit Formularen erstellen
• 12. Semantische Auszeichnungen in HTML5
• 12.1. Warum ist es sinnvoll, die einzelnen Seitenelemente zu benennen?
• 12.2. Die Struktur der Seite vorgeben: header, nav, main und footer
• 12.3. Weitere Tags: section, article und aside
• 12.4. Übungsaufgabe: Die einzelnen Bereiche der Seite kennzeichnen
• 13. CSS: die Kennzeichen dieser Sprache
• 13.1. Spezifische Layoutvorgaben für verschiedene Elemente der Seite vorgeben
• 13.2. Die einzelnen Elemente innerhalb der Seite positionieren
• 13.3. Kommentare in CSS
• 14. Wo kann man die CSS-Vorgaben vornehmen?
• 14.1. Angaben direkt in das HTML-Element einfügen
• 14.2. CSS-Angaben im Kopfbereich vornehmen
• 14.3. Separate CSS-Dokumente erzeugen
• 14.4. Die Priorität der CSS-Angaben
• 15. Selektoren: Ein bestimmtes Element über CSS ansprechen
• 15.1. Vorgaben für alle Tags eines Typs
• 15.2. Klassen definieren und ansprechen
• 15.3. Ein Element über seine ID ansprechen
• 15.4. Auswahl von Tags und Klassen miteinander verbinden
• 15.5. Pseudoklassen verwenden
• 15.6. Übungsaufgabe: Seitenelemente ansprechen
• 16. Texte mit CSS formatieren
• 16.1. Die richtige Schriftgröße auswählen
• 16.2. Verschiedene Schriftarten
• 16.3. Die Darstellung der Schriftzeichen
• 16.4. Eine Textfarbe auswählen
• 16.5. Exkurs: Farben in CSS
• 16.6. Das Attribut text-decoration
• 16.7. Bündigkeit der Absätze und Einrückungen
• 16.8. Übungsaufgabe: Texte ansprechend gestalten
• 17. Hintergründe
• 17.1. Einfache Hintergrundfarben
• 17.2. Bilder als Hintergrund verwenden
• 17.3. Den Hintergrund positionieren und fixieren
• 17.4. Sich wiederholende Grafiken verwenden
• 17.5 Farbverläufe gestalten
• 17.6. Übungsaufgabe: ansprechende Hintergründe hinzufügen
• 18. Größen, Abstände und Positionen
• 18.1. Die Höhe und die Breite eines Elements vorgeben: absolute und relative Werte
• 18.2. Rahmen für die einzelnen Elemente vorgeben
• 18.3. Innere und äußere Abstände definieren
• 18.4. Das CSS Box Model
• 18.5. Elementen absolute Positionen geben
• 18.6. Weitere Alternativen für die Bestimmung der Position
• 18.7. float und clear: Inhalte innerhalb eines Containers positionieren
• 18.8. Darstellung zu großer Inhalte mit overflow anpassen
• 18.8. Übungsaufgabe: Positionen und Abstände vorgeben
• 19. Das display-Attribut
• 19.1. Zeilenelemente als Block- oder als Inline-Element darstellen
• 19.2. Elemente unsichtbar machen
• 19.3. Elemente mit flexibler Anzeige erzeugen
• 19.4. Übungsaufgabe: Die Sichtbarkeit der Elemente beeinflussen
• 20. Animationen und spezielle Effekte: fortgeschritteneCSS-Techniken
• 20.1. Transformationen
• 20.2. Transitionen
• 20.3. Animationen
• 20.4. Übungsaufgabe: Die Seite durch Spezialeffekte interessant gestalten
• 21. Responsive Design
• 21.1. Die Grundidee hinter responsive Design
• 21.2. Das Meta-Tag Viewport
• 21.3. Unterschiedliche Designs für Desktop-PCs und Smartphones
• 21.4. Eine weitere Option für mittelgroße Geräte (Tablets) hinzufügen
• 21.5. Bilder an die Bildschirmgröße anpassen
• 21.6. Übungsaufgabe: Seiten mit responsive Design erstellen
• 22. Praxisbeispiel: Eine Website für ein Tierheim anlegen
• 22.1. Die grundlegende Struktur und Layoutvorgaben für die Website vorgeben
• 22.2. Grundlegende Vorgaben für die gesamte Seite
• 22.3. Den Kopfbereich der Seite gestalten
• 22.4. Die Vorgaben für den Hauptbereich
• 22.5. Die Fußzeile gestalten
• 22.6. Die weiteren Unterseiten hinzufügen
• 23. So geht es weiter