HTML Wichtige Hinweise zu HTML

Notwendige Vorkenntnisse 1
Farben, Pfadangaben und Kommentare
Notwendige Vorkenntnisse 2
Die 4 Aufgaben des Webdesigners
Hilfreiche Software

 

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

  • WWW-Browser ignorieren die Zeilenumbrüche und Absätze im Editor und brechen den Text, in Relation zu ihrer Fenstergröße, automatisch um.

    Mehrere Leerzeichen hintereinander werden vom WWW-Browser zu einem einzigen zusammengefaßt.

    Für Zeilenumbrüche und Absätze, die im WWW-Browser wirksam sein sollen, müssen Sie die entsprechenden HTML-Befehle eingeben, zum Beispiel den Befehle für Textabsätze <p></p> oder den Befehl für einen Zeilenumbrch <br>.

    Um mehrere Leerzeichen zu erzwingen, verwenden Sie anstelle der normalen Leerzeichen-Eingabe die Maskierungsvorschrift &nbsp; (geschütztes Leerzeichen), und zwar so oft hintereinander wie gewünscht.

  • Sie können Zeilenumbrüche und Leerzeilen im Editor also derart setzen, daß Sie im Quelltext eine optimale Übersicht behalten.

 

Farben, Pfadangaben und Kommentare      

Farben können in HTML grundsätzlich nach 2 Methoden definiert werden:

  • Durch Angabe des RGB-Wertes der Farbe in hexadezimaler Form mit vorangestelltem Rauten-Zeichen
    #0000ff
    definiert beispielsweise blau - entspricht dezimal RGB 0,0,255.

    Bsp.:  <font color="#00ff00">beliebiger Text</font>

    Legt Grün als Textfarbe für beliebiger Text fest.

  • Durch Angabe eines festgelegten Farbnamens, u.a. die Standardfarben in englischer Sprache: white, black, red, green, blue, yellow, ...

    Bsp.:  <font color="green">beliebiger Text</font>

    Legt ebenfalls Grün als Textfarbe für beliebiger Text fest.


Pfadangaben werden in HTML meist als Wertzuweisung für das href-Attribut bei Verweisen oder für das src-Attribut bei Grafiken und anderen Elementen benötigt.

In HTML sind 2 unterschiedliche Pfadangaben möglich:

  1. eine relative Pfadangabe - verwenden sie relative Pfadangaben, um die einzelnen Dateien Ihrer Site miteinander zu verlinken (Link = Verweis):

    • grafik.gif
         grafik.gif liegt im gleichen Verzeichnis wie das HTML-Dokument
    • bilder/grafik.gif
         grafik.gif liegt im Unterverzeichnis "bilder"
    • ../../grafik.gif
         grafik.gif liegt zwei Verzeichnisse oberhalb des aktuellen Verzeichnissens (näher zum Wurzelverzeichnis)

  2. eine absolute Pfadangabe in Form eines URL (Uniform Resource Locator) mit Angabe des des verwendeten Protokolls (meist http) - verwenden Sie absolute Pfadangaben, wenn sie auf externe Seiten verweisen möchten:

    • http://www.irgendwo.de/index.html   
    • http://www.irgendwo.de/   


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 einzeiliger Kommentar -->

    <!--
    Dies ist ein mehrzeiliger .....
    ..... Kommentar
    //-->

 

Notwendige Vorkenntnisse 2      

Hypertext heißt: sich Informationen individuell "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,

  • der vom Benutzer verwendeten Hardware,
  • dem vom Benutzer verwendeten Betriebssystem und der grafischen Oberfläche,
  • den verwendenten Systemeinstellungen (Bildschirmauflösung, Farbtiefe, Schrift),
  • dem verwendeten Browser bzw. der verwendenten Browser-Version,
  • den Browser-Einstellungen,
  • den zusätzlich installierten Programmen auf dem System (bei Multimedia-Wiedergabe),
  • den installierten Plug-Ins

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

  1. Dateinamenkonvention beim Speichern von HTML-Seiten beachten.
    Zu verwendende Dateinamenerweiterung ist .html oder .htm. Generell empfiehlt sich die Verwendung von Kleinbuchstaben für Dateinamen.
  2. Vor (!) Erstellung von HTML-Projekten die Ordnerstruktur anlegen, d.h. alle Dateien, die zu Ihrem HTML-Projekt gehören, sollten unterhalb eines Ordners liegen.
  3. Vor (!) Erstellung von HTML-Projekten das grundlegende Layout und die Navigations-Struktur der Web-Site festlegen.
  4. Vor (!) Erstellung von HTML-Projekten die Formate für die einzelnen Elemente festlegen. Überlegen Sie sich schon vorher Schriftarten, -stile, -farben, Abstände, etc. um die Darstellung auf Iher Site festzulegen.
  5. Auf "Default-Dateien" bei Servern achten, d.h. Startdatei des Webprojekts sollte index.html benannt werden
  6. 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.
    Ebenfalls nicht für bestimmte Bildschirmauflösung schreiben - in Abhängigkeit zu der, von der erwünschten Zielgruppe verwendeten Hardware.
  7. Tags nicht zweckentfremden, z.B. Dokumentinhalte nicht in <pre>-Bereiche einbetten
  8. Immer Maskierungsvorschriften verwenden. Deutsche Umlaute und das 'ß' sollten generell durch ihre Maskierungsvorschriften ersetzt werden.
  9. Immer Start- und End-Tags verwenden, wo es möglich ist.
    Beachten Sie aber, daß auch HTML-Tags gibt, die ausdrücklich kein Ende-Tag erhalten dürfen.
  10. Wertzuweisungen für Attribute generell in "Gänsefüßchen" stellen
  11. Auf die Dateigröße achten, insbesondere wenn Sie Grafiken einsetzen
  12. Grafiken immer mit Größenangaben und Alternativtext versehen

 

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

Hilfreiche Software      

HTML-Text-Editoren:

Hilfen und Tutorials:

Browser:

HTML-wysiwyg-Editoren:

Bildbearbeitungs-Programme:

Programme zur Erstellung von Gif-Animationen: