CSS und HTML • Einstieg ins Webdesign

Okt 2008

Webdesign: Struktur, Stil und Programmierung

Es ist schon erstaunlich, was aus dem frommen Wunsch einiger Wissenschaftler nach einem Rezept für durchsuchbare Texte geworden ist: Zum simplen HTML der frühen Tage gesellen sich

CSS (Cascading Stylesheets) für schönen Text und elegante Layouts,
JavaScript für Navigationselemente und mehr Komfort beim Ausfüllen von Formularen,
PHP oder Perl oder ASP für die Programmierung von Redaktionssystemen und
Blogs – die eigene Webseite »Prêt-à-Porter« wie Wordpress & Co
XML für die Struktur von Daten aller Art.

Die folgenden Zeilen sind der Rahmen für ein (X)HTML-Dokument:

<!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" xml:lang="de" lang="de">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>untitled</title>
   <style type="text/css" title="text/css" media="text/css">
    
   </style>
</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 das Dokument 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.

HTML-Tags für die Struktur

HTML-Tags sorgen für Struktur.

Was zwischen <h1> und </h1> gesetzt wird, erzeugt einen Zeilenumbruch und wird zu einer großen fetten Überschrift,
was zwischen <p> und </p> steht, wird zum Textabsatz mit Zeilenumbruch,
<strong>fett</strong> erzeugt fett gesetzten Text ohne Zeilenumbruch,
<em>kursiv</kursiv> erzeugt kursiv gestellten Text ohne Zeilenumbruch.

<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>

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 | Das "untitled" zwischen <title> und </title> ersetzen wir durch eine kompakte Beschreibung des Seiteninhalts und setzen den Namen der Site voran: »mediaevent.de :: CSS und HTML :: Einsteig ins Webdesign«. Der Titel der Seite 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.

CSS für die Darstellung

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:

Wir haben rechts und links einen Abstand zum Browserfenster, damit die Texte nicht mehr über die volle Breite des Browserfensters laufen,
eine Schrift unserer Wahl die Schriftgröße für alle Elemente der Seite verkleinert. Diese Eigenschaften gelten für alles, was wir im Folgenden auf auf die Seite setzen, denn wir haben CSS-Eigenschaften für das body-Element der Seite deklariert und einige diese Eigenschaften – die Eigenschaft "font-family" für die Schriftfamilie und "font-size" für die Schriftgröße werden an Elemente wie h1, h2 und p vererbt.

Webseiten mit PHP

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 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" xml:lang="de" lang="de">
<head>
   <meta http-equiv="content-type" content="text/html; charset=charset=utf-8" />
   <title>meineSeite.de: Seitenstruktur mit HTML</title>
   <style type="text/css">
   body { 
       margin-right: 10%; 
       margin-left: 10%; 
       font-family: "Lucida Grande", Arial, sans-serif; 
       font-size: 82%; 
   }
   </style>
</head>
<body>
   <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> 
</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

können ein HTML-Dokument mit Texten und Überschriften anlegen,
haben einen ersten Eindruck vom Vorgehen der Suchmaschinen gewonnen,
die Seite mit CSS gestaltet
und das erste PHP-Programm geschrieben.

Editoren für HTML und PHP

2ndEditor von SixDots (Windows): Ein kleiner Editor für Windows, der ähnlich wie Notepad aufgebaut ist und HTML-, CSS- und PHP-Syntax-Highlighting beherrscht. Was heißen soll: Durch farbiges Anzeigen der Sprachelemente vereinfacht er das Schreiben von Programmen.
PHP Designer 2008 Version 6 (Windows): Ein Editor für PHP, HTML, XML, CSS, JavaScript, Java, Perl, JavaScript, VB, C#, Java & SQL mit Localhost-Preview für PHP. Syntax-Hightlighting, klar, und PHP-Manual on bord(!).
BBEdit von Bare Bones (Mac): Der Editor für den Mac. Neben farbiger Syntax (Syntax-Highlighting) für HTML, CSS, PHP und weiteren Markup- und Programmiersprachen zeigt er das Dokument ohne Verzögerung so an, wie es in einem der modernsten Browser, in Safari, angezeigt wird und bietet für HTML/XHTML einen hervorragenden Syntaxcheck.
SuperHTML: Ein HTML- und Programm-Editor für den PC.

Referenzen und Normen