html_11-11-09
Freilassen
Übung 1 „Quellenangaben anpassen“
- Öffne in deinem Texteditor die Datei des letzten Kurses oder deine Übungsaufgabe
- Öffne deine HTML-Datei im Firefoxbrowser
- Binde ein Bild in deine Seite ein, dass im selben Ordner liegt, wie deine html-Datei
- Lege einen Ordner „bilder“ an und verschiebe das Bild in diesen. Passe nun die Quellenangabe zu deinem Bild an.
- Lege einen Ordner „html“ an und verschiebe deine html-Seite in diesen. Passe nun den die Quellenangabe zu deinem Bild an.
- Verschiebe das Bild in deinen Hauptordner und passe erneut die Quellenangabe zu deinem Bild an
<img src=“bild.jpg“ /> Das Bild liegt im gleichen Ordner wie die html-Seite
<img src=“bilder/bild.jpg“ /> Das Bild liegt in einem Unterordner „bilder“
<img src=“../bild.jpg“ /> Das Bild liegt in einem Ordner auf einer tieferen Ebene
Freilassen
Hintergrund! Was ist CSS?
- CSS = „Cascading Style Sheets“
- Formatierungssprache um Eigenschaften von HTML-Elementen zu definieren
- CSS bestimmt das Aussehen eines Inhalts, z.B. Größe, Farbe, Position
- Grundidee: Trennung von Inhalt und Design
Freilassen
Vorteile
- einheitliches Design
- schnelle Änderungen
- kürzere Ladezeiten durch kleinere HTML-Dateien
- weniger Code = mehr Übersichtlichkeit
- Barrierefreiheit
Freilassen
Nachteile
- einige CSS-Angaben werden nicht von allen Browsern unterstützt oder unterschiedlich interpretiert
Freilassen
Grundlagen – Wie ist ein CSS-Befehl aufgebaut?
- Ein CSS-Befehl setzt sich immer aus einem Selektor (welches Element soll gestaltet werden?) und einem oder mehreren Eigenschaftswert (wie soll das Element aussehen?)
Selektor {
Eigenschaft1: Wert1;
Eigenschaft2: Wert2;
}Beispiel:
h1 {
font-weight: bold; fetter Schriftschnitt
color: #FF0000; Schriftfarbe rot
}
- Der Selektor wählt aus für welche HTML-Elemente (hier: Überschriften 1. Ordnung) die Definitionen (hier: fett und rot) gelten sollen.
freilassen
Wie binde ich CSS in meine HTML-Seite ein
- Direkt im HTML-Element
Wird von Editor angewandt. Eigentlich unwartbar und sollte
daher nicht verwendet werden. - Am Anfang des HTML-Dokuments
Sinnvoll, um das Grundgerüst für Layout und Design an einer
Beispielseite festzulegen. Später sollten allerdings alle CSSAngaben
ausgelagert werden. - In eigener Datei
Alle CSS-Angaben werden in einer Datei mit der Endung .css
gespeichert. Dieses Vorgehen gewährleistet optimale
Wartbarkeit und Übersicht.
Freilassen
Übung 2 „CSS einbinden“
- Füge im Kopfteil deiner Seite <head> einen CSS-Befehl ein.
- Welche Seite? > siehe Übung 1
<html>
<head><style type=“text/css“>
h1 {
color: #0000FF;
font-style: italic;
font-size: 80%;
}
</style></head>
<body>
…deine Inhalte…
</body></html>
[...] html_11-11-09 [...]