Zurück zu: Berufsmatura: 24. Mai 2016
Inhaltsverzeichnins
Übung 1 – Canyoning
Angabe
Schritt 1
Schritt 2.1
Schritt 2.2
Größe?
Schritt 3
Schritt 4
Schritt 5
Schritt 6
Ergebnis
Canyoning
Angabe
- Erstellen Sie ein HTML-Dokument mit dem Titel „Canyoning“
- Definieren Sie eine Tabelle mit vier Zeilen und einer Spalte. Die Hintergrundfarbe der Tabelle ist #AACCAA, die Breite 600 Pixel.
- Die Hintergrundfarbe der ersten Zeile ist #99AA99. Der Text „Canyoning“ wird fett, in der Schriftart Arial, Größe 5 und der Farbe Dunkelgrün (= darkgreen) dargestellt.
- Der Text in der zweiten Zeile der Tabelle wird wie folgt formatiert:
- Überschrift: Schriftart Arial, Größe 3, Farbe Dunkelgrün. Eine Zeile Abstand davor (break)
- Hauptteil: Schriftart Arial, Größe 2, Farbe Schwarz
- Link-Zeile: Fett, Schriftart Arial, Größe 3, Farbe Dunkelblau (= darkblue)
- Die Zieladresse für den Textlink lautet http://wwww.jollydays.at
- In der dritten Tabellenzeile befindet sich eine neue Tabelle mit zwei Zeilen und drei Spalten. die Spalten sind 200 Pixel breit. Die Tabelle enthält die sechs Bilder ihrer Originalgröße
- Die letzte Tabellenzeile enthält den Hinweis auf die Bildquellen in Arial, Größe 1
Schritt 1: HMTL-Dokument erstellen
Aufgabe: Erstellen Sie ein HTML-Dokument mit dem Titel „Canyoning“
Für die Seite brauchen wir, wie immer, eine index.html und eine style.css. In die index.html schreiben wir:
- Doctype (html5)
- html-Tag mit vordefinierter Sprache (englisch); Zwischen Anfangs- und Endtag:
- Head-Tag; Zwischen Anfangs- und Endtag:
- Codierung (UTF-8)
- Title-Tag; Zwischen Anfangs- und Endtag -> Titeltext (Canyoning)
- Stylesheet verlinken:
- rel-Attribut (relation)
- type-Attribut
- href (Pfad)
- body Tag
- Head-Tag; Zwischen Anfangs- und Endtag:
Ergebnis: index.html
Wenn ihr alles richtig gemacht habt, sollte eure Datei bis jetzt so aussehen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canyoning</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>Wenn wir die Seite aufrufen, sehen wir bis jetzt noch nichts. Wir haben ja noch keinen Text hinzugefügt. Was wir allerdings sehen können, ist der Titel im Tab unseres Browsers.
Schritt 2.1: Tabelle mit vier Zeilen und einer Spalte
Zuerst überlegen wir: Vier Zeilen, eine Spalte. Wie sieht das Ergebnis aus? Wie setze ich es um?
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>Schritt 2.2: Hintergrundfarbe und Breite der Tabelle
Größe?
Viele haben sich gewundert was es mit der Textgröße auf sich hat. „5 Pixel? Das ist doch total klein!“ – Ja, das stimmt! In dem Beispiel sind allerdings nicht die Pixel gemeint, sondern der Wert des size-Attributes des font-Tags:
<tag attribut="wert">Hallo!</tag>wird zu
<font size="5">Hallo!</font>| Größentabelle | |
|---|---|
| Wert des Size-Attributes | Stylesheet |
| 1 | x-small |
| 2 | small |
| 3 | medium |
| 4 | large |
| 5 | x-large |
Schritt 3
folgt
Schritt 4
folgt
Schritt 5
Tabellengrundgerüst: 3 Spalten, 3 Zeilen = 9 Zellen
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>Wiederholung: HTML: Tabellen
Schritt 6
folgt
Ergebnis
Wie wir bereits wissen, können die Lösungen bei jedem anders aussehen. Sollte euer Ergebnis also auch stimmen, ihr es aber anders umgesetzt haben, ist das völlig okay!
Mein Code/Ergebnis hier:
See the Pen Canyoning by Jennifer (@Smettbonia) on CodePen.
Schreibe einen Kommentar