Blog - webdesign, javascript, jquery, html, css, php
Grundsätzlicher Seitenaufbau
Der Seitenaufbau ist ein Thema mit dem sich jeder auf kurz oder lang beschäftigen muss der eine Seite in online stellen will. Um eine aktuelle und konforme Seite zu erstellen gibt es einige Dinge zu beachten. Es muss folgendes gegeben sein:
doctype
Namensraum
charset
head
body
Da wir aber eine aktuelle Seite mit allen techniken planen kommen noch weite Punkte hinzu:
CSS
Javascript
PHP Einstellungsdatei
PHP Funktionen
Nehmen wir einmal die einzelnen Punkt genauer in den Fokus.
doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/code]
Der Doctype ist zwar nicht zwingend erforderlich aber um w3c konform zu arbeiten und eine Grundlage für crossbrowser Optimierung zu schaffen geben wir ihn an. Der hier gewählte "Transitional" ist der gängigste und "einfachste". Im Gegensatz zu "Strict" können wir innerhalb des Dokumentes z.B. CSS oder Javascript Anweisungen angeben.
Namensraum( namespace )
<html xmlns="http://www.w3.org/1999/xhtml">; </html>
Man gibt den Namensraum an um mehrere XML Sprachen nutzen können. Das <p> Element könnte z.B. in einer anderen XML Sprache etwas anderes also einen Absatz bedeuten. In unserem Fall umschließt dieses Element die komplette Seite ( außer den doctype ) da wir nur mit xhtml arbeiten.
head
<head> </head>
Wie der Name schon sagt geht es hier um den Kopf der Seite. Innerhalb dieses Elementes werden unter anderem der Titel der Seite und der Charset definiert. Externe CSS oder Javascript werden innerhalb des head Elementes eingebunden. Falls es notwendig ist in einer Datei speziell CSS oder Javascript anzugeben muss dies auch im head geschehen
charset
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Das Charset wird zum darstellen der Texte bzw. Zeichen der Seite benötigt. In diesem Fall ist "iso-8859-1" um Sonderzeichen nicht extra maskieren zu müssen. In der Regel wird jedoch "UTF-8" genutzt.
body
<body> </body>
Dieses Element umschließt unsere komplette "Ausgabe" d.h. HTML / XHTML und sonstigen Code der etwas ausgibt.
Wenn alle diese Elemente und Angaben gemacht sind ist die Grundlage für unsere Seite geschaffen. Fehlt eines dieser Elemente oder ist nicht richtig geschlossen würde es mindestens einen Fehler bei der validierung geben. Kommen wir zu den optionalen, aber auch sinnvollen Angaben.
CSS
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
So wird die externe CSS Datei "main" in dem Ordner "css" für die Seite eingebunden. Die Angabe media="screen" bedeutet das die CSS Datei für die Ausgabe an einem normalen Monitor gedacht ist.
Javascript
<script type="text/javascript" src="js/script.js"></script>
Diese Angabe ist der CSS ziemlich ähnlich. Es wird die externe Javascript Datei "script.js" aus dem Ordner "js" eingebunden.
Nun kommen wir zu einem Punkt der speziell für Seiten die mit PHP arbeiten gedacht ist:
PHP Einstellungsdatei & Funktionen
<?
require("settings.php");
require("functions.php");
?>
Wenn man eine dynamische Seite erstellt werden viele Variablen immer wieder benötigt. Die "settings.php" beinhaltet z.B. die Daten für die SQL Datenbank oder ( falls der Seitentitel dynamisch geändert wird ) auch der Standartseitentitel. In der "functions.php" sind alle Funktionen gespeichert die auf der Seite Verwendung finden. So hat man von jeder Seite Zugriff auf die Funktionen und auf oft verwendete Variablen. Man kann diese 4 Zeilen ohne schlechtes gewissen auch vor den Doctype der Seite schreiben da es zu keinerlei Ausgabe kommt.
Unser Grundgerüst sieht dann wie folgt aus:
<?<br />
require("func.php");
require("settings.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/script.js"></script>
<title>Seitentitel</title>
</head>
<body>
Seiteninhalt
</body>
</html>
- Veröffentlicht:
- 10.04.2008
- Author:
- Mathias Schübel
- Permalink:
- http://www.schuebel-webdesign.de/blog/8