Webdesign-Workshop
von Wolfgang Bergt

Wolfdesign

HTML-Grundlagen

zur Startseite
zurück Inhaltsübersicht weiter

 

Inhalt

Einführung
Dateistruktur
Syntax
Sonderzeichen
einfachster HTML-Editor
Test-Browser
Zusammenfassung
Quellen
 

Einführung

HTML (Hypertext Markup Language) ist eine universelle Darstellungsform für Informationen auf unterschiedlichen Computerbildschirmen. Tim Berners-Lee entwickelte diese Seitenbeschreibungssprache bis etwa 1989 am CERN in Genf. Sie wird vor allem für Seiten im World Wide Web verwendet und ist das derzeit wichtigste im WWW benutzte Dokumentformat und darüber hinaus inzwischen überhaupt das verbreitetste Dateiformat der Welt.

Mit der Hypertext-Auszeichnungssprache lassen sich Texte und andere Elemente wie Grafiken einfach mit Hilfe eines Browsers auf einer Monitor-Seite unabhängig von der Computerplattform formatieren aber auch drucken. HTML-Dateien können mit jedem beliebigen Texteditor bearbeitet werden, der Daten als reine Textdateien speichern kann.

HTML wird laufend durch das "WWW Consortium" (W3C) weiterentwickelt. Dabei werden Entwicklungen der Browserhersteller standardisiert oder verworfen. Neuere Versionen sind weitgehend kompatibel zu früheren. Ab 1997 arbeiteten Hâkon Lie und Bert Bos daran, mit Hilfe von Style Sheets die Möglichkeiten der Seitenformatierung zu verbessern. Nach der Version HTML 4.0 kam im Jahr 2000 XHTML (extensible HTML). Dieser Workshop hält sich weitgehend an die Normierung von XHTML.

Es war immer schwer, einheitliche Standards durchzusetzen, weil einzelne Firmen - vor allem Microsoft - versuchen, durch propritäre Normen die Nutzer in Richtung zu der jeweiligen Firmentechnik zu manipulieren.

Jetzt (2007) gilt immer noch die Version HTML 4.01 vom 1999. Die Übermacht des Quasi-Monopols durch den Marktbeherrscher Microsoft mit seinem Internet-Explorer, der die Standards missachtet aber mit jeder Windows-Version ausgeliefert wird, verhinderte eine logische Weiterentwicklung. Erst das massenhafte Wechseln der Nutzer zu standardgerechten Browsern wie Firefox, Oprera und Safari veranlasste Microsoft, ebenfalls mit dem IE 7.0 einen zeitgerechten Browser zu veröffentlichen.

Andererseits sehen viele Webdesigner und Anwender nicht ein, dass durch überzogen Forderungen von XHTML an die Standards die Abwärtskompatibilität verloren geht und veralteter, schlechter oder fehlerhafter Code gar nicht angezeigt werden soll.

In diesem Kurs halte ich mich an HTML 4.01 und beschränke mich auf die Inhalte, die auch von XHTML 1.0 akzeptiert werden.

 

Dateistruktur

HTML-Dateien haben die Extension „.htm“ bzw. „.html“, „xhtml“ bzw. „.xml“. Wenn man der HomePage (der Anfangsdatei, mit der die WebSite gestartet wird) den Namen „index.htm“ bzw. „index.html“, „index.xhtm“ bzw. „index.xml“ gibt, braucht der Dateiname nicht im Browser eingetippt zu werden, weil defaultmäßig nach einer Datei dieses Namens gesucht wird

Die HTML-Datei wird als einfacher unformatierter Text angelegt. Die Seite wird mit Hilfe von Tags organisiert. Diese Tags stehen in eckigen Klammern und kommen meist paarweise vor (<Tag></Tag>). Zwischen den beiden Tags ist der Bereich, für den sie gelten.

Am Anfang jeder HTML-Datei steht der Tag <html>, und jede Datei wird mit </html> beendet.

Jede normale HTML-Datei besteht aus einem Kopf (von <head> bis </head>) und einem Körper (von <body> bis </body>).

Im Kopf wird der Titel (von <title> bis </title>) festgelegt und weitere Informationen über die Seite für Server und Browser mit Hilfe von Meta-Tags. Der hier eingetragene Titel wir in der Namensleiste des Browsers angezeigt.

Im Körper werden die Informationen aufbereitet, die den Inhalt der Seite darstellen sollen.

Die minimale Grundstruktur einer HTML-Datei ist somit:

<html>
  <head>
    <title>  </title>

  </head>
  <body>

  </body>
</html>



Vor den eigentlichen Anfang der Datei (<html>) sollte man noch die Dokumenttypdefinition (DTD) schreiben. Das könte für HTML 4.0 so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Am 26.02.2000 verabschiedete das W3C XHTML als Empfehlung. XHTML 1.0 ist die Weiterentwicklung von HTML 4.0 mit dem Ziel einer möglichst nahen Angleichung an XML. XHTML 1.1 ist nicht mehr vollständig abwärtskompatibel zu HTML und stellt höhere Ansprüche an die Einhaltung der Syntaxregeln. Die in HTML 4.0 als deprecaded (missbilligt, abgelehnt) gekennzeichneten Tags (z.B. <code><applet>, <basefont>, <center>, <dir>, <isindex>, <menu>, <s>, <strike> und <u>) kommen nicht mehr vor.

Alle Anweisungen zur Formatierung sollen in Stilvorlagen (CSS) ausgelagert werden. Die XHTML-Datei soll nur noch logisch strukturierten Text enthalten.

Fünf Grundregeln:
  1. HTML-Dateien müssen mit dem richtigen Kopf beginnen.
  2. Tags werden stets in Kleinbuchstaben geschrieben.
  3. Attribut-Werte stehen stets in Anführungszeichen.
  4. Jedes Attribut muss einen Wert haben.
  5. Alle Tags müssen geschlossen werden.
Das W3C empfiehlt, die XHTML-Dateien mit einem XML-Kopf zu beginnen:

<?xml version="1.0" encoding="UTF-8"?>

Der DOCTYPE-Tag ist Pflicht. Einer der folgenden drei Tags muss ausgewählt werden:

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


XHTML Strict ist für Seiten, die keine deprecaded Tags enthalten.

XHTML Transitional ist für Seiten, die noch deprecaded Tags enthalten.

XHTML Frameset ist für Seiten, die Frames erzeugen. Diese dürfen dann aber keinen <body>-Tag haben (außer im Noframe-Bereich).

Nach der DOCTYPE-Angabe kommt der <html>-Tag. Seine Attribute klären den Namensraum und die Sprache:

<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="de" lang="de">

Der erste Tag im Header sollte der Titel sein.

Eine Standard-Dateikopf-Struktur könnte also folgendermaßen aussehen:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="de" lang="de">
<head>
<title>Titel</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
</head>

zum Anfang

Syntax

Um den Überblick bei komplizierten oder langen Quelltexten zu behalten, ist es zu empfehlen, Kommentare einzufügen. Diese werden zwar im Editor aber nicht im Browser angezeigt. Kommentare, die in eine Zeile passen, beginnen mit der Zeichenkombination <!-- und enden mit -->. Mehrzeilige Kommentare werden mit //--> beendet:

<!-- Kommentar -->


bzw.

<!-- Kommentar
Kommentar
Kommentar
//-->


Doppelte Leerzeichen und Zeilenumbrüche werden vom Browser ignoriert wie auch andere Whitespaces (z. B. Tab). Man muss sie also durch spezielle Tags anweisen, wenn sie gebraucht werden..

&nbsp; bewirkt ein nicht gelöschtes Leerzeichen, an dem auch niemals ein Zeilenumbruch am Fensterende erfolgt. Man kann mehrere aneinander reihen, so dass Abstände     eingerichtet     werden     können.

Mit <br /> wird ein einfacher Zeilenumbruch erzeugt.

Es ist wegen der zukünftigen Kompatibilität mit weiteren Sprachversionen zu empfehlen, alle Tags mit kleinen Buchstaben zu schreiben. Des weiteren sollte man darauf achten, dass bei Verschachtelungen von Tags streng die Reihenfolge eingehalten wird.

Tags kommen fast immer paarweise vor. In XHTML werden auch Tags, die keinen eigentlichen Schlusstag haben mit "/" abgeschlossen (z. B. <br />, <hr />)

Viele Tags haben Attribute, die erklären, wie das Tag ausgeführt werden soll. Die Attribute werden im Eröffnungstag nach einem Leerzeichen angefügt. Nach dem Attributnamen folgt ein Gleichheitszeichen und danach in Anführungszeichen der Wert des Attributs. <h1 align="center">Text</h1> erzeugt z. B. eine Überschrift erster Ordnung mit zentriertem Text:

Text

Eines der wichtigsten Attribute ist das für Style Sheets, mit dem man den Tag-Bereich formatiert. <h1 style="text-align:center; font-family:courier; font-size:24pt; color:magenta">Text</h1> erzeugt z. B. eine Überschrift erster Ordnung mit zentriertem und formatiertem Text:

Text

Zu beachten ist, dass die vielen Werte des Attributs "style" in einem einzigen Paar Anführungszeichen steht. Sie werden mit Semikolon getrennt. Die Attribute brauchen im Schluss-Tag nicht wieder angeführt werden.

Zur Struktirierung der HTML-Datei benutzt man Container. Textbereiche werden mit dem Absatz-Tag umschlossen (<p>Textabsatz</p>). Innerhalb des Textes kann man mit den Attributen des span-Tags gestalten (<span>Text</span>).

Größere Bereiche sollten mit dem div-Container umschlossen werden(<div>Bereich</div>).

zum Anfang

Sonderzeichen

Sonderzeichen werden eventuell falsch dargestellt, wenn sie nicht in der folgenden Form umschrieben sind.
Sonderzeichen beginnen mit einem Kaufmanns-Und (&) und enden mit einem Semikolon (;). Dazwischen steht eine Abkürzung der (englischen) Bedeutung oder die ASCII-Nummer.
Beispiele:
<   &lt;   (less then; weniger als)   &#60;  
>   &gt;   (greater then; größer als)   &#62;  
'   &apos;   (Apostroph)   &#180;  
"   &quot;   (quote; Anführungszeichen)   &#34;  
&   &amp;   (ampersand; Kaufmanns-Und)   &#38;  
$   $$   (Dollarzeichen)   &#36;  
    &nbsp;   (non-breaking space; geschütztes Leerzeichen)   &#160;  
­   &shy;   (soft hyph; weiche Trennung)    
©   &copy;   (Copyright)   &#169;  
  &trade;   (Trademark)    
®   &reg;   (Registriertes Warenzeichen)   &#174;  
±   &plusmn; (Plusminus)   &#177;  
½   &frac12; (Bruch 1/2)   &#189;  
  &euro;   (Euro)    
¢   &cent;   (Cent)    
deutsche Umlaute:
Ä   &Auml;   (A Umlaut)   &#196;  
ä   &auml;   (a Umlaut)   &#228;  
Ö   &Ouml;   (O Umlaut)   &#214;  
ö   &ouml;   (o Umlaut)   &#246;  
Ü   &Uuml;   (U Umlaut)   &#220;  
ü   &uuml;   (u Umlaut)   &#252;  
ß   &szlig;   (sz Ligatur)   &#223;  
Sonderzeichen aus anderen Sprachen:
é   &eacute;   (e Akzent acute)   &#233;  
è   &egrave;   (e Akzent grave)   &#232;  
   &Acirc;   (A Circumflex)   &#194;  
ñ   &ntilde;   (n Tilde)   &#241;  
Ç   &Ccedil;   (C Häkchen)   &#199;  
(alle Zeichen, zusammengestellt von Hannes Ludwig)

zum Anfang

mein HTML-Editor

Manchmal will man einen einfachen normalen Text schnell für das Internet als HTML-Datei aufbereiten. Vielleicht soll ein Artikel, ein Bericht, eine Bemerkung oder Erläuterung ins Internet gestellt werden. Dann gibt es mehrere Möglichkeiten:
  • Man kann den Text in einem HTML-Editor bearbeiten, den es schon als Freeware oder Shareware gibt.
  • Man kann den Text auch mit dem Textverarbeitungsprogramm (z.B. MS-Word ab Version 7) als HTML-Datei abspeichern.
  • Man kann den Text auch mühsam per Hand umwandeln.
Die ersten beiden Varianten sind bequem, haben aber den Nachteil, dass man eine Datei erhält, die durch eine Unzahl überflüssiger Tags aufgebläht ist oder die sogar Quelltext enthält, der ungewollte Aktionen im Hintergrund ablaufen lässt.

Mit einem Makro (für Word 97 für Word 2000)) kann man mit 4 bis 5 Mausklicks aus normalem Text eine schlanke HTML-Datei machen, die nichts Überflüssiges enthält.

Dazu zeichnet man alle Veränderungen an einer Beispieldatei auf, die möglichst viele Sonderzeichen enthält.
  • Nachdem man die zu konvertierende Datei in dem bevorzugten Textverarbeitungsprogramm geöffnet hat, startet man den Makrorecorder.
  • Zuerst sollte man vorsichtshalber mit <Strg><Pos1> den Cursor ganz an den Anfang stellen.
  • Dann werden mit der Suchen-Ersetzen-Funktion alle die Zeichen in HTML-Zeichen umgewandelt, die in Sonderzeichen-Codierungen und bei HTML-Tags verwendet werden. Dabei hat sich folgende Reihenfolge bewährt:
    "&" durch "&amp;"
    "AbsatzendeAnführung unten" durch "Absatzende&#132;"
    "LeerAnführung unten" durch "Leer&#132;"
    "Anführung oben" durch "&#147;"
  • Dann sind die Umlaute und anderen Sonderzeichen an der Reihe:
    "Ä" durch "&Auml;"
    "Ö" durch "&Ouml;"
    "Ü" durch "&Uuml;"
    "ä" durch "&auml;"
    "ö" durch "&ouml;"
    "ü" durch "&uuml;"
    "ß" durch "&szlig;"
    "é" durch "&eacute;"
    "§" durch "&#167;"
    "<" durch "&lt;"
    ">" durch "&gt;"
  • Im nächsten Schritt ersetzt man die gewollten Zeilenumbrüche und Absatzendzeichen durch <br />
  • Dann werden die Standard-HTML-Tags an den Anfang eingefügt:
    "<!doctype html public "-//w3c//dtd html 4.0//en">

    <html>
      <head>
        <title>  </title>
    <meta name="changedby" content="Wolfgang Bergt">
      </head>
      <bodyl>"
  • Zum Schluss werden am Dateiende die Standard-HTML-Tags für das Ende der HTML-Datei geschrieben.
    "</body>
    </html>"
  • Wenn die Beispieldatei fertig umgewandelt wurde, wird die Makroaufzeichnung gestoppt.

Mit dem gleichen geringen Aufwand kann man natürlich gleich auch korrekten XHTML-Quellcode erzeugen. Natürlich kann man auch gleich das Makro (für Word 97 für Word 2000) fertig übernehmen.

zum Anfang

Test-Browser

Das Layout einer guten WebSite muss auch auf kleinen Bildschirmen alle Informationen bereitstellen können. Deshalb sollte die gesamte WebSite auch mit einer Browsergröße von 800 x 600 und sogar mit 640 x 480 Bildpunkten getestet werden.

Dazu startet man den Browser mit einer vorgegebene Fenstergröße. Folgendes Visual-Basic-Script hilft dabei:

Test-Browser-Script

Wenn man diesen (evtl. angepassten) Text als ASCII-Datei unter dem Namen ie-640.vbs auf den Windows-Desktop legt, kann man den Internet-Explorer mit 640 x 480 Pixeln starten.
zum Anfang

Zusammenfassung

10 Gebote für eine gute Web-Site
zum Anfang

Quellen

zum Seitenanfang zum Workshop-Anfang zur Inhaltsübersicht