Webdesign in Html

Html-Tags - Grundgerüst der Webseite - Umlaute

Html - Textauszeichnungssprache

Um Seiten im Internet darzustellen verwendet man am besten Html. Dies ist keine Programmiersprache, wie es oft dargestellt wird, sondern eine Textauszeichnungssprache. Das vorher in einem Bildbearbeitungsprogramm oder auf einem Blatt Papier gestaltete Webdesign muß also nun in html realisiert werden. Mit reinem Html können keine dynamischen sondern nur statische Webseiten erstellt werden. Programmiersprachen, wie Php, Java oder Perl können dagegen auch dynamische Webseiten erzeugen. Oft wird statt Javascript von Java gesprochen, weil viele Menschen denken Java ist die Kurzform von Javascript. Dies ist leider ein weit verbreiteter Irrtum. Mit Javascript lassen sich in Verbindugn z.B. mit html kleinere dynamische Effekte auf Webseiten erzeugen. Mit Java können größere Programme geschrieben werden. Bevor man sich aber an Php und Co wagt sollten Html und Javascript kein Buch mit sieben Siegeln mehr sein.

Html Editor zum schreiben von Html code

Zur Umsetzung des entworfenen Webdesign in Html gibt es zahlreiche mehr oder weniger geeignete Autorenprogramme. Viele blähen den Quelltext unnötig auf. Vor allen Dingen, wenn später Websites mit Php realisiert werden sollen, empfiehlt es sich aber den Quelltext in einem ganz normalen Texteditor wie beispielsweise Notepad, welchen wir auch verwenden und welcher auf Windows-Rechnern standardmäßig vorhanden ist, fein säuberlich von Hand zu schreiben. So kann der Quelltext schlank gehalten werden und das Erlernen von beispielsweise Php oder Perl ist einfacher, wenn man weiß was welcher Html-Tag wirklich erledigt. Keine Angst - Html ist sehr leicht zu erlernen.

Ein weiterer empfehlenswerter Texteditor ist der Html-Editor Phase 5 von Uli Meybohm. Dieser hat neben einiger anderer Vorteile gegenüber Notepad den Pluspunkt, dass er mit einer Hervorhebung der Html-Syntax arbeitet und die Endtags stelbständig setzt.
Notepad befindet sich standardmäßig unter Start -> Programme -> Zubehör -> Editor auf allen Computern mit Windows-Betriebssystem. Dieser hebt aber die html-Syntax nicht hervor, womit die Fehlersuche etwas erschwert ist.
Verwenden Sie keine Textverarbeitungsprogramme zum Anlegen Ihrer Website, auch wenn sich mit ihnen Webseiten gestalten lassen. Diese blähen ebenfalls den Quelltext unnötig auf.

Die nun folgende html-Schnellübersicht soll dazu dienen in kurzer Zeit einfache Webseiten zu gestalten. Den Text aus der Spalte Html-Quelltext können Sie direkt in den Quelltext Ihrer Website kopieren. Die rechte Spalte der Tabelle dient zur Erklärung der Inhalte in der linken Spalte und zeigt zumeist schon das Ergebnis nach Integration in den Quelltext.

Html-Quelltext Bedeutung und Darstellung in der Website
<!-- das ist ein Kommentar, er wird in der Browseransicht der Webseite nicht ausgegeben sondern nur im Quelltext-->. Als Kommentar kann der Webdesigner oder Webmaster Notizen zur Website aufschreiben. Dies macht vor allen Dingen bei langen Quelltexten Sinn, um einen besseren Überblick innerhalb der Website zu behalten. Auch wenn mehrere Webdesigner an einer Website arbeiten sind Kommentare von Vorteil.
<!-- ********************************************************--> Mit diesem Kommentar kann der Quelltext der Webseite strukturiert werden, wobei die Zeichen zwischen Kommentaranfang und -ende frei gewählt werden können und auch variieren können.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Der Doctype wird ganz am Anfang jeder Seite notiert, noch vor dem einleitenden html-Tag

Information für den Webbrowser zur verwendeten Auszeichnungssprache, in diesem Fall Html 4.01

Doctype eins und zwei können in ganz normalen Webseiten und den Frameseiten die in ein Frameset geladen werden sollen verwendet werden.

Doctype drei wird in den Kopf des Framesets geschrieben

Es gibt noch weitere Doctypes aber für den Anfang sollten diese ausreichen. Sie funktionieren auch mit alten Browsern.
<html >
<head >
<title >Titel der Webseite. Dieser wird in manchen Browsern (IE) zum speichern angeboten </title >
</head >
<body >

hier steht der eigentliche Inhalt der Webseite

</body >
</html >
Das ist der normale Grundaufbau jeder einzelnen Webseite. Dieser Grundaufbau kann durch weitere Elemente ergänzt werden. Es sollte noch ein Doctype vorangestellt werden. Dieser muß entsprechend der Art der Webseite ausgewählt werden.
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> Schreiben Sie diese Angabe gleich zu Beginn in den Kopfbereich (zwischen <head> und </head>) der html-Datei, noch vor den einleitenden title-Tag, um dem Browser mitzuteilen, welche Zeichenkodierung verwendet wird. ISO-8859-1 gilt für westeuropäische Sprachen, darunter auch deutsch.
<hr >
Horizontale Linie,
damit lassen sich auf einfache Weise Bereiche der Webseite unterteilen.
<br> Zeilenumbruch
<p> </p>

Blockelement
Der Text zwischen den p-Tags wird als zusammengehöriger Absatz behandelt und kann per css beliebig formatiert werden. Standardmäßig wird zwischen Absätzen eine Leerzeile eingefügt und der Text innerhalb des Absatzes wird linksbündig angeordnet.

Innerhalb von p-Tags dürfen Sie nur inline-Elemente verwenden, wollen Sie Ihren Quelltext Html-konform gestalten. Überschriften dürfen beispielsweise nicht mit im p-Tag eingeschlossen sein. Auch wenn der IE dies tolleriert und alles wie gewünscht anzeigt haben manche Browser Probleme damit wenn andere Blockelemente in p-Tags eingeschlossen sind, vor allem wenn weitere Formatierungen oder Positionierungen per css dazu kommen, und stellen die so definierte Webseite total zerschossen dar. Haben Sie Zweifel daran, testen Sie einfach per Css erzeugte mehrspaltige Texte im Netscape 4.x.

&nbsp; (no breaking space) = ein Leerzeichen, wenn es ohne zusätzliche Leertaste zwischen zwei Zeichen steht kann ein ungewollter Zeilenumbruch verhindert werden.
Sonderzeichen und Umlaute sollten maskiert werden, damit sie in allen Browsern richtig angezeigt werden.
&Auml; &auml; Ä ä
&Ouml; &ouml; Ö ö
&Uuml; &uuml; Ü ü
&szlig; ß
&euro; € Euro-Zeichen
&trade; ™ Trademark-Zeichen
&copy; © Copyright-Zeichen
&reg; ® Registriermarke-Zeichen
&infin; ∞ Unendlich-Zeichen
&laquo;Text in französischen Anführungszeichen&raquo; «Text in französischen Anführungszeichen»