Bereiche
Um eine Web-Seite leichter Formatieren zu können teilt man die Web-Seite in verschiedene Bereiche ein. Diese können dann mit dem HTML-Tag [tt=HTML]<div>[/tt] definiert werden.
Ein Beispiel für einen Standard ist hier dargestellt:
<!DOCTYPE html>
<html lang="de">
<!-- Webseite ... -->
<!-- Datei : index.html -->
<!-- Stand : 15.06.2016, Klaus Anders -->
<head> <!-- Informationen ueber die Webseite -->
<meta charset="utf-8"> <!--- Zeichencodierung HTML5 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <!--- Zeichencodierung HTML4 -->
<meta name="description" content="Beschreibung der Web-Seite.">
<meta name="keywords" content="Suchbegriffe fuer die Inhalte der Seite">
<meta name="keywords" lang="de" content="Suchbegriffe in Deutsch">
<meta name="keywords" lang="en-us" content="Searches in English">
<meta name="keywords" lang="en" content="Searches in English">
<meta name="keywords" lang="fr" content="Recherches dans Fanzösisch">
<meta name="language" content="de">
<meta name="author" content="Name des Autors">
<meta name="publisher" content="Name des Herausgebers">
<meta name="copyright" content="Copyright Informationen">
<meta name="generator" content="Manuell">
<meta name="date" content="2016-06-15T08:12:25+01:00">
<meta name="version" content="1.00">
<meta name="format-detection" content="telephone=yes"> <!-- Telefonnummern durch Browser markieren -->
<meta name="robots" content="index,follow"> <!-- Informationen wie Suchmaschinen mit der Seite umgehen sollen -->
<!-- noindex=keine Indizierung nofollow=keine Linkverfolgung -->
<title>Startseite</title>
<link rel="shortcut icon" href="https://www.xyz.de/favicon.ico"> <!-- Link zum Icon der Webseite -->
<link rel="stylesheet" href="styles/bildschirm.css" type="text/css" media="screen">
<link rel="stylesheet" href="styles/drucker.css" type="text/css" media="print">
</head>
<body background="images/hintergr.gif"
bgcolor="#c0c0c0" text="#000000" link="#008000" vlink="#0000ff" alink="#ff0000">
<!-- Inhalt der Webseite -->
<font face="Verdana, Arial, Helvetica, sans-serif">
<div id="seitenbereich">
<div id="kopfbereich">
<h1><img src="images/logo.gif" id="logo" alt="Info zum Logo" width="40" height="40">Text zum Logo</h1>
<p id="slogan">Beschreibung dieser Web-Seite.</p>
</div> <!-- Ende kopfbereich -->
<div id="navibereich">
<ul>
<li class="aktive-seite"><a href="index.html" >Startseite</a></li>
<li ><a href="unterseite.html">Unterseite</a></li>
</ul>
</div> <!-- Ende navibereich -->
<div id="detailbereich">
<div id="textbereich">
<h2>Startseite</h2>
<p>
</p>
</div> <!-- Ende textbereich -->
<div id="sidebar">
<h2>Aktuelles</h2>
<p>
</p>
</div> <!-- Ende sidebar -->
</div> <!-- Ende detailbereich -->
<div id="fussbereich">
<address x-ms-format-detection="all"> <!-- Markieren der Telefonnummer durch Browser zulassen -->
Name · Bahnhofweg 12 · 12345 Kleinstadt<br>
Tel. 01234 / 456789 · Fax 01234 / 456780
</address>
</div> <!-- Ende fussbereich -->
</div> <!-- Ende seitenbereich -->
</font
</body>
</html>/* */
/* Stylesheet fuer die Bildschirmausgabe */
/* Aufbau: 1. Kalibrierung und Restauration */
/* 2. Allgemeine Styles */
/* 3. Styles für Layoutbereiche */
/* 4. Sonstige Styles */
/* */
/* Datei : bildschirm.css */
/* Stand : 15.06.2016, Klaus Anders */
/* */
/* =====================================
1. Kalibrierung und Restauration
================================== */
* { padding: 0; margin: 0; } /* Abstaende auf 0 setzen */
html { overflow-y: scroll; } /* Immer eine Scollbar */
/* Abstaende nach unten und von links */
h2, h3, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em; }
/* =====================================
2. Allgemeine Styles
================================== */
/* Standard Farben und Schrift setzen */
body {
background-color: #c0c0c0;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
/* Ueberschriften Groesse setzen */
h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 110%; }
/* Standard Adress-Infos formatieren */
address {
text-align: center;
font-size: 80%;
font-style: normal;
letter-spacing: 2px;
line-height: 1.5;
}
/* Standard Links formatieren */
a { text-decoration: none; } /* Textformatierung ausschalten */
a:link { color: #008000; } /* Formatierung unbesucht */
a:visited { color: #6495ed; } /* Formatierung besucht */
a:hover, a:focus { text-decoration: underline; } /* Formatierung bei Fokus und Maus darueber */
a:focus { border-bottom: 1px solid #d90000; } /* Formatierung wenn der Link den Fokus hat */
a:active { background: #dbdb32; color: #000000; } /* Formatierung zum Zeitpunkt des anklickens */
/* Logo formatieren */
img#logo {
background-color: #c0c0c0;
color: black;
padding: 5px;
border: none;
}
/* float-Bereich beenden both (left und right in einem) */
.clearing {
clear: both;
}
/* =====================================
3. Styles für die Layoutbereiche
================================== */
div#seitenbereich {
background-color: white;
color: black;
width: 100%; /* Innere Box auf 100% Fenster Breite einstellen */
margin-right: auto; margin-left: auto; /* Seite zentrieren */
margin-top: 0px; margin-bottom: 10px; /* Aastand oben und unten 10 Pixel */
}
div#kopfbereich {
position: relative; /* Kopfbereich relativ berechnen damit die Elemente sich Absolut positionieren können */
background-color: #cadce5; /* Hintergrundfarbe */
background-image: url(../images/hgkopf.jpg); /* Hintergrundbild */
background-repeat repeat-y; /* Grafik nur in y (Horizontal) duplizieren */
background-position: top left; /* beginn der Grafik 1.Wert obere Ecke, 2.Wert linke Ecke*/
/* Kurzschreibweise = background: #cadce5 url(../images/kopfbild.jpg) repeat-y left top; */
color: black;
padding: 10px 20px 0 20px; /* Abstand innen oben rechts unten links */
}
p#slogan {
padding: 5px 0;
margin-bottom: 0;
position: absolute; /* Slogan absolut im Kopfbereich oben rechts positionieren */
top: 10px;
right: 20px;
padding: 5px 0;
margin-bottom: 0;
}
div#navibereich {
text-align: left;
color: black;
background: #cadce5 url(../images/hgkopf.jpg) repeat-y left top;
padding: 5px 20px 4px 20px; /* Abstand innen oben rechts unten links */
border-bottom: 1px solid #8c8c8c;
}
div#seitenbereich {
position: relative; /* Kopfbereich relativ berechnen damit die Elemente sich Absolut positionieren können */
background: #cadce5 url(../images/hintergr.jpg) left top;
padding: 0px; /* Abstand innen oben rechts unten links */
}
div#textbereich {
background: #cadce5 url(../images/hintergr.jpg) left top;
padding: 20px; /* Abstand innen oben rechts unten links */
}
div#sidebar {
background: #cadce5 url(../images/hintergr.jpg) left top;
padding: 20px; /* Abstand innen oben rechts unten links */
}
div#fussbereich { /* Rahmen setzen und nach oben und unten Freiraum */
background: #cadce5 url(../images/hgkopf.jpg) repeat-y left top;
padding: 10px 20px 20px 20px;
border-top: 1px solid #8c8c8c;
margin-top: 0px;
}
/* =====================================
4. Sonstige Styles
================================== */
.clearfix:after { /* Der Kern von Clearfix */
content: ".";
display: block;
clear: both;
font-size: 0;
height: 0;
visibility: hidden;
}
*:first-child+html .clearfix { min-height: 0; } /* Patch für IE7 */
* html .clearfix { height: 1%; } /* Patch für IE6 */
/* =====================================
Ende Stylesheet bildschirm.css
================================== *//* */
/* Stylesheet fuer die Druckausgabe */
/* Aufbau: 1. Kalibrierung und Restauration */
/* 2. Allgemeine Styles */
/* 3. Styles für Layoutbereiche */
/* 4. Sonstige Styles */
/* */
/* Datei : drucker.css */
/* Stand : 15.06.2016, Klaus Anders */
/* */
/* =====================================
1. Kalibrierung und Restauration
================================== */
/* Abstaende nach unten und von links */
h2, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em; }
/* =====================================
2. Allgemeine Styles
================================== */
/* Standard Farben und Schrift setzen */
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11pt;
}
/* Ueberschriften formatieren */
h1, h2 { font-family: Verdana, Arial, Helvetica, sans-serif; }
h1 { font-size: 24pt; }
h2 {
font-size:18pt;
padding-top: 6pt;
border-top: 3pt solid #d90000;
margin-top: 12pt;
}
/* Standard Adress-Infos formatieren */
address {
text-align: center;
font-size: 80%;
font-style: normal;
letter-spacing: 2px;
line-height: 1.5;
}
/* =====================================
3. Styles für die Layoutbereiche
================================== */
div#navibereich { display: none; }
/* =====================================
4. Sonstige Styles
================================== */
/* =====================================
Ende Stylesheet drucker.css
================================== */