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

Zusätzliche HTML-Funktionen

Zusätzliche Funktionen

Dave Ragett , 29. August 2000

Nachdem wir die wichtigsten Möglichkeiten studiert haben, gehen wir zu komplexeren über. Jetzt lernst du:

  • Verwenden Sie erzwungene Zeilenumbrüche
  • Verwenden Sie schussfreie Räume
  • Verwenden Sie Codes für Sonderzeichen
  • Erstellen Sie Links zu Textfragmenten
  • Verwenden Sie vorformatierten Text
  • Platziere Text um Bilder herum
  • Definieren Sie in den Bildern der Stadtteillinks
  • Tabellen erstellen
  • Verwenden Sie Überschläge auch andere Techniken

ps Um die Routine im Markup zu erhalten, empfehle ich HTML Tidy .

Erzwungene Zeilenumbrüche

Manchmal müssen Sie Zeilenumbrüche erzwingen. Dies geschieht mit den br- Elementen. Beispielsweise möchten Sie eine Postanschrift angeben:

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

Element br besitzt nicht das letzte Tag. Gemeinsame Elemente, die keine endlichen Tags haben, werden leer genannt .

Verwenden von nicht brechenden Leerzeichen

Browser unterbrechen den Text automatisch so, dass er mit den Feldern übereinstimmt. Zeilenumbrüche werden in Leerzeichen erzeugt. Manchmal ist es notwendig, einen Zeilenumbruch zwischen bestimmten Wörtern zu verhindern. Zum Beispiel zwischen den Wörtern des Firmennamens - "Coke Cola". Um dies zu tun, müssen Sie die & 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. Verschiebung sollte mit Stilregeln organisiert werden.

Sonderzeichencodes

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

Symbol Kombination Beispiel:
Urheberrechte & kopieren; Copyright © 1999 W3C
Eingetragene Marke & gt; MagiCo®
Marke & # 8482; Webfarer ™

Beachten Sie, dass die Kombination von Trade in HTML 4.0 als eine Marke definiert ist, aber nicht so häufig unterstützt wird wie & # 8482;

Andere nützliche Kombinationen:

Symbol Kombination Beispiel:
Das Zeichen "weniger" & lt; <
Das Zeichen "mehr" & gt; >
Kaufmännisches Und-Zeichen & amp; &
unlösbare Lücke & nbsp;
langer Strich & # 8212; -
Anführungszeichen & quot; "

Darüber hinaus gibt es Kombinationen für Symbole mit diakritischen Zeichen auch für verschiedene andere Latin-1-Zeichensätze:

& nbsp; & # 160; A & ETH; & # 208;
¡ & iexcl; & # 161; Ñ & Nilde; & # 209;
¢ & gt; & # 162; N & Ograve; & # 210;
£ & Pfund; & # 163; Ó & Oacute; & # 211;
¤ & curren; & # 164; Ô & Ocirc; & # 212;
¥ & Yen; & # 165; Q & Otilde; & # 213;
| | & brvbar; & # 166; Ö & Ouml; & # 214;
§ & sect; & # 167; × x & gt; & # 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;
® & gt; & # 174; Þ & THORN; & # 222;
¯ & macr; & # 175; ß & szlig; & # 223;
° & gt; & # 176; à & agrave; & # 224;
± & gt; & # 177; á & aacute; & # 225;
² & sup2; & # 178; â & acirc; & # 226;
³ & sup3; & # 179; ã & atilde; & # 227;
" & amp; & # 180; ä & auml; & # 228;
μ & Mikro; & # 181; å & amp; & # 229;
& para; & # 182; æ & aelig; & # 230;
· & Middot; & # 183; ç & ccedil; & # 231;
¸ & cedil; & # 184; è & Egrave; & # 232;
¹ & sup1; & # 185; é & eacute; & # 233;
º & ord; & # 186; ê & 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; ñ & nt; & # 241;
 & Acirc; & # 194; ò & ograve; & # 242;
à & Atilde; & # 195; ó & oacute; & # 243;
Ä & Auml; & # 196; ô & ocirc; & # 244;
Å & Amp; 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;
Ï & Iuml; & # 207; ÿ & yuml; & # 255;

Für griechische mathematische Symbole, die in Unicode definiert sind, können numerische Referenzen verwendet werden. Dies wird in der HTML 4-Spezifikation ausführlicher behandelt. Beachten Sie, dass die Kombinationsnamen in Navigator 4 nicht erkannt werden. Daher wird empfohlen, numerische Referenzen zu verwenden.

Verweise auf Fragmente 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 Header, zum Beispiel:

 <h2> Lokale Nachtspots </ h2>

Um die Überschrift zum Zweck der Hypertext-Verbindung zu machen, verwenden Sie den folgenden Code: lt; a name = identifier > .... </a>

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

Das name-Attribut gibt den Namen an, mit dem das Ziel des Links angegeben wird, in diesem Fall "Nacht-Spots". Im Wesentlichen ist es jetzt erlaubt, den folgenden Link aufzunehmen:

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

Das Symbol # vor dem Zielnamen ist erforderlich. Wenn das Ziel des Links in dem Freund der Handlung ist, lege die Webadresse dieses Aktes vor das Symbol #. Wenn sich der Act beispielsweise unter "http://www.bath.co.uk/" befindet, sollte der Link wie folgt bestehen:

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

In Zukunft wird es möglich sein, Linkziele ohne das <a> -Element zu definieren. Die neu erstellte 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 fängt es an, es zu vermeiden. Zum Beispiel, wenn der Programmcode angezeigt wird. 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>

welches in der folgenden Form 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;
  }

Die Farben von Text und Hintergrund werden mit dem Stylesheet festgelegt. Beachten Sie, dass alle Zeilenumbrüche genauso genau wie im HTML-Code generiert werden. Ausnahme ist der Zeilenvorschub unmittelbar nach dem ersten <pre> -Tag, also unmittelbar vor dem end-Tag </ pre> , der nicht berücksichtigt wird. Dies bedeutet, dass das nächste Probenpaar identisch erzeugt wird:

 <pre> formatierter Text </ pre>

 <vor>
 formatierter Text
 </ pre>

In der Regel wird formatierter Text mit einer Schriftart mit gleichem Abstand generiert, in der alle Zeichen die gleiche Breite haben. Wenn Sie die Position des Styles für das pre- Element definieren, verwenden einige Browser die monospaced-Schriftart in keiner Weise, daher sollten Sie definitiv die font-family-Eigenschaft definieren. Wenn Sie beispielsweise möchten, dass alle Elemente von pre in grün dargestellt werden, können Sie die folgende Position des Styles definieren:

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

Wenn Sie die Farbe des Textes festlegen, sollten Sie auch die Hintergrundfarbe einstellen. Dies stellt sicher, dass es keine Situationen gibt, in denen es schwierig ist, die Hintergrundfarbe von der Farbe des Textes zu unterscheiden. Anstatt die Hintergrundfarbe für das pre-Element festzulegen, können Sie diese für das body-Element festlegen, zum Beispiel:

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

Platzieren von Text um Bilder

In HTML können Sie auswählen, ob das 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" verlassen wird , wird das Bild an den linken Rand angehängt. Wenn nach rechts gesetzt , nach rechts. Zum Beispiel:

 <p> <img src = "sun.jpg" alt = "Sonnenuntergangsgrafik"
 width = "32" height = "21" align = "left"> Dieser Text umschließt das Bild nach rechts. </ p>

Es wird so präsentiert:

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

So verwenden Sie align = "right"

 <p> <img src = "sun.jpg" alt = "Sonnenuntergangsgrafik"
 width = "32" height = "21" align = "right"> Dieser Text umschließt das Bild links. </ p>

Es wird so präsentiert:

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

Damit die Texterstellung unter dem angehängten Bild fortgesetzt werden kann, 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 so präsentiert:

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 Becher klicken.

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

Eine solche 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 = "Webdesign">
  <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 einen Verweis auf das Kartenelement an. Dazu wird die Webadresse verwendet, daher wird auch das Symbol # verwendet. Legen Sie für das Attribut border den Wert auf "0" fest, sodass der blaue Rahmen nicht um das Bild herum angezeigt wird.

Das Kartenelement bestimmt, welche Bereiche des Bildes als Referenzen dienen. Das name- Attribut entspricht dem usemap- Attribut des img- Elements, das ebenfalls weitgehend der name-Eigenschaft des <a> -Elements entspricht. In der Praxis wird das Kartenelement gezwungen, in dieser guten Datei zu sein, die auch ein img-Element ist.

Das Flächenelement wird verwendet, um den Bezirk des Bildes zu bestimmen und es auch der Webadresse zuzuordnen. Das Formattribut definiert die Form des Kreises: "rect", "circle" oder "poly". Das Attribut coords bestimmt die Koordinaten des Countys in Abhängigkeit von der Form.

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

Der linke obere Fleck wird als Quelle des Bildes betrachtet, die x-Koordinate ist ebenfalls y gleich Null, die x-Koordinate ist entlang des Kurses nach rechts erhöht, die y-Koordinate ist unten. Die meisten Werkzeuge für die Arbeit mit Bildern ermöglichen es Ihnen, die Koordinaten eines beliebigen Punktes des Bildes zu erfassen.

Wenn sich mehrere Bereiche kreuzen, wird die Priorität dem Bereich zugewiesen, der durch den ersten Schnittpunkt bestimmt wurde (dh die entsprechende Aktion ergibt sich aus dem Mausklick). Um komplexere Zahlen zu erhalten, kann der Anteil des Bezirks inaktiviert werden, indem er über das Attribut nohref mit einem anderen Bezirk überlappt 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 Kreis in einem Kreis mit größerem Durchmesser, der durch das zweite Flächenelement erzeugt wird. Damit ein inaktiver Distrikt eine Wirkung hat, muss er existieren, bis er aktiv ist, andernfalls wird die Priorität zur aktiven Region.

Warum sollten Sie die alt- Eigenschaft verwenden ?

Das Alt- Attribut des Bereichselements wird verwendet, um eine Textreferenz für den Link anzugeben. Ohne dieses Attribut ist die Karte nicht für Personen zugänglich, die die Bilder aus irgendeinem Grund nicht sehen.

Tabellen

Tabellen dienen zur Information auch für die Anordnung von Elementen auf der Seite. Sie können Tabellen zeichnen, um Felder zu füllen, sie auf eine feste Breite setzen oder dem Browser erlauben, die Tabellen automatisch entsprechend ihrer Häufigkeit 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 Attribut border gibt die Dicke des Gesichts in Pixeln an. Das Element tr dient als Container der Tabellenzeile. Die Elemente von th dienen auch als Container für die Header der Datenzellen.

Felder in einer Zelle

Erhöhen Sie die Felder in allen Zellen gleichzeitig, indem Sie das cellpadding- Attribut für das Tabellenelement verwenden. 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 cellpacing- Attribut gibt den Abstand zwischen Zellen an. Legen Sie die Lücke zwischen 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

Sie können die Breite der Tabelle mit dem Attribut width festlegen. Ihr Wert kann entweder eine Breite in Pixeln oder ein Prozentwert sein, der den Prozentsatz des Abstands zwischen dem linken und dem rechten Feld 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 den Text in den Header-Zellen (th) in der Mitte, aber in den Datenzellen (td) nach links. Die Ausrichtung ist mit dem Attribut align möglich , das auf eine Zelle oder eine Zeile (tr-Element) angewendet werden kann. Es kann die Werte "links", "Mitte" (Mitte) oder "rechts" (rechts) enthalten:

 <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 bestimmt exakt die vertikale Ausrichtung des Zelleninhalts. Es wird mit den Werten "top", "middle" oder "bottom" verwendet und kann auch mit jeder Zelle oder Zeile verwendet werden. Standardmäßig ist der Inhalt der Header-Zellen (th) zentriert, aber die Inhalte der Datenzellen sind auch am oberen Rand der Zelle am linken Rand ausgerichtet.

Leere Zellen

Browser verarbeiten 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, legen Sie ein geschütztes Leerzeichen hinein:

 <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 auch 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" benötigt jetzt zwei Zeilen, aber die Überschrift "Verkäufe" - drei Spalten. Dies wird erreicht, indem sowohl die rowspan- Attribute als auch 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 in keiner Weise End-Tags für Zellen sowie 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>

Beachten Sie, dass das Hauptelement in der anderen Zeile sich in einer anderen Spalte befindet, aber nicht in der ersten Spalte, da die Kopfzeile "Jahr" zwei Zeilen belegt.

Tische ohne Grenzen

Solche Tabellen werden häufig zum Formatieren von Seiten und zum Erstellen eines Gitters auf ihnen verwendet. Dazu müssen Sie nur die Eigenschaft border = "0" und cellspacing = "0" zum Tabellenelement hinzufügen:

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 ein Stylesheet verwendet, um eine andere Hintergrundfarbe für die Header-Zellen von Daten festzulegen. Hier sind die Stilpositionen, die 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 zwei Zeilen setzen die Hintergrundfarbe für Zellen, die ebenfalls td sind, entsprechend den angegebenen rot / grün / blauen Farben. Zahlen sollten im Bereich von 0 bis 255 (voll gesättigte Farbe) liegen.

Auf eine andere Weise können Sie Hintergrundfarbe mit dem Attribut bgcolor festlegen . Diese Methode funktioniert in fast allen Browsern und benötigt keine Unterstützung für Stylesheets. Bestimmen Sie zuerst die hexadezimalen Werte der scharlachroten, grünen und blauen Komponenten der Farbe, die Sie verwenden möchten. Der Style Guide enthält 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 in irgendeiner Weise beobachten, ist es schwierig zu verstehen, worum es in dem Wort geht. Es bietet sich an, Informationen zur Zuordnung der Tabellenstruktur anzugeben. Mit dem Titelelement können Sie einen Titel angeben, um ihn auch über oder unter der Tabelle zu platzieren. Das Untertitelelement muss sich später als das 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 wird durch das folgende Markup angegeben:

 <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 diese Blabla-Tabelle, aber das Titelelement hat die Eigenschaft align = "bottom" 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 in keiner Weise anzeigen können. Zum Beispiel: "In der Hauptspalte sind Jahre angegeben, aber in einem anderen - die Ankunft für dieses Jahr."

 <tabellenzusammenfassung = "in der Hauptspalte sind Jahre angegeben, aber in einer anderen - Ankunft für dieses Jahr">

Bestimmen Sie die Beziehung zwischen den Zellen der Header auch der Daten

Wenn die Tabelle auf dem Audiogerät oder auf dem Gerät generiert wird, um das Braille-Alphabet einzuschließen, ist es sinnvoll anzugeben, zu welcher Zelle welche Header gehören. Zum Beispiel kann sich ein Audio-Browser auch nach oben oder nach rechts und nach links entlang der Zellen einer Tabelle mit einer vorangestellten Nachricht vor jeder Zelle des entsprechenden Headers bewegen.

Dazu müssen Sie jede Kopfzeile / Datenzelle mit einer Anmerkung versehen. Die einfachste Möglichkeit besteht darin, den Headerzellen die Eigenschaft scope hinzuzufügen. Es kann mit den folgenden Werten verwendet werden:

  • row : Die Zelle enthält den Titel für die restlichen Elemente der aktuellen Zeile.
  • col : Die Zelle enthält den Titel 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 durch Leerzeichen getrennte Liste von Header-Zellen-IDs anzugeben. Jede Kopfzelle muss die ID- Eigenschaft mit dem entsprechenden Bezeichner besitzen.

Ziehen Sie am Ende das Attribut abbr in Betracht, um Abkürzungen für lange Header zu definieren. Dies erleichtert das Abhören der Header-Listen für Zellen, zum Beispiel:

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

Roll-Overs auch andere Techniken

Ein kleines JavaScript kann die Seite erheblich beleben. So erstellen Sie "Rollovers", zu welchem ​​Zeitpunkt sich das Aussehen des Links ändert, wenn der Mauszeiger darauf platziert wird. Darüber hinaus erfahren Sie, wie Sie zyklische Banner erstellen, mit denen Sie Besucher auf die Websites Ihrer Sponsoren umleiten können

Roll-Overs

Meistens ist Roll-over ein Bild, das als Hypertext-Link dient. Wenn der Mauszeiger diesem Bild gefällt, ändert es sich, um die Aufmerksamkeit auf den Link zu lenken. Sie können beispielsweise einen Leuchteffekt, einen Schatten 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 = "Komm rein wenn du riskierst!"> </a>

und so sieht es aus ...

Komm rein wenn du es riskierst!

Ich habe Bilddaten mit einem lizenzfreien Grafikeditor erstellt und dem Schatten einen Heißwachseffekt hinzugefügt. Mit Hilfe von Suchmaschinen im Internet darf man auch für lizenzfreie Bilder viele Tipps finden.

Banner

Wenn Ihre Seite mehrere Sponsoren besitzt, 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 die gleiche Größe haben. Die entsprechenden Bild-URLs der Websites werden dann in Arrays mit den Namen adImages und adURLs platziert, die in der Quelle des Skripts definiert sind. Das Element img für jeden Link wird gezwungen, vom Hauptbild aus dem Array initialisiert zu werden. Die Schleife beginnt mit dem Onload-Ereignis im body-Element.

 <html> <head> <title> zyklische Banner </ title> <script type = "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;  } function cycleAds () {if (document.images) {if (document.adBanner.complete) {if (++ thisAd == adImages.length) thisAd = 0;  document.adBanner.src = adImages [dieseAnzeige];  }} // das Banner alle 3 Sekunden ändern setTimeout ("cycleAds ()", 3000);  } Funktion gotoAd () {document.location.href = "http: //" + adURLs [thisAd];  } </ script> </ head> <body onload = "cycleAds ()"> ... <a href="javascript:gotoAd()"> <imgname = "adBanner" src = "/ img / site / mit .gif "border =" 0 "alt =" Unsere Sponsoren "> </a> 

Unsere Sponsoren: Unsere Sponsoren

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

Und was ist, wenn Browser Skripte in keiner Weise unterstützen?

Der Inhalt des noscript- Elements wird nur angezeigt, wenn der Browser die Skripts in keiner Weise 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 mit Sponsoren verlinken:

 <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 zu Skripten finden Sie in der Suchmaschinenhilfe.