Kaptel 3 - HTML & CSS Flashcards
Was ist Hypertext Markup Language (HTML)
- Auszeichnungssprache zur Strukturierung beliebiger Inhalte
- Angelehnt an die XML-Syntax
- Urpsprünglich von SGML abgeleitet, um statische Textdokumente zu beschreiben
Beschreiben Sie die grobe Struktur eines HTML-Dokuments
- Dokumententyp und HTML-Variante
- Kopfbereich mit beschreibenden Angaben
- Seitenkörper mit angezeigten Elementen
Beschreiben Sie die Gliederung eines HTML-Dokuments (3)
< und > fehlen aufgrund von Formatierungsproblemen
**html…html **
- Definiert den Wurzelknoten jedes HTML-Dokuments
- Darf nur ein head und ein body Unterelement besitzen
head…head
- Definiert den nicht sichtbaren Kopfbereich des Dokuments
- Beinhaltet beschreibende Informationen zur Seite
body…body
- Definiert den Hauptbereich des Dokuments
- Beinhaltet alle sichtbaren Texte und Elemente
Nennen und beschreiben Sie kurz die strukturgebenden HTML-Elemente
(Allgemein und Semantisch)
Beispiel im Anhang
Für allgemeine Layouts werden allgemeinere Elemente benötigt. Die genauere Darstellung wird erst durch das Stylesheet festgelegt.
Allgemeine, strukturgebende Elemente
________div
Definition eines beliebigen Blockbereichs
________span
Definition eines inline-Blocks ohne Zeilenumbruch
Semantische Elemente aus HTML
________header
Kennzeichnung des Seitenkopfs
________footer
Kennzeichnung des Fußbereichs
________nav
Kennzeichnung des Navigationsbereichs
________section
Kennzeichnung eines zusammenhängenden Abschnitts
Was ist das Boxmodell des Browsers?
Nennen Sie 4 verschiedene Arten von Boxen.
(4)
Jedes HTML-Element definiert einen rechteckigen Bereich. Es gibt verschiedene Arten von Boxen.
- Inline: Ausrichtung der Boxen wie die Buchstaben einer Zeile
- Block: Erzwingt einen Zeilenumbruch vor und nach der Box
- Inline-Block: Wie Block aber Breite wächst mit dem Inhalt
- Table-Cell: Formatierung wie die Zelle einer Tabelle
Mehrere Boxen können ineinander geschachtelt werden. Im Stylesheet werden die Darstellungsregeln der Boxen definiert. Vererbung der meisten Style-Angaben an die inneren Boxen.
Beschreiben Sie wie die Darstellung eines HTML-Dokuments funktioniert (4)
- Der Anwender gibt im Browser eine Adresse ein oder klickt auf einen Link
- Der Browser besorgt das angefragte Dokument und alle eingebundenen Ressourcen (Bilder, Sounds,..)
- Der Browser parst das empfangene Dokument und erstellt den DOM-Baum
- Basierend auf dem Document Object Model wird die Anzeige der Seite berechnet
Was ist das Document Object Model? (4)
- Rekursive Datenstruktur zur Beschreibung von XML-Strukturen
- Bildet ein XML-Dokument vollständig durch Knotenobjekte ab
- Bildet das interne Speicherabbild einer Webseite im Browser
- Änderungen am DOM werden sofort auf dem Bildschirm sichtbar
Was sind Cascading Style Sheets? (3)
- Deklarative Sprache zur Gestaltung von Dokumenten
- Ermöglicht Layouts für unterschiedliche Geräte zu definieren, wie Bildschirme, Drucker, Handys, …
- HTML und CSS trennen somit Inhalt und Gestaltung
Welche Anweisungen bietet CSS? (4)
- Positionierung, Ränder, Abstände
- Farben, Bilder, Hintergründe
- Schriftarten und Formatierung
- Umrandungen, Linienarten,…
Beschreiben Sie die Funktionsweise von CSS
- Ein HTML-Dokument definiert Inhalt und Struktur der anzuzeigenden Seite
- Mit speziellen CSS-Selektoren werden Teile der Dokumentenstruktur ausgewählt
- Anschließend wird die Darstellung der ausgewählten Elemente notiert. Dabei erbt jedes Element automatisch die Darstellung seiner übergeordneten Elternelemente
- Im Browser werden die Elemente dann gemäß ihren CSS-Eigenschaften angezeigt
Wie greift man auf das DOM zu?
Ziemlich jeder JavaScript code greift auf das DOM zu.
Um auf das DOM zuzugreifen, braucht man JavaScript.
Javascript kann von einem Element aus durch die Seite navigieren, HTML-Tags, Attribute oder Inhalt einfügen oder entfernen.
Syntax von CSS (Schaubild)
Was sind CSS Layout Grids? (5)
- CSS Grids vereinfachen die Positionierung von Elementen
- Der nutzbare Bereich der Seite wird in Spalten fester Breite eingeteilt
- Jedes Element bekommt eine Breite in “Anzahl Spalten” zugewiesen
- Das Layout past sich automatisch an verschiedene Bildschirmgrößen an
- Auf Smartphones werden alle Elemente untereinander angezeigt
Welchen Problemen stellt sich CSS ohne Layout Grids? (3)
- Ein universelles Layout für alle Geräte zu erstellen ist sehr aufwändig
- Sehr viele Fallunterscheidungen für verschiedene Bildschirmgrößen nötig
- Das Boxmodell des Browsers ist ebenfalls nicht immer leicht zu verstehen
Was ist responsive Webdesign?
Wikipedia :D
Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können. Der grafische Aufbau einer „responsiven“ Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Site betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden von Maus (klicken, überfahren) oder Touchscreen (klicken, wischen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 (hier insbesondere die Media Queries) und JavaScript.
Wie lässt sich CSS in HTML einbinden? Nennen Sie die 4 Möglichkeiten (Schaubild)
