Syntax und Quellcode
HTML ist - im Gegensatz zu JavaScript
- eine
- Dokumentenbeschreibungssprache und
-
keine Programmiersprache.
HTML ist deshalb
außerordentlich Fehlertolerant,
JavaScript nicht. Unbekannte, unsaubere oder
fehlerhafte Eingaben im HTML - Bereich werden in den meisten
Fällen vom Leseprogramm, dem Browser, ignoriert.
Gross - und Kleinschreibung, Zeilenumbrüche, Leerzeichen und
Tabulatoren sind im HTML - Bereich i. d. R. für die Syntax
ohne Bedeutung und dienen nur der Übersichtlichkeit. [ In
einigen Fällen führt ein Leerzeichen hinter der einleitenden spitzen
Klammer, z. B. beim
Achtung: Dort, wo es sich um interne oder externe Verweise
( Sprungmarken, Anker, Sprungziele, Links, Hyperlinks )
handelt, kann jedoch eine unkorrekte Schreibweise auch in der
Groß - und Kleinschreibung schnell zu einer Fehlermeldung
führen - die gesuchte Datei wird nicht gefunden.
-
Es ist aus diesem Grund dringend zu empfehlen, eigene Dateinamen und
Verweise grundsätzlich vollständig klein zu
schreiben.
-
Sonderzeichen ( bis auf Binde - und _Unterstrich ) sollten möglichst
vermieden werden; Leerzeichen sind nicht erlaubt.
-
In manchen Bereichen sind nicht mehr als acht Zeichen im Namen erlaubt, drei
im Anhang: ( 12345678.htm )
*
-
Während es manchen Systemen ziemlich egal ist, unterscheiden andere
streng zwischen Groß - und Kleinschreibung sowie zwischen
/" und "\" in Verweisen.
Fehler entstehen hier immer dann, wenn zwei unterschiedliche Systeme bei der Erstellung und Bereitstellung von HTML - Dateien kommen, was bei der Vielfalt an Möglichkeiten nicht so leicht ausgeschlossen werden kann. Bei Schwierigkeiten mit Verweisen dort also zuerst nachsehen. Grundsätzlich "/" schreiben.
NB: Speziell Word neigt dazu, in internen Verweisen "\" zu schreiben, was bei Konvertierungen zu eben diesen Schwierigkeiten führt.
Im JavaScript - Bereich genügt dagegen schon ein einziger
nachträglich eingeführter Zeilenumbruch, um den Aufbau einer
ganzen Seite aufzuhalten oder sogar den Browser komplett aufzuhängen.
[ Will man dagegen im JavaScript - Bereich einen Zeilenumbruch darstellen lassen, an der gewünschten Stelle ein "\n" eintragen. ]
Exkurs: "Gebrochene Verweise" aufspüren
( Verweisfehler finden )
Hier kommen so genannte Link Checker wie
Link Sleuth zum Einsatz, wenn man prüfen
will, ob alle Verweise in der Adresse auch korrekt auf die gewünschte
Datei verweisen. Allerdings kommt dieses mit komplizierten Verweisen in
JavaScript nicht immer klar. Um zu prüfen, ob JavaScript -
Verweise ( oder auch andere ) funktionieren, hilft
Orbit Downloader:
-
Die Verweise absolut setzen: ( http://... ) und dann
auf einer HTML-Seite zusammenfassen, beispielsweise mit Hilfe der Such- Funktion
eines Texteditors aus dem Angebot sammeln und über ein
Mailprogramm als HTML - Seite mit aktiven
Links speichern.
-
Diese Seite ( natürlich mit dem entsprechenden JavaScript
enthalten! ) auf den Server hochladen und in jenem Browser öffnen,
in dem Orbit als Downloader fungiert ( oder Orbit Downloader
direkt aufrufen ), und alle darauf verlinkten Dateien in eine bestimmtes
Verzeichnis herunterladen lassen.
Die Dateien, deren Hyperlink falsch konfiguriert wurde, werden nicht heruntergeladen.
-
Dazu sollte man vorher einzelne Dateien ( oder - Gruppen )
markieren und über Start / Pause herunterzuladen
versuchen, bis man die Übeltäter isoliert hat. Notfalls Orbit durch
Ausschalten anhalten.
-
Über Datei / Liste exportieren kann man im Orbit
Downloader eine Liste aller darin markierten Dateien exportieren - also
beispielsweise aller Dateien, die NICHT gefunden und deshalb nicht
heruntergeladen wurden.
Exkurs: JavaScript "debuggen"
( Script - Fehler beseitigen )
Wenn beim Schreiben von JavaScript mal wieder nichts mehr geht, kann man
sich die Zeile anzeigen lassen, die den Browser irritiert; das ist aber nicht
unbedingt diejenige, die den Script - Fehler enthält.
Es könnte auch der Verweis auf ein fehlerhafte Stelle in einer externen
.JS - Datei oder auf eine komplett fehlende Seite sein.
Wenn also beim Aufruf einer Seite mit fehlerhaften Javascript der
Internet Explorer unten links in der Statuszeile eine kleine
Alarmglocke zeigt, diese mit der linken Maustaste anklicken und die Fehlermeldung
" immer" und die "Details" anzeigen lassen; falls der Fehler
nach Zeilen- und Zeichenangabe nicht zu finden ist - speziell die
Zeilenangabe ist im allgemeinen um eine Ziffer falsch - die Seite in
Netscape aufrufen und 'JavaScript:' in die Adresszeile eingeben. Den
Doppelpunkt nicht vergessen!
Hier sind die Angaben genauer, Netscape übertreibt es
aber etwas mit der Fehlanzeige.
Danach die Seite von oben nach unten nach JavaScript - Fehlern durchsuchen.
Insbesondere alle Zeilenumbrüche, auch innerhalb von HTML - Tags,
( dort beispielsweise im 'Onmouse' - Bereich )
durch Leerzeichen ersetzen.
Allerdings behält der Netscape - Browser beim Basteln
und Ausprobieren neuer Seiten von der heimischen Festplatte aus ein einmal
geladenes JavaScript hartnäckig im Speicher, so daß auch nach
einer Korrektur von fehlerhaften JavaScript - Code derselbe Fehler immer
weiter angezeigt wird. "Neu Laden" hilft nicht, nur ein Neustart.
NB: Wer jemals damit gekämpft hat, weiß,
das auch in scheinbar reinen ASCII - HTML - Dateien - vor
allem in den Absatzmarken, die ja auch als Leerzeichen fungieren -
versteckte Formatierungen enthalten sein können. Im Notfall den
Windows - Notepad - Editor öffnen, Text hinein - und
wieder herauskopieren. Das zerstört recht zuverlässig
( fast ) alle versteckten Formatierungen und verhindert so Zeichensalat
und Anzeigefehler.
[ Beispiele für JavaScript u. a. gibt es
hier in der 'Datenbank' ]
Textformatierung, Umlaut-Codierung und Maskierungen
-
HTML - Dateien bestehen im Quelltext aus reinem ( "ASCII" )
Text, der Zeichensatzgrundlage aller Texte. Formatierungen werden erzeugt
durch sog. "Tags" ( "Etiketten" ), standardisierte
Befehle, die in spitze Klammern
< > gesetzt werden, um sie in der
Anzeige zu verbergen; z. B.
<BR> ( = Zeilenumbruch )
Es gelten folgende Besonderheiten:
-
Mehr als zwei Absatzmarken
( <P> ) in Folge werden
ignoriert und müssen mit einem doppelten Zeilenumbruch
( <BR> <BR> )dargestellt
werden
-
Mehr als ein Leerzeichen ( " " ) in Folge wird ignoriert;
weitere müssen durch " " oder
" " dargestellt werden
-
Besondere Zeichen, wie deutsche Umlaute und bestimmte Sonderzeichen, müssen
durch Maskierungen ersetzt werden, wenn sie von allen Maschinen
international korrekt wiedergegeben werden sollen.
-
Das gilt insbesondere auch für jene Zeichen, die zum HTML -
Code - Bereich gehören und deshalb normalerweise nicht angezeigt
werden sollen, wie z. B.
< Spitze
Klammern >. Der Text innerhalb derselben
würde sonst schlicht nicht angezeigt werden.
-
Echte Zeilenumbrüche im Quellcode werden im Browser als Leerzeichen
angezeigt ( immer nur als ein einziges, egal wie viele es sind -
das gilt auch für die Leerzeichen im Quellcode selber ). Das ist
nicht weiter schlimm, führt aber bei Bildern, Verweisen etc. zu
unschönen Lücken. Schlimm ist, daß manche Editoren
selbständig Zeilenumbrüche einfügen und so längst fertige
Seiten ruinieren.
-
Gewollte Zeilenumbrüche im Quellcode innerhalb des
"ALT" - Textes des
< IMG > -
Tags werden nicht von jedem Browser unbedingt angezeigt und sollten deshalb
durch maskiert werden:
Zeilenumbruch plus Zeilenvorschub.
-
Mehr als zwei Absatzmarken
( <P> ) in Folge werden
ignoriert und müssen mit einem doppelten Zeilenumbruch
( <BR> <BR> )dargestellt
werden
-
Die allgemeine Syntax für HTML - Maskierungen lautet:
�
wobei "0000" für die vierstellige ANSI - Code - Nr. des entsprechenden Zeichens steht ( zwei - und dreistellig geht auch, ist aber hin und wieder unsicher; ggf. "0" davorsetzen ).
Welches das ist, läßt sich in entsprechenden Tabellen, z. B. in der Windows - Zubehör - Zeichentabelle Charmap für "Times New Roman" rechts unten feststellen ( "Alt + 0000" ). Auch in WORD in "Sonderzeichen" erscheint die Ziffernfolge unten in der Statusleiste.
-
Es gibt aber auch andere Umschreibungen, die aber nicht immer von jedem Browser
interpretiert werden:
So steht: |
||||
| ·
• ° | ♫ ™ © ® & @ * € ¶ …
„
“
–
—
¯ |
für
für für für für für für für für für für für für für
für
für
für
für
für |
·
° ¦
™ © ® &
€ ¶
„
“
|
·
• ° | ♫ ™ © ® & @ * € ¶ …
„
“
–
—
¯ |
Mittel-Punkt
Aufzählungspunkt Grad Pipe Melodie Trademark Copyright
Das Euro-Zeichen (ab HTML4) Absatz (Nichtdruckbares Zeichen)
Auslassung
Bindestrich
Gedankenstrich
|
Umlaute und Akzente entstehen durch Umschreibung des Buchstabens: |
||||
| Ü
ü é ß |
für
für für für usw. |
Groß
klein |
Ü
ü é ß |
Ä und Ö
entsprechend "¨" ergibt nur die Pünktchen ¨ / Das "uml" muß immer klein geschrieben werden! |
Wichtig ist auch: |
||||
|  
|
für
für |
Leerzeichen und geschütztes Leerzeichen |
HTML kennt sonst nicht mehr als ein Leerzeichen in Folge! | |
Noch ein paar interessante Beispiele: |
||||
| <
> " ½ ¼ ¾ ± ÷ × % ² ³ |
für
für für für für für für für für für für für |
<
> " ½ ¼ ¾ &plusmin; ÷ ×
² ³ |
<
> " ½ ¼ ¾ ± ÷ × % ² ³ |
Spitze Klammer als sichtbares
Zeichen
Außerhalb von Tags
hochgestellt hochgestellt |
Das soll hier keine vollständige Aufzählung werden, die gibt es
genügend im Internet zu finden, z.B. unter
http://de.selfhtml.org/selfhtml
Eine ( angeblich ) vollständige Aufzählung aller
Spezialzeichen gibt es hier:
http://www.htmlsource.f2s.com/text/specialcharacters.html
( Achtung: die dort vorgestellte Maskierung wird oberhalb
der Zeile '& - & - ampersand' im
Netscape nicht dargestellt, auch der Euro nicht; die
ANSI - Codierung ist da sicherer! )
Eine neue, ganz erstaunliche ( deutsche ) Aufzählung aller
Spezialzeichen der verschiedensten Sprachen zumindest Europas gibt es hier
( auch mathematische Sonderzeichen - sofern sie in diesem oder
jenem Browser überhaupt dargestellt werden ):
http://de.wikipedia.org/wiki/Wikipedia:Sonderzeichen
Eine Tabelle mit dem vollständigen ASCII-Zeichensatz gibt es hier:
http://de.wikipedia.org/wiki/ASCII-Tabelle
Hier ein Auszug und eine Beschreibung dessen, wie man die Darstellung von
serbo - kroatischen (jugoslawischen) Sonderzeichen im Browser einstellt:
http://www.ksd-ks.gmxhome.de/yu/yu-sonderzeichen.htm
Freie Plazierung
-
Textpassagen oder - bilder lassen sich auch ohne jede Formatierung im
Bereich
<PRE>
x | o | x
o | x | o 1:1 darstellen
x | o | x
</PRE>
-
Innerhalb von
<PRE>
</PRE>
lassen sich sogar Formatierungen wie
</B>Fett</B>,
<I>Kursiv</I>
etc. anwenden
-
Wie man hier ausprobieren kann, läßt sich eine von
<PRE>
</PRE>
formatierte Textstelle, anders als im HTML üblich, mit Zeilenumbruch
und Abständen kopieren und in einer Textdatei auch so
einfügen
Keinen Umbruch in einer Wortgruppe zulassen
-
Einzelne Worte, ohne eingeschlossene Tags:
mit geschütztem Leerzeichen ( )
Am 3. April
-
Längere Wortgruppen inklusive eingeschlossenen Tags:
mit <NOBR>
<NOBR> Erstes Wort <B>zweites Wort</B> drittes Wort </ NOBR>
-
In Tabellen:
mit <TD NOWRAP>
<TD NOWRAP> Erstes Wort zweites Wort drittes Wort </ TD>
Umbruch an einer bestimmten Stelle erzwingen:
-
mit
<WBR>
( bedingtes Trennzeichen ) - auch innerhalb des
NOBR-Bereichs
Dieses Wortunge<WBR>heuer soll ggf. an dieser Stelle getrennt werden
Zeilenumbruch nach einer Tabelle erzwingen:
-
Um zu verhindern, daß Text beispielsweise nach einer kleinen Tabelle
seitlich an dieser hochrutscht,
<BR clear=all> ( Zeilenumbruch ) oder
<P clear=all> ( Absatz )
statt <BR> oder <P> einfügen
[ möglich auch: <P clear=left> ( rechts vorbei ) oder <P clear=right> ( links vorbei ) ]
statt <BR> oder <P> einfügen
Für bestimmte Browser schreiben:
( Gilt für Netscape bis Version 4x; Version
6 ff. ist neu konzipiert, da mag etwas anderes gelten )
-
Netscape setzt bei Bildern automatisch [eckige
Klammern] um den Beschreibungstext
<IMG ALT="Bild" . . . > als [ Bild ] , wenn die Bilder selber nicht angezeigt werden / der Internet Explorer nicht.
Er speichert diesen Alternativtext auch so im Text - Modus ab.
-
Netscape verkleinert
-
Netscape stellt DIESEN LINK
FARBIG dar, der alte Internet Explorer nicht.
<A HREF="xy.htm"><FONT COLOR=FF0000>DIESEN LINK FARBIG</FONT></A>
-
Der Internet Explorer kachelt ein Tabellen -
Hintergrund - Bild durchgehend, Netscape setzt in jeder Zelle
neu an:
<TABLE BACKGROUND="../bilder/back1.gif">
Zelle 1
Zelle 2
Zelle 3
Zelle 4
Das läßt sich vermeiden, indem man in eine Tabelle mit dem Hintergrundbild ( und nur einer einzigen Zelle ) eine zweite Tabelle mit einem transparenten Hintergrundbild ( und WIDTH="100%", falls die erste eine Breitenangabe besitzt ) einbaut - die eigentlich gewünschte:
<TABLE BACKGROUND="../bilder/back1.gif"> <TR> <TD><TABLE WIDTH="100%" BACKGROUND="../bilder/transp.gif" > …
</TD> </TR> </TABLE>
Zelle 1
Zelle 2
Zelle 3
Zelle 4
- So lassen sich Tabellen auch exakt ausrichten ohne CSS:
Ein leeres, transparentes .GIF - Bild in die Felder der erste Tabellen -
Zeile mit den entsprechenden Längen eintragen.
- Umgekehrt kann man Bilder vor dem Kopieren mit der rechten Maustaste schützen, indem man sie als Hintergrundbild in eine Tabelle ( oder Zelle ) einbaut und darüber als eigentliches Bild ein transparentes GIF mit der selben Größe legt:
<TABLE BACKGROUND="../bilder/bild1.jpg"> <TR> <TD> <IMG SRC="../bilder/transp.gif" WIDTH="100" HEIGHT="150"> …
- Umgekehrt kann man Bilder vor dem Kopieren mit der rechten Maustaste schützen, indem man sie als Hintergrundbild in eine Tabelle ( oder Zelle ) einbaut und darüber als eigentliches Bild ein transparentes GIF mit der selben Größe legt:
- So lassen sich Tabellen auch exakt ausrichten ohne CSS:
Ein leeres, transparentes .GIF - Bild in die Felder der erste Tabellen -
Zeile mit den entsprechenden Längen eintragen.
-
NB: Verschiedene Browser behandeln in Tabellen auch Hintergrundfarben
und andere Formatierungen recht unterschiedlich; vor allem leere Tabellenfelder.
Dagegen hilft ein kleiner Trick: in jedes Feld mindestens ein
" " oder
" " schreiben.
( Oder mindestens zwei Leerzeichen eingeben in manchen WYSIWYG - Editoren )
-
Netscape zieht in Tabellen um jede Zelle automatisch
einen Rand von einem Pixel; das stört bei zusammengesetzten Bildern,
weil es dort eine Lücke läßt. Abhilfe: Rand
( Border ) überall explizit auf "0" setzen:
<TABLE Border="0" Cellpadding="0" Cellspacing="0" … >
Aus dem gleichen Grund sollte man auch Framesets auf "0" setzen:
<FRAMESET border="0" framespacing="0">
und <FRAME SRC=XXX frameborder="0">
So sehen die Seiten in Explorer und Navigator schon fast gleich aus. Fehlt nur noch:
<BODY marginwidth=0 marginheight=0 leftmargin=0 topmargin=0>
( Setzt man diese Werte gleichmäßig größer als "0" , ergibt sich ein freier Rand um die Seite, wie hier. Dieses fällt aber erst ab einem Wert von etwa 20 auf )
-
Hier sind noch einige Tips zur spezifischen
Netscape - Rand - Pixel - Problematik.
-
Noch eine wichtige Kleinigkeit: es werden häufig Tabellen benutzt, um
das Layout einer Seite zu gliedern. Man sollte jedoch nicht eine einzige
Tabelle für die ganze Seite nehmen. Zum einen ergeben sich höherer
Ladezeiten, zum anderen findet Netscape Sprungziele oder
Anker, die sich in Tabellen befinden, manchmal nicht.
Deshalb lieber mehrere getrennte, identische Tabellen hintereinander schalten. In den Zwischenräumen kann man alle wesentlichen ( unsichtbaren ) HTML - Befehle unterbringen:
<A Name="Anker"> </A>
( Die doppelten Leerzeichen sind wichtig! manche WYSIWYG - Editoren entfernen leere Sprungziele ohne Nachfrage )
-
Und hier auf vielfachen Wunsch:
Dieser "Tag" wurde damals von Netscape eingeführt und gehört zu den am meisten verhöhnten Tags überhaupt. Aber in vielen Mozilla - basierten Browsern funktioniert er noch; und wenn nicht, ist der Text dennoch zu sehen.
<BLINK> BLINKENDER TEXT </BLINK>
-
Html-Code für Mozilla schreiben:
In Mozilla werden direkt aufeinanderfolgende Text- und Grafik-Links, auch wenn kein Leerzeichen dazwischen ist, komplett unterstrichen. Das lässt sich nur verhindern, indem man den Text und die Grafik separat mit einem Link versieht.
Dagegen zeigt Netscape 7.x einen Link, der Text und Grafik umfasst, wie der Internet Explorer ohne störenden Unterstrich unter der Grafik und dem Zwischenraum an.
WICHTIG:
Häufig werden externe CSS-Dateien benutzt,
um HTML-Dateien zu formatieren.
Manchmal werden diese über die Formel:<style>
<!--
@importurl(datei.css);
-->
</style>
eingebunden, wobei die 'datei.css' folgende Form hat:<style type="text/css" >
<!--
body {font- family:... }
-->
</style>
Etliche Mozilla- Browser verstehen diese Anweisung nicht.
Sicherer ist es, CSS-Dateien grundsätzliche über<link rel="stylesheet" type="text/css" href="datei.css">
einzubinden.
Allerdings darf dann in der CSS-Datei KEIN<style type="text/css" >
<!--
stehen, sondern nur:body {font-family:... }
-
Html-Code in Netscape 7 schreiben:
Auswerten des HTML-Codes (Aus der Netscape-Hilfe)
Bevor Sie Ihr Dokument auf einem Webserver der Allgemeinheit zur Verfügung stellen, sollten Sie die HTML-Formatierung überprüfen, um sicherzustellen, dass sie den Webstandards entspricht.
Composer bietet eine bequeme Möglichkeit, Ihr Dokument auf die Einhaltung der HTML-Standards des W3C (World Wide Web Consortium) zu überprüfen. (Sie müssen mit dem Internet verbunden sein, um diese Funktion nutzen zu können.
So werten Sie die HTML-Syntax Ihres Dokuments aus:
- Klicken Sie im Menü Extras auf HTML auswerten.
- Wenn die Seite des W3C HTML Validation Service geöffnet wird, klicken Sie auf Durchsuchen und suchen Sie auf Ihrer Festplatte nach der Datei, die Sie auswerten möchten.
-
Klicken Sie auf Validate this document.
( Tip: KSD )
-
Html-Code für den Internet Explorer
schreiben:
Der MICROSOFT® Internet Explorer ( MSIE, etwa Version 6 - 9 ) hat ein manchmal ein Problem mit Werbe - oder Popup - Script - überladenen Seiten. Die Scrollfunktion blockiert dann und der Scrollbalken (der Verschieberegler) wird nicht angezeigt, so daß die Seite nicht zum Lesen nach oben gescrollt (verschoben) werden kann. Andere Browser dagegen zeigen die Seite funktionsfähig an.
Soll die Seite auf einem solchen Webserver liegen, sollte man für die große Masse der MSIE - Benutzer die Seite mit einem Style - Befehl im Body - Tag gängig machen:
<body style="overflow:scroll;" ...
Alternativ kann auch eine ganz eigene Scroll-Box definiert werden, aber das ist meistens nicht notwendig:
<body ... >
<DIV style="width:640px; height:400px; overflow:scroll; border:1px solid #840; margin:1em;">
...
</DIV>
-
Hintergrundbilder mit Style
einbinden:
( Alle Browser )
Heutzutage sind die Größen der Bildschirme und die erreichten Auflösungen noch unterschiedlicher geworden. Ein Grund mehr, mit Style - Befehlen zu arbeiten.
Die HTML - Syntax zur Einbindung eines Hintergrundbildes über die ganze Seite lautet:
<Body BACKGROUND="irgendwas.gif" BGCOLOR="WHITE" ...
-
Soll das Bild gekachelt werden, d.h. horizontal und vertikal
aneinandergesetzt, ist alles in Ordnung.
-
Soll es sich aber nur vertikal wiederholen, dann muß man das Bild so
breit wählen ( oder machen ), daß auch in sehr großen
Browserfenster mit hoher Auflösung der erneute Ansatz rechts nicht zu
sehen ist, da das Bild grundsätzlich auch horizontal gekachelt wird.
Einfacher geht es mit einer Style - Anweisung:
<body style="overflow:scroll; background-image:url(irgendwas.gif); background-repeat:repeat-y;" BGCOLOR="WHITE" ...
kachelt das Bild nur vertikal; wählt man die zusätzliche Hintergrundfarbe geschickt genug, ist der Ansatz rechts nicht zu erkennen ( diese kann natürlich auch in der Style - Anweisung stehen ).
Zur Auswahl für "background-repeat:" stehen:
repeat = wiederholen (Voreinstellung).
repeat-x = nur "eine Zeile lang" waagerecht wiederholen.
repeat-y = nur "eine Spalte lang" senkrecht wiederholen.
no-repeat = nicht wiederholen, nur als Einzelbild anzeigen.
( Tip: SELFHTML )
-
Soll das Bild gekachelt werden, d.h. horizontal und vertikal
aneinandergesetzt, ist alles in Ordnung.
RÜCK