====== Erstellen einer HTML-Seite ====== Eine HTML-Seite kann man auf zwei Ebenen betrachten: der inhaltlichen und der formalen. Im Folgenden soll der formale Aufbau einer Seite im Vordergrund stehen - für den Inhalt ist dann jeder selbst verantwortlich. Dabei sollten jedoch die [[.:praesentation|Grundregeln der Präsentation]] (klare Gliederung, gute Lesbarkeit, keine Effekte um der Effekte willen) beachtet werden. Bevor eine HTML-Seite veröffentlicht wird, sollte sowohl der präsentierte Text als auch das HTML-Gerüst auf Fehler kontrolliert werden - auf der Textebene läuft das am Besten durch mehrmaliges durchlesen (lassen), auf der formalen Ebene kann man sich im Internet bereitgestellter Hilfsprogramme bedienen, den sogenannten "Validatoren", z.B. [[http://validator.w3.org/|Validierungsservice]] des W3-Consortiums (auf englisch) [[http://www.htmlhelp.com/tools/validator/|WDG-Validierungsservice]] - bietet die Möglichkeit der Validierung ganzer Home-Sites. Ziel der Unterrichtseinheit soll es sein, die Grundlagen der Webseitenerstellung mit HTML (nach Standard 4.01) zu vermitteln. Darauf kann dann jeder nach Lust und Laune aufbauen - auf weiterführende Informationen im Internet und in Buchform wird am Ende hingewiesen. Das Erstellen von Webseiten gehört genaugenommen in den Bereich des Web-Designs und nicht unbedingt zur Informatik. Als Vorübung zum Codieren und zeichengenauem Schreiben (wie es dann ja auch beim Programmieren benötigt wird) sehe ich die HTML Einheit in der Schulinformatik aber dennoch als berechtigt an. HTML-Dokumente dienen zur statischen Informationsübermittlung im Internet. * Website: gesamter Webauftritt, also viele einzelne HTML-Dokumente * Webpage: einzelnes HTML-Dokument im Internet * Homepage: zentrales HTML-Dokument eines Webauftritts HTML-Dokumente können (und werden) zunächst lokal in eurem Verzeichnis gespeichert (Dateiendung .html oder auch .htm) und dort durch Doppelklick im Browser angezeigt. Wenndas HTML-Dokument mit dem Windows-Editor erstellt wird, muss man beim Speichern darauf achten, die Dateiendung anzugeben (sonst erhaltet ihr eine .txt-Datei, die der Browser nur als Quelltext anzeigt). ===== Gerüst einer HTML-Seite ===== Jede HTML-Seite sollte am Anfang den Dokumententyp bekannt geben. Damit lauten die ersten Zeilen für eine normale Seite wie folgt: Mit diesen Zeilen wird den Parsern (also den Programmen, die den HTML-Code in lesbare Seiten umsetzen) gesagt, um was für einen Dokumenttyp es sich handelt. Danach wird mit die HTML-Seite geöffnet. Damit man die schließenden Tags nicht vergisst, ist es sinnvoll, gleich den Schluss-Tag zu schreiben und den Rest der Seite zwischen den beiden Tags zu platzieren. Zwischen dem Start und dem Schluss-Tag gliedert sich die Seite in zwei Bereiche: dem Kopf und dem Körper:
==== ==== Im Kopf werden alle Informationen über das Dokument gesammelt: Meta-Tags, verwendete Styles, Scripte, und der Titel. Bei den Meta-Tags sollte auf jeden Fall der verwendete Zeichensatz angegeben werden, und auch die Angabe eines Titels macht sich gut (der erscheint in der Kopfzeile des Browsers):Zur Illustration können **Bilder** eingebunden werden. Hier sollte immer die Größe (in Pixeln) angegeben werden, damit der Browser gleich beim Laden des Textes den Platz für die Bilder reservieren kann. Und die Angabe des Alternativtextes für den Fall, dass das Bild nicht angezeigt werden kann, ist Pflicht! Und zum Verknüpfen der Inhalte benötigt man dann den Hypertext, die Links: Hier steht der Text der angeclickt wird === Weitere Strukturierungshilfen ===
Erzwungener Zeilenumbruch (**b**reak **r**ow)
Horizontale Linie in Fensterbreite (**h**orizontal **r**ow)
Beide Tags haben die Besonderheit, dass es kein schließendes Tag gibt (es wird ja auch kein Text eingefasst).
==== Zusammenfassung ====
Das Gerüst einer HTML-Seite sieht zusammengefasst also so aus:
Ab hier: HTML-Befehle
Der Kopf enthält Zusatzinformationen zur Seite, nicht formatiert.
Meta-Daten sind Daten über die Webseite,
hier: verwendeter Zeichensatz
Fensterüberschrift (Tab-Titel)
Hier wird der Kopf beendet.
Alles was folgt, ist der eigentliche Inhalt der Webseite, der im Browser-Fenster
sichtbar wird. Nur im Körper (body) wird formatiert.
Hier wird der Körper beendet.
Ab hier folgt keine HTML-Befehle mehr.
Und hier kann man sich die [[http://www.ahrenszimmermann.de/dwahinfo/bsp.htm|Beispielseite]] ansehen.
===== Tabellen und Listen =====
Was jetzt noch fehlt, sind Hilfsmittel zur Strukturierung - Tabellen und Listen.
==== Tabelle ====
Eine Tabelle besteht in HTML aus Reihen, die wiederum in Felder unterteilt sind. Damit ergibt sich z.B. für eine Tabelle mit 4 Spalten und 3 Zeilen folgender Code:
und | oder zwischenDabei ist zu beachten, dass diese Attribute nicht für alle Tags Gültigkeit haben! Also einfach ausprobieren. ^Formatierung ^HTML ^CSS (style=" ... ")| ^Breite |width=100 |width: 100px;| ^Höhe |height=50 |height: 50px;| ^Ausrichtung |align="right" |text-align: right;| ^Hintergrundfarbe |bgcolor="blue" |background: blue;| ^Hintergrundbild |background="dateiname.jpg" |background-image: url(dateiname.jpg);| In der Regel bietet es sich an, Hintergrundfarbe bzw. Hintergrundbild und die Textfarbe (dann mit text="..." anstelle von font color) für die ganze Datei am Anfang im body-Tag zu definieren: Als Style sähe das so aus: ==== Frei wählbare Farbtöne ==== Wer mit anderen als den Standardfarben((black, gray, silver, white, navy, blue, olive, green, lime, maroon, red, teal, aqua, purple, fuchsia, yellow)) gestalten will, muss die [[farben|Farben hexadezimal codieren]]. === Hexadezimale Codierung === Allen Farben auf Webseiten liegt ein hexadezimaler Farbcode zu Grunde. Im hexadezimalen System (16er-System) gibt es 16 Ziffern: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a (=10), b (=11), c (=12), d (=13), e (=14), f (=15). Wie in jedem Stellenwertsystem steht die letzte Ziffer für 160, die vorletzte für 161. Beispiel: 9a[hex] = ( |