Beispiel HTML+CSS

 

Wissen ist Macht

Nichtwissen ist Ohnmacht

Homepage selber machen

Translate

Schnell, einfach und kostengünstig

Ein Leitfaden und Entscheidungshilfe (Stand Jun 2017)

 

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>