HTML Anleitung
Unterpunkte dieser Seite
HTML Kommentare
Text auf einer HTML Seite ausrichten
Links auf andere Seiten
Dateidownloads
Links innerhalb einer HTML-Seite, Anker
Besondere Zeichen
Unterstrichener Text
Tabellen
HTML Tags
WhiteSpace Zeichen in HTML
HTML Kommentare
Ein HTML Kommentar beginnt mit <!-- und endet mit -->
Diese Art des Kommentars ist gleichermaßen für einzeilige und mehrzeilige
Kommentare verwendbar. In HTML gibt es nur diese eine Art des Kommentars !
Bsp.:
<!-- Dies ist ein einzeiliger Kommentar -->
<!-- Dies ist ein mehrzeiliger
Kommentar -->
ACHTUNG
Dieser HTML Kommentar funktioniert zwar in Kombination mit PHP aber er funktioniert nicht in Kombination mit Cascading Style Sheets ! Wenn Sie einen HTML Kommentar in ein CSS STYLE Umgebung einfügen, so wird die STYLE Umgebung damit deaktiviert ! Achten Sie auf die Verwendung der richtigen Kommentartyps für den Kontext in dem Sie sich gerade bewegen. CSS besitzt eigene Kommentare. CSS Kommentare sehen wie folgt aus : /* Kommentartext */
PHP Kommentare sind von folgender Form: <?PHP // Kommentartext >
oder <? PHP /* Kommentartext */ >
Text auf einer HTML Seite ausrichten
Wenn man HTML Seiten in einen ASCII Texteditor eintippt, so muss man sich Gedanken über das Erscheinungsbild des Textes auf der HTML Seite machen. Das Tag PRE weist den Browser dazu an alle Dinge genau so darzustellen, wie er sie aus dem HTML Dokument entnimmt. Das bedeutet, man kann im Editor den Text mit Zeilenumbrüchen ausrichten und der Browser stellt diese Zeilenumbrüche innerhalb der PRE Umgebung dann auch genauso dar. Allerdings ist das Arbeiten mit der PRE Umgebung eigentlich nur für die Ausgabe von Quellcode gedacht. Fließtext sollte man auf eine andere Art formatieren (allein schon weil die Ausrichtung manuell mit Zeilenumbrüchen auf Dauer auf die Nerven geht und man schlechte Ergebnisse erzielt). Man sollte Text in einen Paragraphen einschließen mit Hilfe des P Tags. Dieses P Tag kann man dann mit CSS StyleSheets einstellen. Man kann z.B. die Textbreite des Paragraphen einstellen und braucht dann nicht mehr mit Zeilenumbrüchen zu arbeiten. Der Browser fügt automatische Zeilenumbrüche ein um den Text in den Paragraphen der vorgegebenen Breite einzupassen. Das gibt der Seite ein professionelles und sauberes Aussehen und erspart viel Arbeit. Man kann das P Tag in der CSS STYLE Umgebung im Header eines HTML Dokumentes anpassen indem man folgende Angaben macht:
<STYLE>
P {width:450px; padding:20px; border:20px solid #218429}
</STYLE>
Wenn man innerhalb des Paragraphen dennoch einmal selbst einen Zeilenumbruch verursachen möchte verwendet man das BR Tag.
Der Nachteil an diesem Ansatz ist, das ein Paragraph keine Blockbildenden Elemente enthalten kann. Das bedeutet, in einem Paragraph dürfen keine Listen und Aufzählungen, Überschriften und weitere Parapraghen oder allgemeine Umgebungen (DIV) benutzt werden ! Genauso ist die Verwendung von MARQUEE Lauftexten und horizontalen Trennlinien nicht möglich. Der Ansatz mit Paragraphen eignet sich also eigentlich nur für reine Textpassagen.
Um zusätzlich zu Text auch Blockbildende Elemente zu formatieren, kann man das DIV Tag (div = division = Umgebung, Bereich) verwenden. Dieses DIV Tag lässt sich genau wie das P Tag mit CSS formatieren und umschließt auch Blockbildende Elemente.
Außerdem kann man das BODY Tag per CSS StyleSheets in der STYLE Umgebung im HEAD Bereich anpassen. Man erhöht die Lesbarkeit einer Seite immens indem man den Text von den Ränder der ClientArea des Browsers abhebt indem man einen Rand einfügt. Diese Einstellung des BODY Tags nimmt man mit folgenden Angaben vor:
/* Abstand des Seiteninhaltes zu den Rändern der ClientArea des Browser */
BODY { margin-left:50px; margin-right:50px; margin-top:100px; margin-bottom:100px;
font-family:Arial }
Hier wurde zusätzlich noch die Dateiweite Schriftart auf Arial umgestellt.
Links auf andere Seiten
Links werden mit dem <A> </A> Tag in kombination mit dem Attribut href programmiert. A steht für anchor, der name des href Attribut steht für hyper reference. Dem href Attribut weist man einen String zu, der String beinhaltet die Adresse der Datei auf die Verwiesen wird. Es ist früher möglich gewesen Dateien über den Verzeichnisbaum eines Computers zu referenzieren. Dies wird heute von allen Webbrowsern aus Sicherheitsgründen unterdrückt. Verweise wie z.B.:
<A href="C:/homepage/download.html">Hier gehts zu den Downloads</A>
sind also nicht möglich. Man darf nur Verweise programmieren, die mit einem der bekannten Protokolle arbeiten (http und ftp).
Wenn man einen Webserver lokal installiert hat kann man diesen allerdings unter der Adresse http://localhost erreichen. Beim Apache wird unter localhost standarmäßig das htdocs Verzeichnis referenziert. Somit ist es möglich Dokumente lokal zu referenzieren, die im WebServer Verzeichnis liegen. Wie gesagt hat man keine Chance auf dem lokalen PC Dokumente im Verzeichnisbaum zu referenzieren, es sei den, man macht eine Pfadangabe relativ zum HTML Dokument in dem der Link programmiert ist. Folgender Link funktioniert also:
<A href="../test.html">Hier ist ein Link</A>
Dateidownloads
Datei downloads werden wie normale links zu anderen html Seiten programmiert
mit dem Unterschied, das als Verweisziel eine Datei angegeben wird.
Der Pfad zur Datei muss in Anführungszeichen angegeben werden.
Bsp.:
<a href="../Pfad/datei.zip">Text im download link</a>
Links innerhalb einer HTML-Seite, Anker
Es ist möglich einen Link in die HTML Seite zu richten in der der Link selbst untergebracht ist. Dadurch kann der Benutzer an eine andere Stelle in der HTML Datei springen. Dazu ist zum einen der Link notwendig und zum anderen muss das Sprungziel, der sogenannte Anker definiert werden.
Der Link
<a href="#Ankername">Linktext</a>
Beim Link muss eine Raute vor den Ankernamen geschrieben werden.
Der Ankername ist ohne die Endung .html anzugeben.
Der Anker
<a name="Ankername">Text der am Anker angezeigt wird</a>
Der Anker ist ein Link mit dem besonderen Schlüsselwort name,
hinter dem der Name des Ankers angegeben werden muss.
Im Anker muss die Raute vor dem Ankernamen weggelassen werden.
Der Internet Explorer ist tollerant und führt Links innerhalb einer
Datei aus auch wenn man hinter die Raute in den String des namens Attributs
einfügt, andere Browser, wie z.B. der Mozilla Firefox sind weniger
tollerant und führen einen Link innerhalb einer Datei nicht aus,
wenn man die Raute in den String zum Attribut Name einfügt. Daher muss
man die Raute weglassen, um korrektes HTML zu schreiben, das alle Browser
verstehen.
Besondere Zeichen
Die eckigen Klammern < und > werden in HTML benutzt um die Tags zu
beschreiben.
Möchte man die eckigen Klammern im Fließtext ausgeben, so muss man sie
mit den Escapesequenzen &
lt für < und &gt für > umschreiben
Das Symbol & wird in HTML für Escapesequenzen verwendet. Möchte man es
im Fließtext angeben, so muss man es über die Escapesequenz &amp
(amp wie Ampersand) umschreiben.
Es gibt eine Reihe weiterer toller Symbole die HTML über Escapesequenzen
darstellen kann:
Escapesequenzen in HTML
| & | &amp |
| < | &lt |
| > | &gt |
| " | &quot |
| ä | &auml; |
| Ä | &Auml; |
| ö | &ouml; |
| Ö | &Ouml; |
| ü | &uuml; |
| Ü | &Uuml; |
| ß | &szlig; |
Ein Tip: möchte man im Fließtext die Escapesequenzen für die besonderen Zeichen
schreiben, so muss man die Escapesequenzen durch ein Ampersand & und einen String
beschreiben. Dazu muss man das Ampersand aber selbst ausgeben um den String dahinter
schreiben zu können. Hier tritt ein Problem auf: Wenn man &amp schreibt und
dann gleich den String ohne Anführungszeichen dahintersetzt, so erkennt HTML die Escape-
sequenz nicht mehr und schreibt Blödsinn in den Browser. (Bsp.: &lt obwohl man
eigentlich &lt will) Man muss also dafür sorgen, das
HTML &amp immer noch als escape Sequenz erkennt und man gleichzeitig immer
noch einen String direkt dahinter schreiben kann. (Wenn man ein space zwischen
&amp und den String einfügt, so erkennt HTML zwar das Ampersand als Escape-
sequez aber fügt leider eine Space zwischen die Escapesequenz und den String ein ! Das
wollen wir nicht ! Bsp.: & lt statt &lt) Daher muss man ein Trennzeichen zwischen die Escapesequenz und den String einfügen, das von HTML nicht
angezeigt wird, dazu gibt es das <spacer> Tag.
Es wird von HTML nicht ausgegeben hat aber trotzdem eine trennenden Wirkung.
&amp<spacer>lt erzeugt korrekterweise &lt.
Unterstrichener Text
Das Tag <u> </u> unterstreicht den Text den es umklammert.
Tabellen
Das Tag <
table> leitet eine Tabelle ein.
Das Tag </table> beendet eine Tabelle.
Das Tag <tr> leitet eine Tabellenzeile ein.
Das Tag </tr> schließt eine Tabellezeile ab.
(tr = Tablerow).
Das Tag <td> leitet eine Tabellenspalte innerhablb einer Zeile ein.
Das Tag </td> schließt eine Tabellenspalte ab.
(td = Tabledata).
Das Tag <th> leitet eine Tabellenüberschrift innerhablb einer Zeile ein.
Das Tag </th> schließt eine Tabellenüberschrift ab.
(th = Tableheader).
Eigenschaften, die sich auf die gesammte Tabelle auswirken
Im <table> tag kann man noch die Eigenschaft border="1" angeben.
Die Zahl zwischen den Anführungszeichen steht für die breite des Tabellenrahmens.
Im <table> tag kann man noch die Eigenschaft align="center"
angeben, das positioniert die Tabelle in der Seitenmitte.
Zwischen den Tags <table> und </table> kann man noch das Tag
<caption> </caption> angeben, das die Überschrift der Tabelle
umschließt.
Die Breite der gesammten Tabelle lässt global sich über die width="500"
Eigenschaft einstellen, wenn man sie in das <table> - Tag einfügt.
Genauso lässt sich die Höhe der gesammten Tabelle global über height
einstellen.
Beispiel für eine Tabelle
<table border="4">
<caption>Eine Beispieltabelle</caption>
<th width="150">Spalte 1</th>
<th width="150">Spalte 2</th>
<th width="150">Spalte 3</th>
<th width="150">Spalte 4</th>
<tr>
<td align="center">Feld 1,1</td>
<td align="center">Feld 1,2</td>
<td align="center">Feld 1,3</td>
<td align="center">Feld 1,4</td>
</tr>
<tr>
<td align="center">Feld 2,1</td>
<td align="center">Feld 2,2</td>
<td align="center">Feld 2,3</td>
<td align="center">Feld 2,4</td>
</tr>
<tr>
<td align="center">Feld 3,1</td>
<td align="center">Feld 3,2</td>
<td align="center">Feld 3,3</td>
<td align="center">Feld 3,4</td>
</tr>
</table>
Dieser HTML Quellcode ergibt folgende Tabelle:
Eine Beispieltabelle
| Spalte 1 |
Spalte 2 |
Spalte 3 |
Spalte 4 |
| Feld 1,1 |
Feld 1,2 |
Feld 1,3 |
Feld 1,4 |
| Feld 2,1 |
Feld 2,2 |
Feld 2,3 |
Feld 2,4 |
| Feld 3,1 |
Feld 3,2 |
Feld 3,3 |
Feld 3,4 |
HTML Tags
Attribute/Qualifier
Qualifier sind Möglichkeiten, die Wirkungsweise eines Tags anzupassen. Ein Qualifier ist oft für meherere Tags einsetzbar, wie z.B. der align Qualifier, der in Überschriften und auch in Textabsätzen einsetzbar ist. Qualifier können verschiedene Werte annehmen. Man weißt ihnen einen Wert zu und nimmt dadurch die gewünschte Anpassung durch. Wenn ein Qualifier in einem Tag eingesetzt wird, für das er keine Bedeutung hat, so wird dieser fehlplazierte Qualifier einfach ignoriert.
Farbwerte für Farbqualifier
Vordefinerte Farben sind blue, red, green. Man kann die vordefinierten Farben einfach in Anführungszeichen als String an den Farbqualifier übergeben.
HTML - HTML Datei
<
html>Kopf und Body</html>
HEAD - HTML Head
<head>Kopfinformationen</head>
BODY - HTML Body
<body>Body Informationen</body>
Qualifier die im <body> Tag angewendet werden können:
link - Farbe für unbesuchte links
vlink - Farbe für besuchte links (visited link)
alink - Farbe beim klicken auf den link (active link)
TITLE - Titel
<title>Text im Titel</title>
Dieses Tag wird im HTML Head verwendet und legt den Text in der Titlebar des Browser fest, sobald dieser die Seite anzeigt. Außerdem wird ein Bookmark den Title der Homepage als Namen erhalten.
H - Überschriften
<h1>Text der Überschrift</h1>
Statt der eins kann eine andere Zahl verwendet werden, die die Größe des Überschriftentextes bestimmt. 1 ist die größte Überschrift, höhere Zahlen erzeugen kleinere Überschriften.
BR -Break/Zeilenumbruch
<br>
Fügt einen Zeilenumbruch in den Text ein.
I - Italic/Kursivschrift
<i>Text der Kursiv erscheinen soll</i>
HR - Horizontale Trennlinie
<hr>
Fügt eine horizontale Trennlinie in die Seite ein.
P - Paragraph/Textabsatz
<p>Text der einen Absatz bilden soll</p>
Vor und hinter dem Text innerhalb der Absatz Tags wird ein Zeilenumbruch durchgeführt. Dadurch ist der Absatz durch eine neu beginnende Zeile vom Fließtext abgehoben. Der align Qualifier im <p> Tag angewendet erlaubt das Positionieren des Textabsatzes. Mögliche Werte für
den align Qualifier sind left, right, center und justify. Align ist als deprecated eingestuft, daher sollte die Ausrichtung mit Stylesheets vorgenommen werden.
Das <p> - Element darf keine anderen blockerzeugenden Elemente wie z.B. Überschriften, Textabsätze oder Listen enthalten. Es darf keine horizontale Trennlinie enthalten, es darf keine Aufzälungen enthalten, da Aufzählungen Blöcke sind. Es darf keinen Lauftext (MARQUEE) enthalten. Fügt man solche Elemente dennoch in einen Paragraphen ein, so sprengen diese Elemente den Paragraphen und die Darstellung des Paragraphen funktioniert nicht mehr, der Paragraph wird dann vom Browser deaktiviert.
OL - geordnete Nummerierungen
Geordnet steht hier für nummeriert. Im Gegensatz zu UL (ungeordneten Listen) erzeugen OLs also eine Nummerierung der Elemente. Bei ULs werden die Elemente der Aufzählung mit Bullets versehen.
- Montag
- Dienstag
- Mittwoch
- Donnerstag
- Freitag
<ol Nummerierungstyp>
<li>erster Punkt</li>
<li>zweiter Punkt</li>
<li>dritter Punkt</li>
</ol>
Das Nummerierungstyp Attribut ermöglicht die Auswahl des Zeichensatzes aus dem die Indizes stammen. Wird der Nummerierungstyp Qualifier im <ol> Tag nicht angegeben, so sind die Indizes normale Zahlen.
Mögliche Werte für das Nummerierungstyp Attribut:
A - Indizes bestehen aus Großbuchstaben
a - Indizes bestehen aus Kleinbuchstaben
I - Indizes bestehen aus großgeschriebenen römischen Zahlen
i - Indizes bestehen aus kleingeschriebenen römischen Zahlen
MARQUEE - Lauftext
<marquee>Text der gerollt werden soll<marquee>
FONT - Schriftart
<font>Text in der festgelegten Schriftart</font>
Dies ist ein Beispiel
Das <font> Tag erlaubt es einen Text, den es umschließt, mit besonderen Eigenschaften zu versehen. Dazu werden Qualifier verwendet.
size - legt die Größe der Schrift im Punkt System fest.
color - legt die Farbe fest.
face - Legt die Schriftart fest. Mögliche Werte sind Arial.
DIV - Allgemeine Umgebungen/Blöcke
Das DIV (= Division = Bereich) Tag erlaubt es einem verschiedenste HTML Tags in einem <DIV> </DIV> Bereich einzuschließen. Alle Elemente in einer DIV Umgebung werden jetzt als zusammengehörige Elemente des Bereichs interpretiert. Das Bedeutet, man kann jetzt Einstellungen vornehmen, die sich auf alle Elemente die zum Bereich gehören gleichermaßen auswirken. Ähnlich dem Absatz Tag <P> wird ein Textbereich auch durch umgebende
Zeilunumbrüche vom umgebenden Fließtext abgehoben.
WhiteSpace Zeichen in HTML
Die Browser setzen in der Regel ein Tabulator-Zeichen oder Zeilenumbruch-Zeichen
im Editor als Leerzeichen im HTML-Text um. Mehrere solcher White-Space-Zeichen
hintereinander werden ignoriert und zu einem einzigen Leerzeichen zusammengefasst.
Um mehrere Leerzeichen hintereinander zu erzwingen, können Sie anstelle der normalen
Leerzeicheneingabe die Zeichenfolge eingeben, und zwar so oft hintereinander
wie gewünscht.
zum Seitenanfang
zur Hauptseite
Letzte Änderung: 16.07.2005