Einführung in die HTML- und CSS-Programmierung – Teil 1

Eine gut gestaltete Website bietet Kundinnen und Kunden Informationen über ein Unternehmen, Angaben dazu, wie sie es finden oder kontaktieren können, sowie die Möglichkeit, Einkäufe zu tätigen und Bestellungen aufzugeben. Unternehmen jeder Größe können Websites nutzen, um mehr Besucherinnen und Besucher anzuziehen und mehr Kundschaft als je zuvor zu erreichen.

Die Grundlage vieler Webseiten – aus mehreren Webseiten besteht eine Website – bilden die Programmiersprachen HTML und CSS. Zu lernen, wie man diese Sprachen verwendet, um die Inhalte einer Webseite zu erstellen und zu gestalten, ist ein wichtiger Schritt auf dem Weg zu eigenen, gut gestalteten Webseiten.

Kursthemen:

Lektion 1: Einstieg in HTML

THEMA A: HTML-Grundlagen

• HTML – Hintergrundinformationen
• Aufbau eines HTML-Tags
• Erste Schritte
• Übung 1-1: Eine Webseite untersuchen

THEMA B: Grundlegende Webseiten-Elemente

• Das Überschriften-Tag
• Absatz- und Umbruch-Tags
• Tags zur grundlegenden Textformatierung
• Übung 1-2: Grundlegende Elemente mit HTML hinzufügen

THEMA C: Listen erstellen

• Geordnete Listen
• Ungeordnete Listen
• Listeneinträge
• Übung 1-3: Eine HTML-Liste erstellen
• Zusammenfassung
• Wiederholungsfragen

Lektion 2: Mehr mit HTML machen

THEMA A: Bilder in HTML

• Das Bild-Tag
• Bildquelle festlegen
• Alternativtext für das Bild festlegen
• Bildgröße
• Übung 2-1: Ein Bild mit HTML hinzufügen

THEMA B: Links in HTML

• Auf eine andere Webseite verlinken
• Interne Links
• Übung 2-2: Einen Link hinzufügen

THEMA C: Tabellen in HTML

• Aufbau einer HTML-Tabelle
• Kopfzeile der Tabelle
• Tabellenzeilen mit Daten
• Übung 2-3: Eine HTML-Tabelle erstellen
• Zusammenfassung
• Wiederholungsfragen

Lektion 3: Einstieg in CSS 

THEMA A: CSS-Grundlagen 

• CSS: Cascading Style Sheets 

• Das <style>-Tag 

• CSS-Typografie und Hierarchie 

• Übung 3-1: Mit dem <style>-Tag einen Formatierungsbereich erstellen 

THEMA B: CSS-Farben 

• Die Farbe eines Webseiten-Elements ändern 

• Farbnamen in CSS 

• RGB-Farbsystem 

• Hexadezimales Farbsystem 

• Hintergrundfarbe 

• Übung 3-2: CSS-Farben auf verschiedene Arten hinzufügen 

THEMA C: Weitere CSS-Selektoren verwenden 

• ID-Namen in CSS verwenden 

• Klassennamen in CSS verwenden 

• Übung 3-3: Einen ID-Namen zur Gestaltung verwenden 

• Zusammenfassung 

• Wiederholungsfragen 

Lektion 4: Text mit CSS gestalten 

THEMA A: Schriftfamilien 

• Was ist eine Schriftart? 

• Die Eigenschaft font-family verwenden 

• Serifenschriften und serifenlose Schriften 

• Schriftnamen 

• Weitere Schriftarten 

• Ersatzschriften 

• Übung 4-1: Die Schriftfamilie in CSS ändern 

THEMA B: Schriftgröße 

• Die Eigenschaft font-size 

• Pixel 

• EM-Einheiten 

• Übung 4-2: Die Schriftgröße eines Textes ändern 

THEMA C: Weitere CSS-Texteigenschaften 

• Die Eigenschaft font-style 

• Die Eigenschaft font-weight 

• Die Eigenschaft line-height 

• Die Eigenschaft text-align 

• Übung 4-3: Text mit zusätzlichen Eigenschaften anpassen 

THEMA D: Schrift-Kurzschreibweise 

• CSS-Kurzschreibweise 

• CSS-Kurzschreibweise für Schriftarten 

• Übung 4-3: Die CSS-Kurzschreibweise für Schriftarten in der Praxis verwenden 

• Zusammenfassung 

• Wiederholungsfragen 

Lektion 5: Erweiterte Gestaltungstechniken mit HTML und CSS 

THEMA A: Elemente gruppieren 

• Was ist ein Gruppierungselement? 

• Inline- und Block-Formatierung 

• Übung 5-1: Webseiten-Elemente mit den Tags <span> und <div> gruppieren 

THEMA B: Abmessungen von Div-Elementen 

• Die Breite eines Div-Elements anpassen 

• Die Höhe eines Div-Elements anpassen 

• Überlauf 

• Übung 5-2: Die Gestaltung eines Div-Blocks anpassen 

THEMA C: Das CSS-Box-Modell 

• Das CSS-Box-Modell 

• CSS-Außenabstände 

• CSS-Rahmen 

• CSS-Innenabstände 

• Übung 5-3: Die Gestaltung eines Div-Blocks anpassen 

• Zusammenfassung 

• Wiederholungsfragen