HTML - Eine erste Annäherung - Akronym für Hyper Text Markup Language - basiert auf SGML (Standard Generalized Markup Language) -> HTML ist eine SGML-Anwendung

HTML - Eine erste Annäherung

- Akronym für Hyper Text Markup Language - basiert auf SGML (Standard Generalized Markup Language)-> HTML ist eine SGML-Anwendung- die Sprache wurde von Web-Gründer Tim Berners-Lee erfunden und heute durch das W3C (World Wide Web Consortium) weiterentwickelt.

Das Ziel: Informationen aller Art in Dokumenten im Web weltweit zur Verfügung zu stellen

- grundsätzlich: die Markup-Sprachen dienen dazu, die logische Struktur eines Dokumentes zu definieren, nicht ihre Darstellung!

-> das ist Voraussetzung für eine (ziel)plattformübergreifende Kompatibilität

SGML

ist ein internationaler Standard (ISO-Norm 8879), der die strukturorientierte Auszeichnung eines Dokumentes festlegt. Es ist eine Metasprache, mit der konkrete Auszeichnungssprachen (SGML-Anwendungen genannt) definiert werden können und die Struktur eines Dokumentes beschrieben werden kann.

XML (Extensible Markup Language)

ist eine Teilmenge von SGML, also keine SGML-Anwendung, sondern ein SGML-Profil. Es handelt sich um eine Vereinfachung von SGML, aber weiterhin eine Metasprache, die die Fähigkeit hat, XML-Anwendungen, also konkrete Auszeichnungssprachen zu definieren.

Was ist SGML?

- SGML-Sprachen sind an die DTD (Document Type Definition) gebunden- darin ist festgelegt, welche Elemente in der Sprache zugelassen sind und wie die Struktur der Dokumente auszusehen hat, die in einer SGML-Sprache erstellt werden

-> bildlich gesprochen: die DTD ist die Grammatik der Sprache SGML

Was ist die DTD?

Was besagt der Begriff Markup?

- die logische Struktur von Dokumenten wird mit Hilfe von Markierungen (Tags) vorgenommen- die logischen Bestandteile einer textorientierten Webseite werden „ausgezeichnet“- typische Bestandteile sind:

ÜberschriftenTextabsätzeListenTabellen Grafik- / Multimediareferenzen

-> daher der Begriff Auszeichnungssprache (Markup-Language)

HTML - Hyper Text Markup Language

HTML - Was sind Elemente und Tags?

Was sind Elemente?Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert.

Was sind Tags?Tags beginnen mit einem „kleiner als“-Zeichen bzw. einer öffnenen spitzen Klammer (<) und enden mit einem „größer als“- Zeichen bzw. einer schließenden spitzen klammer (>)- der Zwischenbereich ist der „Gültigkeitsbereich“. Er muss der DTD entsprechen-> Tags sind die Markierungen, die das Dokument logisch strukturieren

- das Auszeichnungsschema von HTML geht von einer hierarchischen Gliederung aus- einleitende Tags und Standalone-Tags können zusätzliche Angaben (Attribute) enthalten.

ein Hypertext

ist ein Dokument, das in sich Verweise enthält und so mit anderen Texten verknüpft ist bzw. allgemeiner: verknüpft sein kann.

-> Er ist in diesem Sinne nicht linear aufgebaut, sondern enthält mögliche Abzweigungen. Eine hypertextuelle Struktur entsteht...

--> Grundidee des World Wide Web

HTML - Hyper Text Markup Language

HTML - ZwischenfazitDie beiden zentralen Aspekte,

1. mittels Markierungen die logische Struktur eines Dokuments zu definieren und

2. Verknüpfungen zu anderen virtuellen Dokumenten herstellen zu können

zeigen die Bedeutung von HTML: Sie ist eine unverzichtbare Sprache des WWW zur Erstellung von Webseiten geworden.

Auch die Möglichkeit einer zusammenfassenden Definition ergibt sich nun:

HTML ist eine strukturorientierte Auszeichnungssprache für Hypertext!

HTML - Übertragung und Aufbereitung In einem Browser ist ein Parser integriert. Unter einem HTML-Parser versteht man eine Software, die HTML-Auszeichnungen erkennt und in strukturierten Text umsetzt.

Auf das Parsen folgt das Rendern: Die Darstellung des mittels HTML strukturierten Dokuments. Dieser Schritt der visuellen Aufbereitung geschieht am Darstellungsmedium orientiert.

Trotz der umfassenden „Fehlerkorrektur“ der Parser wird es durch die steigende Komplexität der Sprachen (HTML in Verbindung mit eingebettetem CSS, JavaScript, usw.) immer wichtiger, die Syntax-Regeln von HTML einzuhalten.

Die Struktur eines HTML-Dokuments

<!DOCTYPE ...> Dokumenttyp-Deklaration <html> Stammelement<head> Header = Kopfbereich <title>...</title> Titel (obligatorisch)</head><body>... Körper = Rumpfbereich </body> (anzuzeigender Inhalt)</html>

Die Dokumenttyp-Deklaration <!DOCTYPE ...>Die Variante Strict für HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Die Variante Transitional für HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Die Variante Frameset für HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Entsprechende Dokumenttyp-Deklarationen für XHTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Dokumenttyp-Deklaration für XHTML 1.1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Ältere Dokumenttyp-Deklarationen:<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Die Dokumenttyp-Deklaration <!DOCTYPE ...>Zweck der Dokumenttyp-Deklaration:

Mitteilung an die auslesende Software, welche Auszeichnungssprache (Version?!) für das Dokument verwendet wird.

Ist ein Dokumenttyp angegeben und werden dessen offizielle Regeln (gemäß DTD) im Quelltext befolgt, so ist die Datei gültig -> wichtig für eine evtl. Validitätsprüfung

Beispiele für die Regeln:- welche Elemente dürfen enthalten sein?- welche Attribute gehören zu einem Element?- ist die Angabe dieser Attribute obligatorisch oder fakultativ? u.v.m.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Erläuterung Zeile 1- Der Beginn

<!- Der Bezug auf die öffentlich verfügbare HTML-DTD

DOCTYPE HTML PUBLIC- Der Herausgeber der DTD

"-//W3C- Die Verwendung des Dokumenttyps HTML in der Version 4.01 und der Variante Transitional

//DTD HTML 4.01 Transitional- das Sprachenkürzel: Die Element- und Attributnamen der Tagsprache sind in der nat. Sprache Englisch definiert

//EN“

Erläuterung Zeile 2- Die Web-Adresse der Dokumenttyp-Definition (DTD). Die Angabe dieser Adresse ist nicht obligatorisch.

Ein DOCTYPE-Beispiel für HTML 4.01

Die weiteren Bereiche im HTML-Grundgerüst

Die Tags <html>...</html> schließen den gesamten Inhalt des HTML-Dokuments im Anschluss an die Dokumenttyp-Deklaration ein -> Das Wurzelelement einer HTML-Datei.

Dem einleitenden <html>-Tag folgt das einleitende <head>-Tag: Die Kopfdaten eines HTML-Dokuments folgen nun.

obligatorisches Tag-Paar: <title>...</title>-> Die Vergabe des Dokumententites

Den Abschluss bildet </head>.

Darauf folgt der Textkörper, begrenzt durch <body>...</body>. Dazwischen wird der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster des WWW-Browsers angezeigt werden soll.

HTML - der Dateikopf <head>...</head>

Die Bedeutung des obligatorischen Dokumententitels:- wird in der Titelzeile des Anzeigefensters oder im tab (Karteireiter) angezeigt- wird für Lesezeichen/Bookmarks/Favoriten verwendet - erscheint in der Chronik/im Verlauf der besuchten Seiten- dient Suchmaschinen als Verweis, welcher im Suchergebnis angezeigt wird...

Im Kopf können 7 verschiedene Elemente Verwendung finden:

titlemeta enthält Metadatenbase link logische Beziehungen zu anderen Ressourcen, v.a. Einbindung von Stylesheets script Einbindung von Code best. Skriptsprachen, v.a. JavaScriptstyle enthält Stylesheet-Regeln.object

Meta-Elemente enthalten Informationen über das Dokument, insbesondere für Webcrawler.

Meta-Angaben werden im Dokumentkopf notiert und vom Browser bzw. vom Benutzerprogramm nicht angezeigt.

Die HTML-Empfehlungen schreiben keine Meta-Angaben vor, allerdings regeln sie deren Struktur:

meta ist ein leeres Element mit zwei Attributen: 1. name (für Webcrawler) oder http-equiv (für Browser)2. content

HTML - Meta-Elemente

HTML - Beispiele für Meta-Tags im Dateikopf

Seitenbeschreibung / AbstractBsp. für XHTML, für HTML 4.01 muss der „/“ am Ende weggelassen werden:<meta name="description" content="hier die Seitenbeschreibung" />

Stichwörter<meta name="keywords" content="IT-Zertifikat, Einführung, HTML" />

Autor<meta name="author" content="Vorname Nachname" />

Anweisungen für Suchmaschinen verschiedenster Art

Angabe des MIME-Typs (Internet Media Type) und dem Zeichensatz des Dokuments <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Angabe der Sprache des Dokuments<meta http-equiv="Content-Language" content="de" />

autiomatische Weiterleitung mittels refresh-Tag<meta http-equiv="refresh" content="5; URL=.../" />

geographische Informationen mittels Geo-Tag -> könnte für Suchaufträge mit lokalem Bezug genutzt werden

HTML - der HTML-Körper

Wdh.: Der Inhalt von HTML-Dateien steht wie gesehen in HTML-Elementen, mittels Tags markiert.

Auch eine Verschachtelung von Elementen ist möglich: eine hierarchische Struktur entsteht (strukturiertes Markup).Beispiel:<h1><i>HTML</i> - eine Einführung für unseren Kurs</h1>

Einleitende Tags und Standalone-Tags können zusätzliche Angaben enthalten in Form von Attributen mit (freier) Wertzuweisung.Beispiel:<h1 align="center">HTML - eine Einführung für unseren Kurs</h1>----> Von größerer Bedeutung sind die sog. Universalattribute, die in einleitenden HTML-Tags vorkommen können. Neben allgemeinen Attributen stehen jene Attribute, die eine Schnittstelle zu Script-Sprachen wie JavaScript herstellen.

Quelle: http://de.selfhtml.org/html/attribute/allgemeine.htm

HTML - Universalattribute

HTML - Universalattribute: Sinn und Zweck

Die Universalattribute id und class dienen als Element-Identifikatoren dazu, ein Element genauer zu bezeichnen. Der für ein Element ausgewählte Bezeichner id ist eindeutig, d.h. er darf innerhalb des Dokuments nur einmal vergeben werden. Bei Klassennamen hingegen ist eine multiple Zuordnung von Elementen möglich.

Die Universalattribute bringen viele Möglichkeiten, u.a.:

- Eine feinere Strukturierung des Quelltextes- Ein Element bzw. eine Elementgruppe lässt sich über einen speziellen ID- / Class-Selektor in CSS ansprechen- Die JavaScript-Funktionen können auf ein mit id versehenes Element zugreifen

Bsp.: div-Tag zur Auszeichnung eines Abschnitts „abstract“:<div id="abstract">

HTML - ein einfaches Beispiel [1]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>HTML - ein einfaches Beispiel für unseren Kurs</title></head><body>In diesem Bereich steht der Text der auf der Seite angezeigt werden soll. Im Browser ergibt das dann ein merkwürdiges Beispiel. Es ist insgesamt eine ziemlich primitive Seite, aber für unseren Einstieg in HTML genau das Richtige :-) </body></html>

Bei der HTML-Version 4.01 gibt es drei Sprachvarianten. Ich habe mich im Beispiel für Transitional entschieden... Warum?Lösung: Innerhalb des Tag-Paares <body>...</body> ist „nackter Text“ verwendet, d.h. er steht außerhalb eines weiteren Elementes. Dies wäre in der Strict-Variante unzulässig. U.a. sind in der Transitional-Variante die Regeln für die Elementverschachtelung milder.

HTML - ein komplexeres Beispiel [2]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>HTML - ein weiteres Beispiel für unseren Kurs</title></head><body><h1>HTML ist ganz was Feines</h1><p>Ich hoffe, dass ich euch bislang HTML ein wenig näher bringen konnte und ihr noch nicht eingeschlafen seid. Jetzt hätte ich gerne einen Zeilenumbruch gehabt. Automatisch wird der Text an die Fenstergröße angepasst. Ich möchte aber einen festen Zeilenumbruch haben.<br>Schön :-)</p><hr><p>Jetzt folgt ein neuer Absatz, in dem ich gerne noch kleinere Beispiele, aber <strong> ohne Kommentar </strong> unterbringen möchte.<br>Auch <q>Zitate</q> innerhalb eines Absatzes sind in HTML realisierbar.<br>Innerhalb einer HTML-Datei dürfen nur ASCII-Zeichen verwendet werden. Umlaute, Sonderzeichen und Zeichen, die für Befehle reserviert sind, dürfen nicht benutzt werden. Aber unsere öffnende spitze Klammer ist doch unverzichtbar. Aber ein Ausweg steht bereit: Man gibt den Zeichennamen oder den Dezimalcode an. Zeichennamen steht ein &-Zeichen voran, Dezimalcodes beginnen mit &#. Beide werden mit einem ; abgeschlossen. Groß- und Kleinschreibung muss unbedingt beachtet werden. So steht unserem < nichts mehr im Wege. 5<10 Das macht Spaß :-) Ich denke das reicht für den Anfang, auch wenn es noch viele Dinge gibt, die man zeigen könnte</p><p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a></p></body></html>

Greifen wir die Definition von HTML aus dem Zwischenfazit noch einmal auf:HTML ist eine strukturorientierte Auszeichnungssprache für Hypertext!

Was kann HTML leisten?

- Überschriften, Textabsätze, Listen und Tabellen erzeugen (und „auszeichnen“)- anklickbare Verweise auf Webseiten oder Datenquellen im WWW erzeugen- nicht-textuelle Inhalte (Grafik/Multimedia) referenzieren- Formulare integrieren

Es handelt sich um eine beschreibend-strukturierende (descriptive), nicht darstellungsorientierte Textauszeichnung.

HTML - Zusammenfassung

Insgesamt also als standardisierte Sprache zur Strukturierung von Text und Hypertext ein durchdachtes Konzept für Web-Publishing. Es genügt für dieses Klartextformat ein “simpler” Editor. HTML wird geschrieben. Es wird nicht in HTML programmiert.

Fazit: Wer Texte online braucht, braucht HTML!

Über Schnittstellen für Erweiterungssprachen wie Stylesheets (CSS) oder JavaScript können HTML-Elemente positioniert und gestaltet oder die Interaktion mit dem clientseitigen Benutzer realisiert werden...

HTML - Zusammenfassung

CSS - Cascading Style Sheets

Voraussetzung: Die Trennung von Struktur und Layout!

Um auf das Rendern eines HTML-Dokuments Einfluss nehmen zu können, haben sich sog. CSS als Formatvorlagen etabliert. Diese Sprache definiert einzelne HTML-Elemente. Daher gelten Elemente und Attribute zur Präsentation wie <font>…</font> in der HTML-4.01-Spezifikation als missbilligt (engl.: deprecated).

-> StyleSheets sind eine unmittelbare Ergänzung zu HTML.

Weitere Vorteile durch StyleSheets:

- Vereinfachung der Webseiten-Erstellung- Kompatibilität 1: CSS1 ist eine weitestgehend eine Teilmenge von CSS2- Kompatibilität 2: als offener Standard (W3C-Normierung) ist CSS hard- und softwareunabhängig- „Barrierefreiheit“, „Usability“ Vgl.: OS-Schemata- Zeitersparnis: Da i.Allg. wenige Stylesheets viele Dokumente steuern verringert sich der Wartungsaufwand- einheitliches Layout für große Projekte ohne großen Aufwand- u.v.m.

CSS - Cascading Style Sheets

Syntax und Vokabular:

Regeln: Das Grundgerüst eines StyleSheets besteht aus einem Selektor und geschweiften Klammern. Der Selektor selektiert die gewünschten Elemente.

Die geschweiften Klammern umschließen eine Liste mit Deklarationen (Deklarationsblock). Deklarationen bestehen aus einer Eigenschaft, einem Doppelpunkt und einem Wert. Mehrere Deklarationen in einem Deklarationsblock werden durch Semikola getrennt.

Also allgemein:

Selektor { Eigenschaft:Wert; }

CSS - Einbindung in HTMLEs stehen drei Methoden zur Einbindung zur Verfügung:

1. Einbinden mittels des Universalattributs style in Verwendung als inline-Style innerhalb eines HTML-Elements [3]Beispiel: unser einfaches HTML-Beispiel...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>HTML - ein einfaches Beispiel für unseren Kurs</title></head><body><p style="color:rgb(255,0,0); font-style: italic; font-size:xx-large;">In diesem Bereich steht der Text der auf der Seite angezeigt werden soll. Im Browser ergibt das dann ein merkwürdiges Beispiel. Es ist insgesamt eine ziemlich primitive Seite, aber für unseren Einstieg in HTML genau das Richtige :-)</p></body></html>

-> Die Trennung von Struktur und Layout wird jedoch unterlaufen!

CSS - Einbindung in HTML2. Einbinden per style-Element im Dokumentkopf <head>...</head> [4]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>HTML - ein einfaches Beispiel für unseren Kurs</title><style type="text/css">p {color:rgb(255,0,0);font-style: italic;font-size:xx-large;}</style></head><body><p>In diesem Bereich steht der Text der auf der Seite angezeigt werden soll. Im Browser ergibt das dann ein merkwürdiges Beispiel. Es ist insgesamt eine ziemlich primitive Seite, aber für unseren Einstieg in HTML genau das Richtige :-)</p></body></html>

-> Verwendung für CSS, welches dokumentweit Geltung besitzen soll-> etwas bessere Trennung zwischen Markup und Styling

CSS - Einbindung in HTML3. Einbinden per link-Element [5]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>HTML - ein einfaches Beispiel für unseren Kurs</title><link rel="stylesheet" media="screen,projection" type="text/css"title="Standardstylesheet" href="default.css"></head><body><p>In diesem Bereich steht der Text der auf der Seite angezeigt werden soll. Im Browser ergibt das dann ein merkwürdiges Beispiel. Es ist insgesamt eine ziemlich primitive Seite, aber für unseren Einstieg in HTML genau das Richtige :-)</p></body></html>

Die Datei default.css (per Editor erstellt) beinhaltet@charset "ISO-8859-1";p {color:rgb(255,0,0);font-style: italic;font-size:xx-large;}

3. Einbinden per link-Element

-> das link-Element ist wie das style-Element Kind des <head>-Elements-> es ist die empfohlene Methode zum Einbinden von CSS in HTML--> Verweis auf ein externes StyleSheet

<link rel="stylesheet" media="screen,projection" type="text/css"title="Standardstylesheet" href="default.css">

Erläuterung:rel Das Attribut zeigt den Bezug (rel = relation) an: Es gibt ein StyleSheet!media Das Attribut weist das StyleSheet für Ausgabemedien austype Das Attribut weist die Sprache des StyleSheets in Form eines MIME-Typs

aushref Das Attribut adressiert die Ressource des StyleSheets (hyper reference = Hypertext-Referenz) mittels Pfadangabe oder URItitle Das Attribut gibt dem StyleSheet einen Namen (z.B. zur Auswahl im Browser)

-> „globale“ Verwendungsmöglichkeit für viele Dokumente-> optimale Trennung von Markup und Styling

CSS - Einbindung in HTML

CSS - Einbindung in HTML

3. Einbinden per link-Element

StyleSheets können auch alternativ (im Browser auszuwählen) eingebunden werden. Hierzu ist ein zusätzlicher rel-Attributwert notwendig.

<link rel="alternate stylesheet" media="screen,projection" type="text/css"title="Standardstylesheet" href="default.css">

Das W3C-Konsortium bietet unter http://www.w3.org/StyleSheets/Core/ sog. W3C Core Styles an, die Webautoren frei zur Verfügung stehen. Trotz einiger Mängel bieten sich diese für ein rasches Dokumentlayout an:

CSS - Beispiel: Einbinden eines W3C Core Style [6]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><link rel="stylesheet" title="Ultramarine" type="text/css" media="screen,projection" href="http://www.w3.org/StyleSheets/Core/Ultramarine"><title>HTML - ein weiteres Beispiel für unseren Kurs</title></head><body><h1>HTML ist ganz was Feines</h1><p>Ich hoffe, dass ich euch bislang HTML ein wenig näher bringen konnte und ihr noch nicht eingeschlafen seid. Jetzt hätte ich gerne einen Zeilenumbruch gehabt. Automatisch wird der Text an die Fenstergröße angepasst. Ich möchte aber einen festen Zeilenumbruch haben.<br>Schön :-)</p><hr><p>Jetzt folgt ein neuer Absatz, in dem ich gerne noch kleinere Beispiele, aber <strong> ohne Kommentar </strong> unterbringen möchte.<br>Auch <q>Zitate</q> innerhalb eines Absatzes sind in HTML realisierbar.<br>Innerhalb einer HTML-Datei dürfen nur ASCII-Zeichen verwendet werden. Umlaute, Sonderzeichen und Zeichen, die für Befehle reserviert sind, dürfen nicht benutzt werden. Aber unsere öffnende spitze Klammer ist doch unverzichtbar. Aber ein Ausweg steht bereit: Man gibt den Zeichennamen oder den Dezimalcode an. Zeichennamen steht ein &-Zeichen voran, Dezimalcodes beginnen mit &#. Beide werden mit einem ; abgeschlossen. Groß- und Kleinschreibung muss unbedingt beachtet werden. So steht unserem < nichts mehr im Wege. 5<10 Das macht Spaß :-) Ich denke das reicht für den Anfang, auch wenn es noch viele Dinge gibt, die man zeigen könnte</p><p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a></p></body></html>

CSS - ein paar weitere Grundlagen

Kommentare:Wie in HTML können in CSS Kommentare eingebaut werden. Die Sprache orientiert sich hier an die Programmiersprache C:/* Kommentar */

Vererbung und Initialwerte:Man wird für Elemente im StyleSheet nur bestimmte Werte setzen. Die CSS-Empfehlung bestimmt für nahezu alle Eigenschaften Initialwerte. Durch die hierarchische Struktur von HTML - für das CSS ja entwickelt wurde - können Eigenschaften entlang der Verschachtelung vererbt werden (Vgl. Begriffe wie Elternelement)

Arten von StyleSheets:Neben dem Autoren-StyleSheet existieren Browser- und Benutzer-StyleSheets. Diese (und auch ein einzelnes StyleSheet) können konträre Angaben beinhalten, wie ein Element darzustellen ist. ->Der Browser arbeitet eine Reihenfolge des Ursprungs von Deklarationen ab, bei der insbesondere Autoren- und UserStyleSheets in der „Kaskade“ konkurrieren. -->Deklarationen können mit der Zeichenkette !important ausgezeichnet werden--->In CSS 2 wird !important im BenutzerStyleSheet am höchsten bewertet

Erfassen mehrere Selektoren im StyleSheet gleicher Wichtigkeit ein Element, wird die sog. Spezifität der Selektoren ermittelt...

CSS - ein paar weitere Grundlagen

HTML und CSS - Fazit

Struktur (HTML) und Layout (CSS) werden im HTML-Rendering-Prozess zusammengeführt.

HTML liefert ein Dokument also mit einer semantischen Struktur, das StyleSheet definiert eine Liste von Selektoren und Regeln für die visuelle Darstellung - abhängig vom Ausgabemedium.

Eine Rendering-Engine im Browser interpretiert das Layoutmodell (CSS) und füllt dieses Layout mit dem durch HTML strukturierten Inhalt (Text).

Das Document Object Model (DOM)

Definition:

Das Document Object Model (DOM) ist eine W3C-Empfehlung, die Programmen eine allgemeine Vorgehensweise (Schnittstelle) für den Zugriff auf Bestandteile eines Dokuments liefert. Das DOM beschreibt Objekte, Eigenschaften und Methoden und ist sowohl im HTML-/XML- als auch im JavaScript-Umfeld von großer Bedeutung.

Dabei wird die Struktur des Dokuments, beispielsweise eines XHTML-Dokuments, so dargestellt wie das Verhältnis verwandter Familien zueinander in einem Familienstammbaum. Es gibt Vorfahren, Nachfahren, Eltern, Kinder und Geschwister. Daher spricht man in diesem Zusammenhang auch häufig von einem »Dokumentstammbaum«.


Der Dokumentenstammbaum eines HTML-Dokuments lässt sich mit folgenden Begriffen beschreiben:

Stammelement oder WurzelelementElternelementKindelement (nachfolgendes / vorhergehendes)GeschwisterelementVorfahrenelementNachkommenelement

Die Bestandteile eines Dokumentstammbaums werden Knoten genannt. Neben den Elementknoten (s.o.) gibt es auch Attributknoten, Textknoten und Namensraumknoten.

DOM erlaubt -die Navigation zwischen Knoten,- das Erzeugen, Verschieben und Löschen von Knoten und- das Auslesen, Ändern und Löschen von Textinhalten.

-> mittels dynamischem HTML (DHTML), auch DOM-Scripting genannt, können Webseiten interaktiv gestaltet werden und sich in Reaktion auf die Eingabe (-> EventHandler) wie Anwendungsprogramme verhalten


<table> <thead> <tr> <th>Vorname</th> <th>Name</th> </tr> </thead> <tbody> <tr> <td>Donald</td> <td>Duck</td> </tr> </tbody></table>

Quelle: http://de.wikipedia.org/wiki/Document_Object_Model

JavaScript - ein Beispiel zur Einführung

Für JavaScript-Programmabschnitte können in HTML Bereiche definiert werden.Beispiel [7]:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>HTML - ein einfaches Beispiel für unseren Kurs</title><script type="text/javascript">alert(":-)");</script></head><body>In diesem Bereich steht der Text der auf der Seite angezeigt werden soll. Im Browser ergibt das dann ein merkwürdiges Beispiel. Es ist insgesamt eine ziemlich primitive Seite, aber wenigstens gabs durch Javascript nen Smilie </body></html>

JavaScript

Das wichtigste zuerst:

JavaScript ist eine eigene Programmiersprache.

JavaScript ist als Ergänzung zu HTML gedacht.

JavaScript ist von der objektorientierten Programmiersprache Java zu

unterscheiden.

JavaScript läuft in einer sog. Sandbox, einem „Sicherheitskäfig für

Programmiersprachen“

JavaScript soll als clientseitige Scriptsprache die Grenzen von HTML ausweiten und somit zusätzliche Dynamisierung, Nutzerinteraktion und Animation ermöglichen.

Einbindungsmöglichkeiten:

JavaScript-Code wird mittels Script-Tag in HTML im Klartext eingebunden, zusammen mit diesem vom Server zum Client übertragen und über einen Interpreter (in Browser integriert) ausgeführt.Alternativ können JavaScripts in einer separaten Datei notiert werden – wie bei CSS.

Dagegen sind Java-Applets vorkompilierte Java-Programme , die mittels Applet-Tag in HTML eingebunden werden. Auch hier erfolgt eine Übertragung vom Server zum Client. Die Ausführung übernimmt eine JavaVirtualMaschine (in Browser integriert).

Ziel: „dynamische Manipulation“ von Webseiten

JavaScript

JavaScript - Geschichte

JavaScript wurde im Jahre 1995 von der Firma Netscape entwickelt und lizensiert.

Das W3C-Konsortium sollte eine entsprechende Sprache normieren. Das W3C erarbeitete jedoch keinen JavaScript-Standard, sondern ein allgemeines Modell für Objekte eines Dokuments (Document Object Model - DOM).

Es definiert - wie gesehen – wie sich auf Elemente eines Dokuments zugreifen lässt und welche Manipulationsmöglichkeiten es gibt.

Was sind Event-Handler?

- „Ereignisbehandler“ um Ziel der Dynamisierung zu erreichen- wichtiges Bindeglied zwischen HTML und JavaScript bzw. allg. einer Scriptsprache- meist in Form von Attributen in HTML-Tags notiert: Ein Element, das einen Event-Handler enthält, kann auf ein solches Ereignis reagieren, wenn das Ereignis im Anzeigebereich des Elements stattfindet

->Da es sich um Bestandteile handelt, die innerhalb von HTML vorkommen, hat das W3-Konsortium die Event-Handler mittlerweile auch in den HTML-Sprachstandard mit aufgenommen

JavaScript - Was sind Event-Handler?

Quelle: http://de.selfhtml.org/html/attribute/eventhandler.htm

JavaScript: Event-Handler-Beispiele

- solche HTML-Attribute beginnen immer mit on beginnen, zum Beispiel onmouseup (bei losgelassener Maustaste). Hinter dem Ist-gleich-Zeichen folgt in Anführungszeichen eine JavaScript-Anweisung.

Für mehrere Anweisungen definiert man in eine eigene, abgeschlossene Javascript-Prozedur (in einem JavaScript-Bereich oder einer separaten Datei), eine sog. Funktion. Diese ersetzt die einzelne Anweisung.

Bsp.: onmouseup="Umrechnen()"

JavaScript - Funktionen

JavaScript - weitere Beispiele [8]

Quelle: http://de.selfhtml.org/html/attribute/eventhandler.htm

<html><head><title>Test</title><script type="text/javascript"></script></head><body><form name="Formular" action=""><input type="text" name="Eingabe" size="3"><input type="button" value="Quadrat errechnen" onclick="Quadrat()"></form></body></html>

-> JavaScript-Anweisungen in „herkömmlichen“ HTML-Tags-> Aufruf bestimmter Methoden, Funktionen, Objekte, Eigenschaften durch Event-Handler

JavaScript - weitere BeispieleJavaScript-Datei quadrat.js

function Quadrat() { var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value; alert("Das Quadrat von " + document.Formular.Eingabe.value + " = " + Ergebnis); }

Beispiel: HTML-Datei

<html><head><title>JavaScript-Test</title><script src="quadrat.js" type="text/javascript"></script></head><body><form name="Formular" action=""><input type="text" name="Eingabe" size="3"><input type="button" value="Quadrat errechnen" onclick="Quadrat()"></form></body></html>

-> JavaScript-Code in separater DateiQuelle: http://de.selfhtml.org/html/attribute/eventhandler.htm

Fazit : HTML, CSS und Javascript

HTML: Hypertext Markup Language -> eine strukturorientierte Auszeichnungssprache

CSS: Cascading Stylesheets -> layoutorientierte Ergänzung zu HTML

Javascript-> Script- / Programmiersprache zur Erweiterung von HTML-Funktionalität

HTML, CSS und Javascript kann auf einen request hin vom Server zum client übertragen und hier ausgeführt: Clientseitig also ein „starkes Team“

Anders z.B. PHP-Code: geschieht serverseitig vor all jenen clientseitigen Sprachen und Formatierungen

Literaturverzeichnis

Chung, Dirk: HTML-Publishing. Aufbau und Design attraktiver Webseiten. Bonn u.a.: International Thomson Publishing 1996.

Avci, Oral: XHTML und HTML. In: Avci, Oral, Trittmann, Ralph und Mellis, Werner (Hrsg.): Web-Programmierung. Wiesbaden: Vieweg 2003., S.86-138.

Jänecke, Michael: Cascading Style Sheets. In: Avci, Oral, Trittmann, Ralph und Mellis, Werner (Hrsg.): Web-Programmierung. Wiesbaden: Vieweg 2003., S.139-168.

Avici, Oral & Eidemüller, Heiko: JavaScript. In: Avci, Oral, Trittmann, Ralph und Mellis, Werner (Hrsg.): Web-Programmierung. Wiesbaden: Vieweg 2003., S.249-308.

Jendryschik, Michael: Einführung in XHTML, CSS und Webdesign. München u.a.: Addison-Wesley 2007.

Schwickert, Axel und Dandl, Jörg: HTML, Java, ActiveX - Strukturen und Zusammenhänge. In: Lehrstuhl für Allg. BWL und Wirtschaftsinformatik, Johannes Gutenberg-Universität (Hrsg): Arbeitspapiere WI 6/1997. Mainz: 1997.

Wikipedia URL: http://de.wikipedia.org/

SELFHTML e.V. URL: http://de.selfhtml.org/ in Version 8.1.2 vom 01.03.2007

Documents

HTML - Eine erste Annäherung - Akronym für Hyper Text Markup Language - basiert auf SGML (Standard Generalized Markup Language) -> HTML ist eine SGML-Anwendung