Einführung
HTML heißt ausgeschrieben HyperText Markup Language. Es handelt sich hierbei um die Seitenbeschreibungssprache
der Internetseiten. Auch wenn es mittlerweile schon neuere Internet-Programmiersprachen,
wie z.B. Java, CSS, CGI, Perl oder Flash gibt, oder Abwandlungen wie DHTML
oder XHTML gibt, so besteht das Grundgerüst aller Internetseiten
immer noch aus purem HTML.
Die
Möglichkeiten HTML-Dokumente zu erstellen
Es gibt zwei Möglichkeiten eine Internetseite zu erstellen.
Die erste und einfachere ist, dies mit einem WYSIWYG (What you see is what you get)-Editor zu tun.
Dieser macht es möglich Webseiten praktisch wie in einer Textverarbeitung
zu erstellen und sich nicht um den Quelltext kümmern zu müssen.
Die zweite Möglichkeit ist, dies von Grund auf in HTML-Quelltext
zu tun, dies hat zwei riesige Vorteile, zum einem hat man die volle Kontrolle
über den Quelltext und zum anderen benötigt man keinen teuren
Editor. Notepad aus dem Lieferumfang von Windows reicht dafür völlig
aus.
Container-Sprache
HTML
HTML ist eine Container-Sprache, d.h. jede Anweisung hat einen
Anfang und ein Ende. Dies sieht in der Praxis so aus: <p>Text</p>.
Hier sind auch schon zwei weitere Merkmale von HTML zu sehen: Zum einen
kommen die Anweisungen, auch Tags genannt, in <> und zum anderen
steht beim hinteren Tag, also dem schließenden Tag, ein Slash (/)
vor der Anweisung. Damit zeigt man dem Browser, dass die Anweisung hier
aufhört.
Noch ein kleiner Hinweis: Die Groß- und Kleinschreibung der Tag
spielt keine Rolle. Du kannst dir also aussuchen ob du klein oder groß
schreibst (natürlich auch vermischt).
Der
Aufbau eines HTML-Dokuments
Jedes HTML-Dokument fängt mit der Anweisung <HTML> an und hört mit der Anweisung </HTML> wieder auf. Zwischen
diese beiden Tags kommt der <BODY>. Zwischen die beiden Body-Tags
kommen die Anweisungen, die später im Browser-Fenster angezeigt werden.
Man kann dem Body noch Eigenschaften wie Hintergrundfarbe und Textfarbe
zuweisen. Dies sieht dann so aus: <BODY bgcolor="FFFFFF"
text="000000">, bgcolor steht für die Hintergrundfarbe
und text für die Textfarbe. Hier sieht man schon wieder ein
Merkmal der Seitenbeschreibungssprache HTML: Die Eigenschaften werden
in Anführungszeichen geschrieben. Die kryptischen Zeichen in den
Anführungszeichen sind die Farben, sie müssen als Hexadezimal-Werte
(Zahlen von 1 bis 9 und A bis F) angeben werden (hier eine Farbtabelle).
Zwischen dem <HTML>-Tag und dem <BODY>-Tag werden noch der
Titel, der später in der Titelleiste des Browsers angezeigt wird
(mit <TITLE></TITLE> und sogenannte Meta-Informationen für
die Suchmaschine eingetragen. Einige Beispiele für Meta-Informationen
sind: Seitenbeschreibung (<META NAME="description" CONTENT="Beschreibung
der Seite">) oder Stichwörter (META NAME="keywords"
CONTENT="Ein, paar, Stichwörter,">).
Darstellung
von Schrift
Der am meisten verwendete Tag der im Body steht, ist der Paragraph
(<p></p>), dazwischen kommt Text, dieser wird später
automatisch an dem Browserrand umgebrochen und vor und nach dem Tag wird
jeweils eine Zeile freigelassen. Mit dem Break (<br>; wird nicht
geschlossen!) wird ein manueller Zeilenumbruch erzeugt. Für das Design
noch interessant ist die Horizontale Linie (<hr>; wird ebenfalls
nicht geschlossen). Der Text lässt sich noch formatieren, fett (<b></b>),
kursiv (<i></i>), unterstrichen (<u></u>). Die
Ausrichtung des Textes lässt sich auf rechtsbündig (<p align="right">)
und zentriert (<center></center>) einstellen. Es lassen sich
jedoch auch die Eigenschaften der Schrift ändern (<font></font> jeweils mit der Eigenschaft COLOR für Farbe, SIZE für Schriftgröße
( von 1 bis 7; je größer desto größer) und FACE für Schriftart). Für Überschriften gibt es den Tag <Hn>
(n steht für eine Zahl von 1 - 7; je größer desto
kleiner). Umlaute müssen in einem HTML-Kürzel eingegeben werden
(hier eine Sonderzeichentabelle).
Bilder
in HTML
Schöne Internetseiten haben natürlich auch noch Bilder,
diese werden mit dem <IMG>-Tag eingebunden. Die wichtigste Eigenschaft
die es bei Bilder gibt ist die SRC-Eigenschaft, sie legt den Pfad des
Bildes fest (Bsp. <IMG SRC="bild.gif">). An dieser Stelle
noch einen kleinen Hinweis zu den Bildformaten: Es sollten nur die Bildformate
.gif und .jpg verwendet werden, alle anderen sind zu groß für
das Internet. Mit der Eigenschaft ALT kann man einen alternativen Text
festlegen, der angezeigt werden soll, wenn der Benutzer die Anzeige der
Grafiken deaktiviert hat oder das Bild beschädigt ist, die Eigenschaft
kann jedoch auch als eine Art Bildunterschrift verwendet werden. Mit der
Eigenschaft BORDER stellt man den Rand aus, der angezeigt wird, wenn ein
Link auf das Bild gelegt wurde. Zu guter Letzt kann man mit HEIGHT und WIDTH wird die Höhe und Breite festgelegt.
Wenn man eine Grafik mit Text umfließen lassen möchte, so hat
manchmal den Wunsch, dass der Text erst unterhalb der Grafik angezeigt
wird. Mit folgendem Kommando kann man HTML zwingen den Text unterhalb
der Grafik angezeigt wird:
<BR CLEAR="all">
Links
Der Vorteil der Seitenbeschreibungssprache HTML ist, dass man
Querverweise zu anderen Seiten machen kann. Die Querverweise heißen
Links. Sie werden mit dem <A>-Tag erstellt. Die wichtigste Eigenschaft
ist HREF, sie gibt den Pfad, unter dem sich die Datei befindet an. Die
Eigenschaft TARGET ist bei Seiten die Frames benutzen, sehr wichtig. Sie
gibt an, in welchem Frame die Datei geladen werden soll.
Tabellen
Um Daten ansprechender anzuzeigen sind Tabellen eine gute Lösung.
Die Tabellenanweisung kommen zwischen die <Table></Table>-Tags,
die einzelnen Zeilenreihen werden mit <TR></TR> erzeugt und
die einzelnen Zellen mit <TD></TD>. In der Praxis sieht dies
dann so aus:
<TABLE>
<TR>
<TD WIDTH="82">Text in der Zelle</TD>
</TR>
</TABLE>
Eine für das Design interessante Eigenschaft ist BORDER, wenn man den BORDER auf "0" setzt und somit die Begrenzungslinien unsichtbar
macht, entsteht ein toller Effekt, der es möglich macht mehrere Bilder
nebeneinander zu platzieren.
Frames
Eine im Internet oft verwendete Art, seine Besucher durch die
Seiten navigieren zu lassen, sind Frames. Es handelt sich hierbei um eine
Art kleine Fenster die im Browserfenster integriert sind und verschiedene
Dokumente gleichzeitig in einem Browserfenster anzeigen können. Der
Vorteil an dieser Technik ist, dass die Navigationsleiste immer an der
gleichen Stelle ist, und auch nur einmal geladen werden muss.
Ein weiterer Vorteil ist, dass die Frames-Seite recht klein ist, da sie
nur die Frame-Verweise enthält.
Um Frames zu erzeugen, wird der <Frameset>-Tag verwendet. In diesen
wiederum kommt der <Frame>-Tag, der die einzelnen Frame-Attribute
enthält. Der Frame sieht in der Praxis dann so aus:
<FRAMESET>
<FRAME SRC="Nav.htm" NAME="Navigation">
</FRAMESET>
Am Frameset-Tag lassen sich noch folgende Eigenschaften verändern:
Mit COLS werden die Anzahl und die Breite der Spalten für den Frame
angegeben. Die Breite kann in Pixel- und Prozent-Angaben gemacht werden.
Mit ROWS werden die Anzahl der Zeilen und die Höhe angegeben. Mit FRAMEBORDER kann man die Begrenzungslinien unsichtbar machen und zu guter
Letzt mit FRAMESPACING den Abstand zwischen den Rahmen definieren.
Beim Frame-Tag ist die wichtigste Eigenschaft SRC, sie gibt den Pfad an,
unter dem sich die im Frame anzuzeigende Seite befindet. Darüber
hinaus lassen sich noch folgende Einstellungen vornehmen: Mit FRAMEBORDER wird festgelegt ob der Rahmen sichtbar sein soll oder nicht. Die NAME-Eigenschaft
ist wichtig, damit der Link, der sich im Navigationsframe befindet, im
richtigen Frame geladen wird. Mit NORESIZE lässt sich verhindern,
dass der Benutzer die Größe des Framefensters verändert.
Zu guter Letzt lässt sich noch die Eigenschaft SCROLLING einstellen,
sie bestimmt ob an dem Framerand ein Scrollbalken angezeigt werden soll,
es gibt hier jedoch neben YES und NO noch die Einstellung AUTO. Die letzte
Einstellung ist sehr interessant, da nur dann ein Scrollbalken angezeigt
wird, wenn es nötig ist.
|
Zurück