HTML Hypertext Markup Language

Was ist HTML
Allgemeine Syntax von HTML-Tags
Tips zum Editieren von HTML 1
Tips zum Editieren von HTML 2
Aufgaben des Webdesigners
Notwendige Software

 

Was ist HTML      

HTML steht für HyperText Markup Language. Es handelt sich dabei um eine Sprache, die mit Hilfe von SGML (Standard Generalized Markup Language) definiert wird. SGML ist als ISO-Norm 8879, als Standard für die Erstellung von Markup-Sprachen, festgeschrieben.

HTML ist eine sogenannte Auszeichnungssprache (Markup Language). Sie hat die Aufgabe, die logischen Bestandteile eines Dokuments (Überschriften, Textabsätze, Listen, Tabellen, Formulare oder Grafik-referenzen) als Solche festzulegen. Als Auszeichnungssprache enthält HTML daher Befehle zum Festlegen (Markup) typischer Elemente eines Dokuments.
HTML ist, in Beziehung zum logischen Aufbau eines Dokuments, ebenfals hierarchisch gegliedert.

WWW-Browser, die HTML-Dateien am Bildschirm anzeigen, interpretieren die Auszeichnungsbefehle (Tags) und stellen die HTML-Elemente in optisch gut erkennbarer Form am Bildschirm dar.

Eine der wichtigsten Eigenschaften von HTML ist die Möglichkeit, Verweise zu definieren. Verweise ("Hyperlinks") können zu anderen Stellen im eigenen Projekt führen, aber auch zu beliebigen anderen Adressen im World Wide Web und sogar zu Internet-Adressen, die nicht Teil des WWW sind.

HTML ist ein sogenanntes Klartext-Format. HTML-Dateien können mit jedem beliebigen Texteditor bearbeitet werden, der Daten als reine Textdateien (*.txt) abspeichern kann.

HTML-Dateien funktionieren nicht nur im WWW. Es ist kein Problem, eine HTML-Datei lokal auf jedem Rechner mit einem WWW-Browser zu öffnen.

HTML bietet allerdings kaum Möglichkeiten zu Formatierung bzw. Gestaltung seiner Elemente oder zur Layoutgestaltung der HTML-Seite (außer mit Tabellen und mgl. Framesets).
Ebenso ist die Interativität in HTML auf das Aktivieren von Mail-Programmen und das Versenden von Formulardaten, mit Hilfe des mailto-Verweis oder des submit-Buttons in Formularen beschränkt.

Um eine HTML-Seite anspruchsvoll mit Layout und Interaktivität versehen zu können müssen sogenannte Ergänzungssprachen wie Cascading Style Sheets (zur Formatierung von HTML-Elementen) und/oder JavaScript (die dynamische Komponente) in HTML-Dateien eingebunden werden.
Aufgrund der Tatsache, daß Ergänzungssprachen von den Browsern der verschiedenen Hersteller auch verschieden interpretiert werden, ist die Einbindung dieser Ergänzungssprachen immer mit wesentlich höherem Programmieraufwand verbunden.

 

Allgemeine Syntax von HTML-Tags      

<html-Befehl Attribut1="Wertzuweisung" Attribut2="Wertzuweisung" .. >
     zu formatierender Text
</html-Befehl>

  1. Eine öffnende spitze Klammer leitet das öffnende HTML-Tag ein.
  2. Es folgt ein HTML-Befehl.
  3. Es folgen Attribute und ihre Wertzuweisungen.
    Vielen HTML-Befehlen stehen eine Reihe von Attributen zur Verfügung, die das HTML-Element näher beschreiben. Dieses geschieht, indem diesen Attributen Werte zugeordnet werden. Ein HTML-Tag darf beliebig viele Attribute in beliebiger Reihenfolge besitzen.
  4. Eine schließende spitze Klammer beendet das öffnende Tag.

  5. Es folgt der eigentliche Inhalt des Dokuments.

  6. Das schließende HTML-Tag, das sozusagen die Anweisungen des öffneneden HTML-Tags beendet, wird wieder mit einer öffnenden spitzen Klammer eingeleitet.
  7. Es folgt ein Slash ( / ).
  8. Es folgt der HTML-Befehl.
  9. Eine schließende spitze Klammer beendet auch das schließende Tag.

    Es gibt einige Tags, die kein schließendes Tag erhalten dürfen.

<font face="Verdana" color="#000000" size="+1">
     Formatierter Text:
     Schriftart - Verdana, Farbe - schwarz, Größe - eine Einheit größer als normal
</font>

In diesem kleinen HTML-Fragment wird einem Text mit Hilfe des HTML-Befehls font und den zugehörigen Attributen face, color und size, eine den Wertzuweisungen der Attribute entsprechende Formatierung zugewiesen.

 

Tips zum Editieren von HTML 1      

  • Wenn Sie einen Text-Editor oder einen ASCII-basierten HTML-Editor zur Erstellung Ihrer HTML-Dateien verwenden, - der HTML-Editor von Uli Meybohm ist nicht nur Freeware, sondern außerdem äußerst empfehlenswert, zumal man die Dokumentation SelfHTML von Stefan Münz dort direkt einbinden kann - sollten Sie folgende Regeln kennen und beachten:
  • Notieren Sie in einer neuen Datei immer zuerst das Grundgerüst einer HTML-Datei.
  • Beachten Sie bei der Texteingabe die Maskierungsvorschriften für Umlaute, Sonderzeichen und HTML-eigene Zeichen.
  • Setzen Sie Zeilenumbrüche und Leerzeilen so, daß Sie im Quelltext eine optimale Übersicht behalten.
  • WWW-Browser ignorieren die Zeilenumbrüche und Absatzschaltungen im Editor und brechen den Text automatisch um (in Relation zu ihrer Fenstergröße) so wie manche Textverarbeitungsprogramme.
  • Für Zeilenumbrüche und Absatzschaltungen, die im WWW-Browser wirksam sein sollen, müssen Sie die entsprechenden HTML-Befehle eingeben, zum Beispiel Befehle für Textabsätze (z.B. <p></p>) oder erzwungene Zeilenumbrüche (<br>).
    Wenn sie Text im WWW-Browser so anzeigen wollen wie Sie ihn eingeben (mit allen Einrückungen, Umbrüchen usw.), können Sie den HTML-Befehl für präformatierten Text verwenden (<pre></pre>).
    Für definierte Einrückungen können Sie mit Style-Sheets arbeiten.
  • Mehrere Leerzeichen hintereinander werden vom WWW-Browser ignoriert und zu einem einzigen zusammengefaßt. Um mehrere Leerzeichen zu erzwingen, verwenden Sie anstelle der normalen Leerzeicheneingabe die Maskierungsvorschriften &nbsp; oder &#160; (geschütztes Leerzeichen), und zwar so oft hintereinander wie gewünscht.
  • Farben können in HTML grundsätzlich nach 2 Methoden definiert werden:
    Durch Angabe des RGB-Wertes der Farbe in hexadezimaler Form

    <font color="#0000ff">blauer Text</font>

    legt blau als Farbe für den folgenden Text fest. Dezimal RGB 0,0,255.
    Durch Angabe eines festgelegten Farbnamens

    <font color="blue">blauer Text</font>

    legt ebenfals blau als Farbe für den folgenden Text fest.
  • Verwenden sie Kommentare zur Erläuterung ihres Quelltextes. So wird die Wartung der HTML-Seiten, auch nach längerer Zeit, weitaus komfortabler und effektiver.
    Kommentare werden in spezielle HTML-Befehle eingefügt und von den Browsern nicht interpretiert.
    <!--
    Dies ist ein mehrzeiliger
    Kommentar
    //-->
 

Tips zum Editieren von HTML 2      

Hypertext heißt Informationen "ersurfen"!

D.h. durch das Bewegen durch verschiedenste Dokumente oder Dokumentstellen mit Hilfe von Hyperlinks, kann der Benutzer seinen individuellen Weg zur Erlangung der gewünschen Informationen gehen.
Dabei darf der Benutzer sich allerdings nicht "versurfen" können, sondern sollte zu jedem Zeitpunkt wissen, wo er sich, innerhalb der Struktur der Web-Site, befindet.

HTML-Dokumente sind in ihrer Darstellung stark abhängig von dem,

  • vom Benutzer verwendeten Betriebssystem und der grafischen Oberfläche (windows, kde, gnome),
  • den verwendenten Systemeinstellungen (Bildschirmauflösung, Farbtiefe, Schrift),
  • der verwendeten Browserversion,
  • den Browsereinstellungen,
  • den zusätzlich installierten Programmen auf dem System (bei Multimedia-Wiedergabe),
  • den installierten Plug-Ins

Empfehlungen zur Erstellung von HTML-Projekten (Web-Sites)

  • Dateinamenkonvention beachten (8.3 - klein ist in jedem Fall eine sichere Sache)
  • Vor (!) Erstellung von HTML-Projekten die Ordnerstruktur anlegen
  • Vor (!) Erstellung von HTML-Projekten die Struktur der Web-Site festlegen
  • Vor (!) Erstellung von HTML-Projekten die Formate für die einzelnen Elemente festlegen
  • Auf "Default-Dateien" bei Servern achten, d.h. Startdatei des Webprojektks sollte index.htm oder index.html benannt werden
  • Immer für bestimmte Zielgruppe optimieren, d.h. sie sollten die Gestaltung Ihrer Web-Site immer auf die Bedürfnisse Ihrer bevorzugten Besucherschaft abstimmen.
    Und in dem Zusammenhang auch ..
  • .. nicht für bestimmten Browser schreiben, sondern im Netscape, im MS Internet Explorer testen und im Opera testen, am besten noch in weiteren (Lynx) und in den verschiedenstsen Versionen dieser Browser - allerdings immer abhängig von der erwünschten Zielgruppe.
  • Tags nicht zweckentfremden, z.B. Dokumentinhalte nicht in <pre>-Bereiche einbetten
  • Regeln für Sonderzeichen beachten, immer Maskierungsvorschriften verwenden
  • Start- und End-Tags verwenden, wenn es möglich ist
  • Wertzuweisungen für Attribute generell in Gänsefüßchen stellen
  • Ehrliche und aussagekräftige Verweistexte verwenden, den Benutzer bei der Navigation schon durch die Verwendung "sprechender" Verweise behilflich sein
  • Grafiken sinnvoll einsetzen
  • Grafiken mit Größenangaben und Alternativtext versehen
  • Nicht für bestimmte Bildschirmauflösung schreiben - in Abhängigkeit zu der, von der erwünschten Zielgruppe verwendeten Hardware.
  • Nur notwendige Farben verwenden, auf Farbtiefe achten (216 sichere Webfarben - Netscape Web-FarbPalette)

 

Aufgaben des Webdesigners      

Content-Design
Präsentation der Inhalte (Ordner- bzw. Sitestruktur).
Stukturieren Sie die Dateien Ihres Web-Projekts (Site), so daß Sie und der Anwender einen Überblick über die Inhalter Ihrer Präsentation erhalten können.
Bieten Sie dem Anwender ein einheitliches Design, wechseln Sie auf den verschieden Seiten Ihres Projekts nicht Hintergrund- oder Textfarben, Textformate, Schriftarten, u.s.w.
Achten Sie bei der Auswahl von Farben und Schriftarten auf die Verfügbarkeit bei der angestrebten Anwenderzielgruppe.
Dateigrößen z.B. bei Grafiken oder Fremdanwendungen sind wegen der daraus resultierenden höheren Ladezeiten beim Anwender von enormer Bedeutung.
Navigations-Design
Positionierung und Layout der Navigationsstruktur.
Der Anwender sollte immer wissen an welcher Stelle der Dokumentstuktur er sich befindet.
Machen Sie es dem Anwender so komfortabel wie möglich, bieten Sie eine übersichtliche Navigation, die jederzeit zugänglich ist.
Ein empfehlenswertes Mittel zur Übersichtlichkeite einer Web-Präsentation sind sogenannte Site-Maps, die die gesamte Site-Struktur grafisch darstellen.
Hypertext-Design
Plazierung und Layout der Verweise.
Verwenden Sie für gleichartige Verweiwe gleiche Symbole, der Anwender soll "wiedererkennen" können.
Machen Sie Verweise immer als solche deutlich. Verweise nicht übermäßig, sondern sorgfältig durchdacht im Textzusammsenhang plazieren (weniger ist mehr).
Verweise sollten eine individuelle "Reise" durch die Informationen der Site ermöglichen.
Applikations-Design
Plazierung und Layout von "Fremdanwendungen" und Ergänzungssprachen,
wie z.B. Cascading Style Sheets zur weiteren Formatierung des Dokumentinhalts, Javascript zur Interaktivität, Plug-Ins, Java, CGI-Schnittstellenprogrammierung, Einbindung von Datenbanken, etc.
Erstellung von Grafiken und Animationen mit Bildbearbeitungsprogrammen.
Zusammenhänge verstehen und Möglichkeiten einschätzen können.
 

Notwendige Software      

HTML-Text-Editoren:

Hilfen und Tutorials:

Browser:

HTML-wysiwyg-Editoren:

Bildbearbeitungs-Programme:

Programme zur Erstellung von Gif-Animationen: