Einführung in HTML, CSS und JavaScript Flashcards

1
Q

Bis einschließlich der HTML-Version 4.01 basiert die Sprache auf was?

A

Aus der standardisierten generalisierten Auszeichnungssprache (engl. standard generalized markup language, SGML) und war lediglich eine Teilmenge aus SGML.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Was ist das übergeordnete Ziel bei HTML?

A

Übergeordnetes Ziel bei der Entwicklung von HTML war immer, die Dokumente unabhängig von Plattformen und Browsern zu halten.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Was ist HTML?

A

HTML selbst ist eine reine textbasierte Auszeichnungssprache und Dokumentenbeschreibungssprache für Hypertext-Dokumente im World Wibe Web.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Was ist der entscheidende Aspekt an HTML?

A

Der entscheidende Aspekt an HTML ist die Möglichkeit, Texte nicht nur zu formatieren, sondern Inhalte miteinander zu verknüpfen. Dies ermöglicht die Gestaltung von Texten, die nicht unbedingt linear angelegt sein müssen, sondern deren Abfolge durch die Leser mit-bestimmt wird.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Was sind Metadaten?

A

Diese Inhaltsangaben werden als Meta-Information und ihre maschinenlesbare Repräsentation als Metadaten, also als Daten, die Information über Daten beinhalten, bezeichnet.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Wozu dienen Metadaten?

A

Diese maschinenlesbaren Metadaten dienen auch zum Austausch von Informationen zwischen unterschiedlichen Programmen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Auf welchen drei Konzepten beruht die Entwicklung des Webs?

A
  • weltweite Adressierung von Ressourcen über URLs,
  • einfaches Protokoll zum Anfordern und Ausliefern von Ressourcen (HTTP),
  • Hypertextparadigma zur Navigation zwischen den Ressourcen.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Was ist eine Informationsressource?

A

Im Zusammenhang mit Dokumentbeschreibungssprachen ist eine Informationsressource wie das HTML-basierte frühe Web im Kern als verteiltes Repositorium von vernetzten Textressourcen, die in HTML codiert sind, zu verstehen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Ein HTML-Text ist somit die Gesamtheit von thematisch zusammengehörigen Texteinheiten, den sogenannten … . Die Beziehungen zwischen den Knoten werden durch … ausgedrückt.

A
  1. Hypertextknoten
  2. Hypertextlinks
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Was ist XML?

A

Die sogenannte erweiterbare Auszeichnungssprache (engl. extensible markup language, XML) wird zur Repräsentation von großen Informationskollektionen auf der Grundlage unterschiedlicher Informationsparadigmen im Web eingesetzt.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Wo werden HTML und XML eingesetzt?

A

XML kommt insbesondere beim verteilten Daten-, Informations- und Wissensmanagement im Web zum Einsatz. HTML hingegen wird in der Regel „nur“ zur eigentlichen Repräsentation von Hypertexten und Hypertext-Dokumentkollektionen benötigt.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Webbrowser bieten seitdem bis heute typischerweise die folgenden Navigationsunterstützungen an: (3)

A
  • Backtracking: Die Möglichkeit, während einer Browsersitzung die bisher besuchten Hypertextknoten in umgekehrter Reihenfolge wieder zurückzuverfolgen.
  • History: Die Möglichkeit, auf die während einer Browsersitzung bisher besuchten Hypertextknoten direkt und wahlfrei zuzugreifen, meistens über eine Listenschnittstelle.
  • Bookmarks: Die Möglichkeit, auf Hypertextknoten während des Browsens explizit Lesezeichen zu setzen, die bei Sitzungsende gespeichert und in späteren Sitzungen wieder aufgerufen werden können.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Charakterisieren Sie das frühe HTML-basierte Web als Hypertextsystem.

A
  • weltweit verteilter Informationsbestand
  • offener, von überall her zugänglicher Informationsbestand
  • keine direkten technischen Möglichkeiten, einzelne
    Hypertextbereiche nach außen als Einheit kenntlich zu machen
  • zweistellige, unidirektionale, in das Quelldokument eingebettete Hypertextlinks
  • Hypertextlinks als einzige Gliederungsmöglichkeit für Hypertexte, keine direkte technische Unterstützung anderer Organisationsprinzipien wie beispielsweise hierarchische Gliederung
  • einfache, standardisierte und mit verbreiteten Werkzeugen
    bearbeitbare Formate (HTML) zur Textdarstellung
  • keine Nutzermodellierung
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Was sind die drei grundlegenden Konzepte des frühen HTML-basierten Webs?

A
  • weltweite Adressierung von Ressourcen über URLs,
  • einfaches Protokoll zum Anfordern und Ausliefern von Ressourcen (HTTP),
  • Hypertextparadigma zur Navigation zwischen den Ressourcen, z. B. über Anker in HTML-Dokumenten.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Was versteht man unter Wohlgeformtheit (HTML)?

A

Die Klammerstruktur der öffnenden und schließenden Tags sollte somit wohlgeformt sein. Wird ein Element in dem übergeordneten Element, wo es geöffnet wurde, auch wieder geschlossen, so wird dies ebenfalls als wohlgeformt bezeichnet.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

HTML-Dokumente können außer den Tags noch drei weitere Arten von Markups enthalten:

A

eine Dokumenttypdeklaration, Kommentare und Referenzen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Wie sieht die Dokumenttypdeklaration in HTML aus?

A

Die Deklaration lautet einfach nur: <!doctype html>
Diese Dokumenttypdeklaration legt fest, welche Version und Variante von HTML verwendet wird.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Wie sehen Kommentare in HTML aus?

A

Kommentare folgen in HTML dem Muster <!-«Kommentartext»->, wobei in der Zeichenfolge «Kommentartext» die Zeichenfolge „–“ nicht vorkommen darf.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Wie sehen Entity References in HTML aus?

A

Entity References folgen dem Muster &«EntName»; und dienen in HTML lediglich als mnemonische Alternative zu Zeichenreferenzen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Was ist HTML konzeptionell gesehen?

A

Konzeptionell gesehen ist ein HTML-Dokument eine hierarchische Struktur von logischen Elementen.
Jedes Element hat einen Namen oder Typ und eventuell Attribute.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Was besagt das Datenmodell von HTML?

A

Das Datenmodell abstrahiert von der HTML-Syntax und stellt Begriffe auf einer höheren Abstraktionsstufe zur Verfügung.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Was ist das HTML-DOM?

A

Das HTML-DOM ist somit das Objektmodell und die Schnittstelle für HTML. Im HTML-DOM wird jedes HTML-Element als Objekt mit allen Eigenschaften, Methoden und Ereignissen definiert.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Ein HTML-Dokument ist nach dem folgenden Muster aufgebaut:

A

<html>
<head><<...>></head>
<body><<...>></body>
</html>

24
Q

Was befindet sich im Kopfdatenbereich vom HTML-Dokument?

A

Im Kopfdatenbereich des HTML-Dokumentes zwischen den Tags <head> und </head> können verschiedene HTML-Elemente eingefügt werden, mit denen der Inhalt und die Darstellung einer Webseite beeinflusst werden können. Das Element HEAD enthält z. B. Verwaltungsinformation zum Dokument, etwa seinen Titel, Schlüsselwörter für Suchmaschinen und andere Daten.

25
Q

Was befindet sich im Körperdatenbereich vom HTML-Dokument?

A

Alle im Inhaltsbereich des HTML-Dokuments zwischen <body> und </body> befindlichen Elemente werden vom Webbrowser gerendert und angezeigt. Man spricht auch vom HTML-Dokumentkörper, in den alle HTML-Elemente wie z. B. Text, Hypertextlinks, Tabellen, Bilder etc. geschrieben werden, um die Struktur der Webseite festzulegen.

26
Q

Es gibt jedoch gute Gründe, den HTML-Code zu validieren:

A
  • Sobald weitere Sprachen mit HTML kombiniert werden sollen – etwa in Stylesheets – werden Syntaxfehler leicht zur Stolperfalle.
  • Gerade bei mobilen Geräten sind weniger mächtige Fehlerkorrekturroutinen im Webbrowser integriert.
  • Suchmaschinen müssen mit der Webseite umgehen können.
  • Mit Blick auf die barrierefreie Webseite gilt, dass fehlerhafte Textauszeichnungen z. B. auch die Funktionalitäten bei Vorlesesoftware einschränken können.
27
Q

Was ist eine URL?

A

URLs codieren einen Zugriffsweg auf die Ressource. Dadurch ergeben sich zwei grundlegende Probleme. Erstens kann eine URL nicht als eindeutiger Name für die Ressource fungieren und zweitens wird die Adresse ungültig, wenn die Ressource ihren Speicherort ändert.

28
Q

Was ist eine URN?

A

URNs dazu benutzt, Ressourcen eindeutige und dauerhaft gültige Namen zu geben, um sie somit eindeutig identifizieren zu können.

29
Q

Was ist eine URI?

A

Der Oberbegriff zu URLs und URNs ist Uniform Ressource Identifier (URI).

30
Q

Wie sieht das Muster einer URL aus?

A

«Schema»:«SchemaSpezifisches»

Zugriff über HTTP:
http: «SchemaSpezifisches»

31
Q

Was ist eine absolute URL?

A

Eine absolute URL benennt eine Datei oder ein Verzeichnis im Dateisystem des Webservers.

32
Q

Zwei Sonderfälle sind bei der Auflösung einer URL noch zu beachten:

A

Endet im ersten Fall eine URL mit dem Solidus („/“) und benennt der Teil vor dem Solidus ein Verzeichnis, so wird ein konfigurierbarer Dateiname – etwa index.html – als Default-Dateiname an die URL angehängt. Existiert keine solche Datei in dem Verzeichnis, so liefert der Webserver die Ansicht auf ein Dateiverzeichnis zurück.

Beginnt im zweiten Fall das erste Segment eines Pfades mit einer Tilde ˜, so wird der Rest des Segments als Nutzerkennung interpretiert und der Pfad hat seinen Ursprung in einem konfigurierbaren Verzeichnis, typischerweise HTML-Data, in dem zur Kennung gehörigen Home-Verzeichnis.

33
Q

Was ist eine relative URL?

A

Eine relative URL besteht nur aus durch den Solidus / getrennten Pfadsegmenten. Sie wird durch Anhängen an eine absolute Basis-URL zu einer absoluten URL komplettiert.

34
Q

Wozu dient der Fragmentidentifikator?

A

«FragmentID»

Sowohl einer absoluten als auch einer relativen URL kann ein sogenannter Fragmentidentifikator in der Form

angehängt sein. Mit diesem Mechanismus lassen sich benannte Teilbereiche eines Dokuments ansprechen.

35
Q

Wie lautet das Escapezeichen bei URLs?

A

%

36
Q

HTML und CSS können sich nun die Vorteile des Modells der strukturierten Dokumente zunutze machen:

A
  • Das Quellformat enthält Strukturelemente, die für eine automatisierte Verar-beitung des Dokuments nutzbar sind.
  • Formatvorgaben für die einzelnen Elemententypen unterstützen eine konsistente Formatierung innerhalb von Dokumenten.
  • Die Anwendung einer separaten Formatvorgabe für eine Gruppe von Dokumenten unterstützt eine konsistente Formatierung dieser Dokumente.
  • Die Anwendung verschiedener Formatvorgaben auf ein Dokument ermöglicht die flexible Darstellung und Nutzung des Dokuments je nach Anwendungssituation.
37
Q

HTML4 eröffnet drei Möglichkeiten, CSS-Formatvorgaben mit einem HTML-Dokument zu verknüpfen.

A

1.) Als erste Möglichkeit kann ein als externe Datei vorliegendes Stylesheet über das HTML-Element LINK zugebunden werden; das Element LINK erscheint immer innerhalb des Elements HEAD in einem HTML-Dokument.

2.) HTML ermöglicht es auch, ein CSS-Stylesheet intern in einem HTML-Dokument unterzubringen. Als Container dient ein HTML-Element STYLE in dem HTML-Element HEAD.

3.) Als dritte Möglichkeit sieht der HTML-Standard für die meisten HTML-Elemente das Attribut STYLE vor, als dessen Wert CSS-Wertzuweisungen erscheinen können.

38
Q

Parameterzuweisungen in einer CSS-Regel

A

«PName»: «PWert»

39
Q

Steuerdirektven in CSS

A

@«SName» «SInhalt»

40
Q

Kommentare in CSS folgen dem Muster

A

/ * «Kommentartext» * /

41
Q

Was sind CSS Selektoren?

A

Einfache CSS-Selektoren geben einen Namen für ein HTML-Element an. Im Beispiel sind u. a. die Selektoren BODY, H1 und IMG von diesem Typ. Selektoren können sich auch auf die Werte von CLASS-Attributen im HTML-Dokument beziehen.
Selektoren können sich auch auf die Werte von CLASS-Attributen im HTML-Dokument beziehen. Sie folgen dann dem Muster: .«CWert».

42
Q

Als Ergebnis der Formatierung für ein visuelles Medium berechnet ein CSS-Prozessor eine Struktur von sogenannten Boxen.

A

ein rechteckiger Inhaltsbereich mit drei Umrandungsbereichen von innen nach außen: Padding, Border und Margin.

43
Q

Das neue Box-Modell von CSS3

A

Das klassische Box-Modell wird dann problematisch, wenn innerhalb einer Box für die Angaben von width, padding, border oder margin verschiedene Einheiten verwendet werden.
In CSS3 wurde das neue Box-Modell eingeführt. In diesem Modell wird die Breite width und die Höhe height nicht mehr nur für den Inhaltsbereich festgelegt, sondern der Innenabstand (padding) und der Rahmen (border) gleich mitberücksichtigt werden.

44
Q

CSS unterscheidet zwei Typen von Boxen:

A

Inlineboxen und Blockboxen. Inlineboxen können an einer Inlineformatierung teilnehmen. Sie können mit anderen Inlineboxen zusammen horizontal in Zeilen angeordnet und an Zeilengrenzen in mehrere Inline-boxen umgebrochen werden. Blockboxen können an einer Blockformatierung teilnehmen. Sie können mit anderen Blockboxen zusammen vertikal angeordnet werden.

45
Q

Einbinden von JavaScript in HTML

A

JavaScript wird mit dem script-Element in ein HTML-Dokument eingebunden, welches sowohl im head-Element, als auch im body-Element verwendet werden kann. Die Einbindung innerhalb des body-Elements ist besser, weil dann das gesamte DOM geladen wird.

Der JavaScript-Code wird direkt zwischen dem öffnenden script und dem schließenden script-Tags notiert:

Im Script steht lediglich ein Verweis mit dem src-Attribut auf eine externe Datei

46
Q

Warum ist es sinnvoll, das Schlüsselwort „var“ vor einen Variablennamen in JavaScript zu setzen?

A

Man sollte unbedingt das Schlüsselwort „var“ vor den Variablennamen setzen, wenn es keinen Grund gibt eine globale Variable zu verwenden. Wird es weggelassen, erzeugt man eine solche globale Variable, die außerhalb einer Funktion gültig ist.

47
Q

Wie kann man in Javascript eine Bildschirmausgabe erzeugen, ohne die Funktion document.write() zu verwenden?

A

document.getElementByID(“textelement”).innerHTML = “Hier wird das gefundene Element per JavaScript ersetzt.”;

48
Q

Inwiefern folgt JavaScript dem Konzept der objektorientierten Programmierung?

A

JavaScript kennt komplexe Variablentypen wie Objekte. Es gibt in JavaScript eigene Objekte, JavaScript-Objekte und HTML-Objekte. Diese verfügen über Eigenschaften (Attribute) und Methoden, welche in das Objekt verkapselt sind und Implementierungsdetails verbergen. Jede Eigenschaft hat einen Namen und einen Wert. Die Methoden sind die Funktionen, welche nur mit dem Objekt ausgeführt werden können. Jedes Objekt erbt vom Prototyp des globalen Objekt-Konstruktors.

In JavaScript werden eine Vielzahl von Objekten beispielsweise für das Browserfenster, das HTML-Dokument oder zur Ereignisbehandlung bereitgestellt.

49
Q

Wie greift man per JavaScript auf ein DOM Element zu? Geben Sie ein Beispiel.

A

JavaScript kann auf jeden der Knoten im HTML-DOM mithilfe der verschiedenen HTML-DOM-Methoden und HTML-DOM-Eigenschaften zugreifen.

document.getElementsByName() - alle Knoten mit einem bestimmten Namen werden gefunden

50
Q

Schließlich kann sich ein CSS Selektor auf den Zustand des Browsers beziehen:

A

Dies ist der Fall bei den sogenannten Pseudoclass-Selektoren A:link und A:visited, die HTML-Anker A selektieren, wenn ihre Ziele vom aktuellen Browser aus noch nie bzw. wenigstens schon einmal besucht worden sind.

51
Q

Um HTML-Elemente manipulieren zu können, müssen diese vorher gefunden werden:

A
  • document.getElemenetsByClassName() – alle Knoten mit einem bestimmten Klassennamen werden gefunden,
  • document.getElementsByName() - alle Knoten mit einem bestimmten Namen werden gefunden.

Mit querySelector() und querySelectorAll() kann auf komplexere Strukturen, z. B. wenn ein article-Element enthalten ist, zugegriffen werden.

52
Q

DOM-Manipulation

A

Das HTML-DOM ist das Objektmodell und die Schnittstelle für HTML und da-mit der Standard, mit dem HTML-Elemente geändert, hinzugefügt oder gelöscht werden können.

In den Ausführungen zu HTML wurde bereits erwähnt, dass HTML-Elemente eines Dokumentes eine hierarchische Baumstruktur bilden.

Ganz oben ist das sogenannte document-Objekt, danach kommt das html-Element und anschließend head- und body-Element, gefolgt von weiteren Kind-Elementen.

Alle Elemente dieses Baumes sind Knoten (engl. nodes) und miteinander verwandt durch Eltern-, Kind- oder Geschwisterbeziehungen. Aber auch die HTML-Attribute und die Inhalte der HTML-Elemente selbst sind Knoten des DOM-Baumes.

53
Q

Hat man die Elemente ausfindig gemacht, kann man diese auch ändern (JavaScript):

A
  • element.innerHTML= ändert den Inhalt eines Elements,
  • element.attribute=, element.setAttribute(attribut, wert) ändern den Wert eines Attributs,
  • element.style.property= - ändert den CSS-Style eines Elements.
54
Q

Ein neues HTML-Element fügt man mit der Methode … hinzu. Textin-halt wird mit … erzeugt. In den DOM-Baum wird dieser Knoten mit … eingehängt.

A

createElement()
createTextNode()
appendChild()

55
Q

Zum Entfernen eines HTML-Elements vom DOM-Baum gibt es die Methode … . Mit … ersetzt man einen Knoten durch einen anderen. Will man ganze Fragmente vervielfältigen greift man auf die Methode … zurück.

A

removeChild()
replaceChild()
cloneNode()

56
Q

Welches Gremium hat es seit 1996 zur Aufgabe, über die Entwicklungsstandards von HTML zu entscheiden?

A

Das World-Wide Web Consortium (W3C)