Erste Schritte in NVU

Transkript

1 NVU ( ist ein leicht zu bedienender HTML-Editor. Nach dem Start von NVU sieht der Bildschirm wie folgt aus: Lasse dich von dieser Anzeige nicht irritieren, es ist alles halb so wild. Das linke Fenster zeigt eine Übersicht von vorhandenen Seiten an hier noch gar keine das rechte, größere Fenster zeigt die aktuell in Bearbeitung befindliche Seite an. Es wurde hier noch gar nichts eingegeben. Erste Schritte in NVU Die Arbeit damit ist ganz ähnlich zu der in einer Textverarbeitung. Wichtig für sinnvolle Ergebnisse sind Grundkenntnisse über Prinzipien der Veröffentlichung im WWW. Das Wichtigste hierbei ist: Der Autor kümmert sich nur um den Inhalt seiner Seite, dazu gehört auch die logische Strukturierung. Es ist nicht die Aufgabe des Autors, auf die Darstellung im Browser Einfluss zu nehmen. Der Browser stellt den Text aufgrund der vom Autor vorgenommenen logischen Strukturierung sinnvoll dar. Wenn dieses Layout nicht vollständig den Wünschen entspricht, dann wird an der Textseite selbst gar nichts geändert, sondern ein Stylesheet erstellt, das die Darstellung steuert. Meine erste HTML-Seite Du lernst hier, deine erste HTML-Seite mithilfe des HTML-Editors NVU zu erstellen. Diese Arbeitsweise ist typisch und prinzipiell auf jede zu erstellende HTML-Seite übertragbar. NVU bietet dir mehrere Ansichten: 1. Normal ist die Standardansicht von NVU, mit der du die meisten Zeit arbeiten wirst. 2. HTML-Tags zeigt in vereinfachter Form an, welche Tags verwendet werden und damit die logische Struktur des Textes. 3. Quelltext zeigt den HTML-Quelltext an, der natürlich auch bearbeitet werden kann, wenn man über ausreichend HTML-Kenntnisse verfügt. 4. Vorschau zeigt die Seite so an, wie sie ein typischer WWW-Browser darstellen wird. Jede Seite hat eine Überschrift; wähle dazu aus: Ein Text wird hierarchisch gegliedert. Die oberste Überschrift und damit die Überschrift einer Seite ist daher immer eine Überschrift 1. Die Überschrift eine Ebene tiefer sind immer Überschrift 2, darunter wiederum nur Überschrift 3, usw.. Gib nun für die Überschrift im großen Fenster einen Text ein. (Wer neugierig ist, kann auch einmal die anderen Ansichten probieren, z.b. Quelltext.) Gib nun etwas normalen Text ein; achte darauf, dass Normaler Text ausgewählt ist: Speichere dann diese Webseite;

2 NVU will dabei zunächst einen Titel für die Seite eingegeben haben, erst danach können Dateiname und Speicherort ausgewählt werden. Der Seitenname muss unbedingt in wenigen Worten den Inhalt der Seite aussagekräftig beschreiben, denn er wird von Suchmaschinen ausgewertet und in der Trefferliste dort angezeigt. Wer möchte, dass seine Seiten über Suchmaschinen leicht gefunden werden können, wird auf einen guten Titel jeder einzelnen Seite großen Wert legen. Betrachte nun die Seite in einem Webbrowser. Auflistung, Aufzählung, Hervorhebung in NVU Auflistung und Aufzählung Oft sollen verschiedene Informationen übersichtlich präsentiert und aufgelistet werden. Dazu gibt es in HTML die Auflistung und die Aufzählung. Bei der Auflistung stehen am Anfang einfach nur dicke Punkte, bei einer Aufzählung werden die einzelnen Informationen durchnummeriert. Probiere beides aus und achte auf das Aussehen des Ergebnisses. Eine Auflistung wird erstellt mit der Schaltfläche Eine Aufzählung wird erstellt mit der Schaltfläche Hervorhebung Mitunter sollen im Text einzelne Worte hervorgehoben werden. Dazu gibt es in HTML die Hervorhebung. Die normale Hervorhebung wird aktiviert über die Schaltfläche Die starke Hervorhebung wird aktiviert über die Schaltfläche An den beiden Arten der Hervorhebung ist sehr schön der HTML-Grundgedanke zu sehen: Der Autor kümmert sich nur um die logische Strukturierung seines Textes, die konkrete Darstellung im Browser des Lesers muss ihn nicht beschäftigen. Die meisten Browser werden die normale Hervorhebung kursiv setzen und die starke Hervorhebung fett aber wie gesagt, das ist Sache des Browsers und nicht des Autors. Tabellen in NVU Viele Informationen sind am besten tabellarisch zu präsentieren. Eine Tabelle wird in NVU über die folgende Schaltfläche eingefügt: Dort kann ausgewählt werden, wieviele Zeilen und Spalten die Tabelle erhalten soll. Bei der Breite einer Tabelle soll möglichst immer eine Angabe in Prozent gemacht werden, denn dann kann sich die Tabelle der Seitenbreite im Browser anpassen. Wird die Breite einer Tabelle in Pixel angegeben, dann ist das eine feste Breite. Das kann bei breiten Tabellen und schmalen Fenstern u.u. zu horizontalem Scrollen führen und das ist die letzte Unbequemlichkeit, die man seinem Leser zumuten sollte. Bilder einbinden in NVU Damit eine Webseite nicht nur eine Textwüste wird, sollten einige wenige, aussagekräftige Bilder eingebunden werden. Zunächst müssen die Bilder in einer Bildverarbeitung auf die Größe skaliert werden, mit der sie nachher auch dargestellt werden. Zusätzlich kann das Bild dort etwas bear- beitet und optimiert werden, z.b. Kontrast, Helligkeit, Schärfe, usw., auch ein leichter Farbstich kann dort entfernt werden. Als Bildformat ist insbesondere PNG

3 empfehlenswert, da es frei von Patentan- sprüchen ist; sowohl GIF als auch JPEG sind in der Vergangenheit deswegen schon ins Gerede gekommen. Liegt das Bild fertig bearbeitet vor, dann kann es in die Webseite eingebunden werden. Dies erfolgt in NVU mit der folgenden Schaltfläche: Es öffnet sich dann das folgende Fenster: Die wichtigste Angabe ist die Adresse der Grafik. Für den Anfang ist es am einfachsten, wenn die Grafik im selben Verzeichnis liegt wie die HTML-Seite, in der sie angezeigt werden soll. Dann wird nach der Auswahl der Grafik auch ein Häkchen bei URL relativ zur Seitenadresse erscheinen das ist richtig und wichtig. Beginnt die Grafikadresse mit file:///, dann ist das definitiv falsch, denn liegt die Webseite später auf einem Server wird die Grafik nicht mehr gefunden. Die zweite wichtige Angabe ist ein Alternativtext, der in wenigen Worten den Inhalt der Grafik aussagekräftig beschreibt. Das ist sehr wichtig sowohl für Suchmaschinen dort speziell für die Bildersuche als auch für Sehbehinderte, die sich den Inhalt einer Webseite mit einem Screenreader vorlesen lassen. Von der Option Keinen Alternativtext verwenden wird dringend abgeraten, die Seite wird dadurch behindertenfeindlich. Unter dem Reiter Link kann ein Bild auch ein Link auf einen anderen Webinhalt sein, darauf wird an dieser Stelle aber nicht weiter eingegangen. Links in NVU Links also Querverweise in HTML-Seiten sind quasi das Salz in Suppe davon lebt das WWW, sie machen erst das WWW aus. Ein Link wird in NVU über die folgende Schaltfläche erstellt: Es öffnet sich das folgende Fenster: Hier sind zwei Angaben erforderlich: 1. Link-Text: Dieser Text ist der Text, der vom Leser der Seite mit der Maus angeklickt werden kann. Es kann ein einzelnes Wort sein oder auch mehrere, der Text sollte aber nicht zu lang werden. 2. Link-Adresse: Das ist die Adresse, auf die der Link zeigt. Wenn der Leser der Seite auf den Link klickt, wird die hier angezeigte Adresse aufgerufen, d.h. diese Seite angezeigt.

4 CSS Cascading Style Sheets Ein Grundgedanke von HTML ist die strikte Trennung von Layout und Inhalt. Der Autor kümmert sich ausschließlich um den Inhalt und dessen logische Strukturierung, keinesfalls um das Layout. Jeder WWW-Browser stellt HTML-Seiten in einem Standardlayout dar. Wenn dieses gefällt, ist schon die ganze Arbeit erledigt. Wenn nicht, dann wird das Aussehen über ein Stylesheet beeinflusst. Hierzu ein Beispiel; gegeben sei die folgende einfache Startseite der Schulhomepage: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=iso " http-equiv="content-type"> <title>homepage der xy-schule in A-Stadt</title> <link rel="stylesheet" href="homepage.css" type="text/css"> </head> <body> <h1>xy-schule in A-Stadt</h1> Dies ist die Homepage der xy-schule in A-Stadt - herzlich willkommen!<br> <br> <h2>sie finden hier:</h2> <ul> <li>informationen zur Schule</li> <li>informationen des Elternbeirats</li> <li>informationen der SMV</li> </ul> <br> <h2>die xy-schule</h2> Die xy-schule ist eine allgemein bildende Schule, in der eine gute Allgemeinbildung vermittelt wird. </body> </html> Eine solche Seite ist z.b. mit NVU schnell erstellt. Aufgabe: Erstelle eine vergleichbare Startseite für die Schulhomepage und schaue dir möglichst in mehreren Browsern an, wie diese Seite dargestellt wird. Nun sollen Veränderungen an diesem Layout vorgenommen werden, z.b. sollen die beiden Überschriften <h1> und <h2> anders dargestellt werden. Der falsche Weg wäre, hierfür nicht mehr <h1> und <h2> zu verwenden oder wilde Konstruktionen, um den Font, dessen Größe und Farbe zu verändern. Der richtige Weg ist, die Überschriftentags in der HTML-Seite zu lassen wie sie sind, dafür aber über ein CSS-Stylesheet zu beeinflussen, wie diese Überschriften im Browser dargestellt werden sollen. Ein solches Stylesheet kann wie folgt aussehen: h1 { color:brown; font-size:20px; font-style:bold } h2 { color:green; font-size:14px; } Die Angaben dürften selbsterklärend sein. Diese Angaben werden in einer Datei gespeichert, z.b. mit dem Namen homepage.css; die Datei soll sich im selben Verzeichnis wie die HTML-Seite der Startseite befinden.

5 Nun muss noch dafür gesorgt werden, dass die HTML-Seite dieses Stylesheet auch einbindet. Das geschieht über folgenden Code: <link rel="stylesheet" href="homepage.css" type="text/css"> Diese Zeile muss in den Head, also z.b. nach dem Title der Seite. Ein vorhandenes Stylesheet kann in NVU über das Menü Extras? CSS-Editor eingebunden werden. Es öffnet sich folgendes Fenster: Über die Schaltfläche Linkelement links unten kann dann rechts die Adresse des Stylesheets eingegeben werden. Wenn dieses im selben Verzeichnis liegt wie die HTML- Seite, dann genügt hier der Dateiname. Aufgabe: Erstelle ein einfaches Stylesheet und speichere es im selben Verzeichnis wie die HTML-Seite ab. Binde das Stylesheet in die HTML-Seite ein. Schaue dir möglichst in mehreren Browsern an, wie die HTML-Seite mit dem Stylesheet dargestellt wird. Welche Angaben sonst noch in einem Stylesheet gemacht werden können, findest du z.b. in Tipp: Es sollte für die gesamte Homepage nur ein einziges Stylesheet geben, das in jeder Seite eingebunden ist. Ist die HTML-Seite in einem Unterverzeichnis des Verzeichnisses, in dem das Stylesheet steht, dann muss als URL für das Stylesheet angegeben werden:../homepage.css; ist die HTML-Seite zwei Ebenen darunter, muss es entsprechend lauten../../homepage.css usw. Damit verwenden alle Seiten der gesamten Homepage ein und dasselbe Stylesheet. Vorteil ist nicht nur, dass nur ein Stylesheet erstellt werden muss, sondern dass auch nur ein einziges Stylesheet gepflegt werden muss. Gibt es künftig einmal eine Layoutänderung, sollen z.b. die Überschriften statt in grün in blau dargestellt werden, dann muss nur in einer einzigen Datei, eben dem zentralen Stylesheet, etwas geändert werden und es wirkt sich sofort auf alle Seiten der Homepage aus. Links zum Thema Stylesheets: die offizielle Site zu Cascading StyleSheets der CSS-Validator des W3C