Skip to content

HTML Basics Klausuraufgaben

Jump to bottom Edit New page
ocean90 edited this page Jan 30, 2013 · 34 revisions

freigegeben - Volker Schaefer

⟸ zurück zur Dokumentation Autoren: Sascha Wüstlich, Aaron Reiher, Dominik Schilling und Bruno J. C. Gonzaga

1.) HTML steht für: __/1

[] Hyper Texture Model Language
[] Hypertext Markup Language
[] Hometext Markup Language
[] Hyper Transfer Model Layer

2.) Lesen Sie folgende Aussagen zu HTML durch. Kreuzen Sie die wahre(n) Aussage(n) an! __/3

[] HTML wurde ursprünglich von Mircosoft entwickelt, um den Quellcode von Windows zu dokumentieren.
[] HTML ist eine Auszeichnungssprache und strukturiert Textdokumente.
[] Der Mimetype von HTML-Dokumenten lautet html/text.
[] Ein HTML-Element besteht aus Content, HTML-Tags und optionalen Attributen.
[_] Void elements haben nur ein öffnendes Tag und dürfen kein schließendes Tag haben.

3.) Folgende HTML-Tags sind gegeben: br, img, p, h4, strong, html, div, span.
Ordnen Sie die Tags, wenn möglich, dem jeweiligen Content-Modell sinnvoll hinzu. __/3

Inline: ………………………………………………………………………………………………………
Block: ………………………………………………………………………………………………………

4.) Wann und von wem wurde HTML das erste Mal namentlich erwähnt? __/2

……………………………………………………………………………………………………………………………………

5.) Ordnen Sie die folgenden Tags ihrer jeweiligen Semantik zu. __/4
[1] li
[2] strong
[3] p
[4] dl

Das Element […………] repräsentiert eine Definitionsliste
Das Element […………] repräsentiert einen Listenpunkt.
Das Element […………] repräsentiert einen Paragraphen.
Das Element […………] repräsentiert eine hohe Wichtigkeit des Contents.

6.) Ergänzen Sie den folgenden Text um ein semantisches Markup. __/4

……………………………………………………………………………………………
……………Ich bin die wichtigste Überschrift…………………………………..……
……………Ich bin eine kurze Beschreibung, festgehalten in einem sehr, sehr
……………langen Paragraphen. Ich mag kein Lorem Ipsum!……………………
………………………………………………………………………………….…………
……………Listenpunkt 1:……………Link zu home.html…………………………..
……………Listenpunkt 2:……………Link zu impressum.html…………………….
………………………………………………………………………………….…………

7.) Erstellen Sie einen Hyperlink, der zur Seite http://example.com verlinkt. Der verlinkte Inhalt soll mit "Mein Link" definiert sein und als Titel "Klick mich" tragen. __/3

…………………………………………………………………………………………

8.) Gegeben ist folgende Verzeichnisstruktur:

/public
	|- /archiv
	|	|- /februar
	|	|	|- seite2.html
	|
	|- seite1.html

Die zwei HTML-Dokumente seite1.html und seite2.html sollen verknüpft werden. Wie würden die beiden Links aussehen, die jeweils die andere Datei relativ referenziert? __/2

seite1.html zu seite2.html: …………………………………………………………………………………………
seite2.html zu seite1.html: …………………………………………………………………………………………

9.) Schreiben Sie ein vollständiges HTML5-Dokument mit semantisch korrektem Markup unter folgenden Anforderungen: __/11

  • Titel der Seite: Ihr Name
  • Überschrift 1. Grades: Ihr Name
  • Eine ungeordnete Liste mit min. 3 Hobbies
  • Eine Definitionsliste mit min. 2 Lieblingsfilme

…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………

10.) Überprüfen Sie, welches der folgenden Code-Schnipsel validem HTML entspricht. Kreuzen Sie korrekte Schnipsel an. __/2

[] <p><li>Hello World!</li></p>
[] <p>Diese Klausur ist mir zu einfach.<p>
[] <dl><dt>Auto</dt><dd>Hat vier Reifen und ein Lenkrad</dd></dl>
[] <h1><title>Hello World!</title></h1>
[_] <p>Bin ich wirklich so <strong>wichtig</strong>?</p>

11.) Wer ist der Erfinder von HTML? __/1

[] Steve Jobs
[] Aaron Swartz
[] Bill Gates
[] Tim Berners Lee

12.) Was ist der Vorteil von Hypertext? __/1

[] Strukturierung von Dokumenten
[] Einfacher Übergang zu anderen Dokumenten
[] Einfaches Erstellen von Designs zu Dokumenten
[] Schnelle Verbindung mit dem Internet

13.) Welche dieser Operatoren sind in HTML 4 semantisch (!)nicht sinnvoll? __/2

[] <i>
[] <strong>
[] <a>
[] <ol>
[_] <b>

14.) Ergänzen sie die Grundstruktur einer geordneten Liste. __/2

<html>
	<head>
	</head>
	<body>
	___________________________
	_______Listenpunkt 1_______
	_______Listenpunkt 2_______
	_______Listenpunkt 3_______
	___________________________
	</body>
</html>

15.) Ergänzen sie diese Sätze korrekt. __/6

Die Abkürzung HTML steht für ______________. 2p
Die aktuellste Version von HTML ist _______. 1p
HTML wurde im Jahr ____ erfunden. 1p
Die ursprüngliche Aufgabe von HTML war es _________________. 3p

16.) Wozu dient eine eine Markup Language? __/1

…………………………………………………………………………………………
…………………………………………………………………………………………

17.) Warum sollen Design und Semantik einer Seite getrennt werden? __/4

…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………

18.) Erstellen sie ein HTML Dokument mit 2 Überschriften verschiedener Ordnung, einem Paragraphen mit Fließtext, einem Bild samt Alternativtext und jeweils einer geordneten und ungeordneten Liste. Halten Sie sich an den Screenshot von der im Browser gerenderten Seite. __/13

………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… …………………………………………………………………………………………



##Lösungen

1.)

Hypertext Markup Language

2.)

2, 4, 5

3.)

Inline: img, strong, span, br
Block: h4, div, p

4.)

1989, Tim Berners-Lee

5.)

4, 1, 3, 2

6.)

<h1>Ich bin die wichtigste Überschrift</h1>
<p>Ich bin eine kurze Beschreibung, festgehalten in einem
längeren Paragraphen. Ich mag kein Lorem Ipsum!</p>
<ul>
	<li>Listenpunkt 1: <a href="home.html">Link zu home.html</a></li>
	<li>Listenpunkt 1: <a href="impressum.html">Link zu impressum.html</a></li>
</ul>

7.)

<a href="http://example.com" title="Klick mich">Mein Link</a>

8.)

seite1.html zu seite2.html: <a href="/archiv/februar/seite2.html">Link</a>
seite2.html zu seite1.html: <a href="/seite1.html">Link</a> oder <a href="../../seite1.html">Link</a>

9.)

<!DOCTYPE html>
<html>
	<head>
		<title>Max Mustermann</title>
	</head>
	<body>
		<h1>Max Mustermann</h1>
		<ul>
			<li>Hobby 1</li>
			<li>Hobby 2</li>
			<li>Hobby 3</li>
		</ul>
		
		<dl>
			<dt>Film 1</dt>
			<dd>Der Film 1 handelt von Aliens.</dd>
			<dt>Film 2</dt>
			<dd>Der Film 2 handelt von Schafen.</dd>
		</dl>
	</body>
</html>

10.)

3, 5

11.)

Tim Berners-Lee

12.)

Einfacher Übergang zu anderen Dokumenten

13.)

b, i

14.)

<html>
	<head>
	</head>
	<body>
	<ol>
		<li>Listenpunkt 1</li>
		<li>Listenpunkt 2</li>
		<li>Listenpunkt 3</li>
	</ol>
	</body>
</html>

15.)

  • Hypertext Markup Language
  • HTML5
  • 1989
  • wissenschaftliche Texte zu strukturisieren

16.)

Eine Markup Language ist eine sogenannte Auszeichnungssprache, mit der ein Dokument nach festgelegten Konventionen strukturiert und beschrieben wird.

17.)

Dies wird als "guter Stil" erkannt, damit Design und semantische Struktur gut sichtbar getrennt sind und unabhängig verändert oder betrachtet werden können.

18.)

Mögliche Lösung:

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<h1>Überschrift erster Ordnung</h1>
		<ul>
			<li>ungeordnetes Listenelement 1</li>
			<li>ungeordnetes Listenelement 2</li>
		</ul>
		
		<ol>
			<li>geordnetes Listenelement 1</li>
			<li>geordnetes Listenelement 2</li>
		</ol>
		
		<h2>Überschrift zweiter Ordnung</h2>
		<p>
		 Lorem Ipsum dolor sit amet...   
		</p>
		<img src="Bildlink/-pfad" alt="Alternativtext">
	</body>
</html>
Add a custom footer
Add a custom sidebar
Clone this wiki locally