Inhaltsverzeichnis
 |
HTML ist eine Darstellungssprache! Per HTML können Texte und Bilder optisch formatiert in Browsern dargestellt werden, also gross, klein, kursiv, unterstrichen, bunt, zentriert/links-/rechtsbündig... |
|
HTML ist keine Programmiersprache! In HTML gibt es keine Logikkonstrukte oder Funktionalitäten wie z.B. Bedingungen (if..else) oder Schleifen (for..next, do..while). Dafür wurde als Ergänzung zu HTML JavaScript erfunden. |
|
HTML-Dateien enthalten (prinzipiell) eine Mischung aus Text und Formatierkommandos. Nachdem ein Browser eine HTML-Datei geladen hat interpretiert er die ihm bekannten HTML-Kommandos und stellt den Text entsprechend dar. (Fehlerhafte oder unbekannte Kommandos werden vom Browser nicht angemeckert, sondern ignoriert und als Text ausgegeben!) |
Eine HTML-Datei enthält prinzipiell Text (im Browser anzuzeigende Informationen) und Formatanweisungen (wie Text im Browser dargestellt werden soll, also z.B. fett, linksbündig, als Überschrift,...).
Die Format-"Tags" sind HTML-Anweisungen, die in spitzen Klammern stehen
(Bsp.: <Tag-AN>Text...</Tag-AUS>).Zuerst wird dabei ein Format eingeschaltet (Kommando ohne Schrägstrich), dann wieder ausgeschaltet (Kommando mit Schrägstrich). Zwischen dem Kommando-Paar steht der zu formatierende Text.
|
Hier das Grundgerüst einer HTML-Datei: |
| <html> <head> </head> <body> </body> </html> |
|
Eine HTML-Datei wird immer von einem öffnenden <html>-Tag und einem schliessenden </html>-Tag eingerahmt. Dazwischen gibt es den HTML-Kopf <head>...</head> (dort wird z.B. der Titel einer HTML-Seite angegeben) und den HTML-Körper <body>...</body> (dort steht alles, was im Browserfenster angezeigt werden soll, also Texte, Bilder,...). |
|
Eine kleine HTML-Datei könnte so aussehen: | Beispiel ansehen |
| <html> <head> <title>Meine Homepage</title> </head> <body bgcolor=gray text=white> <h1>Willkommen</h1> <hr> Dies ist meine <b><i>erste</i></b> kleine Homepage! </body> </html> |
||
Zuerst wird im Head-Bereich ein Titel definiert. Dazu wird zwischen dem öffnenden <title> und dem schliessenden </title> ein Text für die obere Browserleiste eingegeben. Innerhalb!! des body-Tags stehen zwei Einstellungen, die für die gesamte darzustellende HTML-Seite gelten. Hintergrundfarbe grau (bgcolor=gray) und Textfarbe weiss (text=white). Zwischen den body-Tags stehen die Inhalte, die im Browser angezeigt werden sollen: Überschrift (headline) der Grösse "1" anschalten, "Willkommen" darstellen, Überschriftformat wieder ausschalten. Trennlinie (horizontal rule) anzeigen. (Kein Kommandopaar notwendig!) Normalen Text anzeigen, wobei das Wort "erste" fett (bold) und kursiv (italic) erscheinen soll. |
||
Tabellen spielen im HTML Quelltext eine wichtige Rolle. Mit ihnen baut man ganze Internetseiten mir unterschiedlichen Effekten in der Darstellung auf. Doch zu erst: Wie ist eine Tabelle eigendlich aufgebaut?
| <table> <tr><td>Inhalt</td></tr> </table> |
Mit dem Tag <table> fangen wir eine Tabelle an. <tr> definiert eine Zeile und <td> eine Spalte.
Erweitert können folgende Definitionen hinzugefügt werden:
| <table border="0" width="600" cellspacing="0" cellpadding="0" bgcolor="green" backqround="bg.jpg"> <tr><td>Inhalt</td></tr> </table> |
Mit border definiert man den Rahmen um die Tabelle. Dieser ist meistens Grau. Die Zahl "0" bedeutet das es keinen Rahmen gibt. Hier zur Anmerkung: Alle Zahlen bedeuten Abstände oder Weiten in Pixel. Wenn man hinter die Zahl ein % Prozenzeichen setzt, wird die Breite relativ auf die Seitengrösse angepasst. ZB: Eine Tabelle mit einer Breite width="90%" definiert, ist 90% des Fensters breit.
cellspacing="0" definiert den Abstand zwischen den Zellen. cellpadding="0" definiert den Textabstand zum Zellenrand. Mit bgcolor="green" legt man die Hintergrundfarbe fest und background="bg.jpg" definiert den Hintergrund.
Die Grafik wird mit folgendem Image-Tag in eine HTML-Seite eingebaut:
| <img src="bild.gif"> |
Zusätzlich sollten die Weite und Höhe der Grafik in Pixel "angekündigt" werden, damit der Browser diese nach dem Laden jedes Bildes nicht erst ermitteln muss (Zeitersparnis). Dadurch entfällt auch der ständige Wiederaufbau einer Seite, weil nach dem Empfang der HTML-Datei schon der Platz für die Bilder reserviert wird.
| <img src="bild.gif" width="12" height="34"> |
Das Image-Tag wird im Body-Bereich einer HTML-Datei eingebaut:
| <html> <head> </head> <body> <img src="bild.gif" width="12" height="34"> </body> </html> |
Die Werte für Beite und Höhe können folgendermassen ermittelt werden:
|
Das Bild in ein Grafikprogramm (Bsp: PaintShopPro) laden. Meist wird unten in der Statuszeile die Bildgrösse in Pixel dargestellt. |
|
Die Pixelgrösse einer Animation in einem Animationsprogramm (Bsp: Gif-Animator von ULEAD) anzeigen lassen. |
| Hinweis: Lässt man sich eine Animation in einem Grafikprogramm anzeigen, dann wird nur das erste Bild der Animation angezeigt! |
Auf der Homepage kann eine Emailfunktion so eingebunden werden, dass nach dem Anklicken der EMail automatisch das EMailprogramm mit einer vorgegebenen EMailadresse (Bsp: "name(at)domain.ch") gestartet wird.
Die Email wird mit folgendem Anchor-Tag als anklickbarer Text (Bsp: "eM@il") eingebaut:
| <a href="mailto:name(at)domain.ch"> eM@il </a> |
Die Email wird im Body-Bereich einer HTML-Datei eingebaut:
| <html> <head> </head> <body> <a href="mailto:name(at)domain.ch"> eM@il </a> </body> </html> |
Weitere Vorgaben/etails:
|
Statt Text ein anklickbares Bild (Bsp: "bild.gif") einbauen:
|
|
|
Zweite EMailadresse (Bsp: "yxz(at)domain.ch") eintragen:
|
|
|
"Kopie an" (Bsp: "yxz(at)domain.ch") eintragen:
|
|
|
Betreff (Bsp: "Hallo") angeben:
|
|
|
Text (Bsp: "Text") für die Mail vorgeben:
|
|
|
Kombination der Angaben mit dem "&"-Zeichen:
|
Die hier aufgelisteten Links können bei der Erstellung einer HTML Seite helfen: