HTML, CSS - 1. Teil

Freeware, Abkürzungen

Abkürzungen und Werte von Attributen

Liste der verwendeten Tags im Body

Erste Schritte im Texteditor

Ordner einrichten, Webseite speichern

Programme einbinden

Aufbau einer HTML-Seite     1

Neues Projekt erstellen

Tags, Text einfügen

Leerzeile

Listing 01tag.html

HTML-Code überprüfen lassen, ein Muss

Grundsätzlicher Aufbau einer HTML-Datei

Verwendete Tags

Umlaute als Unicode - Ententities (Einheiten)

Style Sheets - Anweisungen in HTLM-Tags 1

Datei öffnen

Style Sheets - Anweisungen in HTLM-Tags     2

Reservierte Zeichen

Style Sheets - Anweisungen in HTLM - Tags

Formateigenschaft mit Maßangaben

Style Sheets - Anweisungen in HTLM-Tags 1

Formateigenschaft Farbe

Listing 02css-tag.html 3

Style Sheets im Header 1

Style Sheet Definition einfügen

Style Sheets über den Klassennamen einbinden

Style Sheets im Header mit TopStyle 2

TopStyle Lite Oberfläche

Style Sheets auswählen und einfügen

Style Sheets im Header mit TopStyle 3

Selektoren

Farbe wählen

Einrückungen mit margin

Initialwerte

Listing 03css-kopf.html

Leerzeichen im Editor und Browser

Style Sheets in CSS - Datei

Link zur Style Sheet Datei einfügen

CSS Datei

Randabstände

Hintergrundfarbe

Listing 03css-datei.html

Style Sheets in einer CSS -Datei

CSS - Validierung

Style Sheets ohne TopStyle

Info: Style Sheet Anweisungen zentral

Tag Selektoren oder Typ Selektoren

Format-Klassen: 1. definieren und 2. einbinden

Style Sheets im Header (Kopf)

Style Sheets in CSS-Datei

Übersicht CSS - Cascading Style Sheets 1

Übersicht CSS - Cascading Style Sheets 2

Übersicht CSS - Cascading Style Sheets 3

Größenangaben (Length Units)

Relative Einheiten

Absolute Einheiten

Farbwerte (Color Units)

Schriften am Bildschirm

Informationen zu den Werten von font-family

Texte am Bildschirm

Schriftformatierung in Kurzform

Kurzform font mit TopStyle

Hintergründe 1

Hintergrundfarbe und Hintergrundbild

background-image mit TopStyle

Hintergründe 2

Bildwiederholung steuern

Bildstreifen verschieben

Hintergründe 3

background-position mit TopStyle

Bildwiederholung unterbinden, Bild feststellen

Hintergrund in Kurzform

Kurzform background mit TopStyle

Block Elemente, Inline Elemente 1

Boxmodell

Blockboxen

Größe des Inhaltes: width, height

Rahmen: border

Innenabstand: padding

Außenabstand: margin

Boxenmaße und Browser

Boxen mit TopStyle formatieren

Webseiten mit flaot gestalten 1

div - Container

float

Webseiten mit flaot 2

float und TopStyle

div - Container einrichten

float: left - Spalten und Spaltenbreite einstellen

height: Höhe einer Zeile einstellen

Viele Spalten

width in % angeben

Webseiten mit flaotgestalten 2

Webseite horizontal zentrieren

Vererbung

Kommentare

Float aufheben

Horizontale Linien

clear - Umfluss abbrechen

Float - Elemente aneinander reihen

Grafiken und horizontale Linie einbinden

Einfügen von Bildern

Floats sichtbar machen

Grafiken und horizontale Linie einbinden2

Horizontalen Linie - Farbe und Ausrichtung

clear und float

Ein HTML - Tag, zwei CSS - Formate

float und padding

Info: Grafiken

Grafiken in HTML - Seiten

CSS zur Webseite grafik.html

Listing grafik.html

Hyperlinks zu anderen Webseiten

Hyperlink zu Dateien einfügen

Linkfarbe einstellen

class - Selektoren und ID - Selektor

Listing vorlage.html

Info-Hyperlinks

a - Anchor

Zielanker bzw. Textmarke festlegen

Absolute Adressierung

Relative Adressierung

Pseudo - Klassen: Farbe von Links

Hyperlinks innerhalb von Webseiten

id oder class

Link innerhalb einer Seite

Zielanker festlegen

Abhängige oder verschachtelte Selektoren

Listing: Formatierung der Links innerhalb einer Webseite