Webseiten Flashcards
Wahr oder falsch:
- HTML steht für Hypertext Media Language
- Hypertext bedeutet, dass Text nicht-linear verbunden werden kann.
- Die Struktur eines Tags ist < tag > Inhalt < tag/>
- HTML5 Dateien sind reine Textdateien
- Ein WYSIWYG-Webeditor ermögicht eine Vorschau auf die Webseiten
- Eine HTML5-Datei beginnt mit der Angabe des Doctype
- HTML5-Dateien besitzen die Endung.htm oder .html
- Schriften können in HTML5-Dateien eingebettet werden
- eine HTML5-Datei bestht aus Dateikopf und Dateikörper
- Meta-Tags sind im Browser unsichtbar
- falsch
- wahr
- falsch
- wahr
- wahr
- wahr
- wahr
- falsch
- wahr
- wahr
a. Notieren Sie das Grundgerüst einer HTML5-Datei.
b. Zählen Sie drei Grammatikregeln für HTML5-Dateien auf.
a. < html > < head > < title > … < /title > … < /head > < body > … < /body > < /html >
b. HTML5-Grammatik:
• HTML5-Elemente stehen in spitzer Klammer. Fast alle Elemente besitzen ein Start- und ein End-Tag.
• HTML-Elemente dürfen ineinander verschachtelt werden.
• Die Eigenschaften (Attribute) eines
HTML-Elements werden im Start- Tag notiert.
a. Wo erscheint der im < title >-Tag eingegebene Text?
b. Wozu werden Meta-Tags benötigt?
c. Weshalb ist die Angabe des Zeichensatzes wichtig?
d. Weshalb müssen Sonderzeichen „maskiert“ werden?
e. Worauf ist bei der Vergabe von Dateinamen zu achten?
a. Der tag erscheint im „Reiter“ über dem Browserfenster oder in der Kopfleiste des Webbrowsers.
b. Meta-Tags liefern (unsichtbare) Zusatzinformationen, die u.a. zur Aufnahme der Seite in Suchmaschinen dienen. Beispiele: Erstellungsdatum, Autor der Seite, Kurzbeschreibung der Seite, Stichworte zum Inhalt.
c. Damit die Seite auch in Ländern außerhalb des deutschsprachigen Raumes korrekt dargestellt wird.
d. Um sie international darstellbar zu machen. Die deutschen Umlaute ä, ü, ö sind beispielsweise in Amerika unbekannt.
e. Webserver unter Unix bzw. Linux unterscheiden zwischen Groß- und Kleinschreibung, Mac OS und Windows nicht.
a. Erläutern Sie, was unter der semantischen Struktur einer Webseite zu
verstehen ist.
b. Nennen Sie Beispiele für HTML5-Elemente, die ausschließlich zur semantischen Beschreibung einer Webseite dienen.
a. Die semantische Struktur beschreibt die Gliederung und den inhaltlichen Aufbau der Webseite, z. B. Kopf-, Fuß-, Navigationsbereich, Abschnitte, Überschriften, Tabellen.
Diese Struktur ist unabhängig von der Formatierung und Gestaltung.
b. section article nav header footer
HTML5 kann keine Schriften einbinden.
a. Welche Schrift wird (ohne weitere Angaben in der HTML5-Datei) standardmäßig verwendet?
b. Weshalb sollten mit HTML5 keine Angabe zur Schrift gemacht werden?
Die Schrift, die im Webbrowser als Grundschrift eingestellt ist.
Weil HTML5 ausschließlich zur (semantischen) Beschreibung des Inhalts und nicht zur Gestaltung von Webseiten genutzt werden soll. Die typografische Gestaltung erfolgt mit CSS3.
a. Welche Endung muss eine HTMLDatei erhalten?
b. Kann am Mac auf die Dateiendung verzichtet werden?
c. Muss die Groß- und Kleinschreibung bei Dateinamen beachtet werden?
d. Dürfen Sonderzeichen in Dateinamen verwendet werden?
e. Wie muss die Startseite (Homepage) benannt werden?
a. .htm oder .html
b. Nein, da die Dateien sonst nur unter Mac OS funktionieren.
c. Ja, da Unix-Server zwischen Großund Kleinschreibung unterscheiden.
d. Nein, Sonderzeichen sind nicht zulässig.
e. index.htm oder index.html
a. Wozu dienen Meta-Tags?
b. Wo werden Meta-Tags in der HTML5- Datei notiert?
c. Wo werden Meta-Tags im Webbrowser angezeigt?
d. Nennen Sie drei Beispiele für Meta- Angaben.
a. Meta-Tags liefern (unsichtbare) Zusatzinformationen über die Website. Es handelt sich dabei um Copyright- Angaben, um Angaben für Suchmaschinen, für Webserver oder den
Webbrowser.
b. Im Dateikopf
c. Meta-Tags sind nur im Quelltext, nicht aber im Browser sichtbar.
d. Angabe des Zeichensatzes, des Autors, des Erstellungsdatums, automatische Weiterleitung der Website
Geben Sie den Quellcode an, um folgende Links zu realisieren:
a. Link zur Startseite von Amazon
b. Link zur Datei „kontakt.htm“, die sich im selben Verzeichnis befindet.
c. Link zur Datei „help.htm“, die sich im Unterordner „sites“ befindet.
d. E-Mail-Link zu „donald@duck.de“
e. Link zur PDF-Datei „text.pdf“ im Unterordner „pdf“
f. Interner Link zu „seitenende“
a href….
Bildformate für Webseiten kennen
a. Nennen Sie die drei Dateiformate für Pixelbilder auf Webseiten.
b. Nennen Sie zwei Technologien, mit denen Vektorgrafiken auf Webseiten
verwendet werden können.
c. Erläutern Sie einen wesentlichen Vorteil einer Vektorgrafik im Vergleich
zum Pixelbild.
a. JP(E)G, GIF, PNG
b. SVG, Canvas
c. Vektorgrafiken sind ohne Qualitätsverlust skalierbar, können also an das Format des Endgeräts angepasst werden.
a. Erklären Sie, weshalb es wichtig ist, dass die von den Nutzern gemachten Angaben in Formularen wie z. B. Datumsangaben ein einheitliches Format besitzen.
b. Welchen Vorteil bietet die Formularprüfung durch HTML5 im Vergleich
zur späteren Prüfung auf dem Webserver?
a. Eine einheitliche, vollständige und fehlerfreie Dateneingabe ist erforderlich, damit eine per Skript automatisierte Übernahme der Daten in eine Datenbank möglich ist.
b. Werden die Daten durch einen Webserver und nicht direkt im Browser überprüft, müssen sie (eventuell mehrfach) vom Client zum Server und umgekehrt übertragen werden.
Dies kostet Zeit und belastet die Datenleitungen.
Nennen Sie die zwei HTML5-Elemente, mit denen sich Audio- und Videodateien in Webseiten einbinden lassen.
audio tag
video tag
a. Nennen Sie die drei zurzeit wichtigsten Browser.
b. Begründen Sie, weshalb Sie Ihre Webseiten mit verschiedenen Browsern und Browserversionen testen müssen.
a. Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari, Opera
b. Jeder Browser besitzt einen sogenannten Parser, der den HTMLCode interpretiert und als Webseite umsetzt. Da sich die Hersteller nicht unbedingt an die Standards halten,
interpretieren die Parser den Quellcode teilweise unterschiedlich. Hinzu kommt, dass ältere Browserversionen neue HTML5-Elemente nicht kennen.
Zählen Sie drei Gründe auf, weshalb Webseiten ausschließlich mit CSS3 formatiert und gestaltet werden sollen.
- CSS3 bieten deutlich mehr Möglichkeiten zur Gestaltung als HTML5.
- Inhalt und Design können unabhängig voneinander erstellt und bearbeitet werden.
- Das Design kann als externe Datei abgespeichert werden und lässt sich somit auf beliebig viele HTML-Seiten anwenden.
- Für einen Inhalt können mehrere Designs erstellt werden, z. B. für Monitor, Smartphone, Druck.
- Die Inhalte können unabhängig vom Layout in einer Datenbank verwaltet werden.
a. Wie können Stylesheets definiert werden?
b. Nennen Sie jeweils einen Vorteil für die unter a. genannten Möglichkeiten der Definition.
a.
• Externe Definition in einer Datei
• Zentrale Definition im Dateikopf
• Lokale Definition im Tag
b. Externe Definition:
Das Design kann für beliebig viele 604
HTML-Dateien genutzt werden. Zentrale Definition:
Einmalig benötigte Abweichungen von extern definierten Stylesheets lassen sich im Dateikopf angeben. Sie haben dort eine höhere Priorität
gegenüber externen Stylesheets.
Lokale Definition:
Maximale Flexibilität, z. B. zur Auszeichnung einzelner Elemente. Lokale Stylesheets haben die höchste Priorität.
a. Erklären Sie den Begriff „Kaskadierung“ bei den Cascading Style Sheets.
b. Nennen Sie den wesentlichen Vorteil der Kaskadierung.
a. Unter Kaskadierung ist zu verstehen, dass Stylesheets „mehrstufig“ zum Einsatz kommen, und zwar hinsichtlich Ort: extern, zentral, lokal und Verfasser: Autoren-, Benutzer-, Browser-Stylesheets.
b. Die Kaskadierung ergibt eine hohe Flexibilität und ermöglicht notwendige Freiräume. So können z. B. auch die Nutzer einer Website mitbestimmen,
wie diese in ihrem Browser dargestellt werden soll. Dies ist beispielsweise für Menschen mit Sehschwäche eine Hilfe.
a. Geben Sie vier Gruppen von Selektoren an.
b. Formulieren Sie für jede der unter a. genannten Gruppen ein Beispiel.
a. • HTML-Elemente tags • Universalselektor • Klassen • Individualformate • Pseudoklassen
b. p {font-family: Arial;}
* {background-color:
#FFFFFF;}
.rot {color: red;}
#fett {font-weight: bold;}
a:link {text-decoration:
none;}
a. Erklären Sie den Unterschied zwischen relativen und absoluten Maßeinheiten.
b. Nennen Sie zwei relative und zwei absolute Maßeinheiten.
c. Welchen Vorteil besitzen relative Maßeinheiten?
a. Absolute Maßeinheiten sind feste, unveränderliche Angaben. Relative Maßeinheiten beziehen sich auf die in den Browsereinstellungen gemachten Angaben.
b. Absolut: mm, cm, pt, (px) Relativ: em, ex, (px)
(Pixel ist auch relativ, da von der Auflösung des Displays abhängig)
c. Mit relativen Angaben ist eine Anpassung des Layouts an unterschiedliche Displays wesentlich einfacher.
Sie besitzen auch den Vorteil, dass der Nutzer Einfluss auf die Darstellung nehmen kann, was vor allem
bei der Schriftgröße sinnvoll ist.
