| Tags, Hinweise, Syntax |
| | | | |
| | | | |
| HTML-Tags | | Hinweise | | Syntax |
| <html> | | Eröffnet eine Webseite; muss auf jeden Fall am Anfang eines Dokuments stehen; am Ende zusammen mit einem slash. | | <html>
Dazwischen kommt alles andere.
</html> |
| <head> | | Folgt gleich nach <html>. Außer <title> und <base> hat in diesem Abschnitt nichts zu suchen. | | <html>
<head> Dazwischen kommt der Titel. </head>
Dann kommt alles andere.
</html> |
| <title> | | Hier wird nur der Name der Seite deklariert. <title> steht immer zwischen <head> und </head>. | | <html>
<head><title> Das ist unser Dokument</title></head>
Dann kommt alles andere.
</html> |
| <body> | | Hier wird der Inhalt der Webseite dargestellt. | | <html>
<head><title>Das ist Gerds Dokument</title></head>
<body>
Das ist meine Webseite...
</body>
</html> |
| <p> | | Erstellt einen TextAbsatz. | | <p>Das ist ein neuer Absatz</p> |
| <br> | | Fügt eine Leerzeile ohne Absatz (break) ein. | | <br>Dies ist eine Leerzeile</br>
<p><br><br>Absatz mit zwei Leerzeilen</br></br> </p> |
| <!-- ...... --> | | Kommentare können in den HTML-Text eingefügt werden. Diese erscheinen nicht auf der Webseite. | | <!-- Dies ist ein Kommentar --> |
| <b> | | Text fett. | | <p><b>fetter Text</b></p> |
| <i> | | Text kursiv. | | <p><i>kursiver Text</i></p> |
| <strong> | | Text fett. Befehl nicht mehr aktuell. | | <p><strong>fetter Text</strong></p> |
| <em> | | Text kursiv. Befehl nicht mehr aktuell. | | <p><em>kursiver Text</em></p> |
| <strike> | | Text durchgestrichen. | | <p>Heute<strike> schrebie</strike> schreibe ich
<u> alles</u> falsch.</p> |
| <u> | | Text unterstrichen. | | <p><u>unterstrichener Text</u></p> |
| <sup> | | Text hochgestellt. | | <p>Text normal<sup>Text hoch</sup></p> |
| <sub> | | Text tiefgestellt. | | <p>Text normal<sub>Text tief</sub></p> |
| <hn> | | Überschrift (n = 1, 2, 3, 4...). Je größer die Zahl, desto kleiner die Überschrift. | | <p><h1>Überschrift</h1></p> |
| <center> | | Text zentriert. Befehl nicht mehr aktuell. (siehe: align) | | <p><center>Text zentriert</center></p> |
| <blockquote> | | Text wird von Browser hervorgehoben. | | <blockquote> Text wird hervorgehoben </blockquote> |
| <pre> | | Text wird genauso wiedergegeben, wie er eingegeben wurde. Die Schriftart ist immer Courier. <br>-Tags sind nicht notwendig. | | <p><pre> Das ist ein besonderer
Text ! ! ! </pre></p> |
| <basefont size="n"> | | Schriftgröße für das gesamte Dokument; n=Zahl von 1 bis 7. | | <p><basefont size="3"></basefont></p> |
| <font size="n"> | | Schriftgröße einzelner Passagen im Text; n=Zahl von 1 bis 7; Größe 3 ist Standard. | | <p><font size="1"> kleiner Text </font></p> |
| <font face="Tahoma"> | | Schriftart einzelner Passagen im Text. Ist diese Schriftart nicht installiert, wird TimesNewRoman als Standard angezeigt. | | <p><font face="Arial" size=5> formatierter Text </font></p> |
| <font color=farbe> | | Schriftfarbe des Textes; farbe ist der englische Ausdruck. | | <font face="Arial" size=6 color=blue> Text </font> |
| <blink> | | Text blinkend (nicht Internet Explorer). | | <p><h2> <center> <blink> Blinktext zentriert </blink>
</center> </h2></p> |
| <align=left> | | Ausrichtung des Textes (standardmäßig). | | <div align=left> Text </div> |
| <align=center> | | Ausrichtung des Textes zentriert. | | <div align=center> Text Text Text Text </div> |
| <align=right> | | Ausrichtung des Textes rechts. | | <div align=right> Text </div> |
| <img src="bildname"> | | Jpg- oder gif-Grafik (sollte im gleichen Verzeichnis liegen). | | <img src="blume.gif"> |
| <img src="bild" alt="x"> | | Fügt eine Information hinzu, die man sieht, wenn man mit der Maus über das Bild fährt. | | <img src="blume.gif" alt="Das ist ein Blümchen"> |
| <img src="bild" border=x> | | Kein Rand: border=0 (Standard=2). | | <img src="http://www.abc.de/blume.gif" border=4> |
| <img src="bild" height=x> | | Höhe + Breite gibt man in height=x und width=x an. | | <img src="Mein Hund.jpg" height=80 width=80> |
| <img src="bild" align="x"> | | Text fließt links oder rechts (right) um das Bild herum. Jeder Text nach dem Tag <br clear=all> wird unter dem Bild weitergeschrieben. | | <img src="Mein Hund.jpg" align="right"> |
| bgcolor="rrggbb" | | rr steht für Rottöne, gg für grün, bb für blau. Zusammen mit <body> bildet es die Hintergrundfarbe der Webseite. | | <body bgcolor="#ff00ff#">
<body bgcolor="black" (green, red, maroon, blue,
purple, orange, yellow, silver, white) |
| background="bildname" | | Hintergrundbild für die komplette Webseite. Es muss sich im gleichen Ordner wie die HTML-Datei befinden und jpg- oder gif-Format haben.
Mehrere Adressierungsmöglichkeiten: | | <body background="bildname">
<body background="http://ww3.de/grund.gif">
<body style="background-image:url(../bildname.gif);
background-attachment: fixed;
background-repeat:no-repeat;
background-position:30px 30px;"> |
| <hr> | | Trennlinie wird eingefügt (horizontal rule). Um den Reliefeindruck aufzuheben, fügt man noshade hinzu. Die Dicke bestimmt man mit size=x, die Breite mit width=x% (relativ zur Bildschirmbreite). | | <hr noshade size=3 width=90%> |
| <ul> | | Teil des Tags <li>. Der Text hinter <ul> wird nicht eingerückt, jedoch hinter der Liste <li>. | | <ul>
<li> Text Aufzählungspunkt 1
<li> Text Aufzählungspunkt 2
</ul> |
| <li> | | Text wird als Liste mit Aufzählungspunkten ausgestattet. Der Text wird direkt hinter den <li>-Tag geschrieben. | | Syntax siehe <ul> |
| <a href="Adresse"> | | Link zu einer Internet-, Email-Adresse oder HTML-Datei. Die Farbe des Links kann im <body>-Tag durch das Attribut link="farbe" bestimmt werden. Man kann Text oder auch Bilder "verlinken". | | <a href="Internetadresse">verlinkter Text</a>
<a href="News.html"></a>
<a href="mailto:abcd@arias.com"></a>
<a href="News.htm"><img src="blume.gif" alt="Blume"
border=0></a> |
| <table> | | Tabellen beginnen mit <table>. Beendet werden sie mit </table>, sonst wird die ganze Tabelle nicht angezeigt. | | <table> |
| <table border> | | Tabelle: Gitternetzlinien sind sichtbar. Die Dicke wird mit einer Zahl zwischen 1 und 30 Pixeln angegeben. | | <table border=8> |
| <table bgcolor=yellow> | | Tabelle: Hintergrundfarbe der gesamten Tabelle. | | <table bgcolor=yellow> |
| <table cellpadding=x> | | Tabelle: Zeilen-Abstand in X Pixeln zwischen Zellinhalt und Gitternetzlinie. | | <table cellpadding="5"> |
| <table cellspacing=x> | | Tabelle: Dicke der Gitternetzlinien in Pixeln. | | <table cellspacing="2"> |
| <tr> | | Tabellenzeile. Jede einzelne Zeile erhält diesen Tag und schließt mit </tr> ab. Farbe der Zeile: bgcolor=x. | | <tr bgcolor=red> |
| <td> | | Tabelleninhalt. <td> muss innerhalb des Tags <tr> stehen. Zwischen <td> und </td> steht also der Inhalt der jeweiligen Zelle. Farbe der einzelnen Zelle: bgcolor=x. | | <table>
<tr> <td>Bilderbuch</td> <td>15 DM</td> </tr>
<tr> <td>Lesebuch</td> <td>10 DM</td> </tr>
</table> |
| <td colspan=x> | | Tabellen spreizen: Verbreitert eine Zelle horizontal nach rechts um X-1 Zellenbreiten. | | <tr><td colspan=3><div align=center>Internetbesucher:</div></td></tr>
<tr><td>1996</td><td>1997</td><td>1998</td></tr> |
| <td rowspan=y> | | Tabellen spreizen: Verlängert eine Zelle um X-1 Zellhöhen nach unten. | | |
| <td valign="x"> | | Ausrichtung des Textes in der Spalte. | | <td valign="top"> |
| <frameset> | | Frames: Dazu braucht man mindestens 3 HTML-Dateien: die erste bestimmt, wie gesplittet wird, die beiden anderen sind die sichtbaren Frames der Webseite. | | Die HTML-Datei, die die Frames erzeugt, sollte nur
den Frameset beinhalten, jedoch keine <body>-Tags. |
| <frameset rows="x"> | | Frames: horizontale Aufteilung des Bildschirmes; man kann die Angaben in % oder Pixeln machen. Beispiel: der obere Frame nimmt 20% des Screens, der untere 80% ein. | | <frameset rows="20%,80%"> ... </frameset> |
| <frameset cols="x"> | | Frames: vertikale Aufteilung des Bildschirms. | | <frameset cols="30%,70%">
<frame src="links.htm">
<frame src="rechts.htm" name="rechts">
</frameset> |
| <frameset border=x> | | Erzeugt durchsichtige Frametrennlinien. | | <frameset cols="40%,60%" border=0 frameborder=0 framespacing=0> |
| <frame src="inhalt" | | Frames: hier werden die HTML-Dateien bestimmt, die innerhalb der Frames erscheinen sollen. | | <frameset rows="20%,80%">
<frame src="inhalt.htm">
<frame src="willkommen.htm">
</frameset> |
| <frame src="x" name="x" | | Frames müssen Namen gegeben werden, denn bei Verweisen aus anderen Rahmen muss man den Zusatz target="Fenstername" hinzufügen, damit der Link im entsprechenden Rahmen erscheint, also: <a href="datei.htm" target="Fenstername"> | | <frame src="willkommen.htm" name="unten"> |
| <frameset> Teilung | | Das Beispiel läßt 3 Frames entstehen, horizontal voneinander getrennt, dessen mittlerer Frame der größte ist. Will man jetzt den mittleren Frame in zwei senkrechte Frames teilen, kann man auf eine HTML-Datei verweisen, die nochmals einen Frameset enthält. | | <frameset rows="20%,60%,20%">
<frame src="oben.htm">
<frame src="mitte.htm" name="main">
<frame src="unten.htm">
</frameset> |
| target | | Hinweis, wo welcher Link geöffnet werden soll. | | <a href="sample.pdf" target="_blank">Link</a> |
| | | | |
| HTML-Zeichenreferenz (kleine Auswahl von Sonderzeichen und mathematischen Zeichen): |
| Ä | | Text: Ä | | <p>Ähre</p> ergibt: Ähre |
| Ö | | Text: Ö | | <p>Ökonom</p> ergibt: Ökonom |
| Ü | | Text: Ü | | <p>Übung</p> ergibt: Übung |
| ä | | Text: ä | | <p><b>Fläche</b></p> ergibt: Fläche |
| ö | | Text: ö | | <p><b>Förderung</b></p> ergibt: Förderung |
| ü | | Text: ü | | <p><b>Frühstück</b></p> ergibt: Frühstück |
| © | | Text: © (Copyrightzeichen) | | |
| & | | Text: & (kaufmännisches Und) | | |
| ß | | Text: ß (scharfes S) | | |
| § | | Text: § (Paragraph) | | |
| | | Text: (Erzwungenes sichtbares Leerzeichen) | | |
| ­ | | Text: (bedingter Trennstrich = unsichtbar) | | |
| · | | Text: · (Mittelpunkt - middle dot) | | <p> · · · · Text · · · · </p> |
| • | | Text: • (Bullet-Zeichen) | | <p> • • • • Text • • • • </p> |
| Ø | | Text: Ø (Durchschnitt) | | |
| ½ | | Text: ½ (ein halb) | | |
| ² | | Text: ² (hoch zwei) | | |
| × | | Text: × (multiplizieren) | | |
| ÷ | | Text: ÷ (dividieren) | | |
| > | | Text: > (größer) | | |
| < | | Text: < (kleiner) | | |
| | | | |
| Diakritische Zeichen (kleine Auswahl; Unicode-Nummerierung bzw. teilweise möglicher HTML-Maskierung): |
| Â bzw. Â | | Text: Â (großes A mit Zirkumflex) | | |
| â bzw. â | | Text: â (kleines a mit Zirkumflex) | | |
| Ă | | Text: Ă (großes A mit Breve) | | |
| ă | | Text: ă (kleines a mit Breve) | | |
| Î bzw. Î | | Text: Î (großes I mit Zirkumflex) | | |
| î bzw. î | | Text: î (kleines i mit Zirkumflex) | | |
| Ş | | Text: Ş (großes S mit Cedilla) | | |
| ş | | Text: ş (kleines S mit Cedilla) | | |
| Ţ | | Text: Ţ (großes T mit Cedilla) | | |
| ţ | | Text: ţ (kleines t mit Cedilla) | | |
| | | | |
zurück