Entries from Undertec Blog tagged with 'HTML'

301 Redirect mit RewriteRule - Weiterleitung von Webseiten auf ein neues Ziel

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

Google: Snippetoptimierung für die mobile Darstellung

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

Online HTML-Kurs (Teil 23): Der Sprung von HTML 4.0 zu XHTML 1.0

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

Online HTML-Kurs (Teil 22): Dokumententyp mit DOCTYPE angeben

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

Online HTML-Kurs (Teil 21): Zusätzliche Seiteninformationen mit den meta-Tags

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

Online HTML-Kurs (Teil 20): Blockcontainer mit dem div-Tag

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

Online HTML-Kurs (Teil 19): Skripte einbinden

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

Online HTML-Kurs (Teil 18): Sonderzeichen als Entität darstellen

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,...

Online HTML-Kurs (Teil 17): Clientseitige Imagemaps mit dem map- und dem area-Tag

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">  ...

Online HTML-Kurs (Teil 16): Horizontale Linien mit hr

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

Online HTML-Kurs (Teil 15): Elemente innerhalb von Tabellen

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

Online HTML-Kurs (Teil 14): Tabellen mit table

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

Online HTML-Kurs (Teil 13): Listen mit den Tags ul und ol

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

Online HTML-Kurs (Teil 12): Saubere Absätze mit dem p-Tag

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

Online HTML-Kurs (Teil 11): Text kursiv oder fett darstellen mit dem em- und strong-Tag

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

Online HTML-Kurs (Teil 10): Schriftart, Schriftfarbe und Schriftgröße mit dem Font-Tag ändern

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

Online HTML-Kurs (Teil 9): Überschriften mit den Tags h1-h6

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

Online HTML-Kurs (Teil 8): HTML-Code kommentieren

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

Online-HTML-Kurs (Teil 7): Zentrieren mit dem center-Tag

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

Online-HTML-Kurs (Teil 6): Bilder mit dem img-Tag

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