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

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)