Sprachbestandteile in HTML5 und CSS - Grundlagen Teil I
[ Kategorie: Websprachen | Autor: Selma-Caroline Kannengiesser ]
Das Zusammenspiel aus HTML und CSS reicht im eigentlichen Sinne bereits aus um eine vollständig funktionstüchtige Webseite oder in ihrer Gesamtheit - Website zusammenzustellen. Die Inhalte/die Struktur muss da sein [ HTML ] und es sollte ansprechend aussehen [ CSS ] und HERZLICH WILLKOMMEN IST DER BESUCHER!
Aber wie es nunmal in jeder Sprache von Nöten ist - bevor man versucht Sätze zu bilden - muss man sich mit den Vokabeln und der Grammatik auseinandersetzen. Bringen wir also ein wenig Licht ins Dunkle und lassen HTML und CSS ein wenig leuchten.
HTML (HyperText Markup Language - DIE STRUKTUR)
Aufbau und Schreibweise - Strukturierungssprache (HTML5)
Beschreibungscontainer mit Attributen und Werten
Vollständiger Container
Schreibweise: <containername>Beschreibungselement</containername>
- Besteht aus einem einleitenden Bestandteil: Starttag <containername>
und einem beendenden Bestandteil: Endtag </containername> - In vollständigen Containern wird der zu beschreibende Inhalt IN DEN CONTAINER (zwischen Start- und Endtag) geschrieben.
Beispiel: <h1>ITP-Web Medien</h1> (Überschrift der höchsten Ordnung)
Singulärer Container
Schreibweise: <singulaercontainername> oder <singulaercontainername />
(Strikte Validation und Interpretation durch XML-Parser mit abschließendem / am Ende)
- Besteht nur aus einem beschreibenden Tag und einem Tagabschluss bei sttrikter Validation und Interpretation durch XML-Parser mit abschließendem / am Ende.
- Dieser erfolgt immer am Ende der Tagangabe!
- In singulären Containers wird der zu beschreibende Inhalt DURCH DEN CONTAINER SELBST
beschrieben/vertreten.
Beispiel: <br /> (Zeilenumbruch)
Container mit ergänzenden Attributen und Werten
1: <containername attribut1="wert1" attribut2="wert2">Beschreibungselement</containername>
2: < singulaercontainername attribut1="wert1" attribut2="wert2" />
- Ergänzende Attribute und Werte stehen nur im Starttag eines Containers.
- Die Begriffe der Attribute sind klein zu schreiben.
- Die Werte der Attribute sind in "…." oder '….' zu schreiben.
- Mehrere Attributsangaben werden mit einem Leerzeichen voneinander getrennt.
Beispiel zu 1: <a href="http://www.bildung.de" target="_blank">Bildung</a>
Erzeugt den Texthyperlink Bildung, welcher bei Klick des Hyperlinks die Domain www.bildung.de (href-Attribut zur Angabe des Ziels) in einem neuen Browserfenster (target-Attribut zur Angabe der Browserfensterwahl) öffnen wird.
Beispiel zu 2: <img src="bilder/blume1.jpg" title="Glockenblume" alt="Glockenblume" />
Das Bild blume.jpg des Ordners bilder wird eingebunden und angezeigt mit der Titelangabe (title-Attribut) Glockenblume (Erzeugt den Bildtooltip im Firefox) und der alternativen Textangabe (alt-Attribut)
Glockenblume (Erzeugt den Bildtooltip im IE, dient als Ersatztext, wenn das Bild nicht angezeigt wird sowie alsTextgrundlage für die Barrierefreiheit (z.B. für Screenreader/Braile-Zeile)).
CSS (Cascading Style Sheet - DAS DESIGN)
Aufbau und Schreibweise - Formatierungssprache – Grundlagenselektoren (CSS2)
Formatierungsblöcke mit Attributen und Werten
Definiert werden 3 Typen von Grundlagen-Selektoren:
ID-Selektoren
Schreibweise:
#idbezeichner {
attribut1: wert1;
attribut2: wert2;
}
- Nach Bestimmung des Selektortyps werden die zu vergebenden Attribute und Werte der gewünschten Formatierung in {……} Klammern eingefasst.
- Die Attribute sind klein zu schreiben.
- Die Werte sind klein zu schreiben.
- Doppelwort-Attribute werden mit einem - (Bindestrich) geschrieben z.B. font-size.
- Das Zuweisungszeichen zwischen Attribut und Wert ist der :
- Als Trennzeichen zwischen mehreren Attributen gilt das ;
- ID-Selektoren werden mit einer # eingeleitet, der idbezeichner ist ein selbständig zu wählender Begriff
(keine Umlaute, keine Sonderzeichen außer dem Unterstrich).
Wirkung im HTML
ID-Selektoren wirken sich im HTML aus, indem dem zu formatierenden Element in HTML das eindeutige ID- Attribut in Form des ID-Bezeichners aus dem CSS vergeben wird. Diese ID sollte kein anderes Element in HTML besitzen, diese ID sollte eindeutig sein. CSS-Selektoren werden meist eingesetzt zur eindeutigen Identifizierung der Seitenstruktur z.B. <div id="headerbereich"></div> etc.
Beispiel:
CSS: #hauptabschnitt{ background-color:#F00; color:#FFF;}
HTML: <div id=" hauptabschnitt">Dies ist der Hauptabschnitt</div>
Der DIV im HTML wäre somit bezüglich seiner Hintergrundfarbe rot und der Textinhalt wurde als
Schriftfarbe Weiß besitzen.
HTML-Selektoren
Schreibweise:
htmlContainername {
attribut1: wert1;
attribut2: wert2;
}
- Nach Bestimmung des Selektortyps werden die zu vergebenden Attribute und Werte der gewünschten Formatierung in {……} Klammern eingefasst.
- Die Attribute sind klein zu schreiben.
- Die Werte sind klein zu schreiben.
- Doppelwort-Attribute werden mit einem - (Bindestrich) geschrieben z.B. font-size
- Das Zuweisungszeichen zwischen Attribut und Wert ist der :
- Als Trennzeichen zwischen mehreren Attributen gilt das ;
- HTML-Selektoren ergeben sich über die Verwendung der Containernamen in der HTML-Struktur.
Wirkung im HTML
HTML-Selektoren wirken sich im HTML automatisch bei Verwendung des HTML-Containers aus, welcher als Selektor bestimmt wurde. Diese Selektoren sind dann sinnvoll, wenn allgemeingültige Formatierungen getroffen werden sollen, welche nicht explizite identifiziert werden müssen.
Beispiel:
CSS: h1{ color:#F00; text-decoration:underline;font-size:18px;}
HTML: <h1>Bildung ist wertvoll</h1>
ALLE h1-Container in HTML werden somit in der Schriftfarbe rot, unterstrichen und mit der Schriftgröße 18px gehalten sein, dies muss den h1-Containern nicht zusätzlich durch ein Attribut oder Wertezuordnung vermittelt werden. Dies erfolgt automatisch.
Klassen
Schreibweise:
.eigeneSelektorbezeichnung {
attribut1: wert1;
attribut2: wert2;
}
- Nach Bestimmung des Selektortyps werden die zu vergebenden Attribute und Werte der gewünschten Formatierung in {……} Klammern eingefasst.
- Die Attribute sind klein zu schreiben.
- Die Werte sind klein zu schreiben.
- Doppelwort-Attribute werden mit einem - (Bindestrich) geschrieben z.B. font-size
- Das Zuweisungszeichen zwischen Attribut und Wert ist der :
- Als Trennzeichen zwischen mehreren Attributen gilt das ;
- Klassen werden mit einem . eingeleitet, der Selektorbezeichner/Klassenbezeichner ist ein selbständig zu wählender Begriff (keine Umlaute, keine Sonderzeichen außer dem Unterstrich).
Wirkung im HTML
Klassen-Selektoren wirken sich im HTML aus, indem dem zu formatierenden Element in HTML das class-Attribut mit dem Wert der eigenen Selektorbezeichnung im CSS vergeben wird. Diese Klasse kann beliebig oft und an beliebige Elemente vergeben werden. Klassen-Selektoren werden meist eingesetzt zur flexiblen Vergabe von Formatierungswünschen, welche selbst entschieden können werden sollen.
Beispiel:
CSS: .sondertext{ background-color:#00F; color:#FFF; text-decoration: underline overline;}
HTML: <p>Dieser Text wird nicht vollständig formatiert nur das Wort <span class="sondertext">Klasse</span> bekommt ein neues Gewand! Ist das nicht <span class="sondertext">Klasse</span>, den dieses Wort trägt es auch!</p>
Die Textbestandteile im Absatzverlauf erhalten beide nach eigener Bestimmung die
Formatierung eines blauen Hintergrundes, mit weißem Text und als Zusatz eine Ober- und Unterlinie als Dekoration.
Mehrere Selektoren mit der gleichen Formatierung belegen
Sollen mehrere Selektoren die gleiche Formatierung erhalten, können diese in der CSS-Angabe mit dem
, (Kommata) getrennt in einer Listung aufgeführt werden.
Beispiel: h1, .extratext, #headerabschnitt { font-family:Arial, font-size:14px;}
Somit würde jeder Text der im HTML als h1 definiert wurde, überall dort wo die Klasse (class)
extratext verwendet wurde und der Bereich mit der ID headerabschnitt als Schriftart Arial tragen und
14px groß sein.
Links in CSS (Pseudo-Klassen)
Hyperlinks in HTML können via CSS über 6 Selektoren formatiert werden:
a {
attribut1: wert1;
attribut2: wert2;
}
Deckt bezüglich der Formatierung ALLE optischen Zustände des Hyperlink-Containers ab.
a:link {
attribut1: wert1;
attribut2: wert2;
}
Deckt bezüglich der Formatierung nur den optischen Zustand noch nicht genutzter Hyperlinks ab.
a:hover {
attribut1: wert1;
attribut2: wert2;
}
Deckt bezüglich der Formatierung nur den optischen Zustand der Hyperlinks ab, welche mit der
Maus überrollt werden.
a:active {
attribut1: wert1;
attribut2: wert2;
}
Deckt bezüglich der Formatierung nur den optischen Zustand des aktuell ausgewählten Hyperlinks ab.
a:visited {
attribut1: wert1;
attribut2: wert2;
}
Deckt bezüglich der Formatierung nur den optischen Zustand bereits genutzter Hyperlinks ab.
a:focus {
attribut1: wert1;
attribut2: wert2;
}
Deckt bezüglich der Formatierung nur den optischen Zustand des Hyperlinks ab, welche bezüglich der
Tabulator-Taste aktuell die Auswahl trägt.
Hinweis:
Die Anpassung ist bei Notwendigkeit auch in der dargestellten Reihenfolge vorzunehmen, es müssen jedoch nicht immer alle Zustände formatiert werden. So reicht es z.B. die grundlegende a-Formatierung und die Ergänzung eines gewünschten Änderungszustandes zu wählen z.B. a:hover.
