Dezember 2009 Archive

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.

Seit geraumer Zeit versucht eBay seine Kunden vor überhöhten Versandkosten zu schützen. Dass dies ein nobles Ziel darstellt, möchte wohl niemand in Frage stellen, auch wenn man sich fragen kann, ob nicht "der Markt" und damit der Käufer das alleine regelt, denn wer will schon überhöhte Versandgebühren bezahlen?

Viel wahrscheinlicher ist, dass eBay gemerkt hat, wieviel Geld Ihnen hier verloren geht, da keine Gebühren auf die Versandkosten anfallen. Und dass Sie mit Ihren Einschränkungen über das Ziel hinausgeschossen sind, zeigt folgendes Beispiel:

Zunächst sollte man wissen, dass eBay Kategorien eingefüht hat, in denen generell versandkostenfrei versendet werden muss. Dies mag für Händler sinnvoll sein, nicht aber für Benutzer die von Privat-an-Privat versteigern. So muss man zum Beispiel in der Kategorie Computer -> Multimedia alle Produkte versandkostenfrei versenden. Dass hier auch alte ISA-Soundkarten drunterfallen, wird von eBay ignoriert. Aber dies ist nur eines von vielen Negativ-Beispielen. Eine Kategorienliste findet sich am Ende des Artikels unten bei den Links, bei der man Nachlesen kann, welche Kategorien betroffen sind.

Zusätzlich kommt hinzu, dass für Privatpersonen auch Verpackungskosten anfallen, die durch diese Versandkosten-Politik nicht mehr abgedeckt sind.

Wie lange sich eBay mit diesem Privat-Kunden feindlichen Verhalten noch über Wasser halten kann, bleibt fraglich. Von einer Auktionsplattform zu einer Angebotsplattform wie Amazon zu werden, wird eBay wohl kaum mehr packen. Und ob die Händler sich über alle neuen Regelungen so freuen, bleibt ebenfalls fraglich.

Dass es mit eBay schon länger Berg ab geht, sieht man an diesen Einträgen:
eBay: Interessenschutz statt Käuferschutz?
eBay auf Abwegen

Link zu den maximalen Versandgebühren bei eBay:
http://pages.ebay.de/help/pay/maximum_shippingcosts.html

Außer Bildern, Links und Tabellen kann man auch Listen in HTML verwenden. Dabei muss man zwischen einer geordneten und einer ungeordneten Liste unterscheiden, wobei der Unterschied hauptsächlich in der Darstellung der Aufzählung liegt. Aber zunächst ein Beispiel für eine ungeordnete Liste:

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

   <body>

   <ul>
   <li>Erstes Listenelement</li>
   <li>Zweites Listenelement</li>
   </ul>

   </body>
</html>

Die ungeordnete Liste wird durch einen Container mit dem <ul>-Tag erzeugt. Innerhalb dieses Containers beginnt dann die eigentliche Aufzählung. Diese Aufzählung wird mit einem weiteren Container vorgenommen, nämlich mit dem <li>-Tag, welches nur innerhalb von Listenumgebungen verwendet werden darf. Diese Art von Liste nennt man ungeordnet, da die Aufzählung anhand von Symbolen vorgenommen wird. Diese Symbole sind über die Attribute einstellbar, wie im folgenden Beispiel zu sehen:

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

   <body>

   <ul type="circle">
   <li>Erstes Listenelement</li>
   <li>Zweites Listenelement</li>
   </ul>

   </body>
</html>

Mit der Angabe des "type"-Attributs kann man das Aufzählungssymbol verändern. Erlaubte Werte sind "disc" (Standardeinstellung), "circle" und "square". Die fertige Liste sind dann wie folgt aus:

  • Erstes Listenelement
  • Zweites Listenelement

Eine geordnete Liste zählt ihre Elemente nicht durch Symbole, sondern durch Zahlen oder Buchstaben auf. Dabei verwenden wir statt dem <ul>-Tag einfach das <ol>-Tag:

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

   <body>

   <ol type="a" start="2">
   <li>Erstes Listenelement</li>
   <li>Zweites Listenelement</li>
   </ol>

   </body>
</html>

Wie oben zu sehen ist, kann das "type"-Attribut nun andere Werte annehmen. Hier wird nun die Art der Aufzählung festgelegt. Erlaubte Werte sind "1", "a", "A", "i" und "I" also Zahlen, Buchstaben und römische Zahlen. Ein Attribut was nun noch hinzugekommen ist, ist das "start"-Attribut mit dem angegeben werden kann, mit welcher Nummer oder ab welchem Buchstaben die Aufzählung beginnen soll.

Das Beispiel für die geordnete Liste sieht dann so aus:

  1. Erstes Listenelement
  2. Zweites Listenelement

Das <li>-Tag verfügt selbst über zwei Attribute, nämlich "type" und "value". Das "type"-Attribut darf alle Werte annehmen, die wir bei der ungeordneten und der geordneten Liste aufgeführt haben. Für das "value"-Attribut gilt das gleiche wie für das "start"-Attribut bei der geordneten Liste. Sinn und Zweck der eigenen Attribute beim <li>-Tag ist einfach, dass man innerhalb einer Liste einen Listenpunkt nach belieben aufzählen kann.

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Mit dem <p>-Tag kann man einen logischen Textabsatz schaffen, um sein Dokument besser strukturieren zu können. Dabei wird ober- und unterhalb des Containers ein kleiner Abstand gelassen. Da das <p>-Tag ein sogenanntes Blockelement ist, kann es nicht wie andere Containerelemente oder sogenannte Inlineelemente geschachtelt werden, auch nicht mit anderen Blockelementen. Generell dienen Blockelemente, wie der Name schon sagt dazu, logische Blöcke innerhalb des Dokumentes zu definieren. Wir werden später noch weitere Blockelemente oder Blockcontainer wie <div> und <blockquote> kennenlernen.

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

   <body>

   <p>Erster Blockabsatz</p>
   <p align="center">Zweiter zentrierter Blockabsatz</p>

   </body>
</html>

Blockelemente wie das <p>-Tag verfügen über das Anordnungsattribut "align", das die horizontale Ausrichtung bestimmt. Erlaubte Werte sind wie bei den <hX>-Elementen "left", "right", "center" und "justify".

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Generell kann man Text auf zwei Arten kursiv und fett darstellen. Einmal mit den beiden Tags <i> (italic) und <b> (bold) oder mit <em> (emphasized) und <strong> (stark betont). Optisch gesehen bewirken beide Arten das Gleiche, nämlich dass der Textinhalt kursiv bzw. fett dargestellt wird. Praktisch aber empfiehlt es sich <em> und <strong> zu verwenden, da sogenannte Screenreader (Bildschirmleseprogramme) diese beiden Tags erkennen und beim Vorlesen entsprechend hervorheben.

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

   <body>

   <b>Dieser Text ist fett mit dem b-Tag</b><br>
   <strong>Dieser Text ist fett mit dem strong-Tag</strong><br>

   <i>Dieser Text ist kursiv mit dem i-Tag</i><br>
   <em>Dieser Text ist kursiv mit dem em-Tag</em>

   </body>
</html>

Das Beispiel sieht dann wie folgt aus:

Dieser Text ist fett mit dem b-Tag
Dieser Text ist fett mit dem strong-Tag
Dieser Text ist kursiv mit dem i-Tag
Dieser Text ist kursiv mit dem em-Tag

Was ein Screenreader ist und warum barriererfreies Internet ein wichtiges Thema ist, findet man bei Wikipedia:
http://de.wikipedia.org/wiki/Screenreader
http://de.wikipedia.org/wiki/Barrierefreies_Internet

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Wer die Meldung "Fehler beim Abdocken von der USB-Massenspeichergerät: Das Gerät "Standardvolume" kann zurzeit nicht beendet werden. Wiederholen Sie den Vorgang später." endlich leid ist, der sollte sich ein kleines Tool namens "Process Explorer" von Microsoft besorgen. Mit diesem Tool hat man nämlich eine bessere Übersicht über laufende Prozesse und auch über den Zugriff von Prozessen auf Laufwerke, als mit dem Taskmanager, der nur sehr wenig brauchbare Informationen bereithält.

So kann man über "Find -> Find Handle -> LAUFWERKSBUCHSTABE (z.B. D:)" und dann auf  "Search"  klicken herausfinden, welche Prozesse das Abdocken des USB-Sticks oder der USB-Festplatte verhindern und diese dann manuell beenden.

Einen kleinen Nachteil hat das Tool. Es funktioniert nur unter Windows XP, Windows Server 2003 und höher. Laut Microsoft soll es aber unter Windows 2000 mit Service Pack 4 Rollup 1 auch funktionieren.

Der Process Explorer bei Sysinternals zum Herunterladen:
http://technet.microsoft.com/de-de/sysinternals/bb896653.aspx

PS: Interessanterweise haben die Jungs von Microsoft wohl bei der deutschsprachigen Übersetzung von XP etwas Mist gebaut: Fehler beim Abdocken von der USB-Massenspeichergerät. Klingt etwas komisch, oder?!

HTML wäre keine geeignete Sprache für ein Dokument, wenn man nicht auch an Schriftart, Schriftfarbe und Schriftgröße herumspielen könnte. Zu diesem Zweck gibt es das <font>-Tag. Dabei werden alle Einstellungen mit den Attributen vorgenommen. Setzt man keine Attribute, so verändert der Container den Inhalt zwischen Start- und Endmarke nicht. Dazu ein Beispiel:

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

   <body>

   <font>Dieser Text ist unverändert obwohl er  im Font-Container steht</font>

   </body>
</html>

Wie oben schon beschrieben, ändert sich der Text erst durch die geeigneten Attribute. Dabei kann man folgende drei Attribute verwenden: "color", "face" und "size".

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

   <body>

   <font color="#00FF00" face="arial, helvetica" size="5">Dieser Text hat die Schriftart Arial bzw. Helvetica, die Schriftfarbe grün und die Größe 5</font>

   </body>
</html>

Mit dem Attribut "color" lässt sich die Farbe ändern. Dies funktioniert über die Angabe der RGB-Farben mit Hex-Werten, welche wir auch schon in Teil 3 verwendet haben.
Die Schriftart kann man über das Attribut "face" festlegen. Dabei sollte man berücksichtigen, dass der Computer der die Webseite aufruft, auch die entsprechende Schriftart installiert haben sollte. Ist dies nicht der Fall, so kann mit der Angabe einer zweiten, dritten oder x-ten Schriftart angegeben werden, welche Alternativschriftart der Browser verwenden soll. Dabei werden die verschiedenen Schriftarten mit einem Komma, wie oben zu sehen ist, getrennt.
Das letzte Attribut "size" ist die Schriftgröße, welche Standardmäßig auf 3 eingestellt ist. Dabei kann man eine absolute Skala von 1 bis 7 benutzen oder aber mit -1 bis -7 und +1 bis +7 eine relative Vergrößerung oder Verkleinerung erreichen.

Das Beispiel von oben sieht dann folgendermaßen aus:

Dieser Text hat die Schriftart Arial bzw. Helvetica, die Schriftfarbe grün und die Größe 5

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Um Überschriften zu generieren, kann man 6 verschiedene Tags nutzen, deren Inhalt zwischen Start- und Endmarke in unterschiedlichen Größen dargestellt wird. Im folgenden Beispiel wird zum Beispiel die Größe <h1> verwendet, die zugleich die größte Überschrift erzeugt.

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

  <body>

 <h1 align="left">Dies ist die erste Überschrift</h1>

  </body>
</html>

Im obigen Beispiel wurde zugleich auch das einzige W3C-konforme Attribut verwendet: "align". Mit "align" kann man die Ausrichtung der Überschrift bestimmen. Erlaubte Werte sind "left" (links), "right" (rechts), "center" (zentriert) und "justify" (Blocksatz). Wie das ganze im Original aussieht, sieht man hier:

Dies ist die erste Überschrift

Aber Vorsicht, das <hX>-Tag ist nicht dazu da, um die Schriftgröße zu verändern. Dies kann man mit einem anderen Tag erledigen, welches wir als nächstes behandeln werden.

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Wie bei vielen Programmiersprachen lassen sich auch bei HTML Kommentare einbauen, die nur bei Betrachtung des Codes sichtbar sind und im normalen HTML-Dokument nicht auftauchen:

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

  <body>

 <!-- Dieser Text erscheint nicht im Dokument -->

  </body>
</html>

Der Kommentar wird dabei in ein einfaches Tag geschrieben. Dieses Tag beginnt mit <!-- und endet mit -->.

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Da staunt man als Webseiten-Betreiber, bzw. als Domaininhaber nicht schlecht, wenn einem dieser Abzockebrief entgegen flattert. Die Firma "Websuche Search Technology GmbH & Co. KG" bietet über Ihre Domain .co.de eine Subdomain-Registrierung anderer Domains an. Dabei lautet der Betreff "Rechtliche Klärung" und es wird erläutert, dass man um juristische Probleme zu vermeiden, doch auch bei Ihnen eine Domain registrieren soll, die dann z.B. unter "undertec.co.de" erreichbar wäre. Argumentativ ist der Brief interessant aufgemacht, da er im oberen Abschnitt auf den co.uk-Gebrauch in England verweist und weiter unten auf Markenrechte eingeht.

Co.de1.jpg

Vorderseite

Co.de2.jpg

Rückseite

99,- Euro soll man also bezahlen, um juristische Probleme zu vermeiden. Gleichzeitig soll man bei einem "Nein" den Brief auch noch mit Begründung zurückschicken, was für co.de sehr praktisch ist, da sie so juristische Schwierigkeiten ihrerseits bei der Vergabe dieser Adresse in Zukunft vermeiden könnten.

Dass diese Geschichte die Blogosphäre stark beschäftigt und undertec.de nicht die einzige Domain ist, die einen solchen Brief bekommen hat, sieht man an folgenden Artikeln im Netz:

http://www.basicthinking.de/blog/2009/12/12/co-de-99-euro-fuer-eine-billige-subdomain-gefaellig/
http://blogwache.de/2009/12/13/co-de-subdomain-fuer-99-euro/
http://blog.websenat.de/neue-abzocke-subdomain-fuer-99-euro-pro-jahr-von-co-de-update/
http://blog.marmalade.de/2009/12/marmalade-co-de-subdomain-fur-99-euro/
http://www.der-softwareentwickler-blog.de/2009/12/12/co-de-subdomains-fuer-99-euro-post-zur-rechtlichen-klaerung-lag-im-briefkasten/
http://www.marill.de/togoblog/2009/12/14/die-grose-code-subdomain-abzocke/
http://www.marill.de/togoblog/2009/12/14/die-grose-code-subdomain-abzocke/trackback/
http://parkrocker.com/websuche-search-technology-aus-osnabrueck-und-die-co-de-domains/
http://blog.websenat.de/neue-abzocke-subdomain-fuer-99-euro-pro-jahr-von-co-de-update/

Generell gilt, auf solche Abzockbriefe einfach nicht reagieren und bei weiteren dubiosen Aufforderungen Anwalt einschalten.

Woher diese Firma die Privatadressen und Firmenadressen bekommen hat, ist noch unklar. Sollten sie sich diese über die DENIC besorgt haben, so könnte dies für "Websuche Search Technology GmbH & Co. KG" noch ein juristische Nachspiel haben, da dies laut den Nutzungsbedingungen der DENIC nicht gestattet ist.

Wie bei <img> schon erwähnt dient das <center>-Tag zum horizontalen zentrieren. Dabei wird alles zentriert, was zwischen Start- und Endmarke eingerahmt ist:

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

  <body>

 <center>Zentrierter Text, Tabellen, Bilder, etc.</center>

  </body>
</html>

Zum Inhaltsverzeichnis des Online HTML-Kurs

Um Grafiken einzufügen, kann man das <img>-Tag verwenden. Auch hier gibt es wieder einige elementspezifischen Attribute die uns die Positionierung und die Veränderung der Grafik erlauben. Aber zunächst einmal die einfachste Anwendung:

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

  <body>

 <img src="BILD.jpg">

  </body>
</html>

Mit dem "src"-Attribut wird die Angabe gemacht, wo sich das Bild befindet. Befindet es sich im gleichen Ordner, so reicht eine Angabe wie oben. Ansonsten kann man das "src"-Attribut wie das "href"-Attribut für Bilddateien verwenden. Welche Grafikformate verwendet werden können, liegt ganz allein am Browser. Die gängigsten Formate wie "gif", "jpg", "bmp", usw. werden von allen Browsern unterstützt. Oft werden aber nur "gif" und "jpg"-Bilder verwendet, da diese wenig Speicherplatz verbrauchen und so schnell auch über langsame Internetleitungen übertragen werden können.

Doch schauen wir uns zunächst eine Reihe von anderen Attributen an:

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

  <body>

 <img src="BILD.jpg" alt="Bildersatzbeschreibung" align="middle" border="2" title="Bildtitel" width="20" height="20">

  </body>
</html>

In diesem Beispiel sind bereits eine Menge anderer Attribute verwendet, die im folgenden erklärt werden.

Das Attribut "alt" stellt eine Alternative zur Bilddarstellung dar. Kann das Bild nicht geladen werden, erscheint der hier stehende Text an Stelle des Bildes. Nützlich ist dies für rein textbasierte Browser.

Das Attribut "align" gibt an, an welcher Stelle das Bild in der aktuellen Textzeile erscheinen soll. Mit dem Wert "middle" wird es vertikal zentriert. Mit "top" beginnt der oberste Rand des Bildes in der aktuellen Textzeile und mit "bottom" der unter Rand. Das Bild kann also über diese drei Werte vertikal verschoben werden. Mit den Werten "left" und "right" wird das Objekt links- oder rechtsbündig gemacht und von umgebendem Text umflossen. Möchte man das Bild horizontal zentrieren, benötigt man das <center>-Tag.

Mit dem "border"-Attribut lässt sich ein Rand um das Bild in der angegeben Pixelstärke zeichnen.

Das "title"-Attribut ist wiederum der Titel des Bildes, welchen wir wiederum sehen, wenn wir mit der Maus über das Bild fahren.

Mit den Attributen "width" und "height" kann man die Breite und Höhe eines Bildes festlegen. Dabei wird das Bild bei nur einer Angabe skaliert oder bei Angabe beider Attribute entsprechend verzerrt.

Zum Inhaltsverzeichnis des Online HTML-Kurs

Mit dem <a>-Tag kann man einen Ankerpunkt oder ein Linkziel definieren. Dazu benötigt man aber wieder elementspezifische Attribute um den Unterschied klar zu machen.

Zunächst ein Beispiel für einen Ankerpunkt innerhalb einer Webseite:

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

  <body>

 <a href="#Anker1">Zu Anker 1 springen</a>

 <a name="Anker1"> Hier beginnt Punkt 1</a>

 ... Inhalt ...

  </body>
</html>

Das erste <a>-Tag ist im Code deutlich sichtbar. Das zweite <a>-Tag ist als unser Ankerpunkt unsichtbar. Im ersten <a>-Tag legen wir über das Attribut "href" und dem # fest, dass wir zu einem Punkt innerhalb des Dokumentes springen möchten. Dieser Punkt muss aber auch benannt sein, was mit dem "name"-Attribut an unserem Ankerpunkt passiert.

Nützlich ist die Geschichte mit den Ankerpunkten, wenn man ein langes Dokument hat und am Anfang der Seite so etwas wie ein Inhaltsverzeichnis erstellt, über das man direkt zum gewünschten Unterpunkt springen kann.

Nun ein Beispiel für einen Link welcher einen Verweis auf eine andere Webseite oder einen Download setzt:

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

  <body>

 <a href="http://www.google.de">Link zu Google</a>

  </body>
</html>

Über das Attribut "href" wird im Allgemeinen auf andere Dinge referenziert. Dies kann eine externe Webseite sein oder aber auch eine interne. Verweist man auf ein internes Ziel, so benötigt man eigentlich keine "http://www."-Angabe. Man kann direkt auf den Pfad zeigen, wo das Objekt liegt:

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

  <body>

 <a href="Dokumentation/Hilfe.html">Link zur internen Hilfeseite</a>

  </body>
</html>

Außer dem Aufruf eine Webseite oder der Verweis auf eine herunterladbare Datei, kann man auch noch auf E-Mail-Adressen verweisen:

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

  <body>

 <a href="mailto:MEINE_ADRESSE@gmx.de">E-Mail von Mir</a>

  </body>
</html>

Um eine Mailadresse anzusprechen, muss dringend ein "mailto:" vor der E-Mail-Adresse stehen, da der Browser sonst versucht eine Datei oder eine Webseite dieses Namens zu finden.

Außer dem "href"- und dem "name"-Attribut gibt es noch eine Reihe weiterer Attribute, die vom W3C unterstützt werden. Die beiden wichtigsten aber sind "target" und "title":

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

  <body>

 <a href="http://www.google.de" title="Suchmaschine Google" target="_blank">Suchen</a>

  </body>
</html>

Wenn wir nun mit der Maus über den Link fahren sehen wir den angegeben Titel. Dies ist die Aufgabe des "title"-Attributs. Das "target"-Attribut hat eine andere Bedeutung. Es definiert, in welchem Fenster oder Frame die neue Seite geöffnet werden soll. Die Angabe "_blank" gibt an, dass ein neues Browserfenster zum Öffnen des Links geöffnet werden soll. Mit "_self" würde es im gleichen Fenster geöffnet. Mit "_parent", "_top" und "EIGENERNAME" öffnet das Fenster in einem speziellen Frame. Zu Frames aber später mehr.

Zum Inhaltsverzeichnis des Online HTML-Kurs

Mit <br> kann man einen Zeilenumbruch erzwingen:

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

  <body>

 Das ist Zeile 1.<br>
 Das ist Zeile 2.

  </body>
</html>

Wenn man das <br>-Tag verwendet sollte man beachten, dass hier keine Aufspaltungin Start- und Endmarke vorgenommen wird, sondern das Element nur aus einer Marke besteht.

Zum Inhaltsverzeichnis des Online HTML-Kurs

Für diverse Tags gibt eine Reihe von elementspezifischen Attributen, die der Startmarke mitgegeben werden können. Ebenso gilt dies für das <body>-Tag, bei dem man die Hintergrundfarbe, die Textfarbe, die Farbe von aktiven, benutzten und Standardlinks, sowie ein Hintergrundbild festlegen kann. Es gibt noch eine Menge anderer Elemente, die entweder nur vom Internet Explorer oder vom Netscape Browser unterstützt werden, welche wir aber nicht verwenden wollen, da wir uns an die Richtlinien des W3C (World Wide Web Consortium) (http://de.wikipedia.org/wiki/World_Wide_Web_Consortium) halten wollen.

Dazu ein Beispiel, in dem jede Art von Link seine eigene Farbe hat und zudem eine Hintergrundfarbe definiert wurde:

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

  <body text="#000000" link="#0000ff" alink="#ff0000" vlink="#bb77ff" bgcolor="#ffffff">

... Inhalt ...

  </body>
</html>

Mit diesen Attributen wird der Text nun schwarz dargestellt, die Links blau, ein aktiver Link rot und ein besuchter Link lila. Die Hintergrundfarbe ist weiß. Wie elementspezifische Attribute hier verwendet werden, ist leicht ersichtlich. Erst kommt der Attributname, gefolgt von einem Gleichheitszeichen und der übergebene Wert wird in Anführungsstriche gesetzt. Die Farbe wird dann letztendlich durch eine hexadezimale Angabe der RGB-Farbtafel (Rot-Grün-Blau) mit einem beginnenden # angegeben.

Was es mit den RGB-Farben auf sich hat, erfährt man bei Wikipedia:
http://de.wikipedia.org/wiki/RGB-Farbraum

Farbtabellen mit Hex-Werten finden sich hier:
http://www.wackerart.de/rgbfarben.html
http://www.farb-tabelle.de/de/farbtabelle.htm

Wer statt einer Hintergrundfarbe ein Hintergrundbild verwenden will, der kann folgendes Attribut verwenden:

background="PFAD/BILD.jpg"

Übliche Bildformate sind "jpg" oder "gif", da diese Formate komprimierte Bilddateien darstellen, die kurze Ladezeiten von Homepages über das Internet garantieren und auch von jedem Browser als Bild dargestellt werden können.

Zum Inhaltsverzeichnis des Online HTML-Kurs

Wer viel an Universitäten und Forschungseinrichtungen unterwegs ist und dabei schnell an die eigenen Daten oder ins Internet möchte, für den ist ein Eduroam-Zugang genau das richtige. Denn hier hat man die Möglichkeit sich per W-Lan mit seinen eigenen Zugangsdaten über fremde Eduroam-Netze zu authentifizieren und online zu gehen. Das lästige Beantragen eines Accounts vor Ort entfällt also.

Mittlerweile beteiligen sich außer dem Deutschen Forschungsnetz (DFN) etliche europäische Universitäten und Einrichtungen, sowie Einrichtungen in Kanada und Australien.

Da das Eduroam durch seine W-Lan-Funktionalität für alle W-Lan-fähigen Geräte geeignet ist, kann man auch ein neueres Handy dazu bringen, sich beim Eduroam einzuloggen. Im folgenden wird gezeigt, wie man dies exemplarisch mit einem Nokia E71 tun kann. Bemerken muss man hierbei aber, dass einzelne Einstellungen von Institution zu Institution verschieden sein können. Dann bitte den Ansprechpartner vor Ort kontaktieren.

Bevor wir beginnen, benötigen wir eventuell ein entsprechendes Zertifikat für die Authentifizierung, da die Eduroam-Netze meist verschlüsselt sind und eigentlich nie über das Pre-Shared-Key (PSK) Verfahren arbeiten, sondern über Zertifikate, die den Schlüsseltausch erübrigen. Hier im konkreten Fall, wollen wir das "Root CA 2"-Zertifikat der Deutschen Telekom nutzen. Dies kann man bei der Deutsche Telekom unter http://signet.telesec.de/caservice/Signet/T_Root_akz/index.html herunterladen.

Die heruntergeladene Datei wird dann einfach auf das Nokia-Handy übertragen und kann dort über den Dateimanager geöffnet werden. Dabei wird dann die Installation des Zertifikats angestoßen.

Ist das Zertifikat installiert und befindet man sich in Reichweite eines Eduroam-W-Lan-Netzes, dann kann man über "Menü -> Verbind. -> WLAN-Assist." das Eduroam-W-Lan-Netz sehen.

Nun kann man das Eduroam-Netz auswählen und über "Optionen -> Zug.-punkt bearbeiten" die Zugangseinstellungen festlegen. Wenn man hier runterscrollt kann man den WLAN-Sicherheitsmodus festlegen, der im Normalfall "WPA/WPA2" oder "802.1x" sein dürfte. Der "WLAN-Netzmodus" wird auf "Infrastruktur" gestellt. Viel wichtiger aber sind die Einstellungen die darunter folgen, nämlich die WLAN-Sicherheitseinstellungen.

Bei den WLAN-Sicherheitseinstellungen kann man nun diverse Authentifizierungsprotokolle und ähnliches einstellen. Exemplarisch wollen wir hier folgende Einstellungen vornehmen:

  1. Bei "WPA/WPA2" wählen wir das "EAP"-Protokoll aus, da wir keinen Pre-Shared-Key verwenden wollen.

  2. Bei den "EAP Plug-in-Einstellungen" wählen wir "EAP-PEAP" aus und deaktivieren über die Optionen die anderen Authentifizierungsmöglichkeiten. Die ausgewählte EAP-PEAP-Authentifizierungsmöglichkeit hat ebenfalls weitere Einstellungen, die über "Optionen -> Bearbeiten" bearbeitet werden können.

    2.1 Das "Persönliche Zertifikat" bleibt auf "Nicht definiert"

    2.2 Das "Behördliche Zertifikat" wird nun auf unser neues Zertifikat der Deutschen Telekom eingestellt: "Deutsche Telekom Root CA 2"

    2.3 Der "Verwendete Benutzername" wird auf "Benutzerdefiniert" eingestellt

    2.4 Bei "Benutzername" kann man nun den Namen seines Accout-Zuganges an der Heimatinstitution angeben

    2.5 Bei "Verwendetes Gebiet" bleibt die Einstellung "Von Zertifikat"

    2.6 Die Einstellung "Gebiet" bleibt leer

    2.7 Die Erlaubnis für die verschiedenen PEAP-Versionen "PEAPv0", "PEAPv1" und "PEAPv2" wird bei allen auf "Ja" gestellt.

  3. Bei den Sicherheitseinstellungen wird der "Nur-WPA2-Modus" auf "Aus" gestellt.

Hat man all diese Einstellungen vorgenommen, kann man mit dem Browsen und Surfen im Netz beginnen. Bei der Auswahl des Zugangspunktes wählt man dann den eduroam-Zugangspunkt aus oder sucht ihn mit "WLAN suchen".

Eduroam-Beschreibung bei Wikipedia: http://de.wikipedia.org/wiki/Eduroam

Eduroam in Deutschland: http://www.eduroam.de/

Eduroam International: http://www.eduroam.org/

Da HTML wie auch XHTML letztendlich von SGML abgeleitet wurde, sehen alle Sprachen die in diese Richtung gehen ähnlich aus. Soll heißen, es gibt sogenannte "Tags" oder auch "Marken" die in spitzen Klammern eingerahmt sind und die entweder eine Startmarke oder eine Endmarke darstellen. Zwischen diesen Marken befindet sich der Inhalt des Elementes. Damit wir später, wenn wir auf XHMTL umsteigen, keine Probleme bekommen, werden wir die Marken, die gleichzeitig Befehle für den Browser darstellen, klein schreiben. Außerdem werden wir den Code so gestalten, dass wir uns immer im "strict"-Rahmen bewegen werden. Dazu aber später mehr.

Ein ganz einfaches Beispiel hierfür ist das <html>-Tag, welches als Container für den restlichen Inhalt unseres HTML-Dokumentes dient:

<html>

... Inhalt ...

</html>

Hier sieht man auch deutlich, dass sich das Endtag durch einen Slash vor dem Namen unterscheidet. Damit ist klar, welche Marke die Startmarke und welches die Endmarke ist. Mit dem Begriff Container wird immer ein Bereich bezeichnet, der von einer Startmarke und einer Endmarke umrahmt ist und der weiteren Inhalt enthält.

Wie bei einem normalen Dokument gibt es nun einen Dokumentkopf <head> und einen Dokumentrumpf <body>. Im Dokumentkopf wird der Titel des Dokumentes, die Meta-Tags und Angaben zu CSS gesetzt. Im Dokumentrumpf befindet sich der informative Inhalt, z.B. Text, Bilder, Tabellen, Links aber auch Formatierungsanweisungen.

Hierzu ein Beispiel:

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

  <body>

... Inhalt ...

  </body>
</html>

Innerhalb des <html>-Containers befinden sich zwei weitere Container. Der <head>-Container und der <body>-Container. Innerhalb des Kopfes wird dann noch ein weiterer Container verwendet, nämlich der Titel umrahmt von den <title>-Marken. Öffnen wir nun mit einem Browser eine HTML-Textdatei die diesen Code beinhaltet, so wird der Titel ganz oben im Browser-Titelfenster dargestellt.

Was man noch alles im Dokumentkopf angeben kann, werden wir später sehen. Zunächst wollen wir uns im nächsten Schritt dem Dokumentenrumpf und einfachen Befehlen widmen, die es uns erlauben, schnell ein brauchbares Dokument zu gestalten.

Zum Inhaltsverzeichnis des Online HTML-Kurs

In den folgenden Kapiteln soll zunächst eine Einführung in HTML 4.01 geschehen, bevor wir den Sprung zu XHTML 1.0 machen. Letztendlich ist dieser Sprung nicht so groß wie viele behaupten mögen. Deswegen werden wir erst einmal die Grundstruktur von HTML durchgehen und dann in Richtung XHTML 1.0 umschwenken. Dann werden wir Meta-Tags behandeln, die weitere Informationen für den Browser und für Suchmaschinen bereithalten. Im Anschluss werden wir uns mit Cascading Style Sheets (CSS) beschäftigen, mit denen man die Gestaltung eines Dokumentes separiert von den Informationen verändern kann.

Der HTML-Code, der in den Beispielen verwendet wird, kann einfach kopiert und in einen beliebigen Editor eingefügt werden. Die Textdatei sollte dann aber mit der Endung ".html" gespeichert werden, damit der Browser sie auch als HTML-Datei erkennt. Obwohl wir sie als HTML-Datei gespeichert haben, kann man nachher mit dem Texteditor diese trotzdem ohne Problem wieder öffnen, da es sich ja immer noch um eine ASCII-Datei handelt.

Selbstverständlich kann diese Einführung nicht alles abdecken. Für kurze Informationen kann man sich gerne Wikipedia bedienen, z.B. mit:
http://de.wikipedia.org/wiki/Hypertext_Markup_Language
http://de.wikipedia.org/wiki/Extensible_Hypertext_Markup_Language

Die beste deutschsprachige Internetseite zur Entwicklung eigener Webseiten die mittlerweile auch als gutes Onlinekompendium dient:
http://de.selfhtml.org

Handbücher und Kompendien:

XHTML, HTML und CSS - Handbuch und Referenz - Frank Bongers - Galileo Computing

Wer möchte kann auch gerne den Kurs per RSS abonnieren: RSS-Feed des Undertec-Blog

Zum Inhaltsverzeichnis des Online HTML-Kurs

Über dieses Archiv

Diese Seite enthält alle Einträge von Undertec Blog von neu nach alt.

November 2009 ist das vorherige Archiv.

Januar 2010 ist das nächste Archiv.

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: