Zurück zu: Berufsmatura: 24. Mai 2016
Inhaltsverzeichnins
Übung 2 – Grandhotel
Angabe
Schritt 1
Schritt 2
Ergebnis
Übung 2 – Grandhotel
Vorweg: Wir werden die IDs zu Klassen umwandeln. Der Code, der hier zu finden sein wird, ist dementsprechend abgeändert. Warum? Weil IDs in dem Beispiel nicht notwendig sind.
Angabe
Die Struktur der Seite besteht abgesehen vom <body>-Element aus einem <h1>-Element sowie drei <div>-Elementen. Erstellen Sie mithilfe einer externen CSS-Datei folgende Regeln für die Typ- und ID-Selektoren:
| CSS-Angaben | |
|---|---|
| body { background-color: #400000; font-family: Verdana; text-align: center; } | h1 { color: #ffffff; background-color: #790000; position: absolute; left: 50px; right: 50px; border: 2px solid white; padding: 5px; } |
| .bild1 { position: absolute; left: 50px; top: 100px; width: 200px; height: 200px; z-index: 1; border: 1px solid white; } | .bild2 { position: absolute; right: 50px; top: 100px; width: 200px; height: 200px; z-index: 2; border: 1px solid white; } |
| .text { color: white; background-color: #790000; position: absolute; left: 30%; top: 100px; width: 40%; height: 200px; z-index: 3; border: 1px solid white; } | Sie können die Werte nach eigenen Vorstellungen verändern und variieren. |
Schritt 1: HMTL-Dokument erstellen
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>Grandhotel</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>Nun überlegen wir: In der Angabe ist die Struktur vorgegeben. 1x h1 und 3x div. Wie müssen wir die Seite aufbauen? Dazu sehen wir uns einfach den Screenshot an. Die große Box, die den Text „Grandhotel“ enthält, ist unsere h1. Alles andere müssen also divs sein. Dazu kommt noch ein Bild, das wir auf der Website einbinden müssen. Dieses finden wir unter http://wissenistmanz.at im SbX-Bereich (ID:1322). Das Bild herunterladen, in den Ordner kopieren und verlinken. <img src="lobby.jpg" alt="Lobby"> – der alt-Tag sollte immer angegeben werden!
Bleibt nur noch ein div über: Das Text-div. Wir erstellen also die Elemente und fügen ihnen die passende Klasse hinzu. Zum Schluss sollte unser Code so aussehen:
Ergebnis: index.html
Der grüne Text ist der Teil, den wir in diesem Schritt hinzugefügt haben.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grandhotel</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Grandhotel</h1>
<div class="bild1"><img src="lobby.jpg" alt="Lobby"></div>
<div class="text">Die Lobby</div>
<div class="bild2"><img src="lobby.jpg" alt="Lobby"></div>
</body>
</html>Schritt 2: Styles in style.css definieren
Der einfachste Teil der Übung: Wir kopieren einfach die CSS-Angaben in der Angabe in die style.css.
Ergebnis: style.css
body {
background-color: #400000;
font-family: Verdana;
text-align: center;
}
h1 {
color: #ffffff;
background-color: #790000;
position: absolute;
left: 50px;
right: 50px;
border: 2px solid white;
padding: 5px;
}
.bild1 {
position: absolute;
left: 50px;
top: 100px;
width: 200px;
height: 200px;
z-index: 1;
border: 1px solid white;
}
.bild2 {
position: absolute;
right: 50px;
top: 100px;
width: 200px;
height: 200px;
z-index: 2;
border: 1px solid white;
}
.text {
color: white;
background-color: #790000;
position: absolute;
left: 30%;
top: 100px;
width: 40%;
height: 200px;
z-index: 3;
border: 1px solid white;
}Ergebnis
Lasst euch nicht wegen der URL des Bildes irritieren. Aus Demonstrationszwecken musste ich das Bild hochladen, sonst ist die Verlinkung nicht möglich.
See the Pen Grandhotel by Jennifer (@Smettbonia) on CodePen.
Schreibe einen Kommentar