Ergänzungen zum HTML - Grundkurs

Größe: px

Ab Seite anzeigen:

Download "Ergänzungen zum HTML - Grundkurs"

Nadja Frei
vor 7 Jahren
Abrufe

1 Ergänzungen zum HTML - Grundkurs Ein HTML - Dokument besteht grundsätzlich aus zwei Teilen; HEADER (Kopf, enthält allg. Angaben zu Titel und ähnlich) BODY (Körper, enthält den eigentlichen Text mit Überschriften, Verweisen, Grafikreferenzen usw.) Der gesamte Inhalt einer HTML-Datei wird in die Tags <html> bzw. </html> eingeschlossen. Hinter dem einleitenden HTML-Tag folgt das einleitende Tag für den HEADER. Zwischen <head> und </head> werden allgemeine Angaben zur Datei notiert. Dann folgt der einleitende Tag <body>, der mit </body> abschließt. Das HTML Dokument schließt mit </html>. Kurzreferenzen: 1. Grundgerüst HTML-Datei und Dateikopf Grundgerüst <!DOCTYPE HTML PUBLIC"-//IETF/IDTD HTML 3.0//EN" "html.dtd"> <html> <head> <title>text für Titelleiste</title> </head> <body>... Datei-Inhalt... </body> </html> Farben,Hintergrundgrafiken, Hintergrundmusik body Tag ergänzen: Bildschirmhitergrund und Textfarbe: <body bgcolor= Farbe text= Farbe 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 g Grünwert, hexadezimal 00 bis FF b Blauwert, hexadezimal 00 bis FF Hintergrundgrafik: <body background= Ordner/datei.gif > Hintergrundgrafik mit Wasserzeicheneffekt: <body background="ordner/datei.gif" bgproperties=fixed> 9

2 Hintergrundmusik (zwischen <head> und </head>): <bgsound src="datei.mid" loop=infinite> loop= Anzahl Wiederholungen, "infinite" oder Zahl 2. Text und Absätze Umlaute und scharfes ß 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 HTML-Zeichen und deren Maskierung Zeichen < = < Zeichen > = > Zeichen & = & Zeichen" = " Absatzschaltung und Absatzausrichtung <p> = neuer Absatz <p align=ieft> = folgender Absatz links <p align=center> = folgender Absatz zentriert <p align=right> = folgender Absatz rechts Mehrere Elemente zentriert ausrichten: <center>... beliebige Elemente... </center> Überschriften <br> = Zeilenumbruch an dieser Stelle <nobr>... </nobr> = kein Zeilenumbruch im Bereich <wbr>... </wbr> = Zeilenumbruch NOBR-Bereich <hl> </h 1 > = Ü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=ieft>... </h#> = Überschrift links <h# align=center>... <Jh#> = Überschrift zentriert <h# align=right>... </h#> = Überschrift rechts 10

3 Listen Glossare <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 1,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 <dl> = Glossar-Anfang <dt>... </dl> = zu definierender Ausdruck <dd>... </dd> = Definition </dl> = Glossar-Ende Andere Absatztypen <pre> </pre> = Präformatierter Text <address>... </address> = Internet-Adresse <blockquote>... <fblockquote = Zitat Textformatierung <b>... <fb> = fett <i>... </i> = kursiv <u>... </u> = unterstrichen <blink>... <fblink> = blinkend <s>... </s> = durchgestrichen <big>... </big> = große Schrift <small>... </small> = kleine Schrift <sub>... </sub> = tiefgestellt <sup>... </sup> = hochgestellt <basefont size=[1-7]>... <lbasefont> = Schriftgrößenbasis <font size=[1-7]>... </font> = Schriftgröße <font color--#rgb>... </font> = Schriftfarbe (r Rotwert, hexadezimal 00 bis FF g Grünwert, hexadezimal 00 bis FF b Blauwert, hexadezimal 00 bis FF) <font'face=>... </font> = Schriftart <marquee> </marquee> = Marquee-Effekt (Auto-Scrolling) <marquee direction=right> </marquee> = Scrollrichtung 11

4 nach rechts <marquee scrollamount=(zahl» </marquee> = Pixel zwischen 2 Scrollzuständen <marquee scrolldelay=(zahl» </marquee> = Millisekunden zwischen 2 Serollzuständen <marquee behavior--slide> </marquee> = Textverschlucken ausschalten <marquee align=top> </marquee> = Marquee- Umgebung oben ausrichten <marquee align=middle> </marquee> = Marquee-Umgebung mittig ausrichten <marquee align=bottoni> </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 3. Tabellen Tabelle definieren Tabellengestaltung (tabellenglobal) (r Rotwert, hexadezimal 00 bis FF; g Grünwert, hexadezimal 00 bis FF; b Blauwert, hexadezimal 00 bis FF) <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 <table width=(zahl)>= Gesamtbreite in Pixel <table height=(zahl)%> = Gesamthöhe prozentual zum <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 12

5 <table bordercolordark=rgb> = dunkler Teil der Rahmenund Gitternetzfarbe <table bordercolorlight=rgb> = heller Teil der Rahmen- und Gitternetzfarbe (r Rotwert, hexadezimal 00 bis FF; g Grünwert, hexadezimal 00 bis FF; b Blauwert, hexadezimal 00 bis FF) Tabellenzellengestaltung im Einleitungs-Tag einer Kopfzelle: <th align=ieft> = Kopfzelle links ausrichten <th align=center> = Kopfzelle zentriert ausrichten <th align=right> = Kopfzelle rechts ausrichten <th width=(zahl)%> = Spaltenbreite proz. zum <th width=(zahl)> = Spaltenbreite in Pixel <th height=(zahl)%> = Zeilenhöhe proz. zum <th height=(zahl)> = Zeilenhöhe in Pixel <th valign=top> = Kopfzelle oben ausrichten <th valign=middle> = Kopfzelle mittig ausrichten <th valign=bottorn> = Kopfzelle unten ausrichten <th bgcolor=rgb> = Hintergrundfarbe der Kopfzelle (r Rotwert, hexadezimal 00 bis FF 9 Grünwert, hexadezimal 00 bis FF b Blauwert, hexadezimal 00 bis FF) im Einleitungs-Tag einer Datenzelle: <td align=ieft> = Datenzelle links ausrichten <td align=center> = Datenzelle zentriert ausrichten <td align=right> = Datenzelle rechts ausrichten <td width=(zahl)%> = Spaltenbreite proz. zum <td width=(zahl)> = Spaltenbreite in Pixel <td height=(zahl)%> = Zeilenhöhe proz. zum <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 (r Rotwert, hexadezimal 00 bis FF g Grünwert, hexadezimal 00 bis FF b Blauwert, hexadezimal 00 bis FF) Tabellenzellen verbinden im Einleitungs-Tag einer Kopfzelle: <th -wspan=(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 13

6 <td colspan=(zahl)>(zahl) Spalten zu einer verbinden 4. Lokale Verweise und Grafikreferenzen Lokale Verweise Grafikreferenzen 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): <a href="file://localhost/[lw:/pfad]/datei.htm"> Verweistext</a> Verweis zu Anker innerhalb einer anderen Datei: <a href="datei.htm#bezeichner">verweistext</a> 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 Verweis zu Datei in anderem Verzeichnis (relativ): <a href="../[pfad]/datei.htm">verweistext</a> 14

Ähnliche Dokumente

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

Hintergrundgrafik: <body background=datei.gif> Hintergrundgrafik mit Wasserzeicheneffekt: <body background=datei.gif bgproperties=fixed> 1 HTML-Kurzreferenz Grundgerüst HTML-Datei und Dateikopf Grundgerüst Farben, Hintergrundgrafiken, Hintergrundmusik text