Jul 2012
Webdesign und -programmierung ist Handwerk. Zum HTML der frühen Tage des Webs gesellen sich
Die folgenden Zeilen sind das Template für eine HTML5-Seite:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Eine Webseite</title>
<style type="text/css" title="text/css" media="all">
…
</style>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris ante neque, vehicula quis, convallis sit amet,
vestibulum ornare, arcu.
</body>
</html>
Die Zeilen in einen Programmeditor kopieren, speichern und mit einem Browser öffnen.
Wird die Webseite gespeichert (mit der Dateiendung .htm oder .html), können wir es im Browser öffnen und stellen fest, dass der Browser unsere Zeilenumbrüche ignoriert und aufeinander folgenden Leerzeichen verschluckt.
<h1>Lorem ipsum </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <p>Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu. </p> <p>Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Sed dictum mauris euismod mauris.</p>
Formatierung durch HTML-Tags | So sorgen wir dafür, dass Suchmaschinen nicht nur einen Textbrei vorfinden, sondern den Begriffen in der Überschrift eine höhere Relevanz zumessen können, denn allgemein gehen wir davon aus, dass die Überschrift etwas über den Inhalt der Seite aussagt.
Links werden in <a>-Tages gesetzt. Für die Farbe, die Unterstreichung und den geänderten Mauszeiger sorgen schon die Browser. Aber ein <a>-Tag braucht eine Sprungadresse:
<a href="http://www.mediaevent.de">CSS und HTML</a>
Die Sprungadresse http://www.mediaevent.de kann direkt aus der Adresszeile des Browsers in die Hochkommas kopiert werden.
HTML-Attribute | href ist ein Attribut. Attribute erweitern die Funktion eines HTML-Tags – z.B. wie hier um eine Adresse oder um Regeln für die Formatierung. Die Hochkommas sind wichtig: HTML-Attribute stehen immer in Hochkommas. Ob einfache oder doppelte Hochkommas ist allerdings nicht wichtig.
Seitentitel für die Browserleiste | Der Titel der Seite innerhalb des öffnenden und schließenden title-Tags taucht oben in der Browserleiste auf und stellt die Über-Überschrift dar. Den Seitennamen oder das Motto des Internetauftritts setzen wir voran, denn die Bookmarks des Besuchers speichern den Seitentitel.
Die Lücke zwischen <style> und </style> füllen wir mit etwas Stil:
body {
margin-right: 10%;
margin-left: 10%;
font-family: "Lucida Grande", Arial, sans-serif;
font-size: 82%;
}
und schon haben wir dem Dokument einen Hauch von individuellem Layout aufgedrückt:
Wer über Webspace mit PHP verfügt, kann noch einen Schritt weitergehen und die Datei mit der Endung .php speichern, um sie auf seine Webseite zu übertragen. Während wir die HTML-Seite mit dem Befehl »Datei öffnen« aus der Browserleiste betrachten konnten, müssen wir zu einer PHP-Seite »navigieren«, also die Adresse in der Adressleiste des Browsers eingeben.
Während ein HTML-Dokument überall funktioniert, muss ein PHP-Dokument in einem Webspace liegen und braucht einen Webserver und einen PHP-Interpreter, um zu funktionieren. Wenn dieses Szenario stimmt, wird die Seite wird nicht anders aussehen wie die HTML-Seite.
<?php echo ' <!DOCTYPE html> <html lang="de"> … </body> </html>'; ?>
Wenn eine HTML-Seite die Endung .php aufweist, wird sie genauso angezeigt wie eine HTML-Seite. PHP-Programme sind in <?php und ?> eingeklammert. Der PHP-Befehl "echo" gibt alles, was in Hochkommas steht, im Browserfenster aus. Weil HTML selbst auch Hochkommas benutzt, habe ich doppelte Hochkommas für HTML und einfache Hochkommas für die echo-Anweisung benutzt.
Jetzt haben wir die ersten Lektionen kurz und schmerzlos bewältigt und