Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger

Kompendium der Informationstechnik  von Sascha Kersken
EDV-Grundlagen, Programmierung, Mediengestaltung
(Die Neuauflage ist erschienen als: "Handbuch für Fachinformatiker")
Buch: Kompendium der Informationstechnik
gp Kapitel 16 HTML und XHTML
  gp 16.1 Einführung
    gp 16.1.1 Regeln für Datei- und Verzeichnisnamen im Webbereich
    gp 16.1.2 HTML-Dateien eingeben
  gp 16.2 HTML und XHTML
    gp 16.2.1 Die Grundstruktur von HTML-Dokumenten
    gp 16.2.2 Textstrukturierung und -formatierung
    gp 16.2.3 Trennlinien
    gp 16.2.4 Listen und Aufzählungen
    gp 16.2.5 Farben in HTML
    gp 16.2.6 Hyperlinks
    gp 16.2.7 Bilder in Webseiten einbetten
    gp 16.2.8 Tabellen
    gp 16.2.9 Formulare
    gp 16.2.10 Einbetten von Multimedia-Dateien
    gp 16.2.11 Frames
    gp 16.2.12 Meta-Tags und Suchmaschinen
  gp 16.3 Cascading Stylesheets (CSS)
    gp 16.3.1 Platzieren von Stylesheets
    gp 16.3.2 Stylesheet-Wertangaben
    gp 16.3.3 Stylesheet-Eigenschaften
    gp 16.3.4 Layer erzeugen und positionieren
  gp 16.4 Zusammenfassung

gp

Prüfungsfragen zu diesem Kapitel (extern)

Kapitel 16 HTML und XHTML

Wer am falschen Faden arbeitet, zerstört das ganze Gewebe.
– Konfuzius

Die Gestaltung und Programmierung von Webauftritten ist inzwischen der wichtigste Zweig der Digitalmedienproduktion. Dieses Kapitel und die nächsten vier beschäftigen sich mit verschiedenen Aspekten der Erstellung von Websites:

gp  Im vorliegenden Kapitel wird zunächst HTML vorgestellt, die grundlegende Sprache, in der Webseiten geschrieben werden. Hinzu kommen die Grundlagen der Formatierung mit Cascading Stylesheets (CSS).
gp  In Kapitel 17, Webdesign, werden die gestaltungstechnischen Aspekte des Webdesigns behandelt. Insbesondere werden die beiden Macromedia-Programme Fireworks und Dreamweaver besprochen, die der Vorbereitung und Erstellung komplexer Weblayouts dienen.
gp  Kapitel 18, Serverseitig dynamische Websites, behandelt das Erzeugen von Websites aus Vorlagen und dynamischen Daten. Besonders ausführlich wird die beliebte Kombination aus der Skriptsprache PHP und der freien Datenbank MySQL beschrieben.
gp  Kapitel 19, JavaScript, beschäftigt sich mit der gleichnamigen Skriptsprache, die innnerhalb von Webbrowsern zur dynamischen Änderung der HTML-Elemente selbst eingesetzt wird.
gp  In Kapitel 20, Macromedia Flash, wird schließlich das beliebte Animations- und Autorenprogramm Flash behandelt, das die Erstellung multimedialer Webinhalte mit vergleichsweise wenig Aufwand und für ein sehr großes Publikum ermöglicht – fast alle verbreiteten Browser sind in der Lage, Flash-Inhalte anzuzeigen.

Rheinwerk Computing

16.1 Einführung  downtop

In diesem Abschnitt erhalten Sie einen kurzen Überblick über praktische Aspekte der HTML-Dokumenterstellung. Insbesondere lernen Sie einige Regeln für Dateinamen im Webbereich kennen und erfahren einiges über diverse Anwendungen, mit denen Sie Webseiten erstellen können.


Rheinwerk Computing

16.1.1 Regeln für Datei- und Verzeichnisnamen im Webbereich  downtop

Bevor es zu spät ist, sollte ein Wort zu dem wichtigen Thema Dateinamen gesagt werden. Sicherlich wissen Sie bereits, dass UNIX-Rechner zwischen Groß- und Kleinschreibung unterscheiden. Dies ist das Hauptproblem, aber es gibt noch einige andere.

Wahrscheinlich bearbeiten Sie Webseiten an einem Windows-PC oder auf einem Macintosh. Solange Sie nur mit einzelnen Dateien auf Ihrem eigenen Rechner arbeiten, haben Sie bezüglich der Dateinamen die vollkommene Entscheidungsfreiheit. Es ist eine Frage Ihres persönlichen Geschmacks, ob Sie Leerzeichen und Sonderzeichen in Dateinamen mögen oder nicht. Zur Groß- und Kleinschreibung müssen Sie sich auch keine Gedanken machen, denn sowohl Windows als auch Mac  OS unterscheiden nicht zwischen diesen Varianten; index.htm, Index.Htm oder INDEX.HTM bezeichnen im gleichen Verzeichnis jeweils dieselbe Datei.

HTML-Dateien, Bilder oder Flash-Filme, die im World Wide Web veröffentlicht werden sollen, lassen jedoch diesen Luxus der freien Auswahl nicht mehr zu. Das WWW ist eine Client-Server-Anwendung; ein »auslieferndes« Serverprogramm kommuniziert mit einem »empfangenden« Client-Programm, nämlich dem Browser des Betrachters. In der Regel laufen diese beiden Programme nicht auf demselben Rechner. Das Serverprogramm läuft meist auf einem starken Computer bei einem Provider, der Client hingegen in der Regel auf einem Einzelplatzrechner. Um allen Eventualitäten bezüglich der unterschiedlichen Rechner-Architekturen zu begegnen, sollten Sie sich bei der Wahl Ihrer Dateinamen stets an die folgenden Regeln halten:

1. Nur Kleinbuchstaben verwenden. Da die UNIX-Rechner, auf denen sich die meisten öffentlich verfügbaren Sites befinden, zwischen Groß- und Kleinschreibung unterscheiden, ist dies die einfachste Lösung.
       
2. Nur Buchstaben, Ziffern und Unterstriche benutzen. Verwenden Sie also auf keinen Fall Umlaute oder »ß«, keine Sonderzeichen und erst recht keine Leerzeichen!
       
3. Verwenden Sie stets die korrekte Datei-Endung. Diese wird vom Server benötigt, um dem Browser mitzuteilen, welche Sorte Daten gesendet wird.
       

Aus Sicherheitsgründen wäre es auch noch möglich, auf die »8.3-Regel« aus der DOS-Steinzeit zu achten (maximal 8 Zeichen für den Dateinamen, bis zu 3 Zeichen für die Endung). Zwar können alle heutigen Betriebssysteme mit längeren Namen umgehen, aber beim Dateiaustausch zwischen Mac und Windows über Wechseldatenträger kann es unter ungünstigen Umständen passieren, dass sie sich gegenseitig die Dateinamen zerschießen.


Rheinwerk Computing

16.1.2 HTML-Dateien eingeben  toptop

Um HTML-Dokumente zu erstellen, benötigen Sie erstens eine Software, mit deren Hilfe Sie diese eingeben können, und zweitens einen Webbrowser, um das fertige Ergebnis zu betrachten. Wenn Sie professionell arbeiten möchten, sollten Sie sich Ihre Arbeit sogar in mehreren Browsern ansehen.

Unterschied Mac/Windows

Unter Windows werden HTML-Dateien bei Doppelklick mit dem Standardbrowser geöffnet. Dies ist normalerweise der Internet Explorer; allerdings enthält beinahe jeder Browser eine Möglichkeit, ihn zum Standardbrowser zu machen. Wollen Sie die Datei dagegen wieder editieren oder in einem anderen Browser testen, müssen Sie den Dialog Datei • Öffnen des entsprechenden Programms oder Drag and Drop bemühen. Unter Linux sieht es ähnlich aus.

In beiden Mac  OS-Varianten werden die Dateien dagegen per Doppelklick mit dem Programm geöffnet, mit dem sie erstellt wurden. Um sie im Browser anzusehen, müssen Sie sie also explizit darin öffnen oder auf das Icon des Browsers ziehen.

Unabhängig davon besitzen bessere Webseiten-Editoren zumeist eine Funktion, mit der Sie die aktuell bearbeitete Seite automatisch im gewünschten Browser öffnen können.

Es gibt prinzipiell drei verschiedene Arten von Programmen, mit denen Sie HTML-Dokumente bearbeiten können: Texteditoren, spezialisierte HTML-Quellcode-Editoren und WYSIWYG-Webseiten-Editoren.

Texteditoren

Natürlich können Sie einfach den Texteditor einsetzen, der bereits mit Ihrem Betriebssystem geliefert wird. Das wäre unter Mac  OS 9 SimpleText, unter Mac  OS X TextEdit und unter Windows notepad.exe (zu erreichen über Start • Programme • Zubehör • Editor in allen Windows-Versionen). Allerdings bieten diese rudimentären Editoren viel zu wenig Möglichkeiten, um damit glücklich zu werden.

Es empfiehlt sich daher durchaus die Investition in einen besseren Editor: Entweder investieren Sie Geld und kaufen sich einen kommerziellen Editor, zu empfehlen sind hier beispielsweise TextPad für Windows (Demoversion unter http://www.textpad.com) und BBEdit für Mac (http://www.barebones.com). Oder aber Sie investieren ein wenig Fleiß, um den Umgang mit dem hervorragenden, komfortablen Editor Emacs zu erlernen (siehe Kapitel 4, Betriebssysteme). Das ist einigermaßen schwierig, aber wenn Sie ihn erst einmal beherrschen, wollen Sie wahrscheinlich nie wieder mit einem anderen Editor arbeiten.

HTML-Editoren

Als »bessere Text-Editoren« mit Erleichterungen zur komfortablen HTML-Eingabe bieten sich spezielle HTML-Editoren an. Der Übergang vom »normalen« Texteditor zum HTML-Editor ist dabei fließend: Bereits das im vorigen Abschnitt erwähnte BBEdit bietet einige spezialisierte Funktionen zur HTML-Eingabe, für den Macintosh gibt es auch ansonsten keinen bekannten HTML-Editor.

Für Windows gibt es gleich drei geeignete Produkte: Macromedia HomeSite, wahrscheinlich das leistungsfähigste von allen, ist kommerziell, aber Sie können unter http://www.macromedia.com eine 30-Tage-Testversion herunterladen. Ulli Meybohms HTML-Editor Phase 5 ist trotz seines sperrigen Titels ziemlich komfortabel. Er ist kostenlos und steht auf der Homepage des Autors, http://www.meybohm.de, zum Download bereit. Ebenfalls kostenlos ist 1st Page 2000 von http://www.evrsoft.com.

An dieser Stelle kann ich nicht im Einzelnen auf die Funktionen, Vor- und Nachteile der Text- und HTML-Editoren eingehen. Probieren Sie einfach aus, womit Sie am besten zurecht kommen. Der Vorteil dieser quelltextorientierten Arbeitsweise ist ohnehin, dass Sie völlig problemlos umsteigen können.

WYSIWYG-Editoren

Der Begriff »WYSIWYG« (»What You See Is What You Get«) stammt eigentlich aus dem DTP-Bereich (siehe Kapitel 9) und bedeutet, dass ein Dokument bereits bei der Bearbeitung am Bildschirm ungefähr so aussieht wie später im Druck. Beim Webdesign bezeichnet der Begriff grafische beziehungsweise visuelle Webseiten-Editoren, auch wenn die Bezeichnung wegen der großen Unterschiede zwischen verschiedenen Browsern und den Hardware-Gegebenheiten der einzelnen User eigentlich nicht angebracht ist. Jedenfalls müssen Sie in solchen Programmen keinen HTML-Code eintippen, sondern die Seite wird so zusammengebaut, wie sie später im Browser erscheinen soll.

In dieser Softwaregattung gibt es eine Unmenge von Produkten. Allen ist im Grunde gemeinsam, dass die Entscheidung für eines dieser Programme relativ endgültig ist, denn der automatisch erzeugte HTML-Code ist komplex und hat je nach konkreter Software seine Eigenheiten, sodass er kaum noch manuell oder von einem anderen Programm weiterverarbeitet werden kann.

Drei dieser Programme sollen hier kurz genannt werden:

gp  Macromedia Dreamweaver wird von vielen als das beste derartige Programm gelobt und bietet eine Reihe von Features, die dies belegen: Sie können komfortabel in einem Modus arbeiten, in dem Layout und HTML-Code gleichzeitig angezeigt werden, und dem Programm sogar Ihre eigenen HTML-Gewohnheiten beibringen. Ganz allgemein erzeugt es den kompatibelsten und lesbarsten HTML-Code. Dreamweaver wird in Kapitel 17, Webdesign, ausführlich vorgestellt.
gp  Der härteste Konkurrent ist Adobe mit seinem Produkt GoLive. Der erzeugte HTML-Code erreicht nicht ganz die Qualität von Dreamweaver, überzeugen können hier jedoch die erheblich komfortableren Website-Management-Funktionen.
gp  Von Microsoft FrontPage schließlich ist in den meisten Fällen abzuraten: Zwar ist das Programm auf den ersten Blick benutzerfreundlich und erscheint besonders den Anwendern vertraut, die mit Microsoft-Office-Produkten arbeiten, aber erstens ist der HTML-Code zu anderen Browsern als dem Internet Explorer weitgehend inkompatibel, und zweitens fehlen eine Reihe von Bearbeitungsmöglichkeiten, die für größere Websites unabdingbar sind.

Ansonsten gilt auch in diesem Bereich, dass probieren über studieren geht. Und nicht zuletzt kann es vorkommen, dass Sie durch Vorgaben Ihres Arbeitgebers auf ein bestimmtes Produkt angewiesen sind. Letzten Endes ist es ohnehin unabdingbar, die Grundlagen von HTML zu beherrschen – nur so verstehen Sie den Aufbau von Webseiten wirklich und können außerdem direkt den HTML-Code ändern, falls Ihr WYSIWYG-Editor einmal Probleme bereitet oder bestimmte Funktionen nicht unterstützt.






  
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung


IT-Handbuch
für Fach-
informatiker

Java ist auch
eine Insel

Linux
Handbuch

Computer
Netzwerke

Schrödinger
lernt HTML5,
CSS3 und
JavaScript
Versandkostenfrei bestellen in Deutschland und Österreich
Info





Copyright © Rheinwerk Verlag GmbH 2004
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de