![]() |
|
||||||||||||||||||||
|
|||||||||||||||||||||
|
|||||||||||||||||||||
von Elisabeth Bauer
HTML-Editoren wie FrontPage und Dreamweaver machen es dem Benutzer leicht: Wie in einem Textverarbeitungsprogramm kann jeder damit Web-Seiten gestalten und muss sich nicht mit den Details der Seitenbeschreibungssprache HTML auskennen. Noch einfacher geht es mit der HTML-Exportfunktion der Textverarbeitung. Wer dann zum Beispiel in Mozilla über Ansicht / Zeige Quelltext einen Blick auf den Quelltext der so hergestellten Seiten wirft, dem werden alle Vorurteile aufs Wundersamste bestätigt: In diesem Gewirr unverständlicher Anweisungen findet sich kein Mensch zurecht. HTML ist in Wirklichkeit jedoch ganz einfach. Handgeschriebenes HTML kommt mit einem Bruchteil der Anweisungen aus, die FrontPage & Co. verwenden, und die auch Unbedarfte durchaus verstehen können (vergleiche Abb. 4 und 6). Gründe, seine Seiten so zusammenzustellen, gibt es viele: Selbstgeschriebene Seiten lassen sich leichter warten. Beim Bearbeiten ist man nicht auf ein bestimmtes Programm angewiesen -- bei WYSIWYG-Editoren dagegen versteht der eine häufig nicht, was der andere produziert hat. Die Besucher der Homepage hingegen freuen sich über schnelle Ladezeiten -- selbstgeschriebene Seiten sind meist deutlich kürzer als maschinell generierte. Zum Einstieg braucht der Homepage-Bastler genau drei Dinge: einen Text-Editor zum Schreiben, einen Browser für die Vorschau und ein gutes Nachschlagewerk, das es glücklicherweise in Form von Stefan Münz' Selfhtml [1] kostenlos im Internet gibt. Als Editor kommt in diesem Artikel das auf HTML-Bearbeitung spezialisierte Bluefish zum Einsatz, das sich dank seiner Assistenten ideal für den leichten Einstieg eignet. Im Kasten Installation von Bluefish und Tidy lesen Sie dazu eine Installationsanleitung.
Um HTML zu lernen, muss man kein Programmierer sein Ð anders als viele denken, ist HTML nämlich gar keine Programmiersprache. Wie der Name HyperText Markup Language sagt, handelt es sich um eine Auszeichnungs- -- oder besser gesagt -- Formatierungssprache. Auch wenn Bluefish es dem Benutzer erspart, die genaue Syntax der HTML-Anweisungen ständig im Kopf zu haben, hilft es, die Grundlagen zu kennen. Das Grundelement von HTML ist das so genannte Tag. Tags bestehen aus in spitze Klammern eingeschlossenen Namen und treten bis auf wenige Ausnahmen paarweise auf: ein Anfangs- (z. B. <html>) und ein gleichnamiges, aber mit einem Schrägstrich beginnendes End-Tag (z. B. </html>). Eine einfache HTML-Seite kommt mit ganz wenigen Tags aus:
<html> <head> <title>Erste Seite</title> </head> <body> Blubb </body> </html>
<html> und </html> signalisieren dem Browser Anfang und Ende der Seite. Der Bereich zwischen <head> und </head> ist der Kopf der Seite: Dort ist Platz für den Titel sowie für Meta-Angaben wie Sprache oder Autor, die nicht dargestellt werden. Zwischen <body> und </body> kommt der Inhalt der Seite (hier nur ein Wort), den der Browser auch tatsächlich anzeigt. Vielen Tags können Sie zusätzlich weitere Angaben mitgeben, und zwar nach dem Muster <tag attribut=wert>. Für Bilder verwendet man zum Beispiel das Tag <img> (für Image = Bild). Welches Bild dargestellt werden soll, bestimmen Sie mit dem Attribut src (für source = Quelle), also <img src=bild.jpg>. Natürlich kann (und soll) man Tags auch schachteln -- hier ist jedoch Vorsicht geboten. Zum Beispiel will das Listen-Tag <ul></ul> mit Listeneinträgen (<li></li>) -- und nichts anderem -- gefüllt werden. Eine Kreuzschachtelung von Tags wie <ii><bb>kursiv und fett</i></b> stürzt viele Browser in Konfusion -- erlaubt sind nur <ii><bb>kursiv und fett</b></i> oder <bb><ii>kursiv und fett</i></b>. Genauer kann man das alles in Selfhtml [1] oder anderen Einführungswerken nachlesen.
Bevor Sie beginnen, sollten Sie sich ein paar Gedanken über Aufbau und Struktur Ihrer Homepage machen. Um den Transport zum Provider später so einfach wie möglich zu gestalten, legen Sie am besten im Konqueror einen eigenen Projektordner an. Wissen Sie schon, welche Bilder Sie verwenden wollen, kopieren Sie diese in einen Unterordner bilder/ in diesem Verzeichnis. Damit haben Sie sie später griffbereit. Je nachdem, wie umfangreich die Homepage werden soll, können Sie mehrere Seiten in Unterverzeichnisse legen. So vorbereitet, können Sie sich an die Gestaltung der ersten Seite wagen.
Zugegeben, dieses erste Ergebnis wirkt ein wenig langweilig. Gehen Sie also zurück zu Bluefish und wenden sich dem Werkzeugkasten zu, um die Seite optisch etwas aufzupeppen. In seinen Werkzeugleisten bietet Bluefish genau wie eine Textverarbeitung zahlreiche Formatierungsfunktionen an. Diese setzen Sie ein, indem Sie den zu formatierenden Abschnitt markieren und auf das entsprechende Symbol klicken. Bluefish fügt dann selbständig die richtigen HTML-Tags ein. Mit den beiden A-Symbolen setzen Sie markierten Text fett oder kursiv. Überschriften gibt es in HTML in sechs Größen, die Sie über das ausklappbare H-Symbol in der Standardleiste oder einzeln über den Reiter Schriftarten erreichen.
Was wäre eine Seite ohne Links? Tippen Sie den Text ein, den der Browser als Link darstellen soll, und markieren ihn. Ein Klick auf das Ankersymbol startet einen Dialog, mit dem Sie den Link erstellen (Abbildung 3). Das Feld HREF (für Hyper Reference) ist für die Adresse vorgesehen -- hier kommt eine komplette Internet-Adresse in der Form http://www.irgendeine-domain.de hin. Sie können über das Symbol Browsen aber auch lokale Dateien, z. B. die nächsten Seiten aus Ihrem Projektordner verlinken. Ein Klick auf OK macht aus dem markierten Text einen Link.
Für Bilder bietet Bluefish in der Standardwerkzeugleiste ganz rechts drei Schaltflächen an (siehe Abbildung 4): die linke bindet ein einzelnes Bild in Originalgröße ein, die mittlere erzeugt eine verkleinerte Vorschau (Thumbnail) mit einem Link auf das richtige Bild, und die rechte baut viele Bilder auf einmal als Thumbnails ein. Klicken Sie auf das Bild- oder Thumbnail-Symbol, um den Bildassistenten zu öffnen (Abbildung 1). Über Browsen suchen Sie das gewünschte Bild aus. Die Bildmaße übernimmt Bluefish automatisch, im Thumbnail-Dialog können Sie über einen Schieberegler die Verkleinerungsrate einstellen. Im Feld Ausrichtung bestimmen Sie die Ausrichtung des Bilds: Möglich sind hier die Werte top, middle, bottom, left und right (oben, mittig, unten, links und rechts). In den Feldern Horizontaler Abstand und Vertikaler Abstand legen Sie den Abstand des Bilds zum Text in Pixeln fest. Als gute Sitte (und aus Rücksicht auf Sehbehinderte) hat es sich eingebürgert, jedem Bild eine aussagekräftige Textbeschreibung mitzugeben -- diese findet im Alt-Text Platz.
Ein Bild kann natürlich auch ein Link sein -- Navigations-Buttons mit ausgefallenen Zierschriften sind beispielsweise ein beliebtes Gestaltungsmittel. Hier verfahren Sie ganz analog zu den Text-Links: Markieren Sie das komplette Bild-Tag, klicken auf das Ankersymbol und tragen im Link-Assistenten die Zieladresse ein.
Nach dem ersten Spielen mit den Formatierungsoptionen von Bluefish wird es Zeit, der Homepage ein ordentliches Layout zu verpassen. Im Prinzip könnte man natürlich jedem Element der Seite einzeln Farbe, Hintergrund, Größe, Schriftfamilie und Stil zuweisen -- wenn Sie den Knopf Schriftart links im Reiter Schriftarten entdeckt haben, haben Sie vermutlich auch schon herausgefunden, wie das geht. Die Sache hat nur einen Haken: Wer seinen Seiten später ein neues Outfit verpassen will, muss an unzähligen Stellen im Quelltext Änderungen vornehmen. Dass das wenig Spaß macht, ist nur allzu verständlich.
Was liegt da näher, als die Sache ein für alle Mal zentral zu regeln? Genau diesen Zweck erfüllen die Cascading Style Sheets (CSS). In einer Stylesheet-Datei weisen Sie HTML-Tags Formatierungsoptionen wie Farbe, Textgröße oder Stil zu, die sich auf alle Vorkommen eines Tags im Dokument auswirken. Das Beste dabei: Diese Stilvorlagen können Sie wieder verwerten. Über einen speziellen Link binden Sie das einmal erzeugte Stylesheet in jede Ihrer HTML-Seiten ein und sorgen so für ein einheitliches Layout der kompletten Homepage.
| Infos |
|
[1] http://selfhtml.teamone.de SelfHTML von Stefan Münz -- eine deutschsprachige Einführung in HTML.
[2] Tidy für SuSE Linux 8.1 ftp://ftp.suse.com/pub/suse/i386/8.1/suse/i586/tidy-020428-52.i586.rpm und für 8.2 ftp://ftp.suse.com/pub/suse/i386/8.2/suse/i586/tidy-020428-94.i586.rpm [3] Tidy für Red Hat Linux 8 und 9: ftp://rpmfind.net/linux/Mandrake-devel/contrib/i586/tidy-0.99-0.20030325.2mdk.i586.rpm und ftp://rpmfind.net/linux/Mandrake-devel/contrib/i586/libtidy0-0.99-0.20030325.2mdk.i586.rpm |
| Tipps und Tricks |
|
| Sauber formatieren und Seitencheck mit Tidy |
|
Spielt man lange an einer Seite herum, bleibt von der sauberen Ausgangsformatierung, welche die Bluefish-Assistenten liefern, oft nicht mehr viel übrig. Dann sollten Sie die automatische Putzfrau in Form des kleinen Hilfsprogramms Tidy rufen. Das geht in Bluefish an zwei Stellen: Einmal über External / Commands / Tidy Cleanup Filter oder über External / Outputbox / Tidy HTML Validator. Im ersten Fall säubert und bereinigt es den HTML-Code, im zweiten Fall prüft es die Seite und zeigt in einem Informationsfenster Fehler und Warnungen an (wenn es welche gibt). Leider benutzt der voreingestellte Cleanup Filter eine der schönsten Funktionen nicht: das Einfügen ordentlicher Einrückungen, mit denen Sie gleich mehr Überblick über Ihren Quelltext bekommen. Doch über Optionen / Einstellungen oder das Werkzeugsymbol in der oberen Symbolleiste können Sie schnell einen eigenen Filter anfertigen. Wählen Sie in den Einstellungen links den Reiter Externe Programme. Im oberen Feld finden Sie die Vorschauaufrufe für die verschiedenen Browser, im unteren Feld kleine Hilfsfunktionen. Markieren Sie den Eintrag von Tidy und klicken auf Add, um diesen zu duplizieren. Geben Sie im Feld Label der zweiten Version einen neuen Namen und fügen Sie wie in der Abbildung bei Befehl vor dem -utf8 noch ein -i ein (Wenn Sie als Zeichensatz-Kodierung statt UTF-8 in Ihren Seiten Latin-1 verwenden, ändern Sie an dieser Stelle -utf8 auch gleich in -latin1). Ein Klick auf OK speichert die neuen Einstellungen. Um Tidys Formatierungsdienste in Anspruch zu nehmen, rufen Sie den neuen Filter über das Menü Extern / Befehle auf. |
| Die wichtigsten HTML-Tags | |
| <a href="http://www.eine-url.de">Hier geht's zu...</a> | ein anklickbarer Link |
| <h1>Überschrift</h1> (<h2>,<h3>,<h4>,<h5>,<h6>) | Übrschriften in verschiedenen Größen |
| <p>Absatz</p> | Absatz ("Paragraph") |
| <br> | Zeilenvorschub |
| <bb>fett</b> | Fetter Text |
| <ii>kursiv</i> | Kursiver Text |
| <img src="pfad/dateiname" alt="beschreibung"> | Bild einbinden mit einer Beschreibung |
| <ul> | unnumerierte Liste mit zwei Einträgen (li -- "list item") |
| <li>Eintrag 1</li> | |
| <li>Eintrag 2</li> | |
| </ul> | |
| <table> | Tabelle mit zwei Spalten und zwei Reihen. |
| <tr> | Tabellen sind in HTML zeilenweise aufgebaut: Mit <tr> ("table row") leiten Sie eine Tabellenzeile ein |
| <td>eins</td><td>zwei</td> | Die einzelnen Tabellenfelder werden von <td>-Tags ("table data") umschlossen. |
| </tr> | |
| <tr> | |
| <td>drei</td><td>vier</td> | |
| </tr> | |
| </table> | |
| Installation |
|
Weder SuSE noch Red Hat Linux bringen Bluefish auf den Distributions-CDs mit, doch im Internet findet man RPM-Pakete. Leider hat die Sache nicht nur einen, sondern gleich zwei Haken: Der SuSE-FTP-Server bietet nur Bluefish 0.7 an, aktuell ist jedoch 0.9. Für Red Hat Linux gibt es Pakete der Version 0.9, allerdings ist die Oberfläche komplett in Englisch, da die deutsche Sprachunterstützung zum Erscheinungstermin noch nicht fertig war. Daher bieten wir auf der Easylinux-Website RPM-Pakete der aktuellen Entwicklerversion (mit deutscher Sprachunterstützung) für Red Hat Linux 8 und 9 und SuSE Linux 8.1 und 8.2 an. Diese Pakete basieren nicht auf einer offiziell veröffentlichten Version, sondern dem Code, an dem gerade aktiv entwickelt wird. Sich Programme direkt aus dem CVS, einem Versionsverwaltungssystem für Software, zu ziehen und selbst zu kompilieren, ist unter Linux-Anwendern beliebte Praxis -- eine Garantie, dass die gerade heruntergeladene Version auch fehlerfrei funktioniert, gibt es dabei allerdings nicht. Bluefish erschien uns jedoch hinreichend stabil, um diesen Schritt zu wagen. Laden Sie das für Ihre Distribution passende RPM-Paket von http://www.easylinux.de/Download herunter. Unter Red Hat Linux installieren Sie das Paket mit Doppelklick. Geben Sie bei der folgenden Abfrage Ihr Root-Passwort an, das Programm redhat-install-packages erledigt den Rest. Nach der Installation finden Sie Bluefish unter Red Hat Linux 8.0 im K-Menü unter Extras / Office, bei Red Hat Linux 9 unter Office / Weitere Office-Applikationen. Unter SuSE Linux 8.2 klicken Sie im Datei-Manager Konqueror auf das heruntergeladene Bluefish-Paket. Klicken Sie auf die Schaltfläche Installiere Paket mit YaST und geben Ihr Root-Passwort ein, um das Bluefish-Paket einzuspielen. Benutzer von SuSE Linux 8.1 müssen zuvor noch einige Pakete von CD nachinstallieren. Starten Sie dazu YaST über Administration / Software installieren oder löschen im SuSE-Work-Menü. Klicken Sie links auf die Gruppe Gnome System. Im rechten Feld markieren Sie control-center2, um möglichst einfach alle benötigten Pakete zu erhalten. Klicken Sie auf Akzeptieren und legen die verlangte CD ein. Anschließend installieren Sie Bluefish wie unter SuSE Linux 8.2. Bluefish liegt im K-Menü unter Internet / WWW. Vor dem Start von Bluefish sollten Sie sich einmal aus- und wieder einloggen, damit das System den Pfad aktualisieren kann. Das kleine Hilfsprogramm Tidy (siehe Kasten auf Seite 20) erhalten Sie ebenfalls über das Internet. Auf dem SuSE-FTP-Server liegen passende Pakete [2], die Sie wie Bluefish über Konqueror und YaST einspielen können. Red Hat Linux benötigt gleich zwei Pakete, tidy und libtidy, die Sie an der unter [3] angegebenen Adresse herunterladen können. Diese entstammen zwar der Linux-Distribution Mandrake, funktionieren in diesem Fall jedoch auch unter Red Hat Linux. Markieren Sie die beiden Pakete im Datei-Manager Konqueror und wählen Sie im Kontextmenü, das sie mit einem Klick der rechten Maustaste öffnen, den Befehl Install Packages. Nach Eingabe des Root-Passworts startet das Red-Hat-Installationsprogramm. |
Dieser Online-Artikel kann Links enthalten, die auf nicht mehr vorhandene Seiten verweisen. Wir ändern solche "broken links" nur in wenigen Ausnahmefällen. Der Online-Artikel soll möglichst unverändert der gedruckten Fassung entsprechen.
Druckerfreundliche Version |
Feedback zu dieser Seite |
Datenschutz |
© 2012 Linux New Media AG |
Last modified: 2007-01-25 16:20
[Linux-Magazin]
[LinuxUser]
[Linux-Community]
[Admin-Magazin]
[Ubuntu User]
[Smart Developer]
[Linux Events]
[Linux Magazine]
[Ubuntu User]
[Admin Magazine]
[Smart Developer]
[Linux Magazine Poland]
[Linux Community Poland]
[Linux Magazine Brasil]
[Linux Magazine Spain]
[Linux Technical Review]