Gestaltung von HTML-Dateien

Romain-Rolland-Gymnasium Dresden, Kurs Neue Medien (2013)

Übersicht				wichtige Begriffe

Lektion 1: Herangehen	Lektion 2: HTML	Lektion 3: Helfer	Lektion 4: so gehts	Lektion 5: einfache Gestaltung	Lektion 6: Frames	Lektion 7: CSS	Lektion 8: Dateitypen

Hinweise zur Gestaltung

Überschriften

Einfache Gestaltung von HTML-Dateien

Ursprünglich waren HTML-Dokumente vorwiegend für gegliederte Texte konzipiert worden. Man ging so weit, dass man die Gestaltung fast vollständig dem Betrachter überließ. Auch heute noch kann man den Browser so konfigurieren, dass man seine individuelle Schriftarten, Schriftgrößen und Farben verwendet.
Inzwischen versuchen Web-Programmierer auf verschiedene Arten, ihre eigenen Vorstellungen von Gestaltung umzusetzen. Das hat allerdings zur Folge, dass

nicht jeder Browser die Dateien richtig anzeigen kann
die Seiten trotzdem überall verschieden aussehen,denn die zur Verfügung stehende Bildschirmgröße hängt von vielen Faktoren ab
Druck-Probleme auftreten können
Gehandicapte Personen Probleme beim Lesen der Seite bekommen können. Das gilt besonders für Sehschwache und für blinde Menschen.
Suchmaschinen manchmal nur einen Teil Ihrer Seite finden (siehe Frames) und Benutzer schlechter navigieren können.
Suchmaschinen in extremen Fällen Ihre Seite gar nicht finden oder erst weiter unten auflisten
wegen Sicherheitseinstellungen des Browsers besondere Funktionen der Seite nicht funktionieren oder Teile der Seite nicht angezeigt werden
Lesezeichen nicht zu konkreten Inhalten führen können, sondern nur zum Gesamtangebot oder nur zu einem speziellen Teil der Seite.
die Dateien größer werden

Aus diesen Gründen sollten Sie die Gestaltung nicht übertreiben. Legen Sie den Schwerpunkt auf eine besonders schnelle Orientierung und lassen Sie so viel Schnickschnack wie möglich weg. Es ist den Aufwand nicht wert.
Nutzen Sie statt dessen lieber einfache Gestaltungsmittel zur Gliederung wie

Überschriften

Es gibt sechs verschiedene Ebenen von Überschriften, die mit den Tags <h1> bis <h6> codiert werden. In Phase 5 können Sie markierte Bereiche sehr schnell über das Menü Format, ein Symbol der Symbolleiste oder die Tastenkombinationen Strg + F1 bis Strg + F6 formatieren.

Textarten

Außer den Überschriften gibt es noch zahlreiche andere Textarten, die in anderen Programmen meist als Formatvorlagen bezeichnet werden. Einige sind recht häufig, beispielsweise hervorgehoben oder betont, andere heißen, Beispiel, Zitat, Definition, Code oder Keyboard, können aber natürlich auch für eigene Zwecke verwendet werden.
Mit Hilfe von css-Dateien können Sie das Aussehen dieser Formatvorlagen und anderer Gestaltungselemente definieren und eigene Vorlagen hinzufügen. Diese Möglichkeit wird später genauer erläutert.

Listen

Mit HTML können Sie ungeordnete und geordnete Listen anlegen. Letztere können mit arabischen, großen oder kleinen römischen Zahlen oder mit Groß- und Kleinbuchtstaben nummeriert werden. Nutzen Sie zum Erstellen den HTML-Konstruktor im Menü Tools! Einzelne Listenpunkte können Sie später sehr einfach ergänzen, denn Sie sehen ja im Text, dass jeder Listenpunkt in die Tags <li> und </li> eingeschlossen ist.

Tabellen

Eine Tabelle wird innerhalb der Tags <table> und </table> beschrieben. Jede Zeile ist durch die Tags <tr> und </tr> begrenzt, innerhalb derer die einzelnen Zellen mit <td> eingeleitet und natürlich auch mit </td> beendet werden. Einzelne Zellen können Sie statt mit <td> mit <th> kennzeichnen. Das ist für den Tabellenkopf, kann aber auch bei Zusammenfassungen o.ä. verwendet werden.
Tabellen bieten zahlreiche Gestaltungsmöglichkeiten, darunter auch das Verbinden von Zellen. Früher wurden Tabellen (ohne Rahmen) auch gern zur Gliederung und Aufteilung und für den Spaltensatz verwendet. Heute ist das seltener der Fall.

Horizontale Linien

Horizontale Linien gehen stets über die gesamte Breite der Seite bzw. Zelle. Farbe und Dicke sind variabel. Mit Phase 5 fügen Sie Linien schnell durch Strg + h oder mit dem Menü Einfügen ein. Der code dazu lautet <hr noshade size="Größe">

vorherige Lektion: So schreiben Sie HTML-Dateien

Das war Lektion 5: einfache Gestaltung

nächste Lektion: Framesets und Frames