Materialien zum Unterricht

Kontrolle Klasse 9: HTML, CSS

Hilfsmittel: Alles erlaubt, außer Mittel zur Kommunikation.

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Physik</title>
</head>
<body> <div id="seite">
<h1>Physik</h1>
<h2>Optik</h2>
<p>Die Optik besch&auml;ftigt sich mit dem Licht und dem Sehen.<br/>
Licht</p>
<ul>
<li>breitet sich geradlinig aus</li>
<li>kann Schatten erzeugen</li>
<li>wird gespiegelt</li>
<li>wird gebrochen</li>
</ul>
<p>Der Mensch wendet die Gesetze der Optik bei optischen Ger&auml;ten an:</p>
<p>K&ouml;rper, die von selbst Licht ausenden, nennt man Lichtquellen. Alle anderen
K&ouml;rper sind beleuchtete K&ouml;rper.</p>
<table>
<tr>
<th>Lichtquellen</th>
<th>beleuchtete K&ouml;rper</th>
</tr>
<tr>
<td>Fackel</td>
<td>Baum</td>
</tr>
<tr>
<td>Sonne</td>
<td>Mond</td>
</tr>
<tr>
<td>Leuchtdiode</td>
<td>R&uuml;ckstrahler</td>
</tr>
</table>
<p>Wichtige Gesetze, die die Ausbreitung des Lichtes beschreiben, sind<br>
das Reflexionsgesetz<br>
das Brechungsgesetz</p>
</div>
</body>
</html>

Aufgaben

  1. Kopiere den Quelltext in eine Datei index.html in Notepad++. Speichere die Datei in einen neuen Ordner.
  2. Erstelle eine neue Datei, die die Formatierungen für die HTML-Datei enthalten soll. Speichere die Datei im gleichen Ordner wie die index.html. (1)
    Fülle die Datei mit den in den nächsten Aufgaben geforderten Formatierungen.

  3. Alle Inhalte der Seite sollen in der Schriftart Arial dargestellt werden. (2)
  4. Die Überschrift h1 hat eine blaue Schriftfarbe. Die Überschrift h2 bekommt ebenfalls eine blaue, aber etwas hellere Farbe.(2)
  5. Der Bereich "seite"
    1. ist 500 px breit,
    2. hat einen 1 Pixel breiten durchgezogenen Rahmen in Rot
    3. einen Innenabstand von 0.5 em und
    4. eine hellgelbe Hintergrundfarbe (5)
  6. Die Tabelle ist wie auf der Abbildung zu formatieren. (5)
  7. Füge rechts neben dem Text das Bild licht.gif ein. Dazu wird eine neue Klasse bild_rechts verwendet.(4)
  8. Im letzten Abschnitt stehen das Reflexionsgesetz und das Brechnungsgesetz. Diese beiden Textstellen sollen jeweils einen Link zu einer Seite refelxion.html und brechung.html bereitstellen. Ändere den Quelltext entsprechend um. (4)
  9. Die beiden soeben eingefügten Links sollen nebeneinader stehen. Dazu wird um die beiden Links ein weiterer Bereich (<div>) gelegt, der die Klasse container bekommt. Diese Klasse wird in der style.css zu einem Flex-Container. (2)
  10. Zum Schluss erhalten die beiden Links noch die Klasse menu und werden in der style.css entsprechend formatiert. (2)
  11. Schicke beide Dateien nacheinander über das Postformular weg. (1)