HTML
HTML Seiten Mini-Howto
HTML Seiten sind eigentlich normale Textdateien, die statt der Endung .txt die Endung .html
(.htm geht auch) haben! Textdateien kann man unter Windows mit dem Texteditor Notepad erstellen.
Achtung: ein Microsoft-Word Dokument (.doc o.ä.) ist KEINE einfache Textdatei und eignet sich
daher nicht für HTML Seiten.
Ein HTML Dokument enthält grundsätzlich mindestens den folgenden Inhalt:
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>
</body>
</html>
Die Befehle (man nennt sie Tags [sprich: täcks]), die in den < und > Zeichen stehen, werden im
Browser (z.B. Internet Explorer) später interpretiert und nicht einfach nur ausgegeben.
Wie man hier sieht, gibt es immer einen Anfangs-Tag <befehl> und einen
End-Tag </befehl> der direkt nach dem ersten < ein / besitzt.
Alles was nun zwischen dem Anfangs-Tag und dem End-Tag steht verhält sich entsprechend
dem Tag. Im Beispiel oben gehört "Titel der Seite" zum HTML-Titel, weil es innerhalb der
beiden Title-Tags steht (<title></title>).
Wie man auch in dem Beispiel sieht, wird das gesamte HTML Dokument von <html></html>
eingerahmt. Dieser enthält den <head></head>-Tag und den <body></body>-Tag.
Der <head></head>-Tag enthält einige Metainformationen, wie im Beispiel den Titel der Seite, aber
auch andere Dinge, die aber nicht nötig sind und nicht in diesem Howto erwähnt werden.
Zwischen den <body></body>-Tags steht quasi all das, was nachher auch im Browser zu lesen ist.
Der erste Tag kann aber auch in vielen Fällen weitere Informationen enthalten. Zum Beispiel:
<body bgcolor="Black" text="White" link="Blue" vlink="Green" alink="Yellow">
bgcolor="Black" bedeutet, daß der Hintergrund (Background => BG) schwarz sein soll.
text="White" macht die Schrift weiss!
link="Blue" macht Verknüpfungen (also Links) zu anderen Seiten blau.
vlink="Green" macht bereits besuchte Links grün.
alink="Yellow" macht zur Zeit besuchte Links gelb.
Im Folgenden die wichtigsten HTML-Tags, die alle ihre Anwendung innerhalb des
<body></body>-Tags finden:
Schriftdesign:
<font face="Arial" size="2" color="Green">grüne Schrift in Arial und Größe 2</font>
resultiert in:
grüne Schrift in Arial und Größe 2
<b>Fettschrift</b>
resultiert in:
Fettschrift
<i>kursive Schrift</i>
resultiert in:
kursive Schrift
<b><i>fette, kursive Schrift</i></b>
resultiert in:
fette, kursive Schrift
man kann die verschiedenen Tags natürlich auch ineinander verschachteln, zum Beispiel:
<font face="Arial" size="2" color="#008000"><i><b>grüne Arial kursiv Fettschrift</b></i></font>
resultiert in:
grüne Arial kursiv Fettschrift
Links (Verknüpfungen):
<a href="http://www.halbheld.de">fantastische Homepage</a>
resultiert in:
fantastische Homepage
<a href="mailto:marco@antispam.de">schick mir eine E-Mail!</a>
resultiert in:
schick mir eine E-Mail! (und sollte nach Klick das E-Mailprogramm des Anwenders öffnen!)
Bilder:
<img src="http://www.meineadresse.com/meinordner/meinbild.jpg" border=0 alt="Hallo!" width=60 height=60>
Als Besonderheit sei hier erwähnt, daß dieser Tag kein End-Tag besitzt, wie man sieht!
Das Keyword src gibt in Hochkommata die genaue Position des Bildes an.
Dieses Bild muß im Internet auf einem Server abgelegt worden sein, sonst erscheint es nicht
beim Endbenutzer! Man kann im src= auch einen relativen Pfad angeben, also
einen, der nicht mit http:// beginnt (dann ist der Pfad nämlich absolut). In diesem Fall muß
das Bild aber auf dem gleichen Server liegen, wie das HTML-Dokument. Zum Beispiel würde
src="meinordner/meinbild.jpg" auch funktionieren, wenn das HTML Dokument und der Ordner "meinordner"
dasselbe Verzeichnis teilen.
Das Keyword border entscheidet, ob das Bild gerahmt wird (und zwar die Dicke des Rahmens!).
Das Keyword alt definiert einen alternativen Text der gezeigt wird, wenn der Nutzer
beispielsweise keine Bilder laden lässt. Den alternativen Text kann man in den meisten Browsern
auch sehen, wenn man den Mauszeiger einen Moment über dem Bild hält.
width und height geben die Breite und die Höhe des Bildes in Pixeln an. Lässt man sie
ganz weg, dann sieht man das Bild in Originalgröße!
Layout:
<br>
resultiert in einem Zeilenumbruch. Wenn man nämlich in der Textdatei mit der ENTER-Taste
einen Zeilenumbruch macht, dann interpretiert der Browser das nachher einfach als ein Leerzeichen
und nicht als den gewünschten Zeilenumbruch. Daher muß an diese Stelle ein <br>.
<div align="center">zentrierter Text</div>
resultiert in:
zentrierter Text
<div align="center">rechtsbündiger Text</div>
resultiert in:
rechtsbündiger Text
<hr>
resultiert in:
(also einer horizontalen Linie)
.
.
.
Dieses Mini Howto erklärt bei weitem nicht alle Tags, die in einem HTML Dokument möglich sind,
aber es bietet einen guten Anfang. Das wohl beste, ausführlichste und bekannteste Howto
zu diesem Thema ist SelfHTML!
letztes update: 2006-09-19 23:07:11 von Held (hh)
lock | Alle halbheld.de Wiki-Seiten | hh.de/wiki/HTML
