Lupe Suche
Responsiv Devices

1 - HTML/CSS Vorlage

Verwendest du deine eigene Vorlage sollte sie ähnlich wie die Beispieldatei aufgebaut sein. Folgende Kriterien muss die Vorlagedatei erfüllen:

  • XHTML/CSS oder HTML5/CSS3
  • Die CSS-Stile können intern oder extern deklariert sein.
  • Keine Font-Tags oder Tabellen im Code
  • Positionsrahmen mit DIV-Tags oder HTML5-Tags
  • Optional kann ein Ordner für die Bilder verwendet werden
  • Navigation muss mit Listen-Elementen oder HTML5-Tags gebaut sein

Öffne deine Vorlagedatei im Editor oder lade die bereitgestellte Vorlagedatei
(rechte Maustaste - Ziel speichern unter: weblabor.html)
auf deinen Computer und öffne diese im Editor.

1. Verschaffe dir einen Überblick über die Vorlagedatei.
   - Untersuche die Ansicht der Datei im Browser
   - Versuche die Übersicht über den CSS-Code zu gewinnen
   - Erkenne die verschachtelte Struktur der HTML-Elemente

Vorlagedatei HTML-Ansicht im Browser:

weblabor.png

Vorlagedatei Codeansicht CSS:

body {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #CCCCCC;
}
header {
    height: 60px;
    background-color: #66CC99;
    width:100%;
}
header h1 {
    padding: 5px 0 5px 200px;
}
nav {
    width: 33%;
    float: left;
}
nav ul {
    list-style: none;
    padding-left: 20px;
}
nav ul li a {
    color: #990000;
    text-decoration: none;
}
nav ul li a:hover {
    color: #006600;
}
article {
    width: 67%;
    float: left;
}
article h1 {
    color: #990000;
}
footer {
    width: 100%;
    height: 60px;
    background-color: #66CC99;
    clear: both;
}
footer p {
    padding: 20px;
}

Vorlagedatei Codeansicht HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Weblabor HTML5</title>
<style></style>
</head>
<body>
<header><h1>Weblabor</h1></header>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Seite 1</a></li>
    <li><a href="#">Seite 2</a></li>
    <li><a href="#">Seite 3</a></li>
  </ul>
</nav>
<article>
  <h1>Titel der Startseite</h1>
  <p>Lorem ipsum dolor sit amet ... </p>
</article>
<footer>
  <p>Adresse in der Fusszeile</p>
</footer>
</body>
</html>

 

Weiter mit der Funktionsweise eines Silverstripe-Templates