| HTML |
Hypertext Markup Language |
| URL |
Universal Resource Locator Methode://Server[:Port]/Pfad/Datei[#Anker] Beispiel: http://www.123.de:80/verzeichnis/index.htm#top |
| W3C |
Organisation welche die Standards f?r HTML festegt |
| Browser |
Programm zum anschauen von HTML-Seiten (Internet-Seiten). Beispiele: Mozilla Firefox, Mozilla, Netscape, Opera, Lynx, Links, w3m, Internet Explorer |
| zur Übersicht | |
| Der Nutzen |
HTML dient dazu einem Browser mitzuteilen wie er den Text einer Internetseite formatieren soll. Außerdem werden dem Browser und Suchmaschinen zus?tzliche Informationen zu der Seite übermittelt. |
| HTML-TAGs |
Die Textinformatierung in HTML erfolgt
in .html oder .htm Dateien durch sogenannte TAG's. Ein HTML-TAG ist immer in zwei spitze Klammern eingeschlossen, zwischen denen die TAG-Informationen stehen. <TAG-Information>. Es besteht (bis auf wenige Ausnahmen) immer aus einem Beginnenden- und einem Endenden-TAG. Zwischen diesen zwei TAG's liegt der zu formatierende Text. HTML-TAG's m?ssen immer geschlosse werden bevor das n?chse TAG beginnen darf. Das End-TAG unterscheidet sich vom Begin-TAG durch einen Schrägstrich /. Begin- und End-Tag müssen die selbe TAG-Information enthalten. Beispiel: <TAG>Textinformation</TAG> |
| TAG's Kombinieren |
Das Kombinieren oder Verschachteln von TAG's
ist m?glich. Hierzu werden die unterschiedliechen TAG's ineinander Verschachtelt. Es ist sehr wichtig darauf zu achten, dass das zuletzt geöffnete TAG wieder als erstes geschlossen wird. Beispiel: <TAG1><TAG2>Textinformation</TAG2></TAG1> |
| Parameter |
In HTML besteht die Möglichkeit das Aussehen und Verhalten von HTML-TAG's zu beeinflussen. Dies geschieht durch Parameter, welche dem Begin-TAG übergeben werden. Beispiel: <TAG Parameter="Übergabewert"> Textinformation </TAG> |
| Praktisches Beispiel |
Zur Veranschaulichung der doch recht trockenen Theorie
hier ein praktisches Beispiel: HTML macht ganz viel Spass! Zur Textformatierung werden folgende TAG's verwendet: Schriftgr??e: <font> mit dem Gr??enpatameter size und dem Übergabewert red f?r die Farbe. fette Schrift: <b> schräg gestellte Schrift: <i> unterstrichene Schrift: <u> Beispiel: <font size="3"> <b>HTML</b> <i> <u>macht ganz</u> viel </i> <font size="2" color="red"> Spass! </font> </font> Hinweis: F?r eine gute Lesbarkeit des Quelltextes in der HTML-Datei ist es von Vorteil diesen zu gliedern. Theoretisch kann er aber auch in nur einer einzigen Zeile stehen. |
| zur Übersicht | |
| Wichtiger Hinweis |
Nachfolgent werden auf der linken Seite immer die HTML-TAG's,
mit ihren wichtigsten Parametern stehen. Rechts stehen dann kurze Beschreibungen oder ausf?hrlichere Beispiele, sowie ergänzende Hinweise. Zur deutlichern Veranschaulichung werden werden einige Beispiele, unter der Beschreibung, nocheinmal ausführich dargestellt. |
| zur Übersicht | |
| #RRGGBB |
Farben, die in HTML-TAG's als Übergabewert eines
Parameter angegeben werden, bestehen aus einer
additiven Farbmischung, die sich aus rot (#ff0000), grün (#00ff00) und blau (#0000ff) zusammensetzt. Jede dieser Einzelfarben wird durch eine Hexadezimalzahl mit zwei Ziffern deklariert. Beispiele: #bf048e, #04a923 |
| Beispiel:
<font color="#0000ff">Ich bin ein Blauer Text</font>
|
|
| FARBE |
Alternativ k?nnen die 16 Grundfarben auch mit ihrem englischen Namen angegeben werden. Hierbei entfällt allerdings die vorangestellte Raute (#). Beispiele: red, lightblue, darkgreen |
| Beispiel:
<font color="blue">Ich bin auch ein Blauer Text</font>
|
|
| zur Übersicht | |
| <html>...</html> |
Schließt das gesammt HTML-Dokument ein. Nur in diesem TAG stehen HTML-Informationen, Ausserhalb dieses Tags ist es nicht m?glich HTML-TAG's anzuwenden. Deshalb sollte es unbedingt vorhanden sein. Wichtiger Hinweis: <html>...</html> wird im Normalfall nur einmal in einer HTML-Datei verwendet. Vor dem einleitenden <html> sollte eine, in etwa so aussehende Informationszeile vorhanden sein. |
| Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
Diese Zeile ist eine Kommentarzeile mit Informationen zu unter anderem der verwendeten Sprache und der im Dokument verwendeten HTML-Version. |
|
| <head>...</head> |
Enth?lt Header-Informationen, wie den Titel und die Meta-Informationen. Der Inhalt dieses TAG wird ausführlich im Abschnitt "Header-Elemente"behandelt. |
| <body>...</body> |
Enthält den sichtbaren Inhalt eines HTML-Dokuments. Seine Parameter bestimmen das Aussehen des gesammten Dokuments. |
| background="URL" |
Hintergrundbild (siehe auch: Links) |
| Beispiel:
<body background="bild.jpg">...</body>
|
|
| bgcolor="#RRGGBB" | Hintergrundfarbe |
| link="#RRGGBB" | Linkfarbe |
| alink="#RRGGBB" | Farbe f?r aktivierte Links |
| vlink="#RRGGBB" | Farbe f?r besuchte Links |
| text="#RRGGBB" | Textfarbe |
| Beispiel:
<body text="#ff0000">...</body>
In diesem Beispiel wäre der Gesammte normale Text der Seite rot.Natürlich ist es auch möglich mehrere Parameter zu einem HTML-Tag anzugeben:
<body text="#ff0000" link="blue">...</body>
|
|
| Weitere Informationen zu Farben stehen im Abschnitt Farben in HTML. |
|
| Ausrichtung im Browserfenster in Pixel oder Prozent: | |
| marginleft="px|%" | Abstand von links |
| marginright="px|%" | Abstand von rechts |
| margintop="px|%" | Abstand von oben |
| marginbottom="px|%" | Abstand von unten |
| marginwidth="px|%" | Ausgehnung in der Breite |
| marginheight="px|%" | Ausgehnung in der Höhe |
| Beispiel f?r die Ausrichtung
10 Prozent von oben und 8 Pixel von
links:
<body margintop="10%"
marginleft="8">
|
|
| Wichtiger Hinweis: Übergabewerte in Parameter werden normalerweise in Anführungsstriche (") geschrieben. Bei Pixelangabe genügt der Wert, bei Prozent muss das Prozentzeichen (%) nach dem Wert angegeben werden. Diese Art der Formatierung wird auf alle Parameterwerte angewendet, die in dieser HTML-Kurzanleitung erwähnt sind. |
|
| <!-- ... --> | Kommentar |
| Beispiel;
<!-- Ich bin ein HTML-Kommentar und werde nur im HTML-Quelltext angezeigt, also nicht auf der angezeigten Seite im Browser. Ich kann auch mehrere Zeilen lang sein -->
|
|
|
Der Aufbau eines HTML-Dokuments sollte immer folgenderma?en aussehen:
<html> <head> Header-Elemente </head> <body> Dokumenteninhalt (formatiert mit weiteren TAG's) </body> </html> Der Header wird vor dem Body angegeben. Header und Body werden von dem HTML-TAG umschlossen. |
|
| zur Übersicht | |
| <title>...</title> |
Titel der HTML-Seite Wird in der Fensterleiste des Browsers angezeigt |
| <meta> |
Zusatzinformationen für den Browser und Suchmaschinen besteht immer aus zwei Parametern. Dem Informationsparameter mit seinem Übergabewert und dem Inhaltsparameter mit der Übergabe-Information für den Informationsparameter. |
| name="autor" content="DanFuh" |
In diesem Fall wäre der Informationsparameter name, mit seinem Übergabewert autor. Der Inhaltsparameter content hätte die Übergabeinformation DanFuh für den Informationsparameter. |
| Beispiel:
<meta name="autor" content="Daniel">
In diesem Beispiel wird ?bermittelt werden, dass DanFuh der Autor/Ersteller des Inhaltes bzw. des Dokuments ist. |
|
| name="publisher" content="DanFuh" |
Name des Veröffentlichers des HTML-Dokuments |
| Beispiel:
<meta name="publisher" content="DanFuh">
|
|
| name="publisher-email" content="danfuh@gmail.com" |
Email Adresse des Veröffentlichers |
| Beispiel:
<meta name="publisher-email" content="danfuh@gmail.com">
|
|
| name="copyright" content="Daniel" |
Inhaber des Copyright |
| Beispiel:
<meta name="copyright" content="Daniel">
|
|
| name="audience" content="all" |
Angabe für wen die Seite gedacht ist (auch im Hinblick auf Suchmaschinen-Bots) Hier ist die Seite für alle gedacht. |
| Beispiel:
<meta name="audience" content="all">
|
|
| name="page-type" content="education" |
welchen Inhalt hat die Seite hier Lerninhalt |
| Beispiel:
<meta name="page-type" content="education">
|
|
| name="progid" content="vim" |
Name des verwendetetn Editors hier der erweiterte VI-Editor |
| Beispiel:
<meta name="progid" content="vim">
|
|
| name="generator" content="vim" |
angabe zum Seitengenerator oder auch Editor |
| Beispiel:
<meta name="generator" content="vim">
|
|
| http-equiv="content-type" content="text/html" |
Quellcode uns Inhaltstyp des HTML-Dokumentes hier HTML und Text |
| Beispiel:
<meta http-equiv="content-type" content="text/html">
|
|
|
Achtung:
Die folgenden Meta-TAG's enthalten
Informationen die mit Vorsicht zu
Verwenden sind. Bitte unbedingt die Hinweise beachten. |
|
| name="description" content="HTML-Anleitung" |
Beschreibung der Seite hier HTML-Anleitung |
| Beispiel:
<meta name="description" content="HTML-Anleitung">
|
|
| name="keywords" content="html, anleitung, referenz" |
Schl?sselw?rter nach denen die Seite in Suchmaschinen gefunden werden soll |
| Beispiel:
<meta name="keywords" content="html, anleitung, referenz">
|
|
| name="expires" content="never" |
Angabe wann die Seite ihre G?ltigkeit
f?r Suchmaschinen verliert. hier niemals |
| Beispiel:
<meta name="expires" content="never">
|
|
| name="robots" content="index, follow" |
Angabe zu Verfolgung der Links und indexierung der Seite in Suchmaschinen hier soll die Seite indexiert werden und auch die weiterführenden Links sollen verfolgt werden |
| Beispiel:
<meta name="robots" content="index, follow">
|
|
| name="identifier-url" content="./info.html" |
Erweiterte Informationen zur Seite hier in der Datei info.html (im selben Verzeichnis) Hinweis: hilfreich bei Seiten die kaum oder keinen Text enthalten (z.B. bilderlastige Seiten oder Flash-Seiten) |
| Beispiel:
<meta name="identifier-url" content="./info.html">
|
|
| name="language" content="german" |
Sprache der Seite hier deutsch |
| Beispiel:
<meta name="language" content="german">
|
|
| name="revisit-after" content="10 days" |
Angabe wann die Suchmaschine wieder kommen soll hier in 10 Tagen Hinweis: bitte nur verwenden, wenn die Seite auch in der angegebenen Zeit aktualisiert wird. |
| Beispiel:
<meta name="revisit-after" content="10 days">
|
|
| Hinweis: Die Meta-TAG's description und keywords, sowie das Title-TAG sollten nur Inhalt enthalten, der auch im Text vorkommt. Der Inhalt von allen drei TAG's sollte gleiche Worte enthalten, deren Schreibweise durchaus voneinander abweichen kann sein. Hier heißt es: "weniger ist mehr"i; |
|
| http-equiv="refresh" content="5;url=main.html" |
Angabe wann die Suchmaschine wieder kommen soll hier in 10 Tagen Hinweis: bitte nur verwenden, wenn die Seite auch in der angegebenen Zeit aktualisiert wird. |
| Beispiel:
<meta http-equiv="refresh" content="5;url=main.html">
|
|
| <base href="URL" target="Name"> | |
| Bezugs-URL für alle folgenden URL's Bezeichnug des Ziel-Frames oder Fensters. Info: reservierte Namen sind: _blank, _self, _parent, und_top |
|
| Beispiel:
<base href="frame.html" target="main">
|
|
| <isindex action="URL" prompt="Text"> | |
| Suchm?glichkeit anzeigen URL f?r Suche festlegen (z.B. Perl-Script), Text vor Eingabefeld |
|
| Beispiel:
<isindex action="search.pl" prompt="suchen">
|
|
| <isindex href="URL"> | |
| Datei ist volltext-indexiert Dateiziel mit indexiertem Inhalt |
|
| Beispiel:
<isindex href="./teste/inhalt.txt">
|
|
| <nextid n="ID-String"> | |
| identifiziert das n?chste Dokument | |
| <bdsound src="URL"> loop="Wert"> | |
| Hintergrundmusik mit Angabe der Musikdatei und Anzahl der Wiederholungen. (infinite = unendlich) | |
| Beispiel: (WAV-Datei mit 4 Wiederholungen)
<bdsound src="lied.wav"> loop="4">
|
|
| zur Übersicht | |
| <hr | horizontale Trennlinie |
| src="URL" | alternative Grafik |
| clear= | left | right | all |
| align= | left (links) | right (rechts) | center (zentriert) |justify (gestreckt) |
| size="Pixel" | Ausrichtung: H?he in Pixel |
| width="Pixel|%> | L?nge in Pixel oder % |
| Beispiel:
<hr width="80%">
|
|
| <p | Absatz mit Leerzeile |
| align= | Ausrichtung left | right | center | justify |
| nowrap>...</p> | kein autom. Zeilenumbruch |
| Beispiel:
<p align="left" nowrap>...<p>
|
|
| <br | Zeilenumbruch |
| clear=> | left | right | all | none z.B. zum Umflie?en von Bildern |
| Beispiel:
<br clear="all">
|
|
| <dt> | Zeilenumbruch |
| <pre | vorformatierter Text |
| clear= | left | right | all |
| width="Zahlenwert"> | max. Anz. von Zeichen pro Zeile |
| Beispiel:
<pre clear="left" width="30">
|
|
| <center>...</center> | zentrierte Textausrichtung |
| <div | Textausrichtung |
| align=>...</div> | left | center | right |
| Beispiel:
<div align="right">...</div>
|
|
| <nobr>...</nobr> | kein automatischer Zeilenumbruch |
| <wbr>...</wbr> | automatischer Zeilenumbruch im <nobr>-Bereich |
| <dl compact>...</dl> | Aufz?hlungen von Definitionen |
| <dir>...</dir> | Verzeichnis/Ordner/Directory-Liste |
| <ul | Liste |
| type= | square (Quadrat) | circle (Kreis) | disc (Dateisymbol) Symbolform des Listeneintrag-Punkt |
| dingbat="Icon" | Icon f?r die Aufz?hlung |
| plain>...</ul> | keine Symbole für die Aufz?hlung |
| Beispiele:
<ul type="circle">...</ul>
<ul digbat="li.ico">...</ul>
<ul plain>...</ul>
|
|
| <ol | sortierte Liste |
| type= | A | a | I | i | 1 numeriert mit: A,B,C / a,b,c / I,II,III / i,ii,iii / 1,2,3 |
| start="Zahlenwert" | Startwert |
| continue>...</ol> | letzte Liste fortf?hren |
| Beispiele (Aufzählung mit I,II, III; beginnend mit VI):
<ol type="I" type="6" >...</ul>
|
|
| <li>...</li> | Listeneintrag für <ul>, <ol> & <dir> Hinweis: kann bei alleinstehender Verwendung als Aufzählungszeichen in Form eines Punktes verwendet werden. |
| <multicol | mehrspaltiger Text |
| cols="Zahlenwert" | Anzahl der Spalten |
| width="Pixel|%" | Gesamtbreite in Pixel oder % |
| gutter="Zahl">...</multicol> | Spaltenabstand in Pixel |
| Beispiele:
<multicol cols="3" width="80%" gutter="10" >...</ul>
|
|
| Hinweis: Für <hr>, <br>, <dt> ist in reinem HTML kein endendes TAG vorgesehen. Bei <p> und <li> ist das End-Tag nicht zwingend erforderlich, sollte aber trozdem verwendet werden um keinen defekten HTML-Code herzustellen. |
|
| zur Übersicht | |
| <hX | Überschrift der größe X (1-6) |
| align=>...</hX> | left | center | right Ausrichtung Hinweis: Die Überschriften sollten in ihrer verwendeten Reihenfolge ihrer Wertigkeit (Größe) entsprechen. Die Überschrift <h1> sollte nur einmal am Anfang des HTML-Dokumentes verwendet werden. Im Hinblick auf Suchmaschinen sollten das H1- und H2-TAG den Suchbegriff enthalten und natürlich vorhanden sein. |
| Beispiel:
<h1 align="center">Überschrift 1</h1>
|
|
| <font | Schriftformatierung |
| size="Zahlenwert" | Schriftgr??e (1-7) |
| face="Schriftart" | Schriftart: z.B.: Arial, Verdana, Helvetica |
| color="#RRGGBB">...</font> | Schriftfarbe Hinweis: Nicht alle Browser unterstützen alle Schriftarten. Deshalb ist es sinnvoll, duch Komma (,) getrennt, mehrere alternative Schriftarten anzugeben. Die als erstes aufgeführte wird auch zuerst genommen, es sei denn der kennt sie nicht, dann folgt die zweite. (usw.) |
| Beispiel:
<font size="2"> face="Arial"> color="#000000">Ich bin ein schwarzer Text mit der Schriftart Arial in der Größe 2</font>
|
|
| physikalische Formate: | |
| <b>...</b> | fett |
| <big>...</big> | groß |
| <blink>...</blink> | blinkend |
| <i>...</i> | kursiv (schräg gestellt) |
| <u>...</u> | unterstrichen |
| <small>...</small> | klein |
| <strike>...</strike> | durchgestrichen |
| <sub>...</sub> | tiefgestellt |
| <sup>...</sup> | hochgestellt |
| <tt>...</tt> | Schreibmaschinen- oder Proportionalschrift |
| <strong>...</strong> | verst?rkte Schrift |
| virtuelle Formate | |
| <address>...</address> | Internet-Adresse |
| <abbrev>...</abbrev> | Abkürzung |
| <acronym>...</acronym> | Akronym |
| <au>...</au> | Autorname |
| <blockquote>...</blockquote> <cite>...</cite> |
Zitat |
| <code>...</code> | Quellcode |
| <del>...</del> | gelöschter Text |
| <dfn>...</dfn> | Definition |
| <em>...</em> | Hervorhebung |
| <ins>...</ins> | Eingef?gter Text |
| <kbd>...</kbd> | Tastatureingabe |
| <lang>...</lang> | sprachlich geänderter Kontext |
| <person>...</person> | Personenname |
| <q>...</q> | kurzes Zitat |
| <s>...</s> | Durchgestrichen |
| <samp>...</samp> | Beispiel |
| <var>...</var> | Variable |
| zur Übersicht | |
| X |
Hyperlinks sind Sprungziele zu einer anderen
Internetseite oder Internetadresse als der aktuellen. Es wird zwischen folgenden Sprungzielen unterschieden: Link zu einer Stelle im selben Dokument (Anker), Link zu einer anderen Datei der selben Domain/URL, Link zu einer anderen URL/Domain. Hierzu kann das Zeil absolut oder relativ angegeben werden. Beispiele: Wir nehmen als Beispiel die Datei index.php mit dem Anker #top auf mit der URL http://www.danfuh.de/ absoluter Link: http://danfuh.de/index.php#top absoluter, serverseitiger Link /var/www/index.php#top relative Links: ./index.php#top index.php#top oder wenn die aktuelle Seite index.php ist #top Alle diese Links haben das gleiche Ziel |
| <a | Anker |
| href="Adresse" | Sprungziel z.B. mailto:danfuh@gmail.com oder http://danfuh.de oder ../../main.html .... |
| target"Ziel" | gibt an in welchem Henster das Ziel ge?ffet werden soll Info: reservierte Namen sind: _blank, _self, _parent, und_top |
| name"Wort">...</a> | Name des Ankers |
|
Beispiel 1: (Sprungziel zu einer neuen URL in einem leeren Fenster) <a href="http://www.heiko-rudolf.net">&Webhosting</a>
Beispiel 2:(Sprungziel zu einer anderen seite test2.htm im paralelen Verzeichnis test) <a href="../test/test2.htm">&Testseite</a>
Beispiel 3:(download-Ziel für eine Datei aaa.tar.gz im Webserver-Root) <a href="/aaa.tar.gz">&download</a>
Beispiel 4:(Anker mit NAme test festlegen (in der Datei 123.htm)) <a name="test">&Ich bin ein Anker</a>
Beispiel 5:(Sprungziel zum Anker test in der Datei 123.htm) <a href="123.htm#test">Ziel in anderer Datei</a>
Beispiel 6:(Sprungziel zum Anker test wenn ich mich in der Datei 123.htm befinde) <a href="#test">Ziel in selber Datei</a>
Beispiel 7:(E-Mail an DanFuh mit Adresse danfuh@gmail.com) <a href="mailto:danfuh@gmail.com">Mail an DanFuh</a>
|
|
| zur Übersicht | |
| <img | Bild anzeigen |
| src="URL" | Bild Datei |
| alt="Text" | Alternativer Text, wird angezeigt wenn das Bild nicht geladen wird ( z.B. in Textbrowsern wie lynx) |
| border=pixel | Rahmenbreite in Pixeln. normalwert ist 0, bei verwendung als Link (innerhalb eines a-Tag) ist der Wert 3 |
| width=pixel|% | Breite in Pixel oder Prozent, Seitenver?ltnisse bleiben erhalten |
| height=pixel|% | Höhe in Pixel oder Prozent, Seitenverh?ltnisse bleiben erhalten Hinweis: Die Veränderung der Größenverh/auml;ltnisse hat keinen Einfluss auf die pysikalische Beschaffenheit und Größe des Bildes und auch nicht auf dessen Ladezeit im Browser. Lediglich die Anzeige wird weeinflusst |
| align= | top | middle | bottom | left | right | texttop | absmiddle | absbottom | baseline Ausrichtung des Bildes in seiner Umgebung bzw. Beeinflussung der Bildumgebung. |
| vspace=Pixel/td> | vertikaler Abstand zur Umgebung |
| hspace=Pixel | horizontaler Abstand zur Umgebung |
| usemap="#name"> | Verbindung zu einer Link-Map (siehe weiter unten) |
|
Beispiel: <img src="bild.gif" width="200" height="100" hspace="12" align="right">
In diesem Beispiel wird ein Bild, unabh?ngig von seiner tats?chlichen Größe, in 200 Pixel Breite und 100 Pixel Höhe mit einem horizontalen Abstand von 12 Pixeln zu seiner Umgebung und rechtsb?ndig, so dass der Text links am Bild vorbei fließt, angezeigt. |
|
| <map name="name"> | Definiert eine Link-Map oder auch ImageMap. (Ein Bild, bei dem bestimmte Areale als Hyperlink anklickbar sind) |
| <area | |
| href="URL" | URL, Datei bzw. Springziel, Link |
| nohref | kein Link |
| shape= | "rect" | "circle" | "polygon" Form/Figur des Bereiches |
| coords=> | Größenangabe(n) für die Formen/Figuren: rect: x1,y1,x2,y2 | circle: x,y,r | polygon: x1,y1,x2,y1,... |
| <area ...> | kann unbestimmt wiederholt werden |
| </map> | |
|
Beispiel: <img src="bild.gif" border=0 usemap="#test">
<map name="test"> <area shape="poly" coords="7,43,12,64,36,77,38,89,43,101,112,105,112,81,121,64,123" href="test.html"> </map> Dieses Beispiel zigt eine Link-Map/Imagemap hinter dem Bild bild.gif, in dem sich nur ein Linkbereich (area) befindet, welcher ein Vieleck ist und auf die Datei test.html verweist. |
|
| zur Übersicht | |
