Wie sieht denn DAS nu aus?!
Wenn Ihr das Dokument nun abspeichert und anschließend mit dem Browser aufmacht, seid bitte nicht allzu enttäuscht.
Wo eigentlich unsere Umlaute bzw. "Scharfe S" sein sollten, stehen je nach verwendetem
Browser ganz merkwürdige
Zeichen. Der
Internet-Explorer stellt stattdessen Rechtecke dar.
Zwischenstand
Daran wird auch der
Validator rum mäckeln - Ihr könnts ja gern ausprobieren.
Das hat mit der Zeichentypdeklaration zu tun, die wir vorher eingefügt haben. Jetzt übergeht Euer Browser nämlich seine
eigentliche Grundeinstellung und richtet sich ganz nach dem, was wir ihm vorgeschrieben haben. Und im Charset UTF-8
gibt es nun mal keine Umlaute in unserem Sinne. Da ist der Browser erstmal ratlos... :-)
Wie kann man Umlaute trotzdem darstellen?
Selbstverständlich können wir auch mit dem
UTF-8 Charset Umlaute und auch sonst alles darstellen, was uns beliebt.
Das geht mit einem
Trick:
statt "ü" schreiben wir "ü",
statt "ä" schreiben wir "ä",
statt "ö" schreiben wir "ö".
Für
Großbuchstaben, z.B. am Wortanfang wie bei "Ökonom" setzt einfach entsprechend ein
großes "O" direkt nach dem kaufmännischen
UND ("&" heisst auch Ampersand, glaube ich)
Um das "ß" darzustellen, müssen wir folgendes eingeben: "ß". Davon gibt es zum Glück keinen Großbuchstaben :-).
Prinzip der Umlautdarstellung verstanden? Hier noch eine kleine Übersicht:
Quellcode:
ö
Ö
ü
Ü
ä
Ä
ß
Browservorschau:
ö
Ö
ü
Ü
ä
Ä
ß
Die Darstellung beginnt immer mit einem & und endet mit einem Semikolon ;
Umlaute und Sonderzeichen mit HTML-Editor eingeben
Wenn ich
besondes viele Sonderzeichen innerhalb einer Textpassage eingeben muss, greife ich auf
NVU zurück.
Jedes Mal, wenn ich EUCH
HTML-Code-Beispiele zeige, habe ich NVU benutzt. Denn die Vielzahl der spitzen Klammern (ebenfalls Sonderzeichen)
wäre sonst zu mühsam einzugeben. Habt Ihr NVU bereits auf Eurem Rechner installiert?
Macht ein neues Dokument in NVU auf und wechselt unten Links auf die Ansicht "Normal" und gebt dort Euren
Sonderzeichen-lastigen Text ein. Nun wechselt zur Ansicht "Quelltext", kopiert die Zeichefolge, die sich
innerhalb des "BODY"-Tags befindet und fügt sie in Euer mit Text-Editor geöffnetes Dokument wieder ein. Thats it!
Auf diese Weise könnt Ihr immer nachschauen wie das eine oder andere Sonderzeichen in HTML eingegeben wird.
"Suchen und ersetzen" - Funktion im Text-Editor
Natürlich hätte ich Euch nicht den ganzen Text mit
Umlauten eingeben lassen, wenn es nicht eine ganz
einfache Methode gäbe
diese durch entsprechende Codes ersetzen zu lassen. Andernfalls müssten wir jetzt den Text unserer Website nach Umlauten absuchen
und jeden einzelnen manuell durch die Codeschnipsel ersetzen.
Da hilft uns die "Suchen und ersetzen"-Funktion des Text-Editors weiter.
Klickt einfach irgendwo in den Text hinein und drückt anschließen "Strg. + H", oder geht auf "Bearbeiten" und danach auf
"Ersetzen".
Jetzt müsste ein Fenster aufgehen, in dessen oberen Zeile Ihr den
gesuchten Buchstaben eingeben könnt (z.B. "ö")
und in die untere Zeile die Kombination, mit der Ihr das gesuchte Zeichen
überschreiben wollt (in diesem Falle "ö").
Nun braucht Ihr nur noch auf "Alle ersetzen" zu klicken und schwuppdiwupp sind alle Ersetzungen vorgenommen. Wiederholt diese Aktion
für die anderen Umlaute und auch für die "ß".
Ich nutze diese Funktion auch. Das Tippen der Sonderzeichen-Codierung während der Texteingabe ist einfach zu mühsam und man muss es
sich ja nicht schwerer machen als es ist :-).
So könnt Ihr ganz schnell alle Sonderzeichen ersetzen
Checkt
vor dem Veröffentlichen Eurer Webseite stets, ob
Umlaute oder "ß"
drin stehen und
ersetzt diese gegebenenfalls. Der
Validator wird Euch beim Überprüfen
der Seite auf jeden Fall auch darauf
aufmerksam machen.
Nun alles HTML 4.01 - konform?
Seid Ihr mit dem Ersetzen mittlerweile fertig? Datei abgespeichert? GUT!
Das Ergebnis sollte im Browser in etwa so ausschauen:
Zwischenstand
Jetzt dürfte einer erneuten Prüfung durch das
W3C-Konsortium mithilfe von
Validome nichts mehr im Wege stehen.
Wiederholt alle dazu notwendigen Schritte wie in Lektion 11 beschrieben. Wenn Ihr alles richtig
gemacht habt, dann müsste Euch jetzt ein schöner grüner Balken mit der Inschrift
"Das Dokument ist valides HTML 4.01 transitional" entgegen scheinen.
Glückwunsch!
Hier ist jetzt der passende Augenblick für Schulterklopfer und "RESPEEEKT!"
Ihr dürft ruhig stolz auf Euch sein.
Valide HTML-Dokumente sind leider
immer noch nicht selbstverständlich. Ihr könnt Euch selbst Mal davon überzeugen,
was die Programmierer
etablierter Portale und Webseiten so fabriezieren. Gebt bei
Validome einfach eine andere Internetadresse ein und Ihr werdet sehen, was ich meine.
(ebay, gmx oder was auch immer)
Bald können wir uns an die Veröffentlichung unserer Webseite im WWW vorbereiten.
Fehlersuche
Bei Dir hat der Validator Fehlermeldungen ausgespuckt? Das ist halb so wild! Wahrscheinlich
hast Du einfach irgendwo Zeichen weggelassen, oder es sind irgendwo welche zuviel.
- Analysiere die Fehlermeldungen, die der Validator "augespuckt" hat
- Arbeite sie der Plausibilität nach ab, fang bei dem Fehler an, der für Dich am nachvollziehbarsten ist.
Andere Fehler erledigen sich so manchmal von selbst
- Vergleiche Deine Formatierung mit unserer letzten Version aus Lektion 11
- Checke Deinen Code auf das Vorhandensein von Umlauten. In diesem Fall stoppt Validome nämlich die Validierung und kommt nicht weiter
In der nächsten Lektion basteln wir endlich am Erscheinungsbild unserer Webseite weiter.
AUF GEHTS!
<<< zurück II weiter >>>
