Neues in der Kategorie HTML

Wer in seinem Weblog oder Content System Webseiten umbenennt (zum Beispiel von einem Unterstrich zwischen Wörtern in Dateinamen zu einem SEO-freundlichen Bindestrich: http://www.undertec.de/blog/2009/09/movable-type-40-bindestrich-statt-unterstrich.html) oder seine ganze Domain unter einen neuen Namen umziehen will, der sollte sich mit den Möglichkeiten einer permanenten Weiterleitung beschäftigen. Diese auch "Redirect" genannte Methoden ermöglichen es dem Browser, wie auch den Bots von Suchmaschinen wie Google und Yahoo, die neue Seite oder die umgezogenen Seiten zu finden.

Dabei gibt es natürlich elegante Methoden wie die Methode mittels .htaccess-Datei und dem Kommando "RewriteRule" oder etwas schlampigere Methoden wie einfach nur ein "Meta-Refresh". Google selbst empfiehlt dabei einen Server-seitigen 301 Redirect (https://support.google.com/webmasters/answer/93633?hl=en), was dem Google Bot dann auch klar macht, dass die Seite permanent (Dies entspricht dem Code 301) umgezogen wurde. Dabei hat dieser Server-seitige 301 Redirect den Vorteil, dass der sogenannte Pagerank mit umzieht. Bei einer schlampigen Implementierung oder einem temporären Umzug (Code 302) wird der Pagerank laut http://suchmaschinenoptimierung.michaelsattler.de/weiterleitung.html nicht mit umgezogen. Dies kann zum Teil natürlich sehr ärgerlich sein, wenn man sich einen hohen Pagerank erarbeitet hat und diesen dann verliert. Zudem werden Redirect-Lösungen mittels Javascript oder "Meta-Refresh" manchmal von Google ignoriert, da hier wohl schon viel Unfug getrieben wurde (http://www.zurwebsite.de/suchmaschinenoptimierung-tipps/weiterleitungen-301-und-302.html).

Aus diesem Grund findet sich im Folgenden auch eine komplette Anleitung wie man einen 301 Redirect für mehrere einzelne Webseiten mittels eines Apache-Servers unter Debian und mittels einer .htaccess-Datei einrichtet.

Zunächst muss man aus dem "mods-available"-Ordner das Modul "rewrite.load" (dies entspricht dem Modul "mod_rewrite") in den Ordner "mods-enabled" kopieren:

cp /etc/apache2/mods-enabled/rewrite.load /etc/apache2/mods-available/rewrite.load

Dann muss man in der "httpd.conf"-Konfigurationsdatei die Option "FollowSymLinks" aktivieren:

<VirtualHost *:80>
ServerAdmin ...
DocumentRoot ...
Servername ...

 <Directory "...">
  Options +FollowSymLinks
  ...
  ...
 </Directory>
</VirtualHost>

Bei den Optionen sollte man immer darauf achten, dass entweder ein + oder ein - vor der entsprechenden Option stehen. Vergisst man zum Beispiel vor ExecCGI das +, so kann es sein, dass man keine CGI-Skripte mehr aufrufen kann.

Alternativ statt "FollowSymLinks" kann man wohl auch "AllowOverride All" setzen und die "FollowSymLinks"-Option erst später in der .htaccess-Datei aktivieren. Dies soll hier im Beispiel aber nicht benutzt werden. Wer mehr dazu Wissen möchte, sollte einmal folgende Seite lesen: http://de.selfhtml.org/servercgi/server/htaccess.htm#erlaubte_anweisungen.

Danach kann man dann mit folgendem Befehl den Apache neustarten:

/etc/init.d/apache2 restart

Jetzt kann man im gewünschten Verzeichnis und das ist meist das Hauptverzeichnis, die .htaccess-Konfigurationsdatei anlegen:

RewriteEngine on

RewriteBase /

RewriteRule ^VERZEICHNIS/alte_Seite\.html$ VERZEICHNIS/neue-Seite.html [R=301,L]

Der Befehl "RewriteEngine on" schaltet dabei die Möglichkeit ein, entsprechende Befehle danach aus dem Modul "mod_rewrite zu nutzen.
Der Befehl "RewriteBase /" kann verwendet werden um die Wurzel für absolute Pfadangaben richtig zu setzen. Dies ist wichtig, da wir hier im Beispiel das [R]-flag später benutzen, welches sonst eine absolute Angabe in "http://"-Form benötigt (siehe dazu auch die Erklärung bei http://stackoverflow.com/questions/11348938/htaccess-rewrite-rule-not-working-properly-redirects-to-absolute-path).
Die Anweisung "RewriteRule" hat es nun ganz schön in sich. Mit dem "^"-Zeichen und dem "$"-Zeichen markieren wir Beginn und Ende unserer alten Url. Zudem machen wir vor den Punkt einen Backslash um ihn als Punkt und nicht als Steuerungszeichen zu deklarieren. Danach folgt die Url auf die neue Seite, gefolgt von "[R=301,L]", welches Flaganweisungen darstellt. [R] oder auch [R=301] stellt dabei einen externen Redirect da, was soviel bedeutet wie das der Browser die angegebene neue Adresse extra lädt. Der externe Redirect erklärt dabei auch, warum wir im Normalfall ohne "RewriteBase /" die "http://"-Form angeben müssten. Das letzte Flag [L] bedeutet, dass nach Ausführung dieser Anweisung keine weiteren Anweisungen ausgeführt werden sollen. schließlich könnten daran nun weitere "RewriteRule"-Anweisungen folgen, wie zum Beispiel mit anderen Seitenaufrufen zu verfahren ist. Mit dieser Methode kann man dann einfach auch mehrere einzelne Webseiten weiterleiten, in dem man einfach die "RewriteRule"-Anweisungen nacheinander hinschreibt.

Problembehandlung:
Wenn es zu Problemen kommt, weil man irgendwo einen Fehler gemacht hat, dann hilft vor allem das Error-Logfile des Apache weiter. Einfach nach den entsprechenden Fehlern, die durch den versuchten Seitenaufruf entstanden sind, googlen, meist findet sich dann auch schon die Wurzel des Übels. Alternativ oder zusätzlich kann man aber noch die "mod_rewrite"-Protokollierung aktivieren. Einfach in der .htaccess-Datei folgendes hinzufügen:

rewriteLog /var/log/apache/redirect.log
rewriteLogLevel 1

Damit sollte man dann in der Lage sein, dem Fehler wirklich auf den Grund zu gehen.

Im folgenden finden sich noch einige Beispiele und Webseiten, die sich ebenfalls mit dem Thema beschäftigen:
http://learnwebtutorials.com/redirect-old-html-page-to-a-new-html-page-using-rewriterule-in-mod_rewrite (Englisch)
http://www.yourhtmlsource.com/sitemanagement/urlrewriting.html (Englisch)
http://www.addedbytes.com/articles/for-beginners/url-rewriting-for-beginners/ (Englisch)
http://mirificampress.com/permalink/beyond_redirect_using_rewriterules_in_htaccess (Englisch)
http://suchmaschinentricks.at/tipps-tricks/mod_rewrite.html (Deutsch)

Kurzübersicht über RewriteRule und auch über andere Methoden wie eine PHP-Weiterleitung oder "Meta-Refresh":
http://www.zurwebsite.de/suchmaschinenoptimierung-tipps/weiterleitungen-301-und-302.html (Deutsch)
http://www.officetrend.de/2914/redirect-permanent-automatisch-weiterleitung-einzelner-urls/ (Deutsch)
http://suchmaschinenoptimierung.michaelsattler.de/weiterleitung.html (Deutsch)
http://www.simonrueger.de/301-Weiterleitung-so-funktioniert-es-richtig.html (Deutsch)

Seo-Tipps zum Domainumzug mit einer Art Checkliste was zu beachten ist (Deutsch):
http://www.echtzeithilfe.de/seo-tipps-domainumzug

wikipedia-Artikel zur Rewrite-Engine, zur Domainweiterleitung und zum cloaking (Deutsch):
http://de.wikipedia.org/wiki/Rewrite-Engine
http://de.wikipedia.org/wiki/Domainweiterleitung
http://de.wikipedia.org/wiki/Cloaking

Apache-Dokumentation zum Modul "mod_rewrite" (Englisch):
http://httpd.apache.org/docs/current/en/mod/mod_rewrite.html
http://httpd.apache.org/docs/2.2/mod/mod_rewrite.html

Erklärung der Flags im Modul "mod_rewrite" (Englisch):
http://httpd.apache.org/docs/2.2/rewrite/flags.html

Apache-Dokumentation zum Modoul "mod_alias", welches Aliase setzen kann (Englisch):
http://httpd.apache.org/docs/current/mod/mod_alias.html

Erklärungen zum Unterschied zwischen "mod_rewrite" und "mod_alias" (Englisch):
http://stackoverflow.com/questions/808014/mod-rewrite-or-mod-alias
http://stackoverflow.com/questions/4856193/using-mod-rewrite-and-mod-alias-redirect-301-together-in-htaccess

Interessanter Artikel zum Thema: Schadet eine 301 Weiterleitung dem PageRank? (Deutsch):
http://www.website-boosting.de/blog/2013-02-26/301-weiterleitung-pagerank.html

Und zu guterletzt noch eine passende Diskussion in einem Forum:
http://forum.joergkrusesweb.de/per-301-redirect-verschiedene-seiten-umleiten-t-766-1.html

Bei Jan im Technik-Blog findet sich ein toller Eintrag zur Snippetoptimierung für mobile Suchanfragen. Dabei beschreibt er, dass die Meta-Description ca. 140-160 Zeichen haben sollte, von denen der relevante Inhalt für die Anzeige auf den Mobilgeräten in den ersten 110-120 Zeichen zu finden sein sollte.

Hier der Link zu Jans Artikel:
http://www.theofel.de/archives/2013/04/snippetoptimierung-fuer-mobile-suchanfragen.html

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.

Über dieses Archiv

Diese Seite enthält aktuelle Einträge der Kategorie HTML.

Hardware ist die vorherige Kategorie.

IGEL 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: