Hintergrundgrafik: <body background="datei.gif"> Hintergrundgrafik mit Wasserzeicheneffekt: <body background="datei.gif" bgproperties=fixed>

Transkript

1 1 HTML-Kurzreferenz Grundgerüst HTML-Datei und Dateikopf Grundgerüst Farben, Hintergrundgrafiken, Hintergrundmusik <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN" "html.dtd"> <html> <head> <title>text für Titelleiste</title> </head> <body>... Datei-Inhalt... </body> </html> Farben: <body bgcolor=#rgb text=#rgb link=#rgb vlink=#rgb alink=#rgb> bgcolor = Bildschirmhintergrund text = Textfarbe link = Farbe von Verweisen vlink = Farbe von Verweisen zu besuchten Zielen alink = Farbe von Verweisen beim Anklicken r = Rotwert, hexadezimal 00 bis FF b = Blauwert, hexadezimal 00 bis FF Hintergrundgrafik: <body background="datei.gif"> Hintergrundgrafik mit Wasserzeicheneffekt: <body background="datei.gif" bgproperties=fixed> Hintergrundmusik (zwischen <head> und </head>: <bgsound src="datei.mid" loop=infinite> loop= Anzahl Wiederholungen, "infinite" oder Zahl Kommentare  Text und Absätze Umlaute u. scharfes S Sonderzeichen ä = ä Ä = Ä ö = ö Ö = Ö ü = ü Ü = Ü ß = ß Leerzeichen von der Beite n = Leerzeichen von der Beite m = Bindestrich von der Beite n = &endash; Bindestrich von der Beite m = &emdash; Leerzeichen ohne Umbruchmöglichkeit dahinter =

2 2 HTML-Zeichen und deren Maskierung Absatzschaltung und Absatzausrichtung Zeichen < = < Zeichen > = > Zeichen & = & Zeichen " = " <p> = neuer Absatz <p align=left> = folgender Absatz links <p align=center> = folgender Absatz zentriert <p align=right> = folgender Absatz rechts Mehrere Elemente zentriert ausrichten: <center>... beliebige Elemente...</center> <br> = Zeilenumbruch an dieser Stelle <nobr>... </nobr> = kein Zeilenumbruch im Bereich <wbr>... </wbr> = Zeilenumbruch NOBR-Bereich Überschriften <h1>... </h1> = Überschrift 1. Ordnung <h2>... </h2> = Überschrift 2. Ordnung <h3>... </h3> = Überschrift 3. Ordnung <h4>... </h4> = Überschrift 4. Ordnung <h5>... </h5> = Überschrift 5. Ordnung <h6>... </h6> = Überschrift 6. Ordnung <h# align=left>... </h#> = Überschrift links <h# align=center>... </h#> = Überschrift zentriert <h# align=right>... </h#> = Überschrift rechts (# = 1-6) Listen <ul> = Bullet-Liste <li> = Listeneintrag </ul> = Ende der Bullet-Liste> <ul type=square> = Bullet-Liste mit eckigen Bullets <ul type=circle> = Bullet-Liste mit runden Bullets <ul type=disc> = Bullet-Liste mit Datei-Bullets <ol> = numerierte Liste <li> = Listeneintrag </ol> = Ende der numerierten Liste> <ol type=a> = numerierte Liste A,B,C... <ol type=a> = numerierte Liste a,b,c... <ol type=i> = numerierte Liste I,II,III... <ol type=i> = numerierte Liste i,ii,iii <ol start=(zahl)> = numerierte Liste mit Startwert <dir> = Verzeichnis-Liste <li> = Listeneintrag </dir> = Ende der Verzeichnis-Liste Glossare <dl> = Glossar-Anfang <dt>... </dl> = zu definierender Ausdruck

3 3 <dd>... </dd> = Definition </dl> = Glossar-Ende Andere Absatztypen Logische Textauszeichnung Physische Textauszeichnung <pre>... </pre> = Präformatierter Text <address>... </address> = Internet-Adresse <blockquote>... </blockquote> = Zitat <strong>... </strong> = wichtig <em>... </em> = emphatisch <tt>... </tt> = dicktengleich <cite>... </cite> = Zitat <code>... </code> = Quellcode <kbd>... </kbd> = Terminal <var>... </var> = Variable <samp>... </samp> = Beispiel <dfn>... </dfn> = Definition <q>... </q> = Kurzzitat <lang>... </lang> = fremdsprachig <person>... </person> = Personenname <acronym>... </acronym> = Akronym <abbrev>... </abbrev> = Abkürzung <ins>... </ins> = eingefügt (Revisionsmarkierung) <del>... </del> = gelöscht (Revisionsmarkierung) <b>... </b> = fett <i>... </i> = kursiv <u>... </u> = unterstrichen <blink>... </blink> = blinkend <s>... </s> = durchgestrichen <big>... </big> = große Schrift <small>... </small> = kleine Schrift <sub>... </sub> = tiefgestellt <sup>... </sup> = hochgestellt <basefont size=[1-7]>... </basefont> = Schriftgrößenbasis <font size=[1-7]>... </font> = Schriftgröße <font color=#rgb>... </font> = Schriftfarbe <font face=>... </font> = Schriftart <marquee>... </marquee> = Marquee-Effekt (Auto-Scrolling) <marquee direction=right>... </marquee> = Scrollrichtung nach rechts <marquee scrollamount=(zahl)>... </marquee> = Pixel zwischen 2 Scrollzuständen <marquee scrolldelay=(zahl)>... </marquee> = Millisekunden zwischen 2 Scrollzuständen <marquee behavior=slide>... </marquee> = Textverschlucken ausschalten

4 4 <marquee align=top>... </marquee> = Marquee-Umgebung oben ausrichten <marquee align=middle>... </marquee> = Marquee-Umgebung mittig ausrichten <marquee align=bottom>... </marquee> = Marquee-Umgebung unten ausrichten <marquee height=(zahl)>... </marquee> = Höhe des Marquee- Bereichs <marquee hspace=(zahl)>... </marquee> = Abstand zum umgebenden Text <marquee bgcolor=rgb>... </marquee> = Hintergundfarbe des Marquee-Bereichs Tabellen Tabelle definieren Tabellengestaltung (tabellenglobal) <table> = Tabellen-Anfang <tr> = neue Tabellenzeile <th>... </th> = Kopfzelle <td>... </td> = Datenzelle </tr> = Ende der Tabellenzeile </table> = Tabellen-Ende im Einleitungs-Tag der Tabelle: <table border> = Gitternetzlinien anzeigen <table border=(zahl)> = Außenrahmendicke in Pixel <table width=(zahl)%> = Gesamtbreite prozentual zum Anzeigefenster <table width=(zahl)> = Gesamtbreite in Pixel <table height=(zahl)%> = Gesamthöhe prozentual zum Anzeigefenster <table height=(zahl)> = Gesamthöhe in Pixel <table cellspacing=(zahl)> = Gitternetzdicke in Pixel <table cellpadding=(zahl)> = Abstand Zelleninhalt von Rand in Pixel <table bgcolor=rgb> = tabellenweite Hintergrundfarbe <table bordercolor=rgb> = Rahmen- und Gitternetzfarbe <table bordercolordark=rgb> = dunkler Teil der Rahmen- und Gitternetzfarbe <table bordercolorlight=rgb> = heller Teil der Rahmen- und Gitternetzfarbe Tabellenzellengestaltung im Einleitungs-Tag einer Kopfzelle: <th align=left> = Kopfzelle links ausrichten <th align=center> = Kopfzelle zentriert ausrichten <th align=right> = Kopfzelle rechts ausrichten <th width=(zahl)%> = Spaltenbreite proz. zum Anzeigefenster

5 5 <th width=(zahl)> = Spaltenbreite in Pixel <th height=(zahl)%> = Zeilenhöhe proz. zum Anzeigefenster <th height=(zahl)> = Zeilenhöhe in Pixel <th valign=top> = Kopfzelle oben ausrichten <th valign=middle> = Kopfzelle mittig ausrichten <th valign=bottom> = Kopfzelle unten ausrichten <th bgcolor=rgb> = Hintergrundfarbe der Kopfzelle im Einleitungs-Tag einer Datenzelle: <td align=left> = Datenzelle links ausrichten <td align=center> = Datenzelle zentriert ausrichten <td align=right> = Datenzelle rechts ausrichten <td width=(zahl)%> = Spaltenbreite proz. zum Anzeigefenster <td width=(zahl)> = Spaltenbreite in Pixel <td height=(zahl)%> = Zeilenhöhe proz. zum Anzeigefenster <td height=(zahl)> = Zeilenhöhe in Pixel <td valign=top> = Datenzelle oben ausrichten <td valign=middle> = Datenzelle mittig ausrichten <td valign=bottom> = Datenzelle unten ausrichten <td bgcolor=rgb> = Hintergrundfarbe der Datenzelle Tabellenzellen verbinden im Einleitungs-Tag einer Kopfzelle: <th rowspan=(zahl)> = (Zahl) Zeilen zu einer verbinden <th colspan=(zahl)> = (Zahl) Spalten zu einer verbinden im Einleitungs-Tag einer Datenzelle: <td rowspan=(zahl)> = (Zahl) Zeilen zu einer verbinden <td colspan=(zahl)> = (Zahl) Spalten zu einer verbinden Verweise und (Grafik)-Referenzen Lokale Verweise Innerhalb einer Datei: Anker in Datei setzen: <a name="bezeichner">... </a> Verweis zu Anker: <a href="#bezeichner">verweistext</a> Zwischen Dateien: Verweis zu Datei im gleichen Verzeichnis: <a href="datei.htm">verweistext</a> Verweis zu Datei in anderem Verzeichnis (relativ): <a href="../[pfad]/datei.htm">verweistext</a> Verweis zu Datei in anderem Verzeichnis (absolut):

6 6 <a href="file://localhost/[lw:/pfad]/datei.htm">verweistext</a> Verweis zu Anker innerhalb einer anderen Datei: <a href="datei.htm#bezeichner">verweistext</a> Weltweite Verweise Schema: <a href="url-typ://server/verzeichnis/datei">verweistext</a> URL-Typen Grafikreferenzen = Adressierung von HTML-Dateien im WWW ftp:// = Adressierung von Dateien auf FTP-Servern telnet:// = Adressierung von Telnet-Servern gopher:// = Adressierung von Dateien auf Gopher-Servern news: = Adressierung von Newsgroups im Usenet mailto: = Adressierung von persönlichen -Adressen Zwischen Dateien: Grafik im gleichen Verzeichnis: <img src="datei.gif"> Grafik in anderem Verzeichnis (relativ): <img src="../[pfad]/datei.gif"> Grafik in anderem Verzeichnis (absolut): <img src="file://localhost/[lw:/pfad]/datei.gif"> Alternativer Text bei Nichtanzeige der Grafik: <img src="datei.gif" alt="anzuzeigender Text"> Rahmen um Grafiken: <img src="datei.gif" border=(zahl)> = Breite in Pixel Grafiken ausrichten (Text fließt um die Grafik): <img src="datei.gif" align=left> = links ausrichten <img src="datei.gif" align=right> = rechts ausrichten Abstand zwischen Grafik und Umgebung: <img src="datei.gif" vspace=(zahl)> = Abstand oben/unten <img src="datei.gif" hspace=(zahl)> = Abstand links/rechts Grafikbeschriftung (ein Textabsatz!) links neben der Grafik: <img src="datei.gif" align=top> = Beschriftung oben <img src="datei.gif" align=middle> = Beschriftung mittig <img src="datei.gif" align=bottom> = Beschriftung unten Grafiken skalieren: <img src="datei.gif" width=(zahl oder %)> = in Breite dehnen <img src="datei.gif" height=(zahl oder %)> = in Höhe dehnen Verweis-sensitive Grafiken (Netscape / MS IE ab Version 2.0) <map name="bildname"> <area shape="rect" coords="ol,or,ul,ur" href="datei1.html"> <area shape="circle" coords="x,y,r" href="datei2.html"> <area shape="polygon" coords="x1,y2,x2,x2,..." href="datei3.html"> </map>

7 7 <img src="datei.gif" usemap="#bildname" border=0> rect = viereckige verweis-sensitive Fläche cirle = runde verweis-sensitive Fläche polygon = beliebige vieleckige verweis-sensitive Fläche ol = Pixel von links für linke obere Ecke or = Pixel von oben für linke obere Ecke ul = Pixel von links für rechte untere Ecke ur = Pixel von oben für rechte untere Ecke x(1,2).. = Pixel von links y(1,2).. = Pixel von oben r = Radius datei.html = Verweisziele Bildname = zu vergbender Ankername #Bildname = Sprung zum Ankernamen Frames Frame-Sets definieren Nebeneinander (Beispiel): <frameset cols="200,*"> </frameset> (Angaben in Prozent oder in Pixeln, "*" für Wildcard) Untereinander (Beispiel): <frameset rows="30%,*"> </frameset> (Angaben in Prozent oder in Pixeln, "*" für Wildcard) Verschachtelt (Beispiel): <frameset cols="200,*"> <frameset rows="30%,*"> </frameset> </frameset> (Angaben in Prozent oder in Pixeln, "*" für Wildcard) Frames definieren Eigenschaften von Frames <frame src="datei.htm" name="framename"> Reservierte Namen: "_blank" "_self" "_parent" "_top" Frame-Fenster mit/ohne Scroll-Leiste <frame src="datei.htm" name="framename" scrolling=yes/no> Abstand Fensterrand zu Fensterinhalt <frame src="datei.htm" name="framename" marginwidth= marginheight=>

8 8 (marginwidth für Abstand links und rechts, marginheight für Abstand oben und unten) Rahmendicke bzw. keine Rahmen - für gesamtes Frame-Set: <frameset cols="50%,*" frameborder=> (0 für "keine Rahmen", ansonsten Zahl für Breite in Pixeln) - für einzelnes Frame-Fenster: <frame src="datei.htm" name="framename" frameborder=> (0 für "keine Rahmen", ansonsten Zahl für Breite in Pixeln) Farbige Fensterrahmen: <frame src="datei.htm" name="framename" bordercolor=> Multimedia und Fremdprogramme Videos Einfache Video-Referenz: <img dynsrc="datei.avi"> Video-Referenz mit Abspielwiederholung: <img dynsrc="datei.avi" loop=infinite> (infinite = Endloswiederholung, ansonsten Wiederholung als Zahlenwert angeben) Anzeigegröße des Videos: <img dynsrc="datei.avi" width=(pixel) height=(pixel)> Alternative Grafikanzeige: <img dynsrc="datei.avi" img src="datei.gif"> Start erst, wenn Video im Anzeigebereich: <img dynsrc="datei.avi" start=mouseover> Kontrollbuttons für Anwender: <img dynsrc="datei.avi" controls> Sound Einfache Sound-Referenz: <sound src="datei.wav"> Sound-Referenz mit Abspielwiederholung und Zwischenpausen: <sound src="datei.wav" loop=infinite delay=(zahl)> (infinite = Endloswiederholung, ansonsten Wiederholung als Zahlenwert angeben) (delay = Zwischenpausen in Sekunden) Java-Applets Netscape-Syntax: <applet code=objektklasse.class width=(pixel) height=(pixel) src="datei.java"> <param name=name value="text"> </applet> HotJava-Syntax:

9 9 <app class="objektklasse" src="datei.java" width=(pixel) height=(pixel) ParameterName=Wert> OLE-Objekte (Windows) <embed src="datei.typ"> (Typ = beliebiger Dateityp, der unter Windows registriert ist) Formulare Formular definieren Eingabefelder <form action="(url-adresse)" method=[get od. post]>... Formular-Elemente und beliebige andere Elemente... </form> Einzeilige Eingabefelder: <input name="(bezeichner)" size=#(zeichen) maxlength=#(zeichen)"> Extras: <input... type=int> = für ganzzahlige Eingaben <input... type=float> = für Kommazahlen-Eingaben <input... type=date> = für Datums-Eingaben <input... type=url> = für URL-Adreßeingaben Mehrzeilige Eingabefelder: <textarea="bezeichner" rows=#(zeilen) cols=#(zeichen)>... evtl.: vorbelegter Text... </textarea> Zeilenumbruch erzwingen: <textarea="bezeichner" wrap=virtual> (wrap=virtual: Zeilenumbrüche werden nicht übertragen) (wrap=physical: Zeilenumbrüche werden übertragen) Auswahllisten <select name="(bezeichner)" size=#(anzahl)> <option> angezeigter Text... </select> Extras: <select... multiple> = Mehrfachauswahl möglich <option selected> = per Voreinstellung ausgewählter Eintrag Radio- und Checkbuttons Ausführungsbuttons Radiobuttons: <input type=radio name="(bezeichner)" value="(daten)"> Beschriftung (mehrere Buttons mit gleichem Namen bilden eine Gruppe) Radiobuttons: <input type=checkbox name="(bezeichner)" value="(daten)"> Beschriftung (mehrere Buttons mit gleichem Namen bilden eine Gruppe) <input type=submit value="(beschriftung)"> = Abschicken <input type=reset value="(beschriftung)"> = Verwerfen