blattertech informatikLukas BlatterNiederlenzerstrasse 21
5600 Lenzburg/AGSwitzerland

079 569 25 90
https://www.blattertech.ch

Adresse anzeigen

HTML F.A.Q

Inhaltsverzeichnis

HTML - Was ist HTML (HyperText Markup Language)?!

  • 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!)

Der Aufbau einer HTML Datei

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.

Zunächst benötigt jede HTML-Datei ein HTML-Grundgerüst.

  • 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
<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 - wichtiges Element der HTML Datei

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.

Grafik in eine HTML Datei einbauen

p>Im Internet kann man jedes JPG- oder GIF-Bild (oder jede GIF-Animation) kopieren. Einfach mit der rechten Maustaste draufklicken und auf der Festplatte abspeichern (Bsp:"bild.gif").

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!

Verschiedene Emailtags

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/Details:

  • Statt Text ein anklickbares Bild (Bsp: "bild.gif") einbauen:
    <a href="mailto:name(at)domain.ch"><img src="bild.gif"> </a>
  • Zweite EMailadresse (Bsp: "yxz(at)domain.ch") eintragen:
    <a href="mailto:name(at)domain.ch,yxz(at)domain.ch">
  • "Kopie an" (Bsp: "yxz(at)domain.ch") eintragen:
    <a href="mailto:name(at)domain.ch?cc=yxz(at)domain.ch">
  • Betreff (Bsp: "Hallo") angeben:
    <a href="mailto:name(at)domain.ch?subject=Hallo">
  • Text (Bsp: "Text") für die Mail vorgeben:
    <a href="mailto:name(at)domain.ch?body=Text">
  • Kombination der Angaben mit dem "&"-Zeichen:
    <a href="mailto:name(at)domain.ch?subject=Hallo&body=Text">

Links zu HTML

Die hier aufgelisteten Links können bei der Erstellung einer HTML Seite helfen: