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 zum Buch herunterlädts, 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

  1. Was ist der am meisten genutzte Browser?

Mozilla Firefox der der am meisten verwendete Browser.

  1. 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.

  1. Was ist die aktuelle Version von HTML?

Inzwischen ist HTML 5 aktuell.

  1. Seit wann gibt es CSS?

seit 1994

  1. Wozu braucht man CSS bei einer Webseite?

Mit CSS lässt sich das Aussehen der Webseite festlegen.

Kapitel 2

Fragen und Antworten

  1.  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.

  1. 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.

  1. Wie wird ein Kommentar in den Quelltext eingefügt?

Der Text eines Kommentars wird zwischen <!- und --> geschrieben.

  1. Aus welchen Tags muss ein HTML-Quelltext mindestens bestehen?

<html>, <title>, </title>, <body>, </body> und </html>

  1. Welche Überschriftebenen gibt es und wie heißen sie?

Es gibt 6 Überschriftsebenenen, sie heißen h1, h2, h3, h4, h5 und h6

  1. Was ist hier falsch?

<html>

<head><title></title></head>

<body>

</html>

Es fehlt das schließende Tag </body>.

Aufgaben und Lösungen

  1. 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>Die
Aufgabe</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

 

  1. Wie markierst du Text, der hochgestellt angezeigt werden soll?

Du
schreibst ihn einfach zwischen die Tags <sup> und </sup>

  1. Was sind logische Textformate?

Logische
Textformate sagen nicht wie ein Text aussieht, sondern sie sagen zum Beispiel:
Dieser Text ist wichtig.

  1. 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.

  1. Wie kannst du Text als Zitat markieren?

Indem
du das Zitat zwischen die Tags <q> und </q> schreibst.

  1. 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.

  1. Nenne ein Block-Element und ein Inline-Element.

Das
Element div ist ein Block-Element und das Element span ein Inline-Element.

  1. Wie werden CSS-Befehle genannt? Bitte nenne beide Begriffe.

Schlüsselwörter
oder Eigenschaften

  1. Welches Schlüsselwort brauchst du zum Festlegen der Schriftart und
    welches für die Schriftgröße?

Schriftart:
font-family

Schriftgröße:
font-size

  1. Was bedeutet CSS ausgeschrieben?

Cascading StyleSheets

 

Aufgaben und Lösungen

 

  1. 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>

 

  1. Ä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>

  1. 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

 

  1. 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.

  1. Welches Tag brauchst du, um eine Grafik einzubinden?

Grafiken
bindest du mit dem Tag <img> ein.

  1. 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.

  1. 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.

  1. Welche Tags benötigst du, damit du ein Video in deine Seite
    einbinden kannst?

Das
sind die Tags <video> und <source>.

  1. Welches Tag wird verwendet, um ein Video über YouTube einzubinden?

Das
wird mit dem Tag <iframe> realisiert.

  1. 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.

  1. 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

 

  1. 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>

 

  1. 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>

 

  1. 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>

 

  1. 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

 

  1. 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”>

  1. Welches Tag erlaubt es, die CSS-Definition direkt in den
    HTML-Quelltext zu schreiben?

Dies
kannst Du mit dem Tagpaar <style></style> machen.

  1. 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.

  1. 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.

  1. Wie legst du den Abstand zwischen zwei Wörtern fest?

Dies
machst du durch Einsatz des Schlüsselworts word-spacing.

  1. Wie kannst du Text zentriert ausrichten?

Indem
du das Schlüsselwort text-align mit dem Wert center verwendest.
(vertical-align:center)

  1. 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

 

  1. 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

 

  1. Welches Tag
    verwendest du zur Definition eines Links?

Links
realisierst du durch Einsatz des Tags <a>.

  1. 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=“Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!“>

  1. Nenne drei
    Internetprotokolle.

http,
ftp, mailto, gopher, nntp, telnet

  1. Wie wird
    eine Grafik zu einem Link?

Verwende
dazu einfach das Tag <img> innerhalb von <a> und </a>.

  1. 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.detarget=”_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

 

  1. Wie fängt
    ein häufig verwendeter Blindtext an, den es schon seit dem 16. Jahrhundert
    gibt?

Lorem
ipsum …

  1. Mit welchem
    CSS-Schlüsselwort kannst du die Hintergrundfarbe festlegen?

background-color

  1. 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

  1. 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.

  1. 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

  1. Welches
    Schlüsselwort benötigst du, um einen Innenabstand festzulegen?

Innenabstände
legst du mit dem Schlüsselwort padding fest.

  1. Was ist der
    Außenabstand?

Das ist der Abstand, der zwischen dem
Rahmen und den angrenzenden Blöcken beziehungsweise dem Fensterrand deines
Browsers liegt.

  1. Welche zwei
    Arten von numerischen Werten gibt es?

Es
gibt absolute und relative numerische Werte XE "Numerischer
Wert:absoluter" .

  1. Welches
    Schlüsselwort definiert den Außenabstand nach rechts?

Das
ist das Schlüsselwort: margin-right.

 

Aufgaben und Lösungen

 

  1. 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>

 

  1. 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

}

 

  1. 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

 

  1. Wie heißt
    das Tag für eine unsortierte Liste?

<ul>

  1. Wie legst du
    in HTML das Listenzeichen fest?

Durch
Einsatz des Attributes type. Besser ist es jedoch du definierst die
Listenzeichen mit CSS.

  1. 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>

  1. Wie legst du
    mit CSS das Listenzeichen fest?

Listenzeichen
werden in CSS mithilfe des Schlüsselworts list-style-type realisiert.

  1. Und welches
    Schlüsselwort brauchst du, um eine Grafik als Listenzeichen zu verwenden?

list-style-image

  1. 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.

 

  1. 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

 

  1. 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>

 

  1. 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

 

  1. Welches Tag
    benötigst du für die Tabellenkopfzeile?

Verwende
in der ersten Zeile der Tabelle einfach <th> anstatt <td>.

  1. 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.

  1. Mit welchen
    zwei Attributen kannst du Tabellenzellen verbinden?

Dies
sind die Attribute colspan und rowspan.

  1. 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.

  1. Wie kannst
    du den Abstand des Tabelleninhalts zum Rand einer Zelle festlegen?

Dies
geschieht mit Hilfe des CSS-Schlüsselworts border-spacing.

  1. 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

 

  1. 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>

 

  1. 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>

 

  1. 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

 

  1. Wie
    erstellst du ein Eingabefeld für den Namen?

Ein
Eingabefeld erstellst du mit dem Tag input.

  1. 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

}

 

  1. 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“

  1. 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>

 

  1. 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>.

  1. Wie kannst
    du dir den Formularinhalt per E-Mail schicken lassen?

Indem
du zum Tag form die Attribute method und action hinzufügst.

<form method="post" action="Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!

 

  1. Was hat es
    mit dem Attribut id auf sich?

Mit
dem Attribut id kannst du eine eindeutige Bezeichnung festlegen. Das ist
wichtig, wenn du dein Formular durch ein Skript auswerten lassen willst.

  1. Welche
    CSS-Schlüsselwörter kannst du auf ein Formular anwenden?

Du
kannst alle Schlüsselwörter verwenden, um das Aussehen deines Formulars ganz
nach deinen Wünschen zu gestallten.

 

Aufgaben und Lösungen

 

  1. Erstelle ein
    Formular, in dem folgende Datenfelder enthalten sind: Name, Vorname, Straße,
    Postleitzahl und Ort. Ein Texteingabefeld sollte ebenfalls unbedingt enthalten
    sein. Füge auch die Schaltflächen zum Absenden und zum Löschen der eingegebenen
    Daten hinzu.

Lösung:

<!DOCTYPE HTML>

<html>

<head>

<title>Aufgabe</title>

</head>

<body>

<form>

<label>Name:</label>

<input
type="text" name="name">

<label>Vorname:</label>

<input
type="text" name="vname">

<label>Straße:</label>

<input type="text" name="str">

<label>Postleitzahl:</label>

<input
type="text" name="plz">

<label>Ort:</label>

<input type="text" name="ort">

<textarea name="nachricht">

</textarea>

<input
type="submit" value="senden">

<input
type="reset" value="löschen">

</form>

</body>

</html>

 

  1. Erweitere
    das erstellte Formular um eine Frage, wie dem Besucher die Seite gefallen hat.
    Gib vier Antworten vor und lass ihn nur eine davon auswählen.

Lösung:

<!DOCTYPE
HTML>

<html>

<head>

<title>Aufgabe</title>

</head>

<body>

<form>

<label>Name:</label>

<input
type="text" name="name">

<label>Vorname:</label>

<input type="text" name="vname">

<label>Straße:</label>

<input
type="text" name="str">

<label>Postleitzahl:</label>

<input
type="text" name="plz">

<label>Ort:</label>

<input
type="text" name="ort">

<br>

<div>Wie
gefällt Dir meine Seite?</div>

<input
type="checkbox" name="umfrage1"

value="super">

<label>super</label>

<br>

<input
type="checkbox" name="umfrage1"

value="gut">

<label>gut</label>

<br>    

<input
type="checkbox" name="umfrage1"

value="hmm">

<label>Na ja
…</label>

<br>

<input
type="checkbox" name="umfrage1"

value="schlecht">

<label>gar nicht</label>

<br>

<textarea name="nachricht">

</textarea>

<input type="submit" value="senden">

<input type="reset" value="löschen">

</form>

</body>

</html>

 

  1. Das fertige
    Formular soll nun mit CSS so angepasst werden, dass es einen grauen Hintergrund erhält. Die Beschriftung
    der Eingabefelder soll fett sein. Außerdem soll es einen Innenabstand von 10px
    bekommen.

Lösung:

form

{

background-color:
grey;

padding:
10px

}

label

{

font-weight:
bold

}

Kapitel 11

 

Fragen und Antworten

 

  1. Warum
    solltest du den verwendeten Zeichensatz angeben und wie gibst du den
    Zeichensatz UTF-8 im Dokumentenkopf an?

Den
verwendeten Zeichensatz solltest du angeben, damit es keine Probleme mit
Sonderzeichen gibt. Der Zeichensatz wird durch das Attribut charset im Tag
<meta> angegeben:

<meta
charset="UTF-8">

 

  1. Wie
    definierst du eine automatische Weiterleitung auf eine andere Webseite?

<meta http-equiv="refresh"
content="sec; url=name">

 

  1. Wozu dient
    das Tag noscript?

Falls
ein Browser keine Skripte anzeigen kann, dann wird nur der Bereich, der
zwischen <noscript> und </noscript definiert ist angezeigt.

  1. Nenne ein
    Beispiel für einen globalen Link.

Du
kannst z.B. Skripte, CSS-Dateien oder Favicons durch einen globalen Link
einbinden.

  1. Was sind
    Entities?

Entities
sind Codeschnipsel, die vom Browser immer als Sonderzeichen interpretiert
werden.

Kapitel 12

 

Fragen und Antworten

 

  1. Mit welchem
    Schlüsselwort kannst du die Ecken von Rahmen abrunden? Welche Werte darfst du
    dabei verwenden?

Das
Schlüsselwort heißt border-radius. Als Werte kannst du alle relativen
und absoluten numerischen Werte verwenden.

  1. Was musst du
    beachten, wenn du einen Schatten für eine Box mit abgerundeten Ecken
    definierst?

Der
Schatten passt sich automatisch an die Form und die größe des verwendeten
Radius an.

  1. Wie
    erreichst du es, dass der Schatten einer Box nach »innen« fällt?

Dazu
musst du lediglich den Werten des Schattens den Wert inset voranstellen.

  1. Wie lässt du
    deinen Text einen »Schatten werfen«?

Dazu
verwendest du das Schlüsselwort text-shadow.

  1. Wie kannst
    du CSS-Regeln, die für mehrere Tags gelten, zusammenfassen?

Liste
im CSS-Quelltext alle Tags, für die die Definition gelten soll, durch Kommata
getrennt auf.

  1. Welche
    Schlüsselwörter kannst du mit dem Schlüsselwort font
    zusammenfassen? Nenne bitte drei.

font-family, font-style, font-style (alle die mit font- beginnen.

 

  1. Was musst du
    alles definieren, wenn du eine Position eines Inhalts punktgenau festlegen möchtest?

Den Bezugspunkt, die
horizontale und die vertikale Position.

Aufgaben und Lösungen

 

  1. Erstelle die
    CSS-Regel für eine Box (Tag p), die
    folgende Eigenschaften hat: Schriftart Arial, 14pt Schriftgröße, sichtbarer
    Rahmen in Blau mit 5px Dicke, ein Innenabstand von 7px, ein Außenabstand von
    12px und einen Schatten, der nach innen fällt und so einen Farbverlauf erzeugt.
    Die Farbe des Schattens ist ein helles Grau.

Lösung:

p

{

font-family:
arial;

font-size:
14pt;

border-style:
solid;

border-width:
5px;

border-color:
blue;

padding: 7pt;

margin: 12pt;

box-shadow: inset 0px 0px 25px grey

}

 

  1. Fasse den
    folgenden CSS-Quelltext so weit wie möglich zusammen:

h1

{

font-family: serif

}

span

{

font-family: arial;

font-style: normal;

font-size: 30pt

}

p

{

font-family: arial:

font-size: 12pt:

border-style: solid:

border-color: green

}

div

{

font-family: arial;

font-style: normal;

font-size: 30pt

}

 

Lösung:

h1

{

font-family: serif

}

span, div

{

font: arial normal 30pt

}

p

{

font: arial 12pt;

border: solid green

}

 

  1. Positioniere den Inhalt des Tags p an folgender absoluter Position: 400px vom rechten Fensterrand
    und 300px vom unteren Rand. Erstelle die CSS-Regel.

Lösung:

p

{

position:
absolute;

right:
400px;

bottom:
300px

}