Nach unserem heutigen Kurs und meiner ernüchternden Erkenntnis, wie unterschiedlich der Wissensstand bei uns ist, möchte ich nochmal ein wenig von Null beginnen.

Wir basteln uns eine Website “from the Scratch”, also von Beginn an. Simpel. Mit HTML und CSS. Und CSS-basiertem Layout - ohne Tabellen und ähnliche Hilfskonstruktionen. Dazu habe ich ein Online-Beispiel vorbereitet. Über Entstehung und Details sprechen wir am kommenden Freitag.

Zum ersten Online-Beispiel hier die zugehörige erste HTML-Seite index.html und das erste CSS-Stylesheet stile.css. Wir tasten uns schrittweise an. Verschiedene Browser bleiben zunächst unberücksichtigt!

HTML - 1

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Website from the scratch</title>

<link href=”stile.css” rel=”stylesheet” type=”text/css”>
</head>

<body>

<div id=”page”>

<div id=”header”>
<h1>Meine Website</h1>
</div>

<div id=”content”>

<div id=”navigation”>
<h3>Menü</h3>
<ul>
<li>Menüpunkt 1</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3</li>
</ul>
</div>

<div id=”usercontent”>
<h2>Inhalte</h2>
<p>Texte …. Bilder … Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. </p>
<p>Texte …. Bilder … Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. Bellende Hunde beißen nicht. </p>
</div>

</div>

<div id=”footer”>
<p><a href=”#”>zum Seitenanfang</a></p>
</div>

</div>

</body>
</html>

CSS-Stylesheet - 1

/* Stylesheet Screen stile.css */
/* Autor: ……………….. */
/* Licence: ……………… */
/* Version: ……………… */
/* Date: ………………… */

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100.01%;
}

#page {}

#header {}

#content {}

#navigation {}

#usercontent {}

#footer {}

img {}

/* usw. */

Und so sieht’s online aus …

Nachtrag:

Die Stile für die einzelnen DIV-Container page, header, content, navigation, usercontent und footer besprechen wir am kommenden Freitag ebenso wie deren Positionierung, grafische Hintergründe, Schriften etc. im HGB-Kurs Basics II.

Druckversion des Beitrags anzeigen und ausdrucken