====== 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): Wichtig ist dabei, dass deutsche Sonderzeichen nicht überall auf der Welt auf den Rechnern installiert sind, daher sollten die Codes verwendet werden (ein HTML-Editor wandelt die Sonderzeichen in der Regel automatisch um): ä = ä, ö = ö, ü = ü usw., ß = ß ==== ==== Im Körper der Seite erscheint schließlich das, was der Welt mitgeteilt werden soll. Die Tags für Überschriften

. . .
sollten dabei als Gliederungshilfen und nicht als Layout-Vorgaben verstanden werden. Daher dürfen diese Tags bei korrektem HTML auch nicht ineinander und nicht mit vielen der anderen Tags verschachtelt werden. Der normale Text sollte zwischen Absatz-Tags stehen:

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! das wird ein bild 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:
Jeweils zwischen und steht dann der Inhalt des Tabellenfeldes. Soll die Tabelle sichtbare Linien bekommen, wird man die Breite des Tabellenrandes auf mindestens 1 setzen: ==== Listen ==== Eine andere Möglichkeit der Strukturierung bilden Listen. Davon gibt es drei Typen: "Definitions-"Listen
, geordnete Listen
    und ungeordnete Listen
oder zwischen

und

. Will man also z.B. in einem Absatz alles in Fettschrift ausgeben, so würde der Text zwischen

und

eingeschlossen werden. Denselben Effekt würde man auch durch

und

erreichen. Soll ein Text mit mehreren Formatierungs-Auszeichnungen versehen werden, so werden die einzelnen Elemente in der style-Angabe jeweils durch ein Semikolon abgetrennt und aneinandergereiht, die HTML-Tags werden ineinaner geschachtelt (dabei ist es wichtig, den zuletzt geöffneten Tag als ersten wieder zu schließen!). Die Style-Angabe für **//kursive Fettschrift//** wäre dann also style="font-weight: bold; font-style: italic;" Will man mehrere Absätze mit styles gleichartig formatieren, so kann man den ganzen Bereich zwischen
und
setzen, sollen nur wenige Wörter ausgezeichnet werden, verwendet man und . Auch hier nochmal der Hinweis: findet man Webseiten mit Formatierungen, die einen interessieren, kann man (meistens) mit der rechten Maustaste den Quelltext öffnen - und wenn das mit JavaScript unterbunden wurde, lässt sich ja immer noch die Webseite abspeichern und der Quelltext im Editor betrachten :) ==== Textauszeichnungen ==== ^Formatierung ^HTML ^CSS (style=" ... ")| ^Fett | Text , besser: Text |font-weight: bold;| ^Kursiv | Text , besser: Text |font-style: italic;| ^Unterstrichen | Text |text-decoration: underline;| ^Hochstellen | Text |vertical-align: super;| ^Tiefstellen | Text |vertical-align: sub;| ^Zentriert: |
Text
|text-align: center;| ^Schriftgröße (absolut) | Text |font-size: 12pt;| ^Schriftart | Text |font-family: arial;| ^Schriftfarbe | Text |color: red;| Anmerkung: Zahlen sind immer als Beispiel gedacht - einfach mal experimentieren! Die font-Elemente sollten nicht mehr verwendet werden - da besser mit styles arbeiten. In der nächsten Tabelle sind Formatierungselemente aufgenommen, die auch als HTML-Element als Attribut in einem Tag stehen müssen, wie sonst auch die Style-Elemente, z.B. die //Breite eines Tabellenfeldes//: Dabei 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] = (9 * 16 + 10)[dez] = 154[dez] Die Bildschirmfarben werden aus den drei Grundfarben Rot, Grün und Blau gemischt. Jede Farbe kann dabei in 256 Abstufungen, von 00 ("ausgeschaltet") bis ff (maximal "angeschaltet"), verwendet werden. Die Farbe Rot hat dann also den Code #ff0000, die Farbe Grün den Code #00ff00 und die Farbe Blau den Code #0000ff. Schwarz erreicht man durch #000000 und Weiß durch #ffffff. Grau bildet sich immer dann, wenn die Farbanteile für Rot, Grün und Blau gleich sind. === Kleine RGB-Farbtabelle === ^Farbe|Farbanteil **R**ot|Farbanteil **G**rün|Farbanteil **B**lau|Beispiel Hintergrund|Beispiel Text| |Rot|ff|00|00|Hintergrund|Beispieltext | |Grün|00|ff|00|Hintergrund|Beispieltext | |Blau|00|00|ff|Hintergrund|Beispieltext | |Weiß|ff|ff|ff^Hintergrund^Beispieltext | |Schwarz|00|00|00|Hintergrund|Beispieltext | |Grau|ac|ac|ac|Hintergrund|Beispieltext | |Gelb|ff|ff|00|Hintergrund|Beispieltext | |Magenta (Pink)|ff|00|ff|Hintergrund|Beispieltext | |Cyan (Türkis)|00|ff|ff|Hintergrund|Beispieltext | [[http://www.webfarbentrainer.de/rgb-farben-trainingstool|Eine Trainingsseite für Farbtöne]] ====== Weiterführendes ====== [[http://de.selfhtml.org/|Self-HTML]] - die Originalseiten von Stefan Münz [[http://www.qhaut.de/modules.php?name=Downloads|HTML-Editor Phase 5]] - die Freeware-Alternative zu manch anderem Editor [[.:css|Weiterführende Hinweise zur Verwendung von CSS]] Und schließlich noch ein Tipp: Wenn einem eine im WWW gefundenen Seite gefällt, kann man sich ja immer den Quelltext ansehen, und Ideen für die eigene Seite entwickeln. {{tag> HTML Hexadezimalcode}}
und