.: HTML :.
 
abyter.de \\ workshops

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.

Related Pages: Hextabelle der Farben \\ Sonderzeichentabelle
Weiterführendes: Selfhtml

Workshop als PDF

<Zurück

© by www.abyter.de (Martin Monshausen)