HTML Befehlsreferenz (Auswahl)

HTML Befehlsreferenz (Auswahl). 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):
&Auml; Text: Ä <p>&Auml;hre</p> ergibt: Ähre
&Ouml; Text: Ö <p>&Ouml;konom</p> ergibt: Ökonom
&Uuml; Text: Ü <p>&Uuml;bung</p> ergibt: Übung
&auml; Text: ä <p><b>Fl&auml;che</b></p> ergibt: Fläche
&ouml; Text: ö <p><b>F&ouml;rderung</b></p> ergibt: Förderung
&uuml; Text: ü <p><b>Fr&uuml;hst&uuml;ck</b></p> ergibt: Frühstück
&copy; Text: (Copyrightzeichen)
&amp; Text: & (kaufmännisches Und)
&szlig; Text: ß (scharfes S)
&sect; Text: (Paragraph)
&nbsp; Text: (Erzwungenes sichtbares Leerzeichen)
&shy; Text: (bedingter Trennstrich = unsichtbar)
&middot; Text: (Mittelpunkt - middle dot) <p> Text </p>
&bull; Text: (Bullet-Zeichen) <p> Text </p>
&#216; Text: (Durchschnitt)
&#189; Text: (ein halb)
&#178; Text: (hoch zwei)
&times; Text: (multiplizieren)
&divide; Text: (dividieren)
&gt; Text: > (größer)
&lt; Text: < (kleiner)
Diakritische Zeichen (kleine Auswahl; Unicode-Nummerierung bzw. teilweise möglicher HTML-Maskierung):
&#194; bzw. &Acirc; Text: Â (großes A mit Zirkumflex)
&#226; bzw. &acirc; Text: â (kleines a mit Zirkumflex)
&#258; Text: Ă (großes A mit Breve)
&#259; Text: ă (kleines a mit Breve)
&#206; bzw. &Icirc; Text: Î (großes I mit Zirkumflex)
&#238; bzw. &icirc; Text: î (kleines i mit Zirkumflex)
&#350; Text: Ş (großes S mit Cedilla)
&#351; Text: ş (kleines S mit Cedilla)
&#354; Text: Ţ (großes T mit Cedilla)
&#355; Text: ţ (kleines t mit Cedilla)

Mehr Tipps: HTML: Beispielcode

Sponsoren und Investoren

Sponsoren und Investoren sind jederzeit herzlich willkommen!
Wenn Sie die Information(en) auf dieser Seite interessant fanden, freuen wir uns über eine kleine Spende. Empfehlen Sie uns bitte auch in Ihren Netzwerken (z. B. Twitter, Facebook oder Google+). Herzlichen Dank!

Nach oben Sitemap
Impressum & Kontakt