 |
|||
| HSG |
|
Arbeitsablauf mit Bluefish/firefox/HTML-Validierer/CSS-Validierer
Der Editor Bluefish (Windows-Setup: Bluefish-2.2.2-setup.exe) eignet sich für das Erstellen von HTML-Seiten. Zu Beginn der Arbeit wird man einmalig die Einstellungen (Bearbeiten/Einstellungen) überprüfen oder setzen.
Insbesondere sollte für ältere Windowsversionen die Codierung unter Dateien auf 'iso-8859-1' gesetzt werden. Bei älteren Bluefish-Versionen muss man die Einstellungen ausdrücklich speichern. Unter Linux liegen sie im versteckten Ordner '.bluefish'. Man kann auch am HSG, das ja immer mit einem 'jungfräulichen' Linux startet, die Einstellungen speichern und rückspeichern.
mk@x2:~/h$ cp -a /home/mk/.bluefish /home/mk/h mk@x2:~/h$ ls -a . .. .bluefish mk@x2:~/h$ cp -a /home/mk/h/.bluefish /home/mk/
Es empfiehlt sich mit einer Musterdatei z.B. template.html zu starten. Diese Musterdatei sollte mit einem Schreibschutz gegen versehentliches Ãœberschreiben gesichert sein.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>ein erstes HTML-Dokument</title>
</head>
<body >
<p>böser Test</p>
</body>
</html>
Die Musterdatei wird dann sofort unter einem neuen Namen, z.B. tabelle0.html abgespeichert. Bitte darauf achten, dass öffnende und schließende Tags, sofern sie in verschieden Zeilen stehen, genau untereinander stehen. Wenn eingerückt wird, dann genau zwei Stellen einrücken. Typisch für den Arbeitsablauf (Workflow-Management) ist das zusätzliche Öffnen eine Browsers z.B. firefox, der die bearbeitete Datei darstellt. Wichtig ist dabei, dass die Datei vom Webserver z.B. mit https://schule.hsg-kl.de/~mk/template.html ausgeliefert wird. Wird die Datei mit dem file://-Protokoll angezeigt, so kommen Betriebssystembesonderheiten wie die fehlende Unterscheidung von Groß- und Kleinschreibung unter Windows zum Tragen. Faustformel: In der Adresszeile des Browsers darf niemals 'file://' vorne stehen. Arbeitet man nun mit Bluefish an dem Dokument, so soll man regelmäßig das Produkt der Arbeit mit dem Browser (Aktualisierung nicht vergessen) überprüfen. Auf diese Weise sieht man bei installiertem Validierer (z.B. HTML VALIDATOR) sofort, wenn ein Fehler passiert ist.
Die Datei tabelle1.html bezieht sich zur Formatierung auf eine css-Datei. Welche Datei das ist und wo sie liegt, offenbart ein Blick auf den Quelltext. Den Quelltext einer Datei zeigt ein Browser beim Klick mit der rechten Maustaste an. In unserem Fall heißt die Datei tab.css. CSS ist eine eigene Sprache und wird nicht von einem HTML-Validierer überprüft. Hierfür gibt es CSS-Validierer, z.B. CSS Validation Service des W3C, CSSCheck.
Aufgabe
Die Datei 'tab.css' auf https://schule.hsg-kl.de/~mk/ enthält einen Fehler. Welchen? Die Datei 'tab.css' auf dieser Seite ist fehlerfrei. Überprüfe das.
Werkzeuge
- Firefox - Webbrowser
- Validator-PlugIn für Firefox
- Bluefish - Editor für Windows, Linux, Mac
- Inkscape - freies Grafikprogramm, vektororientiert
- Gimp - freies Grafikprogramm, pixelorientiert
- Web Developer - nützliches Firefox-PlugIn
