Оглавление
Helma Spona. HTML & CSS Schnellkurs
HTML- und Website-Grundlagen
Eine Website was ist das genau
Begriff "Website"
Begriff "HTML"
Begriff "CSS"
Begriff "Webspace"
Wie das Internet funktioniert
Providerwahl, Webspace- und Domainregistrierung
Empfehlung
Begriff "Traffic"
Tipp
Hinweis
HTML-Grundlagen, wichtige Begriffe und Syntax
Begriff "XHTML"
Hinweis
Das Internet – ein besonderes Medium
Begriff "Screenreader"
Begriff "barrierefreie Webseite"
Hinweis
Hinweis
Regeln zur Benennung von Dateien
Achtung
Eine leere (X)HTML-Datei erstellen
Hinweis
Aufgabe 1: Eine leere Text-Datei mit der Endung ".HTML" erstellen
Hinweis
Aufbau einer HTML-Datei
Beispiel "HTML-Elemente"
Achtung
Beispiel "HTML-Attribute"
Hinweis
Tipp
Hinweis
Hinweis
Der Inhalt des "<head>"-Elements
Tipp
Achtung
Hinweis
Aufgabe 2: Das Grundgerüst der HTML-Seite definieren
Hinweis
Tipp
Aufgabe 3: Die HTML-Seite im Browser ausführen
Tipp
Den sichtbaren Inhalt der Seite definieren
Hinweis
Aufgabe 4: Platzhalter für die Inhalte der HTML-Datei einfügen
Aufgabe 5: Die Änderungen im Browser anzeigen
Optionale und notwendige Attribute
Info
Hinweis
Aufgabe 6: Erstellen Sie eine "Vorlage" für Ihre Webseite und definieren Sie dort ein Element, dass als Banner dient
Korrekte Auszeichnung der Inhalte mit entsprechenden HTML-Elementen
Einen Hyperlink definieren
Hinweis
Begriffe: Frames und Framesets
Hinweis
Aufgabe 7: Ergänzen Sie die "Vorlage" unterhalb des Banners um eine Navigationsleiste
Aufgabe 8: Umgeben der Hyperlinks mit einem Blockelement
Logisches und physische Textauszeichnungen
Hinweis: Sonderzeichen Codieren
Hinweis
Listen und Aufzählungen definieren
Tipp
Hinweis
Aufgabe 9: Fügen Sie der Vorlage eine vertikale Navigation aus einer geordneten Liste hinzu
Hinweis
Aufgabe 10: Ändern Sie die nummerierte Liste aus Aufgabe 9 in eine ungeordnete Liste
Hinweis
Aufgabe 11: Ergänzen Sie zu einem Listeneintrag in der Vorlagendatei eine untergeordnete ungeordnete Liste
Grafiken einfügen
Tipp
URLs in Webseiten
Tipp
Hinweis
Hinweis
Aufgabe 12: Ein Bild in das Banner der Vorlage einfügen
Tabellen erstellen
Hinweis
Hinweis
Aufgabe 13: Ergänzen Sie die Vorlagendatei um eine blinde Tabelle
Einrichten eines FTP-Programms
Hinweis
Hinweis
Veröffentlichen der Website
Formatieren mit CSS. Begriff: CSS
Aufgabe 14: Formatieren Sie die Vorlagendatei mit einer serifenlosen Schrift
Hinweis
Einbinden von CSS-Dateien
Hinweis
Aufgabe 15: Erstellen Sie eine CSS-Datei und verknüpfen Sie sie mit der Vorlagendatei
Verschiedene Stilarten
Begriff: Element-Selektoren
Begriff: Operatoren
Begriff: Pseudo-Elemente
Aufbau einer Stildefinition
Element-Selektoren
Hinweis
Tipp
Aufgabe 16: Erstellen Sie in der CSS-Datei für die Vorlagendatei zwei Element-Stile für die Navigation und die Hyperlinks
Hinweis
Hinweis
Klassen-Selektoren
Tipp
Aufgabe 17: Mit einem Klassenstil einen Rahmen um die linke Navigation einfügen
ID-Selektoren
Info
Aufgabe 18: Erstellen Sie einen ID-Stil für das Banner und die obere Navigation
Hinweis
Pseudo-Klassen und Pseudo-Elemente
Komplexere Selektoren
Aufgabe 19: Ergänzen Sie die CSS-Datei um einen Stil, der für eine weiße Schriftfarbe der Hyperlinks in der oberen Navigation sorgt
Seitenlayout mit CSS
Tabellenlayout optimieren
Feste Breite für die linke Tabellenzelle festlegen
Begriffe: Block- und Inline-Elemente
Aufgabe 20: Legen Sie die Breite für die CSS-Klasse navi fest
Prozentuale Breite der Tabelle festlegen
Aufgabe 2: Fügen Sie der CSS-Datei einen Elementstil für das table-Element hinzu
Zellausrichtung ändern
Aufgabe 21: Zellausrichtung festlegen
Ein Floating-Layout erstellen
Tipp
Hinweis
Hinweis
Achtung
Aufgabe 22: Richten Sie Navigation und Inhalt als Floating-Boxen nebeneinander aus
Hinweis
Aufgabe 23: Ergänzen Sie den CSS-Code so, dass etwas Abstand zwischen Inhalt und Navigation entsteht
Hinweis
Aufgabe 24: Fügen Sie am Seitenende einen Absatz mit Copyright-Angabe ein
Hyperlinks formatieren
Pseudoklassen- und Pseudoelemente einsetzen
Aufgabe 25: Erstellen Sie eine Seite aus der Vorlagendatei und fügen Sie dort Absätze mit Hyperlinks ein
Begriff "Rangfolge"
Aufgabe 26: Fügen Sie der CSS-Datei sinnvolle Formatierungen für Hyperlinks hinzu
Hyperlinks als Buttons formatieren
Rahmen und Hintergrundbilder einsetzen
Tipp
Aufgabe 27: Fügen Sie um die Links in der oberen Navigation eine weiße Rahmenlinie ein
Dateiformate für Hintergrundbilder
Tipp
Aufgabe 28: Erzeugen Sie einen Stil, der beim Hovern der Buttons das Hintergrundbild gegen hgrd02.jpg tauscht
Navigationsleisten formatieren
3D-Effekte erzeugen
Aufgabe 29: Fügen Sie den Hover-Effekt für die Navigationsleiste hinzu
Untergeordnete Links bei Bedarf ein- und ausblenden
Bildergalerien gestalten
Notwendige Bilder
Hinweis
Aufbau der Seite
Aufgabe 30: Erzeugen Sie eine leere (X)HTML-Datei und verknüpfen Sie sie mit einer leeren CSS-Datei
Aufgabe 31: Fügen Sie in die (X)HTML-Datei die div-Elemente und in die CSS-Datei die grundlegenden Formatierungen für die div-Elemente ein
Hinweis
Miniaturansichten einfügen und verlinken
Tipp
Server-Side-Includes für eine effizientere Websiteverwaltung einsetzen
Funktionsweise
SSI nutzen
Hinweis
Achtung
Rechtliche Rahmenbedingungen von Webseiten
Hinweis
Wichtige betroffene Rechtsgebiete
Urheberrecht
Achtung
Rechte am eigenen Bild
Markenrechte und verwandte Schutzrechte
Wettbewerbsrecht
Verantwortlichkeit für Hyperlinks
Datenschutz und Sicherheit
Tipp
Pflichtangaben
Impressumspflicht
Datenschutzerklärung
Anhang: Überblick über wichtige HTML und CSS-Elemente. Sonderzeichen im Überblick
Farbnamen im Überblick
HTML-Elemente im Überblick
Attribute im Überblick
Wichtige CSS-Eigenschaften
