This page has been robot translated, sorry for typos if any. Original content here.

Zusätzliche HTML-Funktionen

Zusätzliche Funktionen

Dave Raguette , 29. August 2000

Nachdem wir die Grundzüge studiert haben, wenden wir uns der Komplexität zu. Jetzt lernst du:

  • Verwenden Sie erzwungene Zeilenumbrüche
  • Verwenden Sie schussfreie Räume
  • Verwenden Sie Codes für Sonderzeichen
  • Erstellen Sie Links zu Text-Snippets
  • Verwenden Sie vorformatierten Text
  • Platziere Text um Bilder herum
  • Identifizieren Sie sich im Bild der Referenzbezirke
  • Tabellen erstellen
  • Verwenden Sie Überschläge auch andere Tricks

ps Ich empfehle HTML Tidy , um das Layout zu pflegen.

Erzwungene Zeilenumbrüche

Manchmal können Sie gezwungene Zeilenumbrüche benötigen. Dies geschieht mit den br- Elementen. Sie möchten beispielsweise eine E-Mail-Adresse angeben:

 <p> Die Weiden <br>
 21 Runnymede Avenue
 Morton-in-the-Sumpf
 Oxfordshire OX27 3BQ </ p>

Das br- Element besitzt nicht das End-Tag. Gemeinsame Elemente, die in keiner Weise End-Tags haben, werden als leer bezeichnet .

Verwenden von nicht brechenden Leerzeichen

Browser unterbrechen den Text automatisch so, dass er mit den Feldern übereinstimmt. Zeilenumbrüche werden in Leerzeichen vorgenommen. Manchmal ist es notwendig, einen Zeilenumbruch zwischen bestimmten Wörtern zu verhindern. Zum Beispiel zwischen den Wörtern des Firmennamens - "Coke Cola". Verwenden Sie dazu anstelle eines Leerzeichens die Kombination von Zeichen & nbsp; zum Beispiel:

 Gesüßte kohlensäurehaltige Getränke wie Cola sind im gesamten Universum populär geworden.

Verwenden Sie nicht mehrere nichtbrechende Leerzeichen in einer Zeile, um den Text zu versetzen. Offsets sollten mithilfe von Stilregeln organisiert werden.

Sonderzeichencodes

Für die Benennung von Urheberrechten oder Markenzeichen ist es zweckmäßig, die entsprechenden Zeichen zu verwenden:

Symbol Kombination Beispiel
Copyright-Zeichen & kopieren; Copyright © 1999 W3C
Eingetragene Marke & reg; MagiCo®
Marke & # 8482; Webfarer ™

Bitte beachten Sie, dass die Kombination von & trade; in HTML 4.0 definiert ist, um eine Marke zu bezeichnen, aber sie wird nicht so häufig unterstützt wie & # 8482;

Andere nützliche Kombinationen:

Symbol Kombination Beispiel
Weniger als ein Zeichen & lt; <
Zeichen "mehr" & gt; >
Kaufmännisches Und-Zeichen & amp; &
schadloser Raum & nbsp;
langer Strich & # 8212; -
Anführungszeichen & quot; "

Darüber hinaus gibt es Kombinationen für Akzentzeichen und verschiedene andere Latin-1-Zeichen:

& nbsp; & # 160; Ð & ETH; & # 208;
¡ & iexcl; & # 161; Ñ & Nilde; & # 209;
¢ & Cent; & # 162; Ò & Ograve; & # 210;
£ & Pfund; & # 163; Ó & Oacute; & # 211;
¤ & curren; & # 164; Ô & Ocirc; & # 212;
¥ & Yen; & # 165; Õ & Otilde; & # 213;
| & brvbar; & # 166; Ö & Ouml; & # 214;
§ & sect; & # 167; × * mal & # 215;
¨ & UML; & # 168; Ø & Oslash; & # 216;
© & kopieren; & # 169; Ù & Ugrave; & # 217;
ª & ordf; & # 170; Ú & Uacute; & # 218;
" & laquo; & # 171; Û & Ucirc; & # 219;
¬ & nicht; & # 172; Ü & Uuml; & # 220;
& schüchtern; & # 173; Ý & Yacute; & # 221;
® & reg; & # 174; Þ & Thorn; & # 222;
¯ & macr; & # 175; ß & szlig; & # 223;
° & deg; & # 176; à & agrave; & # 224;
± & plusmn; & # 177; á & aacute; & # 225;
² & sup2; & # 178; â & acirc; & # 226;
³ & sup3; & # 179; ã & atilde; & # 227;
" & Acute; & # 180; ä & auml; & # 228;
μ & Mikro; & # 181; å & aring; & # 229;
& para; & # 182; æ & aelig; & # 230;
· & middot; & # 183; ç & ccedil; & # 231;
¸ & cedil; & # 184; è & Egrave; & # 232;
¹ & sup1; & # 185; é & eacute; & # 233;
º & ordm; & # 186; zu & ecirc; & # 234;
" & raquo; & # 187; ë & euml; & # 235;
¼ & frac14; & # 188; ì & igrave; & # 236;
½ & frac12; & # 189; í & iacute; & # 237;
¾ & frac34; & # 190; " & icirc; & # 238;
¿ & iquest; & # 191; ï & iuml; & # 239;
À & Agra; & # 192; ð & eth; & # 240;
Á & Aacute; & # 193; ñ & ntilde; & # 241;
 & Acirc; & # 194; zu & ograve; & # 242;
à & Atilde; & # 195; ó & oacute; & # 243;
Ä & Auml; & # 196; ô & ocirc; & # 244;
Å & Aring; & # 197; õ & otilde; & # 245;
Æ & AElig; & # 198; ö & OUML; & # 246;
Ç & Ccedil; & # 199; ÷ & teilen; & # 247;
È & Egrave; & # 200; ø & oslash; & # 248;
É & Eacute; & # 201; ù & ugrave; & # 249;
Ê & Ecirc; & # 202; ú & uacute; & # 250;
Ë & Euml; & # 203; û & ucirc; & # 251;
Ì & Igrave; & # 204; ü & uuml; & # 252;
Í & Iacute; & # 205; ý & yacute; & # 253;
Î & Icirc; & # 206; þ & Dorn; & # 254;
Ï & Imuml; & # 207; ÿ & yuml; & # 255;

Für Griechisch können auch in Unicode definierte mathematische Symbole numerische Referenzen verwenden. Dies wird in der HTML 4-Spezifikation ausführlicher behandelt Beachten Sie, dass die Namen der Kombinationen in Navigator 4 nicht erkannt werden, daher wird empfohlen, numerische Verknüpfungen zu verwenden.

Links zu Fragmenten von Webseiten

Stellen Sie sich vor, Sie hätten am Anfang eine lange Webseite mit einem Inhaltsverzeichnis geschrieben. Wie stellt das Inhaltsverzeichnis Links zu den relevanten Bereichen her?

Angenommen, jede Sektion beginnt mit einem Titel, zum Beispiel:

 <h2> Lokale Nachtspots </ h2>

Sie können einen Header für einen Hypertext-Link mithilfe des folgenden Codes festlegen: lt; a name = identifier > .... </a>

 <h2> <a name="night-spots"> Lokale Nachtspots </a> </ h2>

Das name-Attribut definiert den Namen, der verwendet wird, um den Zweck des Links zu identifizieren, in diesem Fall: "Nacht-Spots". Im Wesentlichen, jetzt erlaubt, den folgenden Link aufzunehmen:

 <ul>
  ...
  <li> <a href="#night-spots"> Lokale Nachtspots </a> </ li>
  ...
 </ ul>

Das Zeichen # vor dem Zielnamen ist erforderlich. Wenn das Ziel des Links gerade in der Rolle eines Freundes ist, lege die Webadresse dieses Acts vor das Zeichen #. Wenn sich der Act beispielsweise unter "http://www.bath.co.uk/" befindet, sollte der Link folgendermaßen aussehen:

 <a href="http://www.bath.co.uk/#night-spots"> Lokale Nachtlokale </a>

In Zukunft können Ziele für Links ohne das <a> -Element festgelegt werden. Die neue Methode ist viel einfacher, da Sie nur die ID- Eigenschaft zum Header hinzufügen müssen, zum Beispiel:

 <h2 id = "Nacht-Spots"> Lokale Nacht-Spots </ h2>

Diese Methode funktioniert nicht für die vierte Generation von Browsern oder sogar älteren Browsern, daher sollte sie vorsichtig verwendet werden!

Formatierter Text

Einer der Vorteile des Web ist die automatische Aufteilung von Text in Zeilen entsprechend der aktuellen Fenstergröße. Aber manchmal beginnt die Notwendigkeit, es zu vermeiden. Zum Beispiel im Falle der Schlussfolgerung auf dem Display des Programmcodes. Dies geschieht mit dem pre- Element. Zum Beispiel:

 <vor>
  void Knoten :: Entfernen ()
  {
  wenn (zurück)
  prev-> next = nächste;
  sonst wenn (Eltern)
  Eltern-> SetContent (null);

  wenn (nächstes)
  nächste-> vorherige = vorige;

  Eltern = Null;
  }
 </ pre>

was wie folgt dargestellt wird:

  void Knoten :: Entfernen ()
  {
  wenn (zurück)
  prev-> next = nächste;
  sonst wenn (Eltern)
  Eltern-> SetContent (null);

  wenn (nächstes)
  nächste-> vorherige = vorige;

  Eltern = Null;
  }

Textfarben und Hintergründe werden mithilfe des Stylesheets festgelegt. Beachten Sie, dass alle Zeilenumbrüche und Leerzeichen genau wie in HTML generiert werden. Die Ausnahme ist ein Zeilenumbruch unmittelbar nach dem ursprünglichen <pre> -Tag auch unmittelbar vor dem finalen </ pre> -Tag , der nicht berücksichtigt wird. Dies bedeutet, dass die folgenden Beispielpaare identisch generiert werden:

 <pre> formatierter Text </ pre>

 <vor>
 formatierter Text
 </ pre>

In der Regel wird formatierter Text unter Verwendung einer Monospace-Schriftart generiert, in der alle Zeichen die gleiche Breite haben. Wenn Sie die Position des Stils für das pre- Element definieren, verwenden einige Browser keine Schriftart mit einem festen Abstand. Daher sollten Sie die Eigenschaft font-family definitiv definieren. Wenn beispielsweise alle Vorelemente grün angezeigt werden sollen, können Sie die folgende Stilposition definieren:

 <style type = "text / css">
  vor {Farbe: grün;  Hintergrund: weiß;  Schriftfamilie: Monospace;  }
 </ Stil>

Beim Einstellen der Textfarbe wird empfohlen, die Hintergrundfarbe auf die gleiche Weise einzustellen. Dies stellt sicher, dass es keine Situation gibt, in der die Hintergrundfarbe von der Textfarbe schwer zu unterscheiden ist. Anstatt die Hintergrundfarbe für das pre-Element festzulegen, können Sie diese für das body-Element festlegen, z.

 <style type = "text / css">
  Körper {Farbe: schwarz;  Hintergrund: weiß;  }
  vor {Farbe: grün;  Schriftfamilie: Monospace;  }
 </ Stil>

Platzieren von Text um Bilder

In HTML kann gewählt werden, ob dieses Bild als Teil der aktuellen Textzeile betrachtet oder an den rechten oder linken Rand angehängt wird. Dies wird durch das align- Attribut bestimmt. Wenn das Attribut "Ausrichtung" auf " Links" eingestellt ist , wird das Bild an den linken Rand angehängt. Wenn Sie nach rechts gehen , gehen Sie nach rechts. Zum Beispiel:

 <p> <img src = "sun.jpg" alt = "Sonnenuntergangsgrafik"
 width = "32" height = "21" align = "left"> Dieser Text wird um das Bild auf der rechten Seite gelegt. </ p>

Es wird präsentiert als:

Sunburst-Grafik Dieser Text wird um das Bild auf der rechten Seite gelegt.

So wird align = "right" verwendet.

 <p> <img src = "sun.jpg" alt = "Sonnenuntergangsgrafik"
 width = "32" height = "21" align = "right"> Dieser Text wird um das Bild auf der linken Seite gelegt. </ p>

Es wird präsentiert als:

Sunburst-Grafik Dieser Text wird um das Bild auf der linken Seite gelegt.

Um die Textgenerierung unter dem angehängten Bild fortzusetzen , darf das Element <br clear=all> verwendet werden, zum Beispiel:

  <p> <img src = "/ img / site / sonne.jpg" alt = "sunburst grafik"
 width = "32" height = "21" align = "right"> Dieser Text beginnt auf der linken Seite des Bildes. 
<br clear="all"> Hier beginnt eine neue Zeile, die sich unter dem angehängten Bild befindet. </ P>

Es wird präsentiert als:

Sunburst-Grafik Dieser Text beginnt links neben dem Bild.
Hier beginnt eine neue Zeile, die sich unter dem angehängten Bild befindet.

Bildbereiche als Links

Das folgende Bild ist eine Karte mehrerer Webseiten. Um zur entsprechenden Seite zu gelangen, müssen Sie auf den Kreis klicken.

SitemapНачало работы Немного стиля Дизайн Web-страниц Углубленный курс HTML

Diese Karte ist folgendermaßen markiert:

 <p align = "Mitte">
  <img src = "pages.gif" width = "384" Höhe = "245"
  alt = "sitemap" usemap = "# sitemap" border = "0">
  <map name = "sitemap">
  <Flächenform = "Kreis" coords = "186,44,45" 
  href = "Overview.html" alt = "Erste Schritte">
  <Flächenform = "Kreis" coords = "42,171,45" 
  href = "Style.html" alt = "Ein bisschen Stil">
  <Flächenform = "Kreis" coords = "186,171,45"
  alt = "Webseiten-Design">
  <Flächenform = "Kreis" coords = "318,173,45"
  href = "Advanced.html" alt = "Erweiterter HTML-Kurs">
  </ map>
 </ p>

Das src- Attribut des img-Elements definiert das Bild "pages.gif". Das UseMap- Attribut gibt eine Verknüpfung zum Kartenelement. Hierfür wird die Webadresse verwendet, daher wird auch das Symbol # verwendet. Für das Border- Attribut ist auf "0" festgelegt, so dass das Bild nicht blaue Kante scheint.

Das Kartenelement legt fest, welche Grafschaftsbilder als Links dienen. Das name- Attribut entspricht dem usemap- Attribut des img- Elements und agiert in etwa genauso wie die name-Eigenschaft des <a> -Elements. In der Praxis wird das Kartenelement gezwungen, sich in der Blabla-Datei zu befinden, die auch ein Img-Element ist.

Das Flächenelement wird verwendet, um den Bezirk des Bildes zu definieren und mit einer Webadresse zu verknüpfen. Das Attribut shape definiert die Form eines Kreises: "rect" (Rechteck), "circle" (Kreis) oder "poly" (Polygon). Das Attribut coords definiert die Koordinaten des Bezirks in Abhängigkeit von der Form.

  • rect: die x-Koordinate der linken Kante, die y-Koordinate der oberen Kante, die x-Koordinate der rechten Kante, die y-Koordinate der linken Kante
  • Kreis: die x-Koordinate des Mittelpunkts, die y-Koordinate des Mittelpunkts, z
  • Poly: x 1 , y 1 , x 2 , y 2 , ... x n , y n

Der obere linke Fleck wird als Quelle des Bildes betrachtet, die x-Koordinaten und seine y sind gleich Null, die x-Koordinate nimmt entlang des Kurses nach rechts zu und die y-Koordinate nimmt ab. Die meisten Werkzeuge zum Arbeiten mit Bildern ermöglichen es Ihnen, die Koordinaten eines beliebigen Punktes des Bildes zu finden.

Wenn sich mehrere Bereiche kreuzen, wird die Priorität durch den Bereich bestimmt, der durch den ersten der sich kreuzenden Bereiche bestimmt wird (d. H. Die entsprechende Tat beginnt zu erscheinen, wenn Sie mit der Maus klicken). Um komplexere Zahlen zu erhalten, ist es zulässig, die Distriktfreigabe inaktiv zu machen, indem sie mit einem anderen Distrikt unter Verwendung des nohref- Attributs blockiert wird. Beispiel:

  <Flächenform = "Kreis" coords = "186,44,50" nohref>
  <Flächenform = "Kreis" coords = "186,44,100" 
  href = "Overview.html" alt = "Erste Schritte">

Der erste Kreis erzeugt einen inaktiven Bezirk in einem größeren Kreis, der durch das zweite Flächenelement erzeugt wird. Damit ein inaktiver Distrikt wirksam wird, muss er bis zum aktiven Bereich vorhanden sein, ansonsten wird die Priorität zum aktiven Bereich.

Warum sollten Sie die alt- Eigenschaft verwenden ?

Das Alt- Attribut des Bereichselements wird verwendet, um die Textbezeichnung für den Link anzugeben. Ohne dieses Attribut wird die Karte für Personen unzugänglich, die das Bild aus irgendeinem Grund nicht sehen.

Tabellen

Tabellen dienen zur Information auch für die Position von Elementen auf der Seite. Sie können die Tabellen strecken, um die Felder auszufüllen, ihre feste Breite festlegen oder dem Browser erlauben, die Tabellen automatisch nach ihrem Auftreten zu skalieren.

Tabellen bestehen aus einer oder mehreren Zellreihen. Hier ist ein einfaches Beispiel:

Jahr Verkäufe
2000 $ 18 Millionen
2001 $ 25 Millionen
2002 $ 36M

Hier ist das Markup für diese Tabelle:

 <Tabellenrand = "1">
 <tr> <th> Jahr </ th> <th> Verkauf </ th> </ tr>
 <tr> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <tr> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 <tr> <td> 2002 </ td> <td> $ 36M </ td> </ tr>
 </ table>

Das Tabellenelement dient als Tabellencontainer . Das border- Attribut definiert die Dicke des Gesichts in Pixeln. Das tr- Element dient als Behälter für die Tischreihe. Die th- Elemente dienen auch als Container für die Header bzw. Datenzellen.

Felder in der Zelle

Das Verwenden der cellpadding- Attribute für das Tabellenelement ermöglicht das gleichzeitige Erhöhen der Felder in allen Zellen. Stellen Sie beispielsweise die Felder auf 10 Pixel ein:

 <table border = "1" cellpadding = "10">

es wird so aussehen:

Jahr Verkäufe
2000 $ 18 Millionen
2001 $ 25 Millionen
2002 $ 36M

Abstand zwischen den Zellen

Das cellspacing- Attribut definiert die Lücke zwischen Zellen. Legen Sie die Lücke zwischen den Zellen auf 10 fest:

 <Tabellenrand = "1" Cellpadding = "10" Zellenabstand = "10">

Die Tabelle sieht folgendermaßen aus:

Jahr Verkäufe
2000 $ 18 Millionen
2001 $ 25 Millionen
2002 $ 36M

Tischbreite

Die Breite der Tabelle kann mit dem Attribut width festgelegt werden. Der Wert kann bestehen oder die Breite in Pixeln oder ein Prozentwert, der den Prozentsatz des Abstands zwischen dem linken und rechten Rand darstellt. Zum Beispiel legen wir die Breite der Tabelle auf 80% der Lücke zwischen den Feldern fest:

 <table border = "1" cellpadding = "10" width = "80%">

Die Tabelle sieht folgendermaßen aus:

Jahr Verkäufe
2000 $ 18 Millionen
2001 $ 25 Millionen
2002 $ 36M

Richten Sie Text in Zellen aus

Standardmäßig glätten Browser Text in den Header-Zellen (th) in der Mitte, aber in den Datenzellen (td) auf der linken Seite. Die Ausrichtung ist mit dem Attribut align möglich , das auf eine Zelle oder eine Linie angewendet werden kann (Element tr). Er kann die Werte "links", "Mitte" oder "rechts" haben:

 <table border = "1" cellpadding = "10" width = "80%">
 <tr align = "center"> <th> Jahr </ th> <th> Vertrieb </ th> </ tr>
 <tr align = "Mitte"> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <tr align = "Mitte"> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 <tr align = "Mitte"> <td> 2002 </ td> <td> $ 36M </ td> </ tr>
 </ table>

Die Tabelle sieht folgendermaßen aus:

Jahr Verkäufe
2000 $ 18 Millionen
2001 $ 25 Millionen
2002 $ 36M

Das Valign- Attribut definiert die vertikale Ausrichtung des Zelleninhalts genau wie ein Blabla. Es wird mit den Werten "oben" (oben), "Mitte" (Mitte) oder "unten" (unten) verwendet und kann auch mit jeder Zelle oder Zeile verwendet werden. Standardmäßig sind die Inhalte der Header-Zellen (th) zentriert, der Inhalt der Datenzellen ist jedoch auch am oberen Rand der Zelle am linken Rand ausgerichtet.

Leere Zellen

Browser behandeln leere Zellen unterschiedlich. Vergleichen:

Jahr Verkäufe
2000 $ 18 Millionen
2001 $ 25 Millionen
2002 $ 36M
2003

Plus

Jahr Verkäufe
2000 $ 18 Millionen
2001 $ 25 Millionen
2002

Letzteres ergibt sich, wenn die Zelle leer ist:

 <td> </ td>

Um dies zu vermeiden, platziere einen unzerbrechlichen Raum darin:

 <td> & nbsp; </ td>

Zellen, die mehrere Zeilen oder Spalten belegen

Lassen Sie uns die vorherige Stichprobe durch Division der Verkäufe in der nördlichen und südlichen Region vervollständigen:

Jahr Verkäufe
Norden Süden Summe
2000 $ 10 Millionen $ 8 Millionen $ 18 Millionen
2001 $ 14 Millionen $ 11 Millionen $ 25 Millionen

Die Überschrift "Jahr" nimmt jetzt zwei Zeilen ein, aber die Überschrift "Verkäufe" hat drei Spalten. Dies wird erreicht, indem die rowspan- Attribute auf colspan gesetzt werden . Hier ist das Markup für dieses Beispiel:

 <table border = "1" cellpadding = "10" width = "80%">
 <tr align = "center"> <th rowspan = "2"> Jahr </ th> <th colspan = "3"> Vertrieb </ th> </ tr>
 <tr align = "mitte"> <th> Norden </ th> <th> Süden </ th> <th> Gesamt </ th> </ tr>
 <tr align = "mitte"> <td> 2000 </ td> <td> $ 10M </ td> <td> $ 8M </ td> <td> $ 18M </ td> </ tr>
 <tr align = "mitte"> <td> 2001 </ td> <td> $ 14M </ td> <td> $ 11M </ td> <td> $ 25M </ td> </ tr>
 </ table>

Dies kann vereinfacht werden, indem die Tatsache ausgenutzt wird, dass Browser keine End-Tags für Zellen und Tabellenzeilen benötigen:

 <table border = "1" cellpadding = "10" width = "80%">
 <tr align = "center"> <th rowspan = "2"> Jahr <th colspan = "3"> Verkäufe
 <tr align = "mitte"> <th> Nord <th> Süd <th> Gesamt
 <tr align = "Mitte"> <td> 2000 <td> $ 10M <td> $ 8M <td> $ 18M
 <tr align = "mitte"> <td> 2001 <td> $ 14M <td> $ 11M <td> $ 25M
 </ table>

Da die Überschrift "Jahr" zwei Zeilen einnimmt, befindet sich das Hauptelement in einer anderen Zeile in einer anderen Spalte, aber nicht in der ersten Spalte.

Borderless Tabellen

Solche Tabellen werden häufig zum Formatieren von Seiten und zum Erstellen von Rastern auf ihnen verwendet. Fügen Sie dazu dem Tabellenelement einfach die Eigenschaft border = "0" und cellspacing = "0" hinzu :

Jahr Verkäufe
2000 $ 18 Millionen
2001 $ 25 Millionen
2002 $ 36M

Dies wird mit folgendem Markup erreicht:

 <Tabellenrand = "0" Zellenabstand = "0" Cellpadding = "10">
 <tr> <th> Jahr </ th> <th> Verkauf </ th> </ tr>
 <tr> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <tr> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 <tr> <td> 2002 </ td> <td> $ 36M </ td> </ tr>
 </ table>

Wenn Sie die cellspacing-Eigenschaft nicht angeben, wird ein Leerzeichen zwischen den Zellen angezeigt (siehe unten):

Jahr Verkäufe
2000 $ 18 Millionen
2001 $ 25 Millionen
2002 $ 36M

Verwenden Sie in Farbtabellen

Auf dieser Seite wird das Stylesheet auch verwendet, um eine andere Hintergrundfarbe für die Header-Zellen festzulegen. Hier sind die Bestimmungen des Stils, den wir verwendet haben:

 Tisch {
  Rand links: -4%
  Schriftfamilie: Sans-Serif;
  Hintergrund: weiß;
  Randbreite: 2;
  Randfarbe: weiß;
 }
 th {Schriftfamilie: Sans-Serif;  Hintergrund: rgb (204, 204, 153)}
 td {Schriftfamilie: sans-serif;  Hintergrund: rgb (255, 255, 153)}

Die letzten beiden Zeilen setzen die Hintergrundfarbe für die Zellen ebenfalls gemäß den eingestellten Rot / Grün / Blau-Werten. Zahlen sollten im Bereich von 0 bis 255 liegen (voll gesättigte Farbe).

Auf andere Weise kann die Hintergrundfarbe mit dem Attribut bgcolor festgelegt werden. Diese Technik funktioniert in etwa allen Browsern und benötigt keine Unterstützung für Stylesheets. Bestimmen Sie zunächst die Hexadezimalwerte der roten, grünen und blauen Komponenten, die Sie verwenden möchten. Der Style Guide hat einen Konverter .

 <Tabellenrand = "0" Zellenabstand = "0" Cellpadding = "10">
  <tr>
  <th bgcolor = "# CCCC99"> Jahr </ th>
  <th bgcolor = "# CCCC99"> Vertrieb </ th>
  </ tr>
  <tr>
  <td bgcolor = "# FFFF66"> 2000 </ td>
  <td bgcolor = "# FFFF66"> $ 18M </ td>
  </ tr>
  <tr>
  <td bgcolor = "# FFFF66"> 2001 </ td>
  <td bgcolor = "# FFFF66"> $ 25M </ td>
  </ tr>
  <tr>
  <td bgcolor = "# FFFF66"> 2002 </ td>
  <td bgcolor = "# FFFF66"> $ 36M </ td>
  </ tr>
 </ table>

Zugriff auf Tabellen

Wenn Sie die Tabelle nicht sehen, ist es schwierig zu verstehen, worüber das Wort sich bewegt. Es ist sinnvoll, Informationen über den Termin und die Struktur der Tabelle anzugeben. Mit dem Caption-Element können Sie sowohl eine Kopfzeile angeben als auch oberhalb oder unterhalb der Tabelle platzieren. Das Untertitelelement muss sich nach dem Element tr der ersten Zeile befinden.

Geschätzter Umsatz aus Verkäufen nach Jahren
Jahr Verkäufe
2000 $ 18 Millionen
2001 $ 25 Millionen

Diese Tabelle ist durch das folgende Markup definiert:

 <table border = "1" cellpadding = "10" width = "80%">
 <caption> Geschätzter Umsatz aus Verkäufen nach Jahr </ caption>
 <tr align = "zentrum">
  <th> Jahr </ th> <th> Verkauf </ th>
 </ tr>
 <tr align = "Mitte"> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <tr align = "Mitte"> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 </ table>

Hier ist die Tabelle, aber die Eigenschaft align = "bottom" wird dem caption-Element hinzugefügt:

Geschätzter Umsatz aus Verkäufen nach Jahren
Jahr Verkäufe
2000 $ 18 Millionen
2001 $ 25 Millionen

Das Zusammenfassungsattribut des Tabellenelements sollte verwendet werden, um die Tabellenstruktur für diejenigen zu beschreiben, die die Tabelle überhaupt nicht sehen können. Zum Beispiel: "In der Hauptsäule sind Jahre angegeben, aber in der anderen - die Ankunft dieses Jahres."

 <table summary = "Jahre sind in der Hauptspalte angegeben, aber in der anderen - die Ankunft in diesem Jahr">

Definition von Beziehungen zwischen Zellen von Datenheadern

Wenn die Tabelle auf einem Audiogerät oder einem Gerät zum Abschließen des Braille-Alphabets generiert wird, ist es sinnvoll anzugeben, zu welcher Zelle die Überschriften gehören. Zum Beispiel kann sich ein Sound-Browser auch in den Tabellenzellen nach oben und unten oder nach rechts bewegen, wobei er vor jeder Zelle einen entsprechenden Kopfsatz ausspricht.

Zu diesem Zweck muss jede Zelle des Headers / der Daten mit Anmerkungen versehen werden. Die einfachste Möglichkeit besteht darin, den Headerzellen die Eigenschaft scope hinzuzufügen. Es kann mit den folgenden Werten verwendet werden:

  • Zeile : Die Zelle enthält eine Kopfzeile für die restlichen Elemente der aktuellen Zeile.
  • col : Die Zelle enthält einen Header für die restlichen Elemente der aktuellen Spalte.

Wende dies auf unseren Tisch an:

 <table border = "1" cellpadding = "10" width = "80%">
 <caption> Geschätzter Umsatz aus Verkäufen nach Jahr </ caption>
 <tr align = "zentrum">
  <th scope = "col"> Jahr </ th>
  <th scope = "col"> Vertrieb </ th>
 </ tr>
 <tr align = "Mitte"> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <tr align = "Mitte"> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 </ table>

Bei komplexeren Tabellen ist es zulässig, die Header- Eigenschaft für einzelne Datenzellen zu verwenden, um auch eine Liste von Kennungen von Header-Zellen anzugeben, die durch Leerzeichen getrennt sind. Jede Zelle des Headers muss eine Eigenschaften- ID mit einem entsprechenden Bezeichner haben.

Schließlich sollten Sie das Attribut abbr verwenden , um Abkürzungen für lange Header zu definieren. Dadurch wird das Abhören von Zellüberschriften erleichtert, zum Beispiel:

 <th abbr = "W3C"> World Wide Web-Konsortium </ th>

Roll-Over sind auch andere Tricks.

Ein wenig Javascript kann die Seite erheblich beleben. Im Folgenden wird gezeigt, wie "Rollover" erstellt werden, zu welchem ​​Zeitpunkt sich das äußere Erscheinungsbild des Links ändert, wenn der Mauszeiger darauf platziert wird. Darüber hinaus erfahren Sie, wie Sie kreisförmige Banner erstellen, mit denen Sie Besucher zu den Websites Ihrer Sponsoren umleiten können.

Überschläge

Meistens ist Roll-Over ein Bild, das als Hypertext-Link dient. Wenn der Mauszeiger auf dieses Bild ausgerichtet ist, ändert es sich, um auf die Verknüpfung aufmerksam zu machen. Sie können beispielsweise einen Leuchteffekt oder einen Schatten hinzufügen oder einfach die Hintergrundfarbe ändern. Hier ist ein Beispiel:

 <Skripttyp = "Text / Javascript">
 if (document.images)
 {
  image1 = neues Bild;
  image2 = neues Bild;
  image1.src = "enter1.gif";
  image2.src = "enter2.gif";
 }

 Funktion chgImg (Name, Bild)
 {
  if (document.images)
  {
  Dokument [Name] .src = eval (Bild + ". src");
  }
 }
 </ script>

 ...

 <a href = "/" onMouseOver = 'chgImg ("Eingeben", "Bild2")'
 onMouseOut = 'chgImg ("enter", "image1")'> <img name = "enter"
 src = "enter1.gif" border = "0" alt = "Herein, wenn Sie das Risiko eingehen!"> </a>

und so sieht es aus ...

Treten Sie ein, wenn Sie das Risiko eingehen!

Ich habe diese Bilder mit einem kostenlosen Grafikeditor erstellt und den Effekt von heißem Wachs und einem Schatten hinzugefügt. Mit Hilfe von Suchmaschinen im Web ist es erlaubt, viele Tipps und kostenlose Bilder zu finden.

Banner

Wenn Ihre Website mehreren Sponsoren gehört, ist es erlaubt, die Banner der Sponsoren abwechselnd zyklisch zu wechseln. Zunächst sollten Sie für jeden Sponsor ein Banner erstellen. Alle Bilder müssen in der gleichen Größe vorhanden sein. Die entsprechenden Bild-URLs der Websites werden dann in Arrays namens adImages und adURLs platziert , die in der Quelle des Skripts definiert sind. Das img-Element für jeden Link muss mit dem Hauptbild aus dem Array initialisiert werden. Die Schleife beginnt mit dem Onload-Ereignis im body-Element.

 <html>
 <Kopf>
 <title> kreisförmige Banner </ title>
 <Skripttyp = "Text / Javascript">
 if (document.images)
 {
  adImages = neues Array ("/ img / site / mit.gif",
  "/img/site/inria.gif", "/site/img/keio.gif");
  adURLs = neues Array ("www.lcs.mit.edu",
  "www.inria.fr", "www.keio.ac.jp");
  thisAd = 0;
 }

 Funktion cycleAds ()
 {
  if (document.images)
  {
  if (document.adBanner.complete)
  {
  if (++ thisAd == adImages.length)
  thisAd = 0;

  document.adBanner.src = adImages [dieseAnzeige];
  }
  }

  // Banner wechselt alle 3 Sekunden
  setTimeout ("cycleAds ()", 3000);
 }

 Funktion gotoAd ()
 {
  document.location.href = "http: //" + adURLs [dieseAnzeige];
 }
 </ script>
 </ Kopf>
 <body onload = "cycleAds ()">
 ...

 <a href="javascript:gotoAd()"> <img name = "adBanner"
 src = "/ img / site / mit.gif" border = "0" alt = "Unsere Sponsoren"> </a>

Unsere Sponsoren: Unsere Sponsoren

Hinweis: Ich empfehle, zu überprüfen, ob alle Bilder die gleiche Höhe und Breite haben. Sie können auch die Attribute width und height für das Element img festlegen, um sicherzustellen, dass alle Bilder die gleiche Größe haben.

Und wenn Browser keine Skripts unterstützen?

Der Inhalt des noscript- Elements wird nur angezeigt, wenn der Browser keine Skripts unterstützt. Es muss verwendet werden, wenn Sie Personen Zugriff auf Informationen gewähren möchten, die ihnen sonst nicht zugänglich wären, wenn der Browser keine Skripts unterstützt. Angenommen, Sie möchten in Textform Links zu Sponsoren setzen:

 <noscript>
 Unsere Sponsoren: <a href="/click?http://www.lcs.mit.edu/"> MIT <,
 <a href="/click?http://www.inria.fr/"> INRIA </a>, und
 <a href="/click?http://www.keio.ac.jp/"> Keio Universität </a>.
 </ noscript>

Viele kostenlose Informationen über Skripte können in der Hilfe von Suchmaschinen gefunden werden.