HTML
1. Grundlegendes
Abkürzung für Hypertext Markup Language
HTML ist eigentlich keine Programmiersprache, die verwendeten Befehle beschreiben lediglich die äußere Form, in der Dokumente dargestellt werden sollen
Die Einzelbestandteile eines HTML-Dokumentes werden zu diesem Zweck mit sogenannten Tags versehen, mit denen die Attributwerte von einzelnen Objekten bestimmt werden können
Um HTML-Dokumente öffnen zu können braucht man einen Browser
Erstellt werden können HTML-Dokumente im Editor oder mit Programmen wie „Weberknecht“
2. Die Form von Tags:
Die Tags (Englisch für „Etikett“) umklammern die Objekte, deren Attributwerte sie bestimmen
Zu diesem Zweck gibt es ein „einleitendes Tag“ (<Tag>) und ein abschließendes Tag (</Tag>)
Beispiel:
<b> Dieser Text wird fett dargestellt </b>
(b steht für „bold“, das englische Wort für „fett“)
3. Das Grundgerüst einer HTML Datei:
Damit ein Browser ein HTML-Dokument überhaupt als solches erkennen kann, muss die gesamte HTML-Datei mit dem Tag <html> Datei </html> umklammert werden
Ein HTML-Dokument besteht stets aus zwei Teilen, dem Header (Angaben zur Datei selbst) und dem Body (eigentlicher HTML-Code und der darzustellende Text). Die entsprechenden Tags sind <head> und <body>
Beispiel:
<html>
<head> Im Header enthaltene Texte
<title> Name des Dokuments </title> werden vom Browser nicht
</head> angezeigt (title ist ungleich
<body> Überschrift!!!!!!!!!!!!!!!!!!!)
In diesem Bereich befindet sich der Code
</body>
</html>
Damit der Browser das Dokument als HTML-Dokument erkennt, muss das Script als HTML-Datei abgespeichert werden, d. h. Speichern unter: Dateiname.html
Häufig verwendete Tags
Grundgerüst der Seite
<html> … </html>
<head> … </head>
<title> … </title>
<body> … </body>
<body bgcolor=“…“> … </body> body mit Hintergrundfarbe, Farben vgl. unten
<!--Kommentar, der nicht als Text erscheint>
Schriftzeichen
<font face=”…”> … </font> Schriftart, z. B. TIMES NEW ROMAN
<font size=”…”> … </font> Schriftgröße (1 – 7)
<font color=”…”> … </font> Schriftfarbe, Attributwerte vgl. unten
Wenn mehrere Formatierungen gleichzeitig vorgenommen werden sollen:
<font face=“…“ size=“…“ color=“…“> … </font>
<b> … </b> fett
<i> … </i> kursiv
<u> … </u> unterstrichen
<sub> … </sub> tiefgestellt
<sup> … </sup> hochgestellt
<h1> … </h1> Überschrift der 1. Stufe (h1 bis h6)
Textlayout
… <p> Absatz, d.h. Zeile frei, nur am Ende
… <br> Zeilenumbruch, nur am Ende
<nobr> … </nobr> Verhindert Zeilenumbruch, Verschiebebalken
erscheint
<p align=left> … </p> linksbündig, geht auch mit right oder center,
bezieht sich auf Absatz
<pre> … </pre> Text erscheint wie im Editor eingegeben
Farben
Schwarz: #000000 Grün: #008000
Silber: #cococo Limone: #00ff00
Grau: #808080 Olivgrün: #808000
Weiß: #ffffff Gelb: #ffff00
Braun: #800000 Navy: #000080
Rot: #ff0000 Blau: #0000ff
Violett: #800080 Aqua: #00ffff
mehr Farben unter: www.webmasternetz.de/grundlagen/farbtabelle.htm
Hyperlinks
<a href=“Ziel”> Verweistext </a> also z. B. wie folgt:
<a href=“Seite2.html“> bitte klicken Sie hier </a>
Grafiken einbinden
<img src=“bild1.jpg“>
<… width=”300” height=”420”> mit Größenangabe (in Pixel)
<… border=”8”> mit Rahmen der Stärke 8
<… align=“right“> Bild erscheint am rechten Seitenrand
Mehrere gleichzeitig vorgenommene Formatierungen werden auch hier in ein Tag gesetzt,
z.B. <img src=“bild1.jpg“ border=“8“ align=“right“>
Laufschrift
<marquee>Text, der über das Bild laufen soll</marquee>
Im einleitenden Tag können auch noch Zusatzinformationen enthalten sein:
<… bgcolor=“…“> Hintergrundfarbe des Balkens
<… direction=“right“> Laufrichtung nach rechts (geht auch mit
up oder down)
<… scrollamount=“…“> Stellt die Sprungweite ein (Zahl der Pixel)
<… scrolldelay=“…“> Legt die Wartezeit zwischen den einzelnen
Bewegungen fest (in Millisekunden)
Häufige Fehlerquellen
Abschließende Tags nicht vergessen!
HTML verzeiht keine Rechtschreibfehler, z.B. colour (britsche Schreibweise = falsch) statt color (amerikanische Schreibweise = richtig).
Alle Attributwerte müssen in Anführungszeichen stehen!
Also: Attributbezeichner=“Attributwert“
z.B.: <font color=“#000000“> … </font>
Eingefügte Bilder sowie Links müssen entweder die vollständige Adresse enthalten, oder sich im gleichen Ordner befinden, wie das HTML Dokument selbst.
Die Struktur eines mehrteiligen HTML-Dokuments:
Ordner: Meine Homepage
Weitere Möglichkeiten:
<body background=“bild1.jpg“> … </body> Hintergrundbild
___________________________________________________________________________
<a href=“Seite2.html“><img src=“bild1.jpg“></a> Bild als Link
___________________________________________________________________________
<marquee><img src=“bild1.jpg“></marquee> laufendes Bild
___________________________________________________________________________
<li>Punkt1 Liste
<li>Punkt2
<ul><li>Punkt1</ul> eingerückte Liste
<ul><li>Punkt2</ul>
___________________________________________________________________________
<table border=“8“> Tabelle (mit Rahmen)
<colgroup> formatiert die Tabelle
<col width=“300“> (Anzahl der Spalten und
<col width=“300“> deren Breite in Pixeln)
</colgroup>
<tr> … </tr> Umschließt den Inhalt einer Zeile
<th> … </th> Umschließt den Inhalt eines Feldes
(fett und zentriert)
<td> … </td> Umschließt den Inhalt eines Feldes
(linksbündig)
also z.B.:
<tr> <th>Esel sind:</th> <th>Pferde sind:</th> </tr>
<tr> <td>dämlich</td> <td>schlau</td> </tr>
<tr> <td>faul</td> <td>fleißig</td> </tr>
<tr> <td>und hässlich</td> <td>und wunderschön</td> </tr>
Mehrere unabhängige Bildbereiche
<frameset cols="250,*" frameborder="0"> definiert Größe der beiden Frames
* bedeutet verbleibender Platz
<frame src="Index.html" name="Index"> öffnet linke Bildhälfte (= Index)
<frame src="Main.html" name="Main"> öffnet rechte Bildhälfte
</frameset>
<a href="Main.html" target="Main">Startseite</a> Link, das sich in einem anderen
Frame öffnet
