Homepage selber machen
Schnell, einfach und kostengünstig
Ein Leitfaden und Entscheidungshilfe
Wissen ist Macht
Nichtwissen ist Ohnmacht
Sinn und Zweck der CSS-Programmierung
Die Formatierungen wie Farbe, Größe, Lage etc. aller Elemente wird normalerweise immer für jedes einzelne Element separat angegeben. (Im Beispiel style=...) . In der Regel sollen alle gleichen Elemente auch gleich aussehen. Das gilt sowohl auf einer einzelnen Seite, als auch für und besonders für alle Unterseiten deiner Homepage, denn die sollen ja alle gleich aussehen. Sobald du am Aussehen deiner Homepage etwas änderst, müßtest du alle Elemente einzeln ändern. Eine Wahnsinnsarbeit
Deswegen werden diese Formatierungen in einer separaten Datei definiert und jede Seite deines Projektes erhält den Verweis auf diese Datei. (im Beispiel die rote Zeile link rel=....)
Sobald du also dort etwas änderst, ändern sich alle Unterseiten.
Beispiel einer CSS-Datei. Diese wird mit der Endung CSS im Verzeichnis deiner HTML-Seiten abgespeichert.
body {
font-size: 1em;
color: #333333;
}
h1 {
color: red;
background-color: black;
}
table {
text-align: left;
background-color:
rgb(255, 255, 204);
width: 100%;
height: 100%;
}
HTML-Beispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="de">
<meta name="description" content="Beschreibung der Homepage">
<meta name="author" content="Mein Name">
<meta name="keywords"
content="HTML, HTML-Datei, Beipspiel, Meta-Tags, Textzeilen, Tabelle">
<title>HTML Beispiel mit Grundelementen</title>
<!-- Verweis auf die CSS-Datei mit den Formatdefinitionen -->
<link rel="stylesheet" type="text/css" href="beispielcss.css" />
</head>
<body>
<table style="text-align: left; width: 100%; height: 100%;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="width: 10%;"></td>
<td style="width: 80%;" align="undefined" valign="undefined">
<table style="text-align: left; width: 100%; height: 100%;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="text-align: left; width: 100%; height: 20%;"
align="undefined" height="" valign="undefined">
<h1>Das ist der Kopfbereich</h1>
</td>
</tr>
<tr>
<td style="width: 100%; height: 100%;" align="undefined" valign="undefined">Bereich zur Anzeige deiner Inhalte</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 10%;" align="undefined"
valign="undefined"></td>
</tr>
</tbody>
</table>
</body>
</html>