Internet: WWW: HTML

Grundlegender Aufbau

Eine Webseite wird nicht als Bild zu Ihrem PC übertragen, sondern als Anweisung an den Browser, wie die Webseite passend zu Ihrer Bildschirmauflösung und der Größe des Browserfensters „zusammengebaut“ werden soll. Diese Anweisungen sind in einer Sprache mit dem Namen „HTML“ (Hypertext Markup Language) verfasst.

Das Konzept des WWW wurde im Jahr 1989 von Tim Berners-Lee erfunden, ebenso wie der erste Browser und die Sprache HTTP. Unter http://line-mode.cern.ch/www/hypertext/WWW/TheProject.html können Sie eine Simulation der ersten Webseite sehen.

Hyperlinks

Berners-Lee wollte die Verweise auf andere Dokumente nicht mehr in Fußnoten oder Literaturverzeichnissen unterbringen, sondern direkt im Text eines Dokuments. Der Leser sollte einfach zu dem "eingebetteten" anderen Dokument wechseln und ebenso einfach zum ursprünglichen Dokument zurückkehren können. Das Mittel dazu sind die Hyperlinks.

<a href="www.adresse einer webseite.htm">Eingebettete Seite</a>

Ein Textbeispiel:

Die <a href="http://de.wikipedia.org/wiki/Affen">Affen</a> und die <a href="http://de.wikipedia.org/wiki/Mensch">Menschen</a> sind genetisch eng verwandt.

In diesen Text sind zwei Verweise auf die Wikipedia-Einträge über Affen und Menschen eingebettet. Aber: gut lesbar ist das nicht. Eine weitere Erfindung von Berners-Lee ist ein Programm, welches einen solchen Text interpretieren kann: Der sogenannte Browser "versteckt" die Webadresse http://de.wikipedia.org/wiki/Affen hinter dem Wort "Affen" und färbt das Wort "Affen" blau. Eingeweihte wissen: Ein Klick auf das blaue Wort führt zu einer eingebetteten Webseite, und ein Klick auf "Zurück" führt zum ursprünglichen Dokument zurück. Im Browser sieht das Textbeispiel so aus:

Die Affen und die Menschen sind genetisch eng verwandt.

Die Anweisungen in spitzen Klammern nennt man „Tag“ (mit kurzen „a“ sprechen). Diese Anweisungen treten paarweise auf − es gibt einen Anfangs-Tag <…> und einen End-Tag </...>, gewissermaßen öffnende und schließende Klammern.

HTML

Wie ein Text mit eingebetteten Anweisungen aussehen muss, damit ihn ein Browser fehlerfrei anzeigen kann, wird in einer Sprache "HTML" beschrieben. Einen solchen Text zu verfassen ist die Aufgabe eines Web-Programmierers oder Webdesigners. Doch HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache (Markup Language). Die HTML-Befehle beschreiben die Art und Weise der Darstellung des Dokumentes im Browser.

Zeilenumbruch

Die meisten HTML-Anweisungen müssen an genau definierten Stellen stehen. Doch für den Text der Webseite gilt das nicht, im Gegenteil. Der Browser ignoriert die Enter-Taste und reduziert mehrere aufeinanderfolgende Leerzeichen oder Tabulatoren zu einem, z. B.:

Heute
      ist     ein

regnerischer                   Tag

wird auf dem Bildschirm zu einer Zeile:

Heute ist ein regnerischer Tag

Das ist recht praktisch, denn es erlaubt den Quelltext übersichtlicher zu gestalten. Man kann z. B. alle HTML-Anweisungen an den Zeilenanfang stellen und den Text einrücken, denn Einrückungen werden vom Browser ignoriert. Was geschieht, wenn eine Textzeile zu lang für die Fenstergröße ist? Der Browser beginnt eine neue Zeile. Doch ein längerer Text ohne Untergliederung in Absätze ist schwer lesbar. Wie wird ein Text unterteilt? Es gibt zwei Möglichkeiten.

Wir fügen in den Text ein Tag oder (nach veraltetem Standard) ein. Dann beginnt der Browser einen neuen Absatz.
Durch  am Anfang und  am Ende wird ein Absatz definiert. In dem -Tag können weitere Formatierungen untergebracht werden, die nur für diesen Absatz gültig sind.

Font

Damals waren die Bildschirme noch schwarz-weiß oder schwarz-grün. Texte sahen aus wie mit der Schreibmaschine geschrieben, ein Wechsel von Schriftart oder -größe war nicht möglich und Grafik schon gar nicht. Mit den ersten Farbmonitoren entstand der Wunsch, farbigen Text zu verwenden. Eine neue Anweisung wurde geschaffen: Mit dem Tag  kann festgelegt werden, ob Ihr Text rot, grün oder blau angezeigt werden soll.

Das letzte Wort des Satzes ist rot!

ergibt im Browser

Das letzte Wort des Satzes ist rot!

In den neunziger Jahren kam die Ära der grafischen Betriebssysteme, wie z. B. Windows. Unter anderem wurden nun die Schriftgrößen variabel, und deshalb wurde der -Tag erweitert. Mit dem Tag  konnte nun auch festgelegt werden, ob Ihr Text grün oder blau, groß oder klein, als Arial oder Courier angezeigt wird.

Man kann im Font-Tag mehrere Angaben kombinieren, beispielsweise mit einer Größenangabe. Die Größe kann als absoluter Wert angegeben werden, wobei „size“ Werte von 1 bis 7 annehmen darf, size = 3 ist Standard. Die Größe kann auch relativ angegeben werden: size="+2" macht die Schrift um zwei Stufen größer als den Standard. Einige Beispiele:

Bitte aufmerksam lesen! 

Textausrichtung

Mit dem Attribut "align" wird festgelegt, ob ein Text linksbündig, mittig, rechtsbündig oder im Blocksatz erscheint. Dies ist ein rechtsbündiger Text. rückt den Text an den rechten Rand. Sie können auch align="left" oder align="center" verwenden (linksbündig oder zentriert). Mit align="justify" erhalten Sie einen Absatz im Blocksatz.

Dies ist ein roter Text, der standardmäßig linksbündig ist.

Dies ist ein schwarzer Text, der rechtsbündig ist.

Dies ist mittig zentrierter blauer Text.

So stellt das der Browser dar:

Bitte aufmerksam lesen!

Dies ist ein roter Text, der standardmäßig linksbündig ist. Dies ist ein schwarzer Text, der rechtsbündig ist. Dies ist mittig zentrierter blauer Text.

Im letzten Beispiel werden 2 Tags miteinander verschachtelt:  und , wobei zu beachten ist, dass die Tags in der umgekehrten Reihenfolge wieder geschlossen werden, also:  ... .

Wenn Sie statt Standardfarben eine spezielle Farbe wünschen, kann die Farbe als Hexadezimalwert angegeben werden. Je zwei Hex-Ziffern stehen für Rot, Grün und Blau, nach dem Schema: #RRGGBB. Eine Farbtabelle finden Sie, indem Sie Google nach „HTML Farben“ suchen lassen.

Struktur einer Webseite

Head und Body

Damit der Browser Text und Befehle unterscheiden kann, werden die Befehle in spitze Klammern eingefasst. Eine HTML-Datei beginnt mit <html> und endet mit </html>. Dazwischen befindet sich das Grundgerüst, das aus einem Head-Bereich (Kopf) und einem Body-Bereich (Körper) besteht.

<html>
   <head>
      <title>Meine Webseite</title>
   </head>
   <body>
      Das ist meine erste Webseite
   </body>
</html>

Wie Sie an diesem Beispiel sehen, treten die Anweisungen paarweise auf − es gibt einen Anfangs-Tag <...> und einen End-Tag </...>, gewissermaßen öffnende und schließende Klammern. Der Text zwischen und wird fett (engl.: bold) dargestellt. Die Anweisungen können geschachtelt werden. Beachten Sie, in welcher Reihenfolge die Klammern geöffnet und geschlossen werden!

Im Body-Bereich befindet sich der anzuzeigende Inhalt mit den Steueranweisungen, z. B. Schriftart und -größe, Farbe und Ausrichtung. Hier können Unterseiten, Grafiken, Sound- und Videodateien eingebunden werden.

Im Kopf stehen Angaben, die nicht zum Text der Webseite gehören. Einige Beispiele:

<title> Meine Webseite </title>
<meta name="author" content="Hans Dampf""> zur Angabe des Namens der Autors
<meta name="date" content="2014-05-31"> Datum der Erstellung bzw. letzten Änderung der Webseite. Das ist wichtig, damit Besucher einschätzen können, ob die Informationen auf der Seite aktuell oder uralt sind.

Kommentare

Zeilen, die mit "#" anfangen, enthalten Kommentare.

Umlaute und Sonderzeichen

Verwenden Sie keine Umlaute im HTML Quelltext. Manchmal geht es gut, doch mitunter ersetzt der Server Umlaute durch andere Zeichen. Um dennoch Umlaute in Texten darzustellen, verwenden Sie die folgenden Ersetzungen:

Fragen Sie Google nach „HTML Sonderzeichen“, wenn Sie eine komplette Liste aller Sonderzeichen brauchen.

Verschiedenartige Hyperlinks

Intern (innerhalb der eigenen Webpräsenz):

<a href="hardwareg.htm">Hardwaregrundlagen</a>

Auf eine Seite im WWW:

Eine E-Mail öffnen:

mailto

Es wird vorausgesetzt, dass sich die verlinkte Seite im gleichen Ordner wie die verlinkende Seite befindet. Andernfalls sind „relative Pfadangaben“ zu verwenden.

Kästchen und Tabellen

Mit diesem HTML-Code können Sie einen Rahmen um einen Text erzeugen:

{| style="border-style:solid;"
 |Dieser Text ist ein Entwurf.
 |}

Dieser Text ist ein Entwurf.

Hier ein etwas kompliziertes Beispiel:

 <center>
{| width="70%" style="background-color:yellow; border-style:dashed; border-color:red; border-width:3px; padding: 4px; "|Dieser Text ist ein <font color=blue>Entwurf</font>.
|}
</center>

Dieser Text ist ein Entwurf.

Sie erhalten ein in der Zeilenmitte zentriertes Kästchen mit 70 % der Fensterbreite, mit gelbem Hintergrund. Der Rand des Kästchens besteht aus einer gestrichelten (dashed) roten Linie, die drei Pixel dick ist. Im Inneren des Rahmens steht der Text „Dieser Text ist ein Entwurf.“ mit einem Mindestabstand von vier Pixeln zum Innenrand des Kästchens. Der Text selbst ist standardmäßig linksbündig, weil nichts gegenteiliges angegeben ist, und ist in der Standardfarbe schwarz, nur das Wort „Entwurf“ ist blau.

<table align="center" border="3" bgcolor="yellow" cellpadding="4"> {| width="70%" style="background-color:yellow; border-style:dashed; border-color:red; " |Dieser Text ist ein Entwurf. |} </table> Ähnlich!

Tabellenbeispiel

Der folgende HTML-Code erzeugt die nebenstehende Tabelle mit drei Spalten und vier Zeilen.

<tr>

<td>Plätze</td>

</tr>

<tr>

<td><a href="windows.htm">Windows installieren</a></td>

<td>belegt</td>

</tr>

<tr>

<td><a href="hardware.htm">Hardwaregrundlagen</a></td>

</tr>

<tr>

<td><a href="hardware.htm">Hardwaregrundlagen</a></td>

</tr>

</table>

„tr“ („table row“) umklammert jede Tabellenzeile. Die einzelnen Zellen werden mit „td“ („table data“ begrenzt. Die beiden Texte „Windows installieren“ und „Hardwaregrundlagen“ werden vom Browser automatisch blau gefärbt. um azuzeigen, dass dahinter Links auf die Dateien „windows.htm“ und „hardware.htm“ angeordnet sind.

Prima: http://de.selfhtml.org/html/referenz/attribute.htm#table

Weiterentwicklung

Der technische Fortschritt erzwang eine Weiterentwicklung der HTML-Sprache. Das World Wide Web Consortium (W3C) arbeitet unter der Leitung von Tim Berners-Lee, dem Erfinder des World Wide Web, an neuen Technologien und deren Standardisierung. Gegenwärtig gültig ist die vierte Version von HTML.

Im Internet gibt es zahllose "alte" Webseiten, die vor vielen Jahren mit einer früheren HTML-Version erstellt worden sind und deren Autoren keine Notwendigkeit sehen, ihren HTML-Text auf eine neue HTML-Version umzustellen. Denn das würde viel Mühe kosten bzw. viel Geld, wenn man es nicht selbst machen kann und eine Agentur beauftragen muss.

Jeder Webbrowser muss darum alle früheren HTML-Versionen unterstützen. Das funktioniert nicht ohne Probleme. Es könnte sein, dass die Webseite mit einem anderen Browser wesentlich anders aussieht. Und wenn die Webseite gedruckt oder als PDF-Datei gespeichert werden soll, sind Probleme wahrscheinlich. Wie oft haben Sie schon geflucht, dass der Ausdruck einer Webseite nicht zu gebrauchen ist? Bei den Beispielen mit der Textausrichtung (rechtsbündig, zentriert usw.), die Sie zwei Seiten vorher gesehen haben, funktioniert die Ausrichtung nicht, wenn die Webseite ins PDF-Format umgewandelt wird.

Für Webseitenentwickler gibt es eine eiserne Regel: Den Entwurf der Webseite unbedingt mit allen gängigen Browsern und Browserversionen ausprobieren!

Einige Ergänzungen passen nicht ins allgemeine Konzept, z. B. wird empfohlen,   durch   zu ersetzen. Auch von der Verwendung von "font" und "center" wird abgeraten. Warum ich sie hier erklärt habe? Weil sie im Internet weit verbreitet sind.

HTML 4.0 wurde zu einer Markierungssprache XHTML (Extensible HyperText Markup Language, deutsch: Erweiterbare Hypertext-Auszeichnungssprache) weiterentwickelt. Das Ziel dabei war, XHTML kompatibel zu anderen Auszeichnungssprachen zu machen wie z. B.

SVG: Scalable Vector Graphics, ein Bildformat, vor allem für Zeichnungen,
MathML: Mathematical Markup Language, mit der mathematische Formeln dargestellt werden,
WML: Beschreibungssprache, die Internet-Inhalte auf das Handy-Display bringt),
SMIL: Synchronized Multimedia Integration Language, eine Sprache zum Erstellen von Multimedia-Präsentationen.

Langfristig wäre es wünschenswert, Webseiten von HTML zu XHTML umzustellen. Dadurch sollen perspektivisch die Browser vereinfacht und Darstellungsprobleme verringert werden. Doch die etablierten Browserhersteller scheinen diese Umstellung zu scheuen, deshalb arbeitet das W3C auch an einer Version HTML 5.0.

Quelltext anschauen

Wie kann man sich den HTML-Text (den Quelltext) einer Webseite ansehen?

Sie müssen zuerst die Sie interessierende Webseite auf Ihren PC kopieren. Klicken Sie mit der rechten Maustaste auf einen Link auf einer Webseite und wählen Sie „Speichern unter“. Nach dem Download klicken Sie auf die heruntergeladene Datei mit der rechten Maustaste und wählen „Öffnen mit → Editor“. Nicht erschrecken − ich will Sie nicht zum Web-Programmierer ausbilden, sondern nur einige Grundgedanken darlegen. Wenn Ihr Internetauftritt von einem Webdesigner gestaltet worden ist, können Sie kleine Aktualisierungen − z. B. neue Öffnungszeiten und Urlaubstage − selbst durchführen.

Wie erstellt man eine eigene Webseite?

Baukasten, z. B. von 1&1 für jeden

Programme von kostenlos bis teuer, z. B.

Wer selber basteln mag, sucht im WWW eine hübsche Seite und fragt den Eigentümer, ob er etwas dagegen hat, diese als Vorlage zu nehmen. Dann ersetzt man Texte und Bilder durch eigene und fügt aus Höflichkeit und wegen des Urheberrechts eine Kommentarzeile ein „Design übernommen von Webseite ...“.

Mehr lernen: http://wiki.selfhtml.org/wiki/HTML

Viele Webhoster schreiben vor, dass die Homepage den Dateinamen „index.htm“ oder „index.html“ haben muss.

Sie wollen einige der Beispiele dieses Kapitels ausprobieren? Erstellen Sie eine neue Datei „index.htm“ auf Ihrer Festplatte. Klicken Sie mit der rechten Maustaste auf die Datei und dann auf „Öffnen mit“ → „Editor“, um die Datei zu bearbeiten. Beginnen Sie mit dem dem Grundgerüst (head und body) und füllen Sie den Body mit Beispielcode. Nach dem Speichern Ihrer Bearbeitung klicken Sie doppelt auf Ihre Datei, dann wird sie im Browser geöffnet und Sie sehen das Ergebnis.

CSS

Wenn man Gestaltungselemente hat, die sich auf der Homepage und den Unterseiten oft wiederholen, ist es sehr aufwändig, immer die gleichen Formatierungsanweisungen zu wiederholen. Darum wurde eine Möglichkeit geschaffen, eigenen Zusammenstellungen von Formatierungsanweisungen einem Namen zu geben und unter diesem Namen zu verwenden. Die Technologie heißt „Cascading Style Sheets“, deutsch etwa „hintereinander geschachtelte Gestaltungsvorlagen“. Richtig angewandt, kann man Farbe, Schriftart und andere Gestaltungsmerkmale auf allen Webseiten ändern, indem man nur einen einzigen Eintrag in der CSS-Datei ändert.

In einer Datei, die z. B. „global.css“ heißen kann, werden Festlegungen aufgelistet, hier z. B. mit den Namen „menue“ und „adresse“.

#menue {{
	font-size: 8px;
	margin-top: 92px;
}}
#adresse {{
	color: gray;
	background-color: transparent;
	font-size: 16px;
}}

In der html-Datei genügt dann ein Verweis, welche der Festlegungen in der Datei global.css für welchen Abschnitt gelten sollen:

(html-Text)

</div>

Suchmaschinen

Sogenannte Meta-Tags sind für Suchmaschinen von Bedeutung:

<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1"> Der Suchmaschine wird mitgeteilt, mit welchem Zeichensatz die Seite erstellt wurde. In Deutschland wird ISO-8859-1 oder UTF-8 benutzt.
<meta name="description" content="Beschreibung Ihrer Seite"> Was Sie hier schreiben, wird von Suchmaschinen als Kurzinfo zu Ihrer Seite angezeigt.
<meta name="keywords" content="Liste von Stichworten zum Inhalt Ihrer Seite"> die von Suchmaschinen benutzt wird.
<meta name="robots" content="index, follow"> erlaubt den Crawlern, Ihre Webseite und alle Unterseiten zu erfassen.
<meta name="robots" content="noindex"> weisen Sie die Roboter der Suchmaschinen an, Ihre Webseite zu ignorieren.