Neues in der Kategorie Step-by-Step

Obwohl wir uns die ganze Zeit nur um Formulierungen in HTML gekümmert haben, sind wir XHTML doch viel näher als gedacht. So haben wir zum Beispiel die Tags und Attribute immer klein geschrieben, da XHTML diese Kleinschreibung benötigt. Oder wir haben Werte bei Attributen immer in Anführungszeichen gesetzt. All dies bringt uns XHTML schon sehr nahe. Im Prinzip gibt es einfach eine Reihe von Punkten, die zu beachten sind, wenn man von HTML nach XHMTL geht:

  • Ein Container muss in XHMTL immer geschlossen sein. Dies haben wir bislang auch immer getan. Im Prunzip könnte man gewisse Endmarken aber auch weglassen.
  • Einzeltags bzw. Einzelmarken wie <br> müssen mit einem sogenannten Delimiter abgeschlossen sein, z.B. <br/>.
  • Alle Tagnamen und alle Attributnamen müssen kleingeschrieben werden.
  • Attributwerte müssen in Anführungszeichen stehen, z.B. align="left".
  • Attribute dürfen nicht leer sein, sondern müssen immer einen Wert besitzen.
  • Manche Browser ergänzen automatisch das <html>-Element, falls man es vergisst. Bei XHTML ist dieses Element zwingend erforderlich.
  • Der Dokumententyp muss auf alle Fälle angegeben werden (siehe dazu http://www.undertec.de/blog/2010/03/online-htmlkurs-teil-22-dokumententyp-mit-doctype-angeben.html).
  • Der Namensraum muss angegeben werden, dazu gleich mehr.

Wie oben schon erwähnt, muss ein zusätzlicher Namensraum definiert werden. Diese benötigte Namensraumdefinition kommt ursprünglich aus XML, bei der Bezeichner bzw. Markennamen/Tagnamen beliebig gewählt werden können. Um eine korrekte Bezeichnung vorzuschreiben, wird neben dem Dokumententyp noch der Namensraum definiert.

Insgesamt gibt man für XHTML-Dokumente diesen Namensraum wie folgt an:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/shtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>


   </body>
</html>

Dabei wird dem <html>-Tag einfach ein Attribut mitgegeben, nämlich "xmlns" (XML-Namespace). Der Wert dieses Attributs ist für alle XHTML-Dokumente gleich: "http://www.w3c.org/1999/xhtml". Gleichzeitig haben wir damit in obigen Beispiel das erste korrekt geschriebene XHTML-Dokument fabriziert.

Hier noch ein kurzes Beispiel für ein Dokument, welches ganz in XHTML geschrieben ist und schon ein wenig suchmaschinenoptimiert gecoded ist:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
   <head>
      <title>XHTML ist einfach</title>

      <meta name="keywords" content="XHTML, 1.0, einfach"/>
      <meta name="description" content="Dieses Dokument liefert ein Beispiel für ein äußerst einfaches XHTML-Dokument"/>
      <meta name="author" content="Der Autor bin natürlich ich"/>
      <meta name="copyright" content="Das bin auch ich"/>
      <meta name="generator" content="Notepad rockt"/>
      <meta name="robots" content="index, follow"/>
      <meta http-equiv="content-language" content="de">

   </head>

   <body>
 <h1>XHTML ist einfach!</h1>

 <p>In diesem Dokument soll ganz kurz verdeutlicht werden, wie einfach es ist, ein schön konformes einfaches XHTML 1.0 Dokument zu schreiben.</p>
 <p>Beachten sollte man hierbei speziell die Stichpunkte die oben aufgeführt sind, da hier alle zur Anwendung kommen.</p>

 <br/>
 <br/>

 <hr/>
 <p align="right">Copyright by Mir</p>

   </body>
</html>

Noch bevor das eigentliche HTML-Dokument beginnt, kann man dem Browser mitteilen, um welchen Dokumententyp es sich handelt. Mit dieser Deklaration ist es für den Browser einfacher zu entscheiden, ob es sich nun um ein HTML oder ein XHTML-Dokument handelt. Außerdem lässt sich hier auch die DTD-Variante angeben, die entscheidet, auf welches Vokabular innerhalb der Sprache zurückgegriffen wird. Wir haben bislang immer die "strict"-Variante verwendet, bei der alle Browser keine Probleme mit dem Vokabular haben sollten (Zwei winzige Ausnahmen haben wir gemacht, als wir uns mit dem <center>- und dem <font>-Tag beschäftigt haben, diese kommen in der Strict-Variante nicht vor. Möchte man sie verwenden, benötigt man die Transitional-Variante).

Hierzu ein Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"
http://www.w3.org/TR/REC-html40/Strict.dtd">
<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>


   </body>
</html>

In dieser etwas kryptischen Angabe stecken eine ganze Reihe an Informationen.
Zunächst wird mit "!DOCTYPE" der Dokumententyp angegeben, der bei HTML und XHTML-Dokumenten immer "html" ist. Danach kommt das Schlüsselwort "PUBLIC" das angibt, dass es sich hierbei um einen öffentlichen Standard handelt.
Nun folgt in den ersten beiden Anführungsstrichen der sogenannte Public-Identifier, der Aussagen darüber macht, welche Organisation den Standard zur Verfügung stellt, wie er heißt und in welcher Sprache er verfasst ist. Das Minuszeichen bedeutet zunächst, dass die folgende Organisation nicht nach ISO 9070 registriert ist. Danach folgt getrennt durch zwei Forward-Slashes der Name der Organisation "W3C", das World Wide Web Consortium. Dann folgt die Bezeichnung des Standards "DTD HTML 4.0" und zum Schluss die Angabe, dass dieser Standard in Englisch "en" verfasst wurde.
Nach dem Public-Identifier folgt der System-Identifier, der auf die DTD-Ressource (DTD = Dokument-Typ-Definition) als Url verweist.

Außer der Strict-Variante für HTML 4.0 und HTML 4.01, existieren auch noch eine Transitional- und eine Frameset-Variante. In der Strict-Variante werden nur notwendige HTML-Elemente zur Verfügung gestellt. Die Transitional-Variante dient der Abwärtskompatibilität und stellt zusätzliche Präsentationselemente zur Verfügung. Die Frameset-Variante enthält die Möglichkeit stärker mit Frames zu arbeiten. Der HTML-Dokumentenaufbau sieht auch hier leicht anders aus.

Generell empfiehlt es sich immer, mit der Strict-Variante zu arbeiten, da diese am ehesten gewährleistet, dass der Code auch zukunftsfähig bleibt und die Abwärtskompatibilität in Zukunft auch gesichert ist. Nichts desto trotz hier eine kleine Tabelle über die Dokumententypdeklaration für die anderen Varianten:

Sprachvariante Deklaration
HTML 4.01 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Wie oben zu sehen ist, verhält es sich bei XHMTL mit den drei Sprachvarianten ähnlich.

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Mit den <meta>-Tags die ihre Verwendung im Head-Bereich haben, werden spezielle Meta-Informationen über die Seite wie Autor, Stichworte zum Seiteninhalt, etc. angegeben. Dabei sind die Informationen weniger für den Benutzer gedacht, sondern viel eher für spezielle Programme wie Suchmaschinen oder Intranet-Anwendungen. Die Meta-Informationen sind für den normalen Nutzer nur im Quelltext lesbar und werden vom Browser ansonsten nicht dargstellt. Außer den Informationen, können sich in den Meta-Einträgen aber auch Anweisungen für den Browser befinden, dazu später aber mehr.

Erst einmal ein Beispiel für die Informationen, die man in den Meta-Angaben hinterlegen kann:

<html>
   <head>
      <title>Dies ist der Titel</title>

      <meta name="abstract" content="Hier steht so etwas wie eine Überschrift">
      <meta name="audience" content="Hier wird die Zielgruppe der Leser der Seite benannt">
      <meta name="author" content="Hier steht der Autor">
      <meta name="copyright" content="Hier steht der Urheber oder Rechteinhaber">
      <meta name="date" content="Veröffentlichungsdatum">
      <meta name="description" content="Hier kommt eine ausführliche Beschreibung des Seiteninhalts">
      <meta name="generator" content="Hier kann man reinschreiben, mit welchem Editor die Seite erstellt wurde">
      <meta name="keywords" content="Hier kommen die Schlüsselwörter der Seite nach  Wichtigkeit und kommagetrennt rein">
      <meta name="publisher" content="Hier kann derjenige stehen, der die Seite veröffentlicht hat">
      <meta name="revisit-after" content="Hier kann man eine Zeitangabe reinschreiben, wann die Suchmaschine wieder vorbeikommen soll">
      <meta name="robots" content="">

      <meta name="Zusatinfo" content="Diese Meta-Tag wurde mit freiem Inhalt gestaltet">

   </head>

   <body>

   Diese Seite enthält alle wichtigen Meta-Angaben.

   </body>
</html>

In obigen Beispiel werden zwei Attribute benutzt, um die Meta-Angaben zu machen.

Zum einen das name-Attribut, welches den Namen der Meta-Informationen, die folgen, angibt. Diese Namen kann im Prinzip jeder festlegen wie er will. Allerdings gibt es eine Reihe von Namen, die eigentlich von allen verwendet werden. Diese Namen und die damit verbundenen Informationen sind als großer Block in obigem Beispiel zusammengefasst. Beachten sollte man dabei, dass alles kleingeschrieben wird, da das name-Attribut Groß- und Kleinschreibung berücksichtigt.
Darunter folgt eine Meta-Angabe die selbst definiert worden ist. Welche Meta-Angaben man verwendet oder auch nicht, kann jeder selbst entscheiden.

Das andere Attribut ist das content-Attribut. Wie der Name schon sagt, ist der Wert des Attributes der Inhalt, der in Verknüpfung mit den name-Attribut wiedergegeben werden soll.

Im Beispiel oben ist noch eine Sache wichtig, nämlich die "name=robots"-Angabe, die leer gelassen wurde. Im Gegensatz zu den anderen Meta-Angaben, bei denen jede Suchmaschinen selbst entscheiden kann, was sie berücksichtigt, berücksichtigen fast alle Suchmachinen dieses Attribut.
Mit ihm kann nämlich angegeben werden, ob die Seite indiziert werden soll oder ob zum Beispiel Links nachgegangen werden soll. In nachfolgender Tabellen stehen entsprechende Wertepaare:

Wert Beschreibung
content="index, follow" Indizieren und Links folgen
content="index, nofollow" Indizieren und Links NICHT folgen
content="noindex, nofollow" NICHT indizieren und Links NICHT folgen
content="noindex, follow" NICHT indizieren aber Links folgen
content="noarchive, nosnippets" NICHT Archivieren und KEINE Seitenauszüge wiedergeben (nur Google)

Neben all diesen Informationen kann aber wie oben schon erwähnt auch Anweisungen geben:

<html>
   <head>
      <title>Dies ist der Titel</title>

      <meta http-equiv="cache-control" content="no-cache">
      <meta http-equiv="content-language" content="de">
      <meta http-equiv="content-script-type" content="text/javascript">
      <meta http-equiv="content-style-type" content="text/css">
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
      <meta http-equiv="expires" content="Mon, 01 Jan 2099 00:00:00 GMT">
      <meta http-equiv="pragma" content="no-cache">
      <meta http-equiv="refresh" content="0; URL=http://www....">

   </head>

   <body>

   Diese Seite enthält alle wichtigen Meta-Angaben, die als Erweiterung des HTTP-Headers gesehen werden können.

   </body>
</html>

Anstatt des name-Attributs wird nun das http-equiv-Attribut eingesetzt. In Kombination mit entsprechendem Inhalt, kann man gewisse Schalterchen im HTTP-Protokoll oder im Browser umlegen.

Eine Beschreibung der Schalter findet sich in folgender Tabelle:

http-equiv Wert Beschreibung
cache-control no-cache Verbietet das Zwischenspeichern
content-language z.B. de Gibt die Sprache des Inhalts an
content-script-type z.B. text/javascript Gibt an welcher Skript-Typ global verwendet wird
content-style-type z.B. text/css Gibt an, welche Sytlesheet-Sprache eingesetzt wird
content-type Z.B. text/html; charset=ISO-8859-1 Gibt an in welchem Zeichensatz der Inhalt der Seite ist
expires z.B. Mon, 01 Jan 2099 00:00:00 GMT Nach diesem Datum wird das Dokument beim Besuch nicht aus dem Zwischenspeicher des Browsers gelesen
pragma no-cache Verbietet das Zwischenspeichern auf Proxy-Servern
refresh Zeit in Sekunden, eventuell Webadresse Zwingt den Browser zum Neuladen der Seite nach x Sekunden, oder zum Wechsel auf eine andere Seite nach x Sekunden

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Mit dem <div>-Tag lassen sich Blockcontainer definieren. Dabei werden aber anders als beim <p>-Tag keine Absätze oder ähnliches gemacht. Das <div>-Tag dient also nur dazu, die Seiteninhalte in Blöcke einzuteilen. Das <div>-Tag wird später wenn wir zu CSS kommen noch eine sehr wichtige oder sogar die zentrale Rolle bei der Seitengestaltung spielen.

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <div id="ersterblock">
   Dieser Seiteninhalt bildet einen logischen Block.
   </div>

   <div id="zweiterblock" align="center">
   Dieser Seiteninhalt bildet den nächsten Block.
   </div  

   </body>
</html>

Obwohl das <div>-Tag den Inhalt nur logisch zusammenfassen soll, kann man ihm mittels des align-Attributs eine Ausrichtung des Inhalts mitteilen: right (rechts), left (links), center (zentriert) oder justify (blocksatzmäßig).

Ein weiteres nützliches Attribut ist das id-Attribut mit dem man die Blöcke benennen kann. Diese Benennung spielt nachher bei CSS noch eine wichtige Rolle, da wir so die Gestaltung eines Blocks direkt an einen einzelnen Block binden können.

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Skripte haben oft die Aufgabe interaktiv mit einem Nutzer zu interagieren, was einer normalen Webseite so nicht vergönnt ist. Die einzige Interaktion die eine Webseite beherrscht, ist das zur Verfügung stellen von Links und Inhalten. Ein Skript hingegen kann in der Lage sein, mit dem Benutzer zu kommunizieren, zum Beispiel beim Aufruf eines Formulars oder einer interaktiven Anwendung, die wie ein normales Programm funktionieren kann.

Als Skriptsprache wird eigentlich immer Javascript eingesetzt, welche sich aber in vielen Teilen von der Programmiersprache Java unterscheidet (siehe dazu auch http://de.wikipedia.org/wiki/JavaScript#Entwicklung).

Eine andere Möglichkeit interaktiv zu werden, besteht natürlich in der Möglichkeit CGIs einzusetzen, welche über Formulare, Meta-Angaben, Links oder Server-Side-Includes aufgerufen werden können (siehe dazu http://de.selfhtml.org/servercgi/cgi/cgihtml.htm#cgi_aufrufe). Hierfür werden oft Programmiersprachen wie Perl oder PHP eingesetzt. Diese unterscheiden sich aber grundlegend vom Einsatz von Java-Script, da sie nicht über das <script>-Tag aufgerufen werden.

Um ein Skript einzubinden, kann man folgendermaßen vorgehen:

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <script type="text/javascript">

 QUELLCODE

   </script>

   </body>
</html>

Dabei steht zwischen der Start- und Endmarke der Quellcode in Java-Script geschrieben. Verwendet wurde hierbei das type-Attribut, in welchem angegeben wird, in welcher Sprache der Quellcode vorlegt. In Unserem Fall liegt der Quellcode als ASCII-Text vor und ist in Java-Script geschrieben.

Ein weiteres Attribut, welches im Beispiel nicht verwendet wird, ist das defer-Attribut. Es gibt an, ob das Skript Output an das HTML-Dokument zurückliefert oder nicht. Liefert es keine Ausgabe, so kann der Browser die Ausführung aufschieben. Die beiden Werte für dieses Attribut sind "false" (das Script wird sofort ausgewertet) und "true" (die Auswertung wird aufgeschoben).

In obigen Beispiel wurde das Script im body-Bereich eingebunden. Es kann aber genauso gut auch im Head-Container untergebracht werden.

Eine andere Alternative Skripte einzubinden, bietet folgende Möglichkeit:

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <script type="text/javascript" src="script.js"></script>

   </body>
</html>

In diesem Beispiel wird ein Skript eingebunden, welches als gesonderte Datei auf dem Server liegt. Dies hat den Vorteil, dass man den Code innerhalb der Datei mehrmals einsetzen kann, ohne dass man in immer wieder in das HTML-Dokument schreiben muss. Auch kann man so externe Skripte aufrufen, die zum Beispiel als Analyse-Werkzeuge für die eigene Homepage dienen können (z.B. Statistiktools wie Google Analytics).

Sollten Skripte einmal vom Browser nicht unterstützt werden, so kann man sich mit dem <noscript>-Tag behilflich sein:

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <script type="text/javascript" src="script.js"></script>

   <noscript>Ihr Browser unterstützt dieses Skript nicht!</noscript>

   </body>
</html>

Dabei muss man zwischen zwei Fällen unterscheiden. Einmal kann der Browser gar keine Skripte ausführen, dann werden alle <noscript>-Container im Dokument angezeigt. Ein anderer Fall stellt sich dar, wenn der Browser nur eine bestimmte Skriptsprache nicht beherrscht, dann wird der nachfolgende <noscript>-Container dargestellt.

Im Gegensatz zum <script>-Tag, darf das <noscript>-Tag nicht im head-Bereich stehen.

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Wenn man gewisse Sonderzeichen wie > oder < in HTML darstellen will, so stößt man schnell an eine Grenze. Diese beiden Zeichen werden nämlich als Steuerzeichen für die Umrahmung eines Tags / einer Marke verwendet.

Um dieses Problem zu vermeiden, kann man sogenannte Entitäten verwenden. Diese Entitäten stellen sogenannte Stellvertreter für andere Objekte, in diesem Fall Sonderzeichen, dar.

In HTML gibt es zwei verschiedene Arten von Entitäten. Erstens benannte Entitäten (named entities) und zweitens Unicode-Entitäten. Die benannten Entitäten haben einen Namen, wohingegen die Unicode-Entitäten über den entsprechenden Unicode-Wert aufgerufen werden. Das Schema des Aufrufs ist dabei gleich:

&NAME_DER_ENTITÄT;

Hier ein paar Beispiele für wichtige Entitäten:

Zeichen Beschreibung Name in HTML Unicode in HTML
" Anführungszeichen oben &quot; &#34;
& Ampersand-Zeichen, kaufmännisches Und &amp; &#38;
< öffnende spitze Klammer &lt; &#60;
> schließende spitze Klammer &gt; &#62;

Weitere Entitäten findet man bei Selfhtml.org: http://de.selfhtml.org/html/referenz/zeichen.htm

Wer mehr über Entitäten in der Informatik wissen will, kann sich bei Wikipedia schlau machen:
http://de.wikipedia.org/wiki/Entit%C3%A4t_(Informatik)

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Clientseitige Imagemaps sind meistens Bilder in denen einzelne Regionen oder Bildausschnitte angeklickt werden können und hinter denen sich ein Link verbirgt.

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <center><h1>Bitte auf Berlin oder München klicken</h1></center>

   <img src="" usemap="#Karte">

   <map name="Karte">
   <area accesskey="b" alt="Berlin" href="
http://de.wikipedia.org/wiki/Berlin" target="_blank" shape="rect" coords="379, 212, 399, 232">
   <area accesskey="m" alt="München" href="
http://de.wikipedia.org/wiki/M%C3%BCnchen" target="_blank" shape="poly"coords="280, 555, 330, 555, 330, 590, 400, 590, 400, 620, 280, 620">
   <area accesskey="k" alt="Köln" href="
http://de.wikipedia.org/wiki/K%C3%B6ln" target="_blank" shape="circle"coords="67, 347, 20">
   </map>

   </body>
</html>

Und so siehts aus:

Bitte auf Berlin oder München klicken

Deutschland_topo_klein.jpgBerlinMünchenKöln

Dabei wird mit dem <img>-Tag ein Bild eingebunden, welches über das Attribut "usemap" mit dem <map>-Tag verbunden ist. Der Name sollte deswegen auch identisch sein, wobei das Attribut "usemap" für den Namen ein führendes # benötigt, welches beim <map>-"name"-Attribut nicht benötigt wird.

Innerhalb des <map>-Containers werden dann mit dem <area>-Tag die anklickbaren Ausschnitte definiert, wobei das <area>-Tag keine Endmarke besitzt und alle wichtigen Angaben als Attribute angegeben werden.

Das erste Attribut "accesskey" legt ein Tastenkürzel fest, mit dem man per Tastatur den gewünschten Bereich anwählen kann, falls keine Maus zur Verfügung steht. Dabei wird ein einzelnes Tastaturzeichen verwendet, so dass man dann mit "ALT"+"Tastaturzeichen" dem gewünschten Link folgen kann.

Mit dem Attribut "alt" kann man einen alternativen Text hinterlegen, falls kein Bild angezeigt werden kann.

Mit "href" kann man ein Linkziel definieren. Verwendet wird es hier genauso wie in Teil 5. Hat man einen aktiven Bereich der kein Linkziel enthalten soll, so wird das Attribut "nohref" mit dem gleichnamigen Wert "nohref" verwendet.

Ein weiteres Attribut ist "target", welches ebenfalls in Kapitel 5 zum ersten mal im Einsatz war und mit dem definiert werden kann, ob zum Beispiel ein neues Browserfenster geöffnet werden soll. Erlaubt Werte sind "_self", "_parent", "_top" oder "_blank".

Zum Schluss kommen die beiden wichtigsten Attribute: "shape" und "coords".

Mit "shape" wird die Form des anklickbaren Bereiches festgelegt. Die wichtigsten Werte für das Attribut "shape" (zu dt. Form) sind "rect" (Rechteck), "circle" (Kreis) und "poly" (Polygon). Hat man mit "shape" sich für eine Form entschieden, so kann man mit "coords" dann den gewünschten Bereich in Koordinaten angeben. Dabei ist die Koordinatenangabe abhängig von der Form des Bereiches.
Ist die Form rechteckig, so werden die Koordinaten so angegeben: coords="x_linksoben, y_linksoben, x_rechtsunten, y_rechtsunten".
Ist die Form kreisförmig, so werden die Koordinaten wie folgt angegeben: coords="x_mittelpunkt, y_mittelpunkt, pixel_radiuswert".
Ist die Form ein Polygon (ein Vieleck), so werden die Koordinaten wie folgt angegeben: coords="x_p1, y_p1,x_p2, y_p2, ... ,x_pN, y_pN".
Die Angabe aller Koordinaten erfolgt in Pixel.

PS: Die Deutschlankarte ist aus dem Medienarchiv Wikimedia Commons und steht unter der GNU Free Documentation License.

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Manchmal möchte man den Inhalt seiner HTML-Seite mit einer Trennlinie abgrenzen. Mit dem <hr>-Tag kann man dabei eine horizontale Linie ziehen.

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <hr>

   </body>
</html>

Und so siehts aus:


Besonderheit an <hr> ist wie beim Zeilenumbruch mit <br>, dass der Container nur aus der Startmarke und damit aus einem einzelnen Tag besteht. Wichtige Attribute von <hr> sind "align", "size", "width" und "noshade".

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <hr align="right" width="30%">

   <hr size="8">

   <hr noshade="noshade">

   </body>
</html>

Und so siehts aus:




Mit "align" kann man die Ausrichtung der Trennlinie festlegen (natürlich darf sie dann nicht über den ganzen Bildschirm reichen). Erlaubte Werte sind "left", "middle" und "right". Das Attribut "width" legt die Breite der Trennlinie fest. Erlaubte Werte sind entweder eine Pixelangabe oder aber eine prozentuale Angabe.
Mit "size" lässt sich die Dicke der Trennlinie festlegen. Dabei sind erlaubte Werte Pixelwerte.
Zum Schluss wird noch "noshade" verwendet, mit dem mit der Wertangabe "noshade" festlegen kann, ob ein 3D-Schatten der Trennlinie gezeigt oder nicht gezeigt werden soll.

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Nachdem der Weihnachts- und Neujahresstress rum ist und hoffentlich jeder seine Bilanzen, Steuererklärungen und Inventuren durchgeführt hat, fahren wir fort mit dem Online-HTML-Kurs.

Im folgenden wollen wir uns den Elementen widmen, die innerhalb einer Tabelle und damit des <table>...</table>-Containers vorkommen können.

Zunächst schauen wir uns die Elemente <thead>, <tbody> und <tfoot> an. Mit diesen Elementen ist es möglich, wenn man es möchte, seine Tabelle in 3 Teile zu unterteilen. Und zwar in einen Tabellenkopf, einen Tabellenkörper und einen Tabellenfuß.

Im folgenden Beispiel kann man sehen wie die drei Tags verwendet werden können:

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <table border="2">
   <thead><tr><td>Vorname</td><td>Name</td></tr></thead>
   <tbody><tr><td>Karl-Michael</td><td>Dosenwurst</td></tr>
          <tr><td>Lisa-Roberta</td><td>Mülleimer</td></tr></tbody>
   <tfoot><tr><td>Lustige Namen</td></tr></tfoot>
   </table>

   </body>
</html>

Und so siehts aus:

Vorname Name
Karl-Michael Dosenwurst
Lisa-Roberta Mülleimer
Lustige Namen

Möchte man auf diese Art und Weise seine Tabelle unterteilen, so sollte man stets berücksichtigen, dass man immer alle drei Elemente verwenden sollte. Sinn und Zweck der Geschichte ist eigenlich, dass zum Beispiel Tabellenkopf und Tabellenfuß immer sichtbar sind, der Tabellenkörper aber nur einen Ausschnitt der Tabelle zeigt und der Rest durch "Scrollen" angezeigt werden kann.

Auch <thead>, <tbody> und <tfoot> haben eigene Attribute. Die beiden wichtigsten sind "align" für die horizontale Ausrichtung und "valign" für die vertikale Ausrichtung des Zelleninhalts. Die möglichen Werte für "align" sind: "left", "center", "right" und "justify". Für "valign" sind die möglichen Werte: "top", "middle", "bottom" und "baseline".

Viel wichtiger als diese drei Elemente sind allerdings die nächsten drei: <td>, <th> und <tr>. <td> und <tr> haben wir schon im letzten Kapitel kennengelernt. Nun wollen wir uns anschauen, wie wir diese beiden Elemente mit Attributen ausstatten können, um so die Zeilen und die einzelnen Zellen zu manipulieren.

Zunächst wollen wir uns anschauen wie wir das <tr>-Tag manipulieren können:

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <table border="2">
   <tr><td>Vorname des Mitarbeiters</td><td>Nachname des Mitarbeiters</td></tr>
   <tr align="middle" valign="right" bgcolor="#00FF00"><td>Karl-Michael</td><td>Dosenwurst</td></tr>
   </table>

   </body>
</html>

Und so siehts aus:

Vorname des Mitarbeiters Nachname des Mitarbeiters
Karl-Michael Dosenwurst

Die drei wichtigsten Attribute für <tr> haben wir hier verwendet. Für die horizontale Ausrichtung mit "align" kann man die gleichen Werte wie für <thead>, <tbody> und <tfoot> einsetzen. Das gleiche gilt für die vertikale Ausrichtung mit "valign". Zusätzlich können wir noch mit "bgcolor" eine Hintergrundfarbe definieren. Der Link zu den Farbtabellen befindet sich im dritten Kapitel.

Außer dem <tr>-Tag hat auch das <td>-Tag, welches eine einzelne Zelle generiert, einige Attribute. Dazu gehören zum Einen die gleichen wie bei <tr>, nämlich "align", "valign" und "bgcolor" und zum Anderen "height", "width", "nowrap", "colspan" und "rowspan". Es gibt noch eine Reihe anderer Attribute die dem W3C-Standard entsprechen, welche aber eher selten benutzt werden.

Mit den Attributen "height" und "width" kann man in Pixel oder Prozent angeben wie groß eine Zelle werden soll:

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <table border="2">
   <tr><td height="50" width="300">Zelle 1</td><td>Zelle 2</td></tr>
   <tr><td>Zelle 3</td><td>Zelle 4</td></tr>
   </table>

   </body>
</html>

Und so siehts aus:

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Die Prozentangabe bezieht sich natürlich wie bereits erwähnt auf die Breite des übergeordneten Containers.

Mit dem Attribut "nowrap" kann man verhindern, dass der Browser den Inhalt einer Tabellenzelle automatisch umbricht. Erlaubter Wert hierfür ist "nowrap" (Ja der Wert heißt genau gleich wie das Attribut).

Mit den Attributen "colspan" und "rowspan" kann man Zellen wie in Excel verbinden. "colspan" verbindet dabei Zellen in Zeilen und "rowspan" verbindet Zellen in Spalten:

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <table border="2">
   <tr><td>Zelle 1</td><td colspan="3">Zelle 2</td><td>Zelle 3</td><td>Zelle 4</td></tr>
   <tr><td rowspan="2">Zelle 5</td><td>Zelle 6</td><td>Zelle 7</td><td>Zelle 8</td></tr>
   <tr><td>Zelle 9</td><td>Zelle 10</td><td>Zelle 11</td><td>Zelle 12</td></tr>
   <tr><td>Zelle 13</td><td>Zelle 14</td><td>Zelle 15</td><td>Zelle 16</td></tr>
   </table>

   </body>
</html>

Und so siehts aus:

Zelle 1 Zelle 2 Zelle 3 Zelle 4
Zelle 5 Zelle 6 Zelle 7 Zelle 8
Zelle 9 Zelle 10 Zelle 11 Zelle 12
Zelle 13 Zelle 14 Zelle 15 Zelle 16

Die Werte die die beiden Attribute annehmen dürfen sind einfach, wie im Beispiel zu sehen, ganze Zahlen. Berücksichtigen sollte man aber, dass andere Zellen einfach nach rechts verschoben werden. Lässt man diese Weg, so erhält man ein schönes Gesamtbild:

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <table border="2">
   <tr><td>Zelle 1</td><td colspan="3">Zelle 2</td></tr>
   <tr><td rowspan="2">Zelle 5</td><td>Zelle 6</td><td>Zelle 7</td><td>Zelle 8</td></tr>
   <tr><td>Zelle 9</td><td>Zelle 10</td><td>Zelle 11</td></tr>
   <tr><td>Zelle 13</td><td>Zelle 14</td><td>Zelle 15</td><td>Zelle 16</td></tr>
   </table>

   </body>
</html>

Und so siehts aus:

Zelle 1 Zelle 2
Zelle 5 Zelle 6 Zelle 7 Zelle 8
Zelle 9 Zelle 10 Zelle 11
Zelle 13 Zelle 14 Zelle 15 Zelle 16

Zu guterletzt fehlt noch das <th>-Tag, welches genauso eingesetzt werden kann wie das <td>-Tag. Der einzige Unterschied besteht darin, dass das <th>-Tag eher für Spaltenüberschriften eingesetzt werden sollte.

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Tabellen sind im Vergleich zu anderen HTML-Elementen etwas schwieriger zu verstehen, da es innerhalb des <table>-Containers noch viele weitere Elemente zur Konstruktion einer schönen Tabelle gibt.

Eine sehr einfache Tabelle mit 4 Zellen aufgeteilt auf 2 Spalten und 2 Zeilen sieht dann wie folgt aus:

<html>
   <head>
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <table>
   <tr><td>Zelle 1</td><td>Zelle 2</td></tr>
   <tr><td>Zelle 3</td><td>Zelle 4</td></tr>
   </table>

   </body>
</html>

Und so siehts aus:

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Man kann an diesem Beispiel schon relativ leicht sehen, dass man eine Reihe anderer Elemente benötigt um Tabellenzeilen (<tr>) und Tabellenzellen (<td>) zu definieren. Dazu aber später mehr. Zunächst kümmern wir uns um die Attribute, die mit dem <table>-Tag einhergehen.

Das erste Attribut ist "bgcolor" mit dem sich die Hintergrundfarbe der Tabelle ändern lässt. Die Angabe der RGB-Farben wird wieder über Hex-Werte vorgenommen, siehe dazu auch Teil 3.
Das nächste Attribut ist "border" mit dem um die Tabelle ein Rahmen gezogen werden kann. Dabei sind die erlaubten Werte Zahlen, die die Pixelstärke und damit die Dicke des Rahmens
bestimmen. Ist der Wert auf der Standardeinstellung "0", so wird überhaupt kein Rahmen angezeigt. Steht eine andere Zahl bei "border", so wird nicht nur ein Rahmen um die Tabelle gezogen, sondern auch um die einzelnen Zellen.
Um die Breite der gesamten Tabelle festzulegen, steht uns das Attribut "width" zu Verfügung. Hier sind die erlaubten Werte entweder eine Pixelangabe, die somit der Tabelle eine feste Breite zuordnen oder eine Prozentangabe (mit Prozentzeichen), die sich auf die Breite des übergordneten Containers beziehen (Zum Beispiel wenn direkt unterhalb des <body>-Tags eine Prozentangabe erfolgt, so wird die Bildschirmbreite bzw. die Breite des Browserfensters als Maßstab genommen).

Die drei Attribute kann man zum Beispiel so verwenden:

<html>
   <head
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <table bgcolor="#00FF00" border="2" width="100%">
   <tr><td>Zelle 1</td><td>Zelle 2</td></tr>
   <tr><td>Zelle 3</td><td>Zelle 4</td></tr>
   </table>

   </body>
</html>

Und so siehts aus:

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Außer den drei Attributen für Hintergrundfarbe, Umrandung und Breite gibt es noch eine Reihe weiterer Attribute die wichtig bei Tabellen sind. So zum Beispiel "cellspacing" und "cellpadding".

Mit "cellspacing" kann man den Abstand zwischen den Zellen festlegen; es entsteht ein Leerraum zwischen den einzelnen Zellenblöcken. Den Wert den "cellspacing" bekommt, kann entweder in Prozent oder in Pixel gemacht werden.

<html>
   <head
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <table border="2" cellspacing="10">
   <tr><td>Zelle 1</td><td>Zelle 2</td></tr>
   <tr><td>Zelle 3</td><td>Zelle 4</td></tr>
   </table>

   </body>
</html>

Und so siehts aus:

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Nachdem wir nun den Außenabstand der Zellen festgelegt haben, lässt sich nun noch der Innenabstand festlegen. Dies geschieht mit "cellpadding". Mit diesem Attribut kann man bestimmen wieviel Zwischenraum zwischen Inhalt und Zellwand gemacht werden soll. Auch hier erfolgt die Wertangabe in Prozent oder in Pixel.

<html>
   <head
      <title>Dies ist der Titel</title>
   </head>

   <body>

   <table border="2"  cellpadding="10">
   <tr><td>Zelle 1</td><td>Zelle 2</td></tr>
   <tr><td>Zelle 3</td><td>Zelle 4</td></tr>
   </table>

   </body>
</html>

Und so siehts aus:

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Auch für Tabellen gibt es noch eine Reihe weiterer Attribute, welche wir aber nicht verwenden wollen, da sie als Standard vom W3C nicht unterstützt werden und nur von einzelnen Browsern verwendet werden. Eine Ausnahme hiervon gibt es noch, nämlich die Attribute "frame" und "rules", die durch verschiedene Werte, verschiedene Linien des Rahmens entweder aus- oder einblenden. Die Verwendung findet man bei Selfhtml.org beschrieben.

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Über dieses Archiv

Diese Seite enthält aktuelle Einträge der Kategorie Step-by-Step.

SSH ist die vorherige Kategorie.

Suchmaschinen ist die nächste Kategorie.

Aktuelle Einträge finden Sie auf der Startseite, alle Einträge in den Archiven.

Juli 2013

So Mo Di Mi Do Fr Sa
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Etter EDV- und IT-Dienstleistungen
Powered by Movable Type 5.04

Google Werbung:

Google Werbung: