Antworten & Lösungen zum Buch
Antworten und Lösungen
Hier findest du die Antworten auf die Fragen und die Lösungen der Aufgaben aus dem Buch. Wenn du dir die Dateien beim Verlag (zur Buch-Seite beim Verlag) zum Buch herunterlädtst, dann sind die Antworten und Lösungen dort auch als PDF enthalten.
Prüf deine Antworten – hast du alles richtig?
Kapitel 1
Fragen und Antworten
- Was ist der am meisten genutzte Browser?
Mozilla Firefox der der am meisten verwendete Browser.
- Welche Endung hat eine HTML-Datei? Und welche eine CSS-Datei?
HTML-Dateien haben die Endung *.html (*.htm ist auch möglich) und CSS-Dateien die Endung *.css.
- Was ist die aktuelle Version von HTML?
Inzwischen ist HTML 5 aktuell.
- Seit wann gibt es CSS?
seit 1994
- Wozu braucht man CSS bei einer Webseite?
Mit CSS lässt sich das Aussehen der Webseite festlegen.
Kapitel 2
Fragen und Antworten
- Was bewirkt die Angabe des Titels zwischen <title> und </title>?
Dort kannst Du den Seitentitel angeben, der im Reiter des Browserfensters (oder im Tab) angezeigt wird.
- Wie wirkt sich ein Absatz auf die Anzeige aus?
Ein Absatz durch das Tag <p> erzeugt einen Seitenumbruch und erzeugt einen kleinen Abstand zum nächsten Absatz.
- Wie wird ein Kommentar in den Quelltext eingefügt?
Der Text eines Kommentars wird zwischen <!- und –> geschrieben.
- Aus welchen Tags muss ein HTML-Quelltext mindestens bestehen?
<html>, <title>, </title>, <body>, </body> und </html>
- Welche Überschriftebenen gibt es und wie heißen sie?
Es gibt 6 Überschriftsebenenen, sie heißen h1, h2, h3, h4, h5 und h6
- Was ist hier falsch?
<html>
<head><title></title></head>
<body>
</html>
Es fehlt das schließende Tag </body>.
Aufgaben und Lösungen
- Erstelle einen kleinen Quelltext, der eine Überschrift, etwas Text (in zwei Absätzen) enthält. Zwischen den Absätzen soll eine horizontale Linie sein.
Lösung:
<!DOCTYPE html>
<html>
<head>
<title>DieAufgabe</title>
</head>
<body>
<p> Hier steht der erste Text. </p>
<hr>
<p> Hier steht der zweite Text. </p>
</body>
</html>
Kapitel 3
Fragen und Antworten
- Wie markierst du Text, der hochgestellt angezeigt werden soll?
Du
schreibst ihn einfach zwischen die Tags <sup> und </sup>
- Was sind logische Textformate?
Logische
Textformate sagen nicht wie ein Text aussieht, sondern sie sagen zum Beispiel:
Dieser Text ist wichtig.
- Welche Textformate gibt es außer den logischen Textformaten noch?
Physische
Textformate. Die legen dann fest wie Text angezeigt wird, z.B. unterstrichen
oder kursiv.
- Wie kannst du Text als Zitat markieren?
Indem
du das Zitat zwischen die Tags <q> und </q> schreibst.
- Was bedeutet es, wenn ich sage, dass ein Text fett ausgezeichnet
wird?
Es
bedeutet, dass Du den Text im Quelltext so markierst, dass er später im Browser
fett angezeigt wird.
- Nenne ein Block-Element und ein Inline-Element.
Das
Element div ist ein Block-Element und das Element span ein Inline-Element.
- Wie werden CSS-Befehle genannt? Bitte nenne beide Begriffe.
Schlüsselwörter
oder Eigenschaften
- Welches Schlüsselwort brauchst du zum Festlegen der Schriftart und
welches für die Schriftgröße?
Schriftart:
font-family
Schriftgröße:
font-size
- Was bedeutet CSS ausgeschrieben?
Cascading StyleSheets
Aufgaben und Lösungen
- Erstelle einen kurzen Quelltext, in dem neben der Überschrift in
einem Absatz kursiver und fetter Text vorkommt. Enden soll er mit einem
Zitat, das fett angezeigt werden soll.
Lösung:
<!DOCTYPE
html>
<html>
<head>
<title>Aufgabe 1</title>
</head>
<body>
<h1>
Überschrift </h1>
<p> Hier
steht <b>fetter Text</b>. Und dieser Text ist
<i>kursiv</i> </p>
<q>
<b> hier steht das fett ausgezeichnette Zitat </b> </q>
</body>
</html>
- Ändere den von dir erstellten Quelltext so, dass die Überschrift
in Grün und 40px Schriftgröße angezeigt wird.
Lösung:
<!DOCTYPE html>
<html>
<head>
<title>Aufgabe
1</title>
</head>
<body>
<h1 style=“color:green;
font-size:40pt“> Überschrift </h1>
<p> Hier steht <b>fetter Text</b>. Und
dieser Text ist <i>kursiv</i>
</p>
<q> <b> hier steht das fett ausgezeichnette
Zitat </b> </q>
</body>
</html>
- Sieh dir den folgenden Quelltext an. Dann ändere ihn so, dass die
Schriftart des mit div ausgezeichneten
Textes Arial ist. Außerdem soll der Text zwischen <span> und </span> blau angezeigt werden.
<!DOCTYPE HTML>
<html>
<head>
<title> Textformatierung 1 </title>
</head>
<body>
<div>Mit <span>CSS</span> wird deine
Webseite bunt!</div>
</body>
</html>
Lösung:
<!DOCTYPE HTML>
<html>
<head>
<title> Textformatierung 1 </title>
</head>
<body>
<div style=“font-family:arial“>Mit
<span style=“color:blue“>CSS</span> wird deine Webseite
bunt!</div>
</body>
</html>
Kapitel4
Fragen und Antworten
- Darfst du ein Bild, das du auf einer anderen Webseite gesehen
hast, auf deiner eigenen verwenden?
Das
darfst du nur, wenn du die Erlaubnis des Rechteinhabers (Fotografen) hast.
- Welches Tag brauchst du, um eine Grafik einzubinden?
Grafiken
bindest du mit dem Tag <img> ein.
- Was musst du beachten, wenn du ein Bild in deine Seite einbinden
möchtest und du es dabei verkleinerst?
Achte
darauf, dass du die Seitenproportionen nicht veränderst, damit es nicht
verzerrt angezeigt wird.
- In welchen Formaten kannst du Videos in deine Webseite einbinden?
Was musst du dabei beachten?
Es
sind die Formate ogg-Video und mp4-Video möglich. Da du nicht weißt,
welchen Browser ein Besucher verwendet solltest Du immer beide Formate
einbinden.
- Welche Tags benötigst du, damit du ein Video in deine Seite
einbinden kannst?
Das
sind die Tags <video> und <source>.
- Welches Tag wird verwendet, um ein Video über YouTube einzubinden?
Das
wird mit dem Tag <iframe> realisiert.
- Warum musst du bei Inline-Frames immer auch die Größe des
Inline-Frames festlegen?
Die
Größe eines Inline-Frames passt sich nicht automatisch an das Video an, also
musst du die Größe immer angeben.
- Wie kannst du Musik oder Ton in deine Webseite einbinden?
Das
kannst du mithilfe des Tags <audio> machen. Achte darauf auch immer das
Tag <source> zu verwenden.
Aufgaben und Lösungen
- Erstelle einen kurzen Quelltext, der das Bild Foto34.jpg auf deiner Webseite anzeigt.
Das Bild ist 400 Pixel hoch und 600 Pixel breit.
Lösung:
<!DOCTYPE
html>
<html>
<head>
<title>Aufgabe
1</title>
</head>
<body>
<img
src=“/Foto34.jpg“ width=“400″ height=“600″>
</body>
</html>
- Füge dem Bild aus der letzten Übung einen Alternativtext hinzu.
Lösung:
<!DOCTYPE
html>
<html>
<head>
<title>Aufgabe
1</title>
</head>
<body>
<img src=“/Foto34.jpg“ width=“400″
height=“600″ alt=“Alternativtext“>
</body>
</html>
- Erstelle eine Seite, die ein Video abspielt. Es soll automatisch
starten, der Besucher soll es aber anhalten und neu starten können.
Lösung:
<!DOCTYPE
html>
<html>
<head>
<title>Aufgabe
3</title>
</head>
<body>
<h1>Video</h1>
<video
width=”400” height=”300” autoplay controls>
<source
src=”film.ogg” type=”video.ogg”>
<source
src=”film.mp4” type=”video.mp4”>
</video>
</body>
</html>
- Erstelle einen Inline-Frame, der 400 x 400 Pixel groß
ist, und lasse da die Datei test.html
hineinladen.
Lösung:
<iframe src=“/test.html“ width=“400″
height=“400″>
</iframe>
Kapitel 5
Fragen und Antworten
- Wie bindest du eine externe CSS-Datei mit dem Namen test.css in einen HTML-Quelltext ein?
Du
kannst die Datei einbinden, indem du im Dokumentenkopf folgende Zeile einfügst:
<link rel=“stylesheet“
type=“text/css“ href=”cssein1.css”>
- Welches Tag erlaubt es, die CSS-Definition direkt in den
HTML-Quelltext zu schreiben?
Dies
kannst Du mit dem Tagpaar <style></style> machen.
- Was kannst du mit dem CSS-Schlüsselwort für Schriftstile machen
und wie heißt es?
Das
Schlüsselwort font-style ermöglicht es Schrift kursiv anzuzeigen.
- Wie kannst du die Schriftstärke festlegen? Welche Werte kannst du
verwenden?
Die
Schriftstärke definierst du mit dem Schlüsselwort font-weight. Du
kannst Zahlenwerte von 100 bis 900, jeweils die vollen Hunderter, angeben.
Außerdem gibt es noch die Werte: lighter, light, normal, bold und bolder.
- Wie legst du den Abstand zwischen zwei Wörtern fest?
Dies
machst du durch Einsatz des Schlüsselworts word-spacing.
- Wie kannst du Text zentriert ausrichten?
Indem
du das Schlüsselwort text-align mit dem Wert center verwendest.
(vertical-align:center)
- Wie kannst du Text als Blocksatz anzeigen lassen?
Für
Blocksatz verwendest du den Wert justify mit dem Schlüsselwort text-align.
Aufgaben und Lösungen
- Erstelle einen CSS-Quelltext, der folgende Definitionen enthält: Alle
Texte sollen in Arial und einer
Schriftgröße von 14pt angezeigt
werden. Die Überschrift (Ebene 1) soll allerdings die Schriftgröße 30pt haben. Absätze werden über das Tag p realisiert, aller Text im Tag span soll kursiv
angezeigt werden. Text im Tag div soll rot dargestellt
werden und Zitate in fettem Text.
Lösung:
h1 { font-family:arial; font-size:30pt}
p {font-family:arial; font-size:14pt}
span { font-family:arial; font-size:14pt; font-style:italic}
div { font-family:arial; font-size:14pt; color:red}
q { font-family:arial; font-size:14pt; font-weight:bold}
Kapitel 6
Fragen und Antworten
- Welches Tag
verwendest du zur Definition eines Links?
Links
realisierst du durch Einsatz des Tags <a>.
- Wie muss ein
Link definiert sein, damit der Besucher dir eine E-Mail senden kann?
Du
musst dazu beim Attribut href das Protokoll mailto angeben.
<a
href=“mailto:deine@mailadresse.de“>
- Nenne drei
Internetprotokolle.
http,
ftp, mailto, gopher, nntp, telnet
- Wie wird
eine Grafik zu einem Link?
Verwende
dazu einfach das Tag <img> innerhalb von <a> und </a>.
- Wie kannst
du definieren, dass sich mit einem Link ein neues Fenster öffnet?
Indem
du das Attribut target mit dem Wert _blank einsetzt.
<a href=“http://www.webseite.de“ target=”_blank“>
Aufgaben und Lösungen
Erstelle eine CSS Datei, die einen Link folgendermaßen
definiert: Grundzustand: Schriftgröße 12pt in Arial – Mauszeiger darüber: Farbe
ändert sich in Grau – Link ist besucht: Farbe ist Rot
Lösung:
a:link
{font-size:
12pt}
a:hover
{color: grey}
a:visited
{color: red}
Kapitel 7
Fragen und Antworten
- Wie fängt
ein häufig verwendeter Blindtext an, den es schon seit dem 16. Jahrhundert
gibt?
Lorem
ipsum …
- Mit welchem
CSS-Schlüsselwort kannst du die Hintergrundfarbe festlegen?
background-color
- Wie kann
festgelegt werden, dass ein Hintergrundbild fixiert ist, also nicht mitscrollt?
Verwende
das Schlüsselwort background-attachment mit dem wert fixed.
background-attachment:
fixed
- Wie
definierst du einen Rahmen rund um den Inhalt eines Tags?
Mit
dem Schlüsselwort border-style legst du fest, dass ein Rahmen um ein Element
gezogen wird. Dabei legst du auch gleich fest, wie der Rahmen aussieht.
- Welche
Rahmenstile gibt es? Nenne mindestens drei.
solid – eine durchgezogene Rahmenlinie
dashed – eine gestrichelte XE
„Rahmen:gestrichelte Linie“ XE „Rahmen:in 3D“ Rahmenlinie
double – eine doppelte Rahmenlinie
dotted – eine gepunktete Rahmenlinie XE
„Rahmen:gepunktete Linie“
groove – eine Rahmenlinie im 3D-Stil
outset – eine Rahmenlinie im 3D-Stil
ridge – eine Rahmenlinie im 3D-Stil
inset – eine Rahmenlinie im 3D-Stil
none – keine Rahmenlinie
- Welches
Schlüsselwort benötigst du, um einen Innenabstand festzulegen?
Innenabstände
legst du mit dem Schlüsselwort padding fest.
- Was ist der
Außenabstand?
Das ist der Abstand, der zwischen dem
Rahmen und den angrenzenden Blöcken beziehungsweise dem Fensterrand deines
Browsers liegt.
- Welche zwei
Arten von numerischen Werten gibt es?
Es
gibt absolute und relative numerische Werte XE „Numerischer
Wert:absoluter“ .
- Welches
Schlüsselwort definiert den Außenabstand nach rechts?
Das
ist das Schlüsselwort: margin-right.
Aufgaben und Lösungen
- Erstelle
eine kleine Webseite mit einer Überschrift und zwei Absätzen. Fülle den Text
der Absätze mit Blindtext.
Lösung:
<!DOCTYPE html>
<html>
<head>
<title>Aufgabe</title>
</head>
<body>
<h1> Klassen in CSS </h1>
<p> Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat.</div>
</body>
</html>
- Weise den
beiden Absätzen (Aufgabe 1) mit CSS einen dünnen Rahmen in Form einer Linie zu.
Der Hintergrund unter dem Text soll gelb sein. Erstelle das passende CSS.
Lösung:
p
{
background-color:
yellow;
border-style:
solid;
border-width:
thin
}
- Füge dem CSS
aus Aufgabe 2 noch die Definition für einen Innenabstand von 6pt und einen
gleich großen Außenabstand hinzu.
Lösung:
p
{
background-color:
yellow;
border-style:
solid;
border-width:
thin;
padding: 6pt;
margin: 6pt
}
Kapitel 8
Fragen und Antworten
- Wie heißt
das Tag für eine unsortierte Liste?
<ul>
- Wie legst du
in HTML das Listenzeichen fest?
Durch
Einsatz des Attributes type. Besser ist es jedoch du definierst die
Listenzeichen mit CSS.
- Welche Tags
benötigst du, um ein Glossar zu erstellen?
Ein
vollständiges Glossar benötigt die Tags <dl></dl>,
<dt></dt> und <dd></dd>
- Wie legst du
mit CSS das Listenzeichen fest?
Listenzeichen
werden in CSS mithilfe des Schlüsselworts list-style-type realisiert.
- Und welches
Schlüsselwort brauchst du, um eine Grafik als Listenzeichen zu verwenden?
list-style-image
- Was must du
beachten, wenn du eine Grafik als Listenzeichen verwendest?
Achte darauf, dass du
keine zu großen Grafikdateien verwendest, da dies dann nicht gut aussieht.
Verwende außerdem ein Grafikformat, das von allen Browsern unterstützt wird.
- Wie kannst
du eine Liste weiter eingerückt darstellen?
Verwende
das Schlüsselwort list-style-position mit dem Wert inside:
list-style-position:
inside
Aufgaben und Lösungen
- Erstelle
einen HTML-Quelltext, der zwei Listen enthält, eine sortierte mit vier
Listeneinträgen und eine unsortierte mit fünf Listeneinträgen.
Lösung:
<!DOCTYPE
HTML>
<html>
<head>
<title>Aufgabe</title>
</head>
<body>
<ol>
<li> Eintrag 1 </li>
<li> Eintrag 2 </li>
<li> Eintrag 3 </li>
<li> Eintrag 4 </li>
</ol>
<ul>
<li> Eintrag 1 </li>
<li> Eintrag 2 </li>
<li> Eintrag 3 </li>
<li> Eintrag 4 </li>
<li> Eintrag 5 </li>
</ul>
</body>
</html>
- Erstelle zur
Aufgabe 1 einen CSS-Quelltext, der Folgendes bewirken soll: Die Schriftart im
gesamten Text soll Arial sein, die
Schriftgröße in der sortierten Liste soll 12pt
sein, in der unsortierten 14pt. Als
Listenzeichen erhält die sortierte Liste römische
Zahlen und die unsortierte Liste Punkte.
Beide Listen sollen mit einer dünnen Linie
umrahmt werden und der Seitenhintergrund
soll grau sein.
Lösung:
body
{
background-color:
grey
}
ol
{
font-family:
arial;
font-size:
12pt;
list-style-type:
upper-roman;
border-style:
solid;
border-width:
thin
}
ul
{
font-family:
arial;
font-size:
14pt;
list-style-type:
disc;
border-style:
solid;
border-width:
thin
}
Kapitel 9
Fragen und Antworten
- Welches Tag
benötigst du für die Tabellenkopfzeile?
Verwende
in der ersten Zeile der Tabelle einfach <th> anstatt <td>.
- Wie kannst
du die Position der Tabellenüberschrift verändern?
Verwende
im CSS-Quelltext das Schlüsselwort caption-side um die Position der Überschrift
zu verändern.
- Mit welchen
zwei Attributen kannst du Tabellenzellen verbinden?
Dies
sind die Attribute colspan und rowspan.
- Wie kannst
du Tabellenzellen einen farbigen Hintergrund zuordnen?
Dazu
brauchst du nur im CSS-Quelltext der Zelle das Schlüsselwort bachground-color
zuweisen. Wenn nicht alle Tabellenzellen diese Farbe erhalten sollen arbeitest
du am besten mit Klassendefinitionen.
- Wie kannst
du den Abstand des Tabelleninhalts zum Rand einer Zelle festlegen?
Dies
geschieht mit Hilfe des CSS-Schlüsselworts border-spacing.
- Wie kannst
du leere Tabellenzellen als einzelne Zelle sichtbar machen?
Dies
realisierst du mit dem CSS-Schlüsselwort empty-cells und dem Wert show.
empty-cells:
show
Aufgaben und Lösungen
- Erstelle
eine Tabelle mit drei Spalten und drei Zeilen.
Lösung:
<!DOCTYPE
HTML>
<html>
<head>
<title>Aufgabe</title>
</head>
<body>
<table>
<tr>
<td> 1.Zeile – 1.Zelle </td>
<td> 1.Zeile – 2.Zelle </td>
<td> 1.Zeile – 3.Zelle </td>
</tr>
<tr>
<td> 2.Zeile – 1.Zelle </td>
<td> 2.Zeile – 2.Zelle </td>
<td> 2.Zeile – 3.Zelle </td>
</tr>
<tr>
<td> 3.Zeile – 1.Zelle </td>
<td> 3.Zeile – 2.Zelle </td>
<td> 3.Zeile – 3.Zelle </td>
</tr>
</table>
</body>
</html>
- Füge der
Tabelle aus der Aufgabe 1 eine Überschrift hinzu und lege die erste Zeile als
Kopfzeile fest. Strukturiere die Tabelle mit den entsprechenden Tags.
Lösung:
<!DOCTYPE
HTML>
<html>
<head>
<title>Aufgabe</title>
</head>
<body>
<table>
<caption> Ein Beispiel
</caption>
<tr>
<th> 1.Zeile
– 1.Zelle </th>
<th> 1.Zeile
– 2.Zelle </th>
<th> 1.Zeile – 3.Zelle </th>
</tr>
<tr>
<td> 2.Zeile – 1.Zelle </td>
<td> 2.Zeile – 2.Zelle </td>
<td> 2.Zeile – 3.Zelle </td>
</tr>
<tr>
<td> 3.Zeile – 1.Zelle </td>
<td> 3.Zeile – 2.Zelle </td>
<td> 3.Zeile – 3.Zelle </td>
</tr>
</table>
</body>
</html>
- Erstelle ein
CSS, sodass die Zellen der Kopfzeile einen roten Hintergrund haben. Die nächste
Zeile soll einen blauen Hintergrund erhalten. Die dritte Zeile einen grünen.
Ein Tipp: Hier brauchst du nicht nur Wissen aus diesem Kapitel!
Lösung:
Das lässt sich nur umsetzen, indem du Klassen bildest.
Denk daran, dass du im HTML-Quelltext den Tags die Klassen zuordnest (Attribut
class)
th
{
background-color: red
}
td.blau
{
background-color: blue
}
td.grun
{
background-color: green
}
Kapitel 10
Fragen und Antworten
- Wie
erstellst du ein Eingabefeld für den Namen?
Ein
Eingabefeld erstellst du mit dem Tag input.
- Wie wird ein
Texteingabefeld erstellt, das 300 Pixel breit und 200 Pixel hoch ist?
Pixelgenaue
Größenangaben werden mit CSS durch die Schlüsselwörter width und height realisiert.
textarea
{
width: 300px;
height: 200px
}
- Wie erzeugst
du ein Kontrollkästchen und wie ein Optionsfeld?
Du
erzeugst sie indem du mit dem Tag <input> das Attribut type verwendest.
Kontrollkästchen:
type=“radio“
Optionsfeld:
type=“checkbox“
- Wie
erstellst du ein Listenfeld?
Das
Listenfeld definierst du mit dem Element select, die einzelnen Optionen mit dem
Element option.
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
- Mit welchen
Tags kannst du eine Schaltfläche zum Abschicken des Formularinhalts erstellen?
Das
geht entweder mit dem Tag <input> oder mit dem Tag <button>.
- Wie kannst
du dir den Formularinhalt per E-Mail schicken lassen?
Indem
du zum Tag form die Attribute method und action hinzufügst.