Das Künstlerlexikon

Aufgabe

Alle zusammen erstellen ein Lexikon der beliebtesten Künstler, welches ein einheitliches Layout bekommen wird. Darüber hinaus gibt es auch individuelle Formatierungen der einzelnen Seiten.

Anforderungen

  1. Jede(r) Schüler/Schülerin erstellt eine HTML-Seite zu ihrem/ihrer Lieblingskünstler/-künstlerin.
    Die Seite enthält:
    1. Überschrift - Name des Künstlers/ der Künstlerin
    2. mindestens ein Foto
    3. einen passenden Hintergrund
    4. Kurzbiographie
    5. mehrere Links ins Internet, z.B. Tourplan, Songs etc.
    6. einen Link auf die Künstlerlexikon-Homepage index.html
      <a href="../index.html">Home</a>
    7. verwenden Sie float-Properties in CSS, um die Seite zu gestalten und z.B. Text und Bilder nebeneinander anzuzeigen.
      Siehe http://www.w3schools.com/css/css_float.asp
    8. ...
  2. Die Seiten werden wie folgt benannt: Im Klassenbuch ist jeder Schüler/ jede Schülerin mit einer Nummer gekennzeichnet. Die entsprechende Datei wird unter 1.html, 2.html usw. gespeichert.
  3. Alle individuell zu formatierenden Seitenbestandteile werden mit CSS formatiert und befinden sich im style-Tag auf der eigenen Seite (nicht ausgelagert!).
  4. Eine CSS-Datei lexikon.css wird eingebunden, welche das Grunddesign des Lexikons enthält, d.h. alle Formatierungen welche von den Schülern/Schülerinnen nicht individuell auf ihren Seiten vorgenommen werden (Schrift, Hintergrundfarbe, Ausrichtung, ...).
    <link href="../lexikon.css" rel="stylesheet" type="text/css">
  5. ...
Die Dateien index.html und css.html werden vom Lehrer erstellt und könnten etwa wie die folgenden Beispiele aussehen:

index.html

<!DOCTYPE html>
 
<html>
 
<head>
 
  <title>Helden! (Startseite)</title>
  <meta charset="utf-8">
 
  <!-- Die Formate der Datei lexikon.css legen
       das Basislayout der Seite fest. Alle hier
       vergebenen Formate können bzw. sollten
       von Ihnen durch eigene individuelle Formate
       ersetzt werden. -->
  <link href="lexikon.css" rel="stylesheet" type="text/css">
 
  <!-- Hier stehen alle Formate, welche Sie für
       Ihre individuell gestaltete Seite wählen -->
  <style type="text/css">
 
    body
    {
        text-align:       center;
        font-size:        20px;
        background-image: url(helden.jpg);
        background-size:  cover;
    }
 
    h1
    {
        padding:    0px;
        margin:     0px;
    }
 
    /* Die folgenden Eigenschaften werden
       benötigt, um div-Elemente nebeneinander
       anzeigen zu können. */
    .box
    {
        float:      left;
        padding:    20px;
        opacity:    0.7;
        width:      25%;
    }
 
    ul
    {
        list-style-type: none;
    }
 
    </style>
 
</head>
 
 
<body>
 
  <h1>Helden!</h1>
 
  <div class="box">
      <ul>
        <li><a href="1/1.html">1</a>
        <li><a href="2/2.html">2</a>
        <li><a href="3/3.html">3</a>
        <li><a href="4/4.html">4</a>
        <li><a href="5/5.html">5</a>
        <li><a href="6/6.html">6</a>
        <li><a href="7/7.html">7</a>
        <li><a href="8/8.html">8</a>
        <li><a href="9/9.html">9</a>
        <li><a href="10/10.html">10</a>
      </ul>
    </div>
 
    <div class="box">
      <ul>
        <li><a href="11/11.html">11</a>
        <li><a href="12/12.html">12</a>
        <li><a href="13/13.html">13</a>
        <li><a href="14/14.html">14</a>
        <li><a href="15/15.html">15</a>
        <li><a href="16/16.html">16</a>
        <li><a href="17/17.html">17</a>
        <li><a href="18/18.html">18</a>
        <li><a href="19/19.html">19</a>
        <li><a href="20/20.html">20</a>
      </ul>
    </div>
 
    <div class="box">
      <ul>
        <li><a href="21/21.html">21</a>
        <li><a href="22/22.html">22</a>
        <li><a href="23/23.html">23</a>
        <li><a href="24/24.html">24</a>
        <li><a href="25/25.html">25</a>
        <li><a href="26/26.html">26</a>
        <li><a href="27/27.html">27</a>
        <li><a href="28/28.html">28</a>
        <li><a href="29/29.html">29</a>
        <li><a href="30/30.html">30</a>
      </ul>
 
    </div>
 
    <p>
    <a href="http://htmlbasics.wikispaces.com/Kuenstler">Aufgabenstellung und Bewertungskriterien</a>
</body>
 
</html>

lexikon.css

Die Layoutdatei des Lexikons lexikon.css muss in allen Ihren zugelieferten Dateien verwendet werden, indem Sie folgende Zeile im head-Tag Ihrer Datei ergänzen:
<link href="../lexikon.css" rel="stylesheet" type="text/css">
Der Inhalt von lexikon.css könnte z.B. für das body-Tag wie folgt lauten:
body
{
  font-size:        28px;
  font-family:      Verdana, Arial, Helvetica, sans-serif;
  color:            white;
  background-color: black;
}
 
a
{
  font-size:       24px;
  text-decoration: none;
  opacity:         1;
}
 
a:link
{
  color:           yellow;
  background:      black;
}
 
a:hover
{
  color:           white;
  background:      black;
}
 
a:active
{
  color:           red;
  background:      black;
}
 
a:visited
{
  color:           grey;
  background:      black;
}
Hinweise: Wenn Sie anstelle der obigen Formatierungen eigene Vorstellungen realisieren möchten, dann müssen Sie alle diese Formatierungen mit eigenen Werten in Ihren Cascading Style Sheets verwenden!

Abgabe

Ihr Ergebnis wird bewertet entsprechend ...