3.8 Abbildungen mit Figure
Mit Hilfe des figure
-Elements können im HTML-Dokument Abbildungen wie zum Beispiel Diagramme, Bilder, Tabellen oder Quellcodeausschnitte als solche gekennzeichnet werden. Neben der darzustellenden Abbildung kann das figure
-Element auch ein figcaption
-Element aufnehmen, das der Abbildung eine Bildunterschrift hinzufügt.
Aufgabe 3-11: Bildungswege
Erstellen Sie die Webseite bildungswege.html
entsprechend Abb. 3-51.
Hinweise
Kopieren Sie die Texte aus der Vorschau.
Laden Sie die Grafik bildungswege.gif
aus der Vorschau herunter (Rechtsklick auf die Grafik → Grafik speichern unter ).
Vorschau
Abb. 3-52: bildungswege.html (Zwischenstand nach Aufgabe 3-11)
Formatierungsvorgaben
Die folgenden Formatierungsvorgaben sollen für alle Webseiten unseres Webauftritts gelten:
HTML-Element
Formatierung
Elemente mit der Klasse kasten_schattiert
Schattierung:
horizontale Verschiebung des Schattens: 1 Pixel
vertikale Verschiebung des Schattens: 1 Pixel
Bereich, in dem der Schatten von der angegebenen Farbe ins Transparente verschwimmt: 15 Pixel
Farbe des Schattens: #999999
Abstand zwischen dem Rand des Elements und seinem Inhalt: 15 Pixel
Abgerundete Ecken (border-radius
): 10 Pixel
Hintergrundfarbe: weiß (white
)
figcaption
Schriftgröße: klein (small
)
Abstand oberhalb des Elements: 0.4em;
Abstand links vom Element: 1em;
Horizontale Ausrichtung: links;
CSS-Eigenschaften
Abb. 3-53: Vorgaben zur Formatierung der jeweiligen Elemente mit CSS
Lösung
Lösung
CSS
.kasten_schattiert {
box-shadow : 1px 1px 15px #999999;
padding : 15px;
border-radius : 10px;
background-color : white;
}
figcaption {
font-size : small;
margin-top : 0.4em;
margin-left : 1em;
text-align : left;
}
Abb. 3-54: Ergänzung CSS-Datei styles.css
Die folgenden Formatierungsvorgaben sollen nur für die Seite bildungswege.html
gelten:
HTML-Element
Formatierung
Das img
-Element, das die Grafik bildungswege.gif
enthält.
Breite: 450 Pixel
Das figure
-Element, das das img
-Element mit der Grafik bildungswege.gif
enthält.
Maximale Breite: 480 Pixel
Rechts ausrichten, nachfolgende Elemente umfließen das figure
-Element auf dessen linker Seite.
CSS-Eigenschaften
Abb. 3-55: Vorgaben zur Formatierung der jeweiligen Elemente mit CSS
Lösung
Lösung
HTML
<!DOCTYPE html>
<html lang ="de" >
<head>
<meta charset ="utf-8" >
<title> Bildungswege</title>
<link rel ="stylesheet" type ="text/css" href ="styles.css" >
<style>
#img_bildungswege {
width : 450px;
}
#abb1_bildungswege {
max-width : 480px;
float : right;
}
</style>
</head>
<body>
<div id ="page" >
<header id ="page_header" >
<div>
<img id ="logo" src ="img/logo.png" alt ="Logo der Kaufmännischen Schule Tauberbischofsheim" >
</div>
<div>
<h1> Kaufmännische Schule Tauberbischofsheim</h1>
<nav>
<ul>
<li> <a href ="index.html"> Startseite</a> </li>
<li> <a href ="bildungswege.html"> Bildungswege</a> </li>
<li> <a href ="termine.html"> Termine</a> </li>
<li> <a href ="impressum.html"> Impressum</a> </li>
</ul>
</nav>
</div>
</header>
<main>
<h2> Bildungswege</h2>
<figure id ="abb1_bildungswege" >
<img id ="img_bildungswege" class ="kasten_schattiert" src ="img/bildungswege.gif" alt ="Bildungswege an der Kaufmännischen Schule Tauberbischofsheim" >
<figcaption> Abb. 1: Bildungswege an der Kaufmännische Schule Tauberbischofsheim</figcaption>
</figure>
<h3> Kaufmännische Berufsschule</h3>
<p>
In der Kaufmännischen Berufsschule bilden wir im dualen Verbund mit den Ausbildungsbetrieben Bank-, Industrie-, Großhandels-, Büro-, Bürokommunikations- und Werbekaufleute sowie Verwaltungsfachangestellte (ÖV) aus.
</p>
<h3> Berufsfachschule Wirtschaft</h3>
<p>
Die zweijährige Berufsfachschule Wirtschaft (Wirtschaftsschule) führt zur Fachschulreife, d. h. zur Mittleren Reife.
</p>
<h3> Kaufmännisches Berufskolleg I</h3>
<p>
Das einjährige Kaufmännische Berufskolleg I bereitet Schüler und Schülerinnen mit Mittlerer Reife für das BKII vor. Es bietet Schülern mit kaufmännischem Berufsziel verbesserte Bewerbungsvoraussetzungen, weil ihnen intensive Fachkenntnisse und Grundfertigkeiten zur die späteren beruflichen Verwendung vermittelt werden.
</p>
<h3> Kaufmännisches Berufskolleg II</h3>
<p>
Das einjährige Kaufmännische Berufskolleg II ermöglicht den Schülern und Schülerinnen mit der Fachhochschulreife das Studium an Fachhochschulen und schafft mit der Prüfung zum "Staatlich geprüften Wirtschaftsassistenten" gute Voraussetzungen für Bewerbungen, insbesondere im kaufmännischen Bereich.
</p>
<h3> Wirtschaftsgymnasium</h3>
<p>
Im Wirtschaftsgymnasium können Schüler und Schülerinnen nach 3 Jahren Vollzeitunterricht die Allgemeine Hochschulreife erwerben und damit an allen Hochschulen im In- und Ausland in allen Fachbereichen studieren. Dieses Abitur bietet ebenso eine hervorragende Grundlage für Bewerbungen, besonders für die Ausbildungen in kaufmännischen Berufsfeldern.
</p>
</main>
</div>
</body>
</html>
Abb. 3-56: Quellcode der Startseite bildungswege.html (Zwischenstand nach Aufgabe 3-11)