Quellcode und Browser
Der Quellcode wird in einer Datei gespeichert und auf dem Server bereit gelegt. Den Code sieht man nachher nicht, sondern nur seine Interpretation durch den Browser, der die Datei vom Server abruft. Der Code ist in der HTML-Sprache geschrieben, diese verwendet Sprachelemente 'Tags', welche der Browser interpretiert. Der www-Lehrling beginnt mit dem Verstehen und Schreiben dieser Tags.
Browser und W3C
To browse heist blättern, schmökern, stöbern der Browser ist ein Programm welches den Quellcode interpretiert und auf einem Monitor (oder einem anderen Ausgabegerät) darstellt. Dem Browser muss dazu die Adresse des Servers mit der darzustellenden Datei angegeben werden; dazu hat er eine Adresszeile:
Dem Browser unbekannte Tags werden von ihm einfach übersehen (werden gar nicht interpretiert), die Darstellungen variieren daher beträchtlich!
Es gibt verschiedene Browser mit unterschiedlichen und wechselnden Fertigkeiten und Ansprüchen!
Internet Explorer, Mozilla Firefox, Chrome, Opera, Safari, etc. auf Desktops, Netbooks und Smartphones, im TV und Spielkonsolen
setzen die Tag-Anweisungen nicht alle gleich um, einige kennen einige Tags gar nicht.
Ich muss eine Seite beim codieren (schreiben des Quellcodes) also immer mal wieder in
unterschiedlichen Brausern und deren verschiedenen Generationen betrachten.
Ich muss mir gut überlegen, ob ich speziefische Geräte seperat ansprechen will,
zumindest bei der Entwicklung von APS für mobile Endgeräte.
Durch eigene Entwicklungen von nicht W3C konformen Tags suchten die
unterschiedlichen Browserentwickler die Gunst der User an sich zu binden.
Aber es gibt kaum einen langweiligeren Hinweis, als den, mit welcher Version
welches Brausers die Website betrachtet werden müsste.
Das W3C (www Consortium mit den 3W im Namen) hat dann Regeln aufgestellt.
Um nicht zwischen die Fronten des Browserkriegs zu geraten, halte man sich an die hochofiziellen Regeln der
>> W3C.
Es gibt inzwischen nebst HTML 4.1 auch XHTML und ab 2014 HTML 5, aber zu allen Sprachvarianten gibt es W3C Regeln.
Es gibt eine Webseite, welche den Quellcode auf Konformität überprüft (an jedem Seitenende verlinkt ein Icon zur Prüfseite):
>> http://validator.w3.org/
Barrierefreiheit
Damit möglichst wenig Benutzerinnen und Benutzer vom WWW ausgeschlossen werden, gibt es zusätzlich zu berücksichtigende Regeln, wonach Websites erstellt werden sollen. Das Thema Barrierefreiheit wird auf einer eigenen Seite vertieft.
Server
Wie kann der Quellcode eigentlich veröffentlicht werden, so dass er Allen (die Zugang zu einem Browser haben) zugänglich wird? Er muss auf's Netz, der Code muss auf einen Server hochgeladen (gespeichert) werden. Alle Server zusammen bilden das www (world wide web). (Befindet sich die Datei mit dem Quellcode während der Entwicklung noch auf der eigenen Festplatte, kann auch über 'Datei öffnen' gegangen werden, er ist dann aber niemand anderem zugänglich.)
Was sind Tags?
Im Unterschied zu Papier und Bleistift, kriege ich im Browser nicht das zu sehen, was ich schreibe, ich schreiben nämlich einen Quellcode welcher den eigentlichen Inhalt mit Tags umgibt. Tags markieren den dazwischen eingeschlossene Inhalt mit einer (semantischen) Bedeutung und weisen den Browser in gewissem Masse auch an, wie das interpretiert werden soll. Die <tags>...</tags> im Quellcode zeigt mir der Browser nicht mehr auf der dargestellten Seite, der Browser lässt in der Interpretation alle Tags und Anweisungen weg und zeigt nur noch den Inhalt.
Tag = Etikett, der Inhalt wird durch Etiketten markiert. Tags kommen als ein Paar, sie klammern den darzustellenden Inhalt ein.
Der erste Tag steht am Anfang eines Inhaltes
<tag> (Opentag), der zweite Tag am Ende des jeweiligen Inhalts </tag> (Endtag).
Die Tags sind durch Pfeilklammern definiert, darin steht der Tagname (meisst ein
Kurzwort als hinweisende Abkürzung oder Initialen in Englisch) klein geschrieben.
Der Opentag kann danach attributnamen= und "attributwerte" beinhalten, welche den Tag genauer spezifizieren.
Der Endtag hat vor dem Tagnamen ein Slash (/) zu seiner Kennzeichnung, da er manchmal sehr weit vom OpenTag entfernt steht.
Es gibt auch unpaarige Tags, solche die keinen Text einfassen sondern eine Linie oder ein Bild darstellen.
In HTML 4 sind das einfache open-Tags <tag> , in XHTML werden sie bereits beim öffnen geschlossen:
<tag /> (bzw. als leer deklariert).
Tags können ineinander verschachtelt werden - aber sie dürfen sich nicht
kreuzen, der zuletzt geöffnete Tag muss zuerst geschlossen werden:
Richtig ist: <tag 1>...<tag 2>...</tag 2>...</tag 1>
Falsch ist: <tag 1>...<tag 2>...</tag 1>...</tag 2>
Die eigene Seite jetzt schreiben
<html>...</html>
Eine HTML-Seite wird durch die <html>...</html> Tags gänzlich eingeschlossen.
Zwischen diesen Tags befindet sich einfach Alles. Zuerst ein Seiten-Kopf und dann ein Seiten-Körper.
<head>...</head> <body>...</body>
Im Kopf (zwischen den <head>...</head> Tags) stehen Voraussetzungen,
Hinweise, Scripts, etc., welche für die ganze Seite Gültigkeit haben
aber nicht dargestellt werden und der Titel (welcher im Browsertitelbalken erscheint).
Im Körper (zwischen den <body>...</body> Tags) steht der Inhalt der Seite zwischen weiteren Tags.
Das Tag head wird (weil zu ausführlich für den Anfang) als eigene Seite behandelt.
Doctype
Dem Browser muss gesagt werden, wie er den Code interpretieren soll.
Nach welcher Regel so ein Quelltext geschrieben wurde und also interpretiert werden soll,
muss den Browsern zuallererst noch gesagt werden, wesshalb am Seitenanfang eine DOCTYPE (Dokumententyp) Deklaration steht.
HTML hat eine schnelle Entwicklung durchgemacht, der noch gebräuchlichste Dokument-Typ ist der Transitional,
denn er erlaubt einige Ungereimtheiten (gegenüber dem danach eingeführten
und wünschenswertem Strict). Vorläufig genügt uns aber diese Zeile:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Auf alle anderen doctype wird in der Datei doctype.php eingangen.
Der Quellcode einer einfachen Seite sieht also so aus (ich nehme jetzt einen Text Editor und schreibe):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Der Quellcode von HTML</Title>
</head>
<body>
<p>Dies ist schon eine HTML-Seite. Und dieser Text ist schon ein Inhalt.</p>
</body>
</html>
Den Code sollte ich durch Einrücken, entsprechend seiner Verschachtelung, gliedern - er wird dadurch verständlicher.
Kommentare
<!-- ... -->
Dieser Tag ist ein ganz wichtiger, er verhindert die Darstellung seines Inhalts durch den Browser!
Ich kann dadurch an beliebiger Stelle einen Kommentar im Quellcode einfügen,
den man dann nur im Quellcode lesen kann:
<!-- Dies ist keine geheime Mitteilung an jemanden der den Quellcode liest. -->
Whitespaces
Mit Leerschlägen und Tabulatoren wird nicht Text positioniert sondern Quellcode gegliedert.
Mehrere Leerschläge, Tabulatoren und Zeilenumbrüche in Folge werden vom Browser
als ein einziger, einzelner Leerschlag dargestellt, sie funktionieren nicht als Gestaltungsmittel,
ausser zur Strukturierung des Quellcodes.
(Dieser Satz wurde auf einer einzigen, langen Zeile geschrieben - schauen Sie sich doch mal den Quelltext an -
es ist eigentlich die Fenstergrösse des Browsers, welche die Zeilenlänge bestimmt.)
Ein Leerschlag zwischen zwei Buchstaben wird noch nicht unterdrückt,
aber der zweite schon und alle anderen auch, ein HTML Dokument kann Unmengen von Leerschlägen enthalten,
der Browser interpretiert zusammenhängende Leerschläge und andere Whitespaces als nur einen.
So könnte ich nach jedem Wort einen Zeilenumbruch schalten, der Satz würde dennoch auf einer Zeile im Browser stehen.
Quellcode strukturieren
Zur Übersichtlichkeit des Quellcodes kann so eine neue Zeile begonnen werden, ja der Code kann durch Einrücken mittels Tabulatoren richtig schön gegliedert werden (ohne dass sich dies in der Browserdarstellung irgendwie bemerkbar machen würde). Struktur ist wichtig, ich stelle mir einen riesigen Spaghettihaufen von Code vor: Wie will ich den Anfang einer Nudel finden, deren Ende gerade irgendwo heraus schaut?
Forcierte Darstellung von white-spaces im Code
Es gibt zwar diesen forcierten Leerschlag, der dargestellt wird, der ist aber kein Gestaltungsmittel!
Der Escape für Leerschlag ist:
<pre></pre>
Und mit den <pre> Tags (preformatted) kann ich doch alle im Code vorkommende Leerschläge, Tabulatoren und Zeilenumbrüche einzeln darstellen. Das pre-Tag soll nicht dazu misbraucht werden, mühsam kleine Tabellen oder Zeichnungen zu erstellen:
°°
°° °°
°° °°
°° °°
°°
Das pre-Tag erlaubt mir Beispiele mit gegliedertem Code darzustellen.
Escape
Weil die Browser die Pfeilklammern der Tags im HTML Quellcode (und auch noch andere Spezialzeichen), nach deren Interpretation im Browser nicht darstellen soll, muss man diese Zeichen umschreiben, wenn sie doch im Browser dargestellt werden sollen:
& und ; sind Anfang und Ende der Umschreibung
< wird mit < umschrieben
> wird mit > umschrieben
& wird mit & umschrieben
" wird mit " umschrieben
' wird mit ' geschrieben
Auch Zeichen, die im Englischen nicht vorkommen, können so durch Browser dargestellt werden:
Ä wird mit Ä geschrieben (A-Umlaut)
Ü wird mit Ü geschrieben
Ö wird mit Ö geschrieben
ascii
Und für andere Sonderzeichen gibt es ASCII Zeichen (hexadecimal codes):
| wird mit | geschrieben
· wird mit · geschrieben oder auch ·
© wird mit © geschrieben
• 0-31 Steuerzeichen
• 32-127 Amerikanische Tastaturzeichen
• 128-255 Sonderzeichen und Umlaute
Struktur einer Webseite
Ich habe soeben meine erste HTML-Seite geschrieben und speichere sie jetzt. Die Datei öffne ich im Browser
und schaue sie an; was ich sehe, ist was ein Besucher sieht (wenn ich die Seite veröffentlicht habe).
Abgesehen von den oben behandelten Tags, bräuchte ich in HTML 4 eigentlich keine mehr,
ich könnte nun einfach zwischen den Body-Tags drauflos schreiben und sie mit Inhalt
füllen, falls es mir egal wäre, dass er keinerlei Struktur aufwiese.
Unter Struktur kann ich viel verstehen, je nachdem auf welcher Ebene ich meine Seite anschaue:
- Die Gliederung des Quellcodes, habe ich oben schon verstanden. Die gilt es fortan durchzuhalten!
- Die Gliederung des Inhaltes durch logische Tags, die einen Text-Absatz kennzeichnen
als Titel, Untertitel, Paragrafen, Liste, Tabelle.
Diese logischen Tags behandle ich auf der nächsten Seite. - Die Gliederung der Seite in Bereiche, die sich so in allen Seiten wiederholen, erzeugt eine Struktur.
Die Kopfzeile oder Banner ganz oben, meine Navigation z.B. links, der Inhalt in der Mitte,
vielleicht eine Spalte mit Nebensächlichkeiten rechts, eine Fusszeile ganz Unten, etc.
Solche Bereiche werden in Container gefasst. In HTML 4 dient dazu der<div> </div>-Tag, in HTML 5 gibt es dafür extra Tags.
Strukturierende Tags werden auch auf der nächsten Seite beschrieben. - Die Gestaltung durch Farben, alles was mit Stilen zu tun hat und Formatierung braucht ein CSS (Cascading Stile Sheet), das Layout wird auch im Teil CSS behandelt.
Check den Code.