Web-Design

1. Einheit

Aufbau einer HTML-Seite

Das Grundgerüst des WWW = World Wide Web ist eine Sammlung von miteinander verlinkten Dokumenten, die im Format HTML = HyperText Markup Language geschrieben sind.

Ein HTML-Dokument wird in reinem ASCII-Code geschrieben. Auch nationale Sonderzeichen, wie ä , ß , é , ñ , ø sollten im Quelltext vermieden werden. Andernfalls ist die korrekte Darstellung der Seite über die Grenzen der Sprachregionen und Computer-Betriebssysteme nicht gewährleistet.
Manche Zeichen, wie < , > , & haben eine besondere Bedeutung und dürfen ebenfalls nicht in den Quelltext geschrieben werden.

Eine HTML-Seite besteht aus einem Kopf (head) und einem Rumpf (body). Sowohl Kopf aus auch Rumpf können wieder aus Untereinheiten bestehen.

Die Struktur einer HTML-Seite wird durch sogenannte TAGS bestimmt. Das sind Schlüsselwörter (meist der englischen Sprache entnommen), die in spitze Klammern eingeschlossen sind, z.B. <body>.

( Das englische Wort "Tag" bedeutet Anhänger, Aufkleber, Etikett, Plakette, Kennzeichen usw. )

Tags kann man wahlweise mit Groß- oder Kleinbuchstaben schreiben, also anstatt <body> auch <BODY> oder <Body>
Wir werden sie in unserem Kurs jedoch durchgehend mit Kleinbuchstaben schreiben, da dies voraussichtlich die zukünftige Norm sein wird.

Die Tags treten paarweise auf, und zwar - ähnlich wie ein Klammerpaar - als öffnender Tag (z.B. <body>) und schließender Tag, (z.B. </body>). Dabei unterscheidet sich der schließende Tag durch einen vorgestellten Bergaufstrich (Slash) vom zugehörigen öffnenden Tag.

Hier ist nun eine ganz einfache HTML-Seite zu sehen:

<html>

   <head>
      <title> Mein erster Versuch </title>
   </head>

   <body>
     Dies ist mein erster Versuch.
     Ich bitte um Bewunderung !
   </body>

</html>

Die ganze Seite wird also durch die Tags <html> ... </html> eingeklammert.
Innerhalb der Seite werden wiederum der Kopf und der Rumpf durch <head> ... </head> bzw. <body> ... </body> eingerahmt.
Innerhalb des Kopfes befindet sich das Element Titel, das durch die Tags <title> ... </title> geklammert wird.
Innerhalb des Titels und des Rumpfes befindet sich in diesem einfachen Beispiel reiner Text.

Diese Seite muss als reiner ASCII-Text in einer Datei mit der Endung html oder htm abgespeichert werden, z.B. als versuch1.html.
Dann kann sie auf dem Bildschirm durch ein spezielles Programm - einen Browser - dargestellt werden.
Die zur Zeit am weitesten verbreiteten Browser sind Netscape, das auf jeder Plattform zur Verfügung steht, und der Internet Explorer der Firma Microsoft, der nur auf Windows-Plattformen arbeitet.

Es gibt zwei Möglichkeiten, um eine HTML-Seite einem Browser zur Darstellung zu übergeben:

Die Datei wird im Windows Explorer doppelt angeklickt:
In diesem Fall wird derjenige Browser aufgerufen, der im System voreingestellt ist (i.a. Netscape oder Internet Explorer)
Der gewünschte Browser wird geladen, und in die Adress-Zeile (unmittelbar unter der Menü-Leiste) wird geschrieben:
```
 file:///X:/dateiname.html 
```
Dabei ist "X" der Buchstabe des Laufwerks, in dem sich die Datei befindet. Liegt die HTML-Datei nicht auf der obersten Ebene des Laufwerks, muss natürlich der gesamte Pfad angegeben werden.

Wie die oben gezeigte HTML-Datei im Browser dargestellt wird, sehen Sie, wenn Sie hier klicken:
Der Titel wird ganz oben in den Rahmen des Browser-Fensters geschrieben. Der Text wird im Innenbereich des Fensters gezeigt. Dabei wird der Zeilenumbruch des Quelltextes nicht übernommen: Der Browser schreibt eine Zeile voll und beginnt dann mit der nächsten