Deine Aufgabe: Erstelle eine Webseite

Code skill

Nutze deine Code-Skills und gestalte eine Webseite für Professor Bairstone. Verwende HTML-Tags und CSS-Formate und erstelle ein interessantes Design. Diese Dinge sollten auf deine Webseite zu sehen sein:

  • Eine Kopfzeile (header)
  • Ein Titel (title)
  • Text über den Mönchsdiamanten
  • Ein Bild vom Team
  • Ein Bild des Diamanten
  • Zettel mit Fakten über den Mönchsdiamanten
Wenn du nicht weiter kommst, kopiere diesen Quelltext in dein Textprogramm. Verändere das Design und Layout und mache so die Webseite zu deinem eigenen Werk. Beachte, dass dein Projektordner Coding auch die beiden Bilddateien diamond.jpg und team.jpg enthalten muss.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>Der Mönchsdiamant</title>
   <style>
     body {
       margin: 0px;
    }   
     .pad {
       padding: 25px;
    }   
     .header {
       background-color: lightblue;
       color: green;
       height: 100px;
       font-size: 36pt;
       text-align: center;
    }   
     .welcome {
       background-color: plum;
       color: white;
       font-size: 16pt;
       text-align: center;
       height: 40px;
       margin: 0px;
    }   
     .main-text {
       width: 60%;
       float: left;
       background-color: beige;
    }   
     .divs {
       margin: 5px;
       width: 25%;
       float: left;
       border: 4px solid lightblue;
    }   
   </style>

</head>
 <body>
   <div class="header pad">
     Mönchsdiamant gefunden
   </div>
   <div>
     <p class="welcome">
       Gestohlener Diamant in Alaska entdeckt!
     </p>
   </div>
   <div class="main-text pad">
     <p>
        Prof. Bairstone und Dr. Day machten einen sensationellen Fund.<br/>
        In einer entlegenen Höhle in Alaska fanden sie den Mönchsdiamanten.<br/>
        Ernesto, der Hund des Professors, hat ihn aufgespürt.
     </p>
     <p>
       Der Edelstein wurde dem Juwelier Volkov vor drei Jahren gestohlen.<br/>
       Die Hauptverdächtigen sind die Gebrüder Bond.<br/>
       Das Team nimmt an, dass der Diamant dort von den Dieben versteckt wurde.<br/>
       Dieses Foto haben sie vom Camp gesendet:
     </p>
     <img src="img/team.jpg" alt="Das Team" style="height: 150px;"/>  
   </div>
   <div class="divs pad">
     <img src="img/diamond.jpg" alt="Diamant" style="width: 150px;"/>
     <p style="text-align: center;">Der Mönchsdiamant</p>
   </div>
   <div class="divs pad" style="text-align: center;">
     Fakten<br/>
     Karat: 300<br/>
     Farbe: Grün<br/>
     Wert: über 10 Mio. €
   </div>
</body>
</html>

Zurück zur Mission
Copyright © 2008 Walker Books Ltd
Illustrations © Duncan Beedie
All rights reserved.