* Prüfungsfragen 29-45 (Kategorie XHTML & CSS) – Danke Sabine!

29) Wie ist das XHTML-Grundgerüst eines Dokumentes aufgebaut?

Das Grundgerüst besteht aus 3 Bereichen:

1) die Dokumenten-Typ-Deklaration (kurz DTD), z.B. XHTML 1.0 strict.

2) Head (oder Kopf-Bereich); hier befinden sich sämtliche technische und dokumentarische Informationen wie z.B. Stylesheets; was im Head steht, ist im Browser nicht sichtbar.

3) Body (oder Körper); dieser Bereich enthält alle sichtbaren Informationen wie z.B. Content, Bilder, Links, Tabellen usw.

30) Was versteht man unter einem XHTML-Entity?

Ein Entity ist ein Sonderzeichen, das die international korrekte Schreibweise gewährleistet (z.B. für Umlaute oder Sonderzeichen); ein Entity beginnt immer mit einem & und endet mit einem ;

31)  Nennen Sie das XHTML-Entity für Leerzeichen, Umlaute und Copyright-Symbol.

Leerzeichen:  

Umlaut a: ä Umlaut o: ö Umlaut u: ü

Copyright: ©

32) Was machen die Tags body, table, td, div, p, form, input, img, a, ol, ul, li?

body: beinhaltet alle direkt “sichtbaren” Inhalte der Webseite (Text, Bilder, usw.)

table: erzeugt einen Tabellen-Container

td: bezeichnet eine mit Content befüllbare Zelle innerhalb einer Tabelle

div: gehört zur Gruppe der Blockelemente (siehe Frage 33) und wird erst sichtbar, wenn es via CSS anders positioniert oder mit einem Rahmen oder anderen Hintergrundfarben versehen wird

p: steht für “paragraph” und erzeugt einen Absatz

form: erzeugt ein Formular, dient also als Container für Steuerelemente

input: definiert den Typ meines gewünschten Steuerelements (z.B. type=”radio” erzeugt eine Radio-Button, type=”submit” erzeugt einen Button zum Abschicken der Formularinhalte)

img: steht für “image” und dient zur Einbindung eines Bildes auf der Webseite

a: steht für “Anker” und ermöglicht die Einbindung von Links

ol: steht für “ordered list” und erzeugt eine geordnete Liste mit Ranking-Darstellung der Inhalte

ul: steht für “unordered list” und erzeugt eine ungeordnete Liste ohne Hierarchien

li: steht für “list” und erzeugt Listenpunkte in Aufzählungsform

33) Was versteht man unter Blockelementen? (mit Beispielen)

Nach Vorgabe des W3C (siehe Frage 16 “Webdesign Grundlagen”) muss zumindest in den Strict-Varianten von (X)HTML jede Art von Inhalt (Text oder Inline-Elemente) innerhalb so genannter Blockelemente stehen. Blockelemente definieren Bereiche, die an ihrem Ende automatisch einen Zeilenumbruch erzielen und so eine Art Block erzeugen.
Jedem Element können Eigenschaften zugewiesen werden und sie können auch verschachtelt werden; in diesem Fall spricht man auch von Eltern- und Kindelementen, wobei Eltern-Elemente immer außen liegen und Kind-Elemente enthalten. Beispiele für Blockelemente sind: div (für Farbzuweisungen), p (für Absätze), H1-H6 (für Überschriften), Listen, Zitate,…

34) Wozu dienen die XHTML-Attribute style, class, alt, src, href, target, action, id, cellspacing?

style: ist ein Universalattribut und wichtig für die Gestaltung (z.B. für color oder font-size); das style-Element wird im Head-Bereich notiert

class: ebenfalls ein Universalattribut, das zur Gruppe der Selektoren zählt; class kann man für fast alle Elemente vergeben und mit CSS durch einen Punkt ansprechen (z.B.:   .hinweis)

alt: steht für den alternativen Bildtext; wenn z.B. ein Browser mein Bild nicht korrekt anzeigen kann, gibt der alternative Bildtext Aufschluss über den Inhalt des Bildes

src: steht für “source” und besagt, woher (aus welcher Quelle) z.B. ein Bild stammt, das ich in meine Webseite einbaue

href: das ist sowas wie “src”, nur bezogen auf Links; href bezeichnet einen Quellanker und enthält meine URL

target: gibt an, wo und wie ein neuer Datei-Inhalt geöffnet und angezeigt wird (z.B. target=”_blank” erzeugt ein neues Browserfenster, target=”_self” bewirkt, dass die neuen Inhalte im bestehenden Fenster geladen werden)

action: relevant für Formulare; action besagt, was mit den Daten passiert, wenn ich auf den Senden-Button klicke, also wohin sie geschickt werden

id: ein Universalattribut, dass ebenso wie “class” zur Gruppe der Selektoren gehört;  der Wert, den ich meiner id zuweise, kann nur 1x im gesamten Dokument vorkommen; id wird über CSS mittels einer Raute angesprochen (z.B.:  #hinweis)

cellspacing: gibt den Abstand von Zellen zum Rand der Tabelle an

35) Was beinhaltet der Head-Bereich eines XHTML-Dokuments?

Im Head (oder Kopf-Bereich) befinden sich sämtliche technische und dokumentarische Informationen wie z.B. Stylesheets; Text, der im Head steht, ist im Browser nicht sichtbar.

36) Welche 3 Möglichkeiten gibt es, CSS in XHTML einzubinden?

a) Einbindung über ein STYLE-Attribut im Bereich “Body” (z.B.:  <p style = “color: silver;  font-weight:bold;>Absatz</p>)

b) Einbindung über ein STYLE-Element im Bereich “Head” (z.B.:  <style typ = “text/css”>)

c) Einbindung über ein Link-Element auf ein externes CSS (z.B.: <link rel = “stylesheet” type=”text/css” href=”stylesheets/default.css” media=”screen” />

(letztere Variante gilt heutzutage als die beste)

37) Was bedeutet “Cascading” im Zusammenhang mit CSS?

Cascading bedeutet, dass mehrere Stylesheets zusammenwirken können (nacheinander oder parallel), selbst wenn sie konkurrierende Regeln beinhalten.

38) Wie ist eine CSS-Regel aufgebaut?

Regel – Selektor – Deklarationsblock – Deklaration – Eigenschaften – Wert

Es gibt immer mindestens einen Selektor mit geschwungener Klammer, und wenn mehrere Deklarationen vorkommen werden diese durch Strickpunkte voneinander getrennt.

39) Was versteht man unter Selektoren?

Ein Selektor dient zur Auswahl eines bestimmten HTML-Elements, welches mit einer speziellen Eigenschaft versehen werden soll (z.B. mit einer Überschrift h1).

Es gibt 3 Arten von Selektoren:

a) Typselektor (spricht Elemente anhand des Elementnames an)

b) Klassenselektor (wird angesprochen durch .klassenname)

c) ID-Selektor (wird angesprochen durch #klassenname; der Wert eines ID-Selektors darf nur 1x pro Dokument auftreten)

40) Was sind CSS-Klassen?

Eine Klasse ist eine Form von Selektoren, die beliebig oft im Dokument vorkommen und unterschiedlichen Elementen zugeordnet werden kann (z.B.:  font-weight:bold;)

41) Was sind CSS-Pseudoformate?

Pseudoformate (oder Pseudoklassen) sind nur in Verbindung mit dem Link-Tag “a” wirksam und werden eingesetzt, um Links zu gestalten und deutlich zu kennzeichnen (z.B.: a:hover, a:visited,…).

42) Was kann man bei der Verknüpfung mit einer externen CSS-Datei mit dem Attribut “media” bewirken?

Das Attribut “media” gibt an, für welche Ausgabemedien das referenzierte Stylesheet bestimmt ist (kann ein Medium sein, können aber auch mehrere sein, z.B.: print, screen, all, embossed, braille, aural, handheld, projection, tv,..).

43) Was bewirken die CSS-Eigenschaften margin, padding, position, float, max-width, line-height?

margin: bestimmt den Außenabstand von Elementen (auch “Aufpolsterung”

padding: bestimmt den Innenabstand von Elementen

position: definiert die Position von Elementen (static, relative, absolute)

float: bewirkt, dass das Element “schwebt”, es folgt nicht mehr dem “normal flow”

max-width: bestimmt die maximale Breite eines Elements (IE nicht kompatibel!)

line-height: bestimmt die Zeilenhöhe einer Schrift (entspricht “Zeilenabstand” im Print)

44) Mit welchem Tag werden YouTube-Videos auf Webseiten implementiert?

Videos können mit dem Tag <object> eingebunden werden.

45) Was versteht man unter hexadezimaler Schreibweise von Farbcodes?

Hexadezimale Farbcodes dienen dazu, Farben auf Webseiten eindeutig zu definieren. Die Codes beginnen mit # und bestehen aus einer 6-stelligen Kombination aus den Zahlen 0-9 sowie den Buchstaben A-F (z.B.: #FFFF00). Damit können aus jeder der 3 RGB-Grundfarben (rot, grün, blau) 256 Abstufungen angegeben werden (das sind insgesamt 16,78 Mio. Farben).