Maaßen-HTMLCSSJS

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
Was ist SGML?
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 die DTD?
- 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
HTML - Hyper Text Markup Language
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:
Überschriften
Textabsätze
Listen
Tabellen
Grafik- / Multimediareferenzen
-> daher der Begriff Auszeichnungssprache (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.
HTML - Hyper Text Markup Language
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 - Zwischenfazit
Die 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 HTMLAuszeichnungen 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 SyntaxRegeln von HTML einzuhalten.
Die Struktur eines HTML-Dokuments
<!DOCTYPE ...>
<html>
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>
Dokumenttyp-Deklaration
Stammelement
Header = Kopfbereich
Titel (obligatorisch)
Körper = Rumpfbereich
(anzuzeigender Inhalt)
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.
Ein DOCTYPE-Beispiel für HTML 4.01
<!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.
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:
title
meta
enthält Metadaten
base
link
logische Beziehungen zu anderen Ressourcen, v.a. Einbindung von
Stylesheets
script
Einbindung von Code best. Skriptsprachen, v.a. JavaScript
style enthält Stylesheet-Regeln.
object
HTML - Meta-Elemente
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 - Beispiele für Meta-Tags im Dateikopf
Seitenbeschreibung / Abstract
Bsp. 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 HTMLElementen, 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.
HTML - Universalattribute
Quelle: http://de.selfhtml.org/html/attribute/allgemeine.htm
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>
<!-- so wird ein Kommentar eingeleitet. Diesen nutze ich, um euch zu sagen, dass das einleitende Tag <h1> für heading 1 gleich Überschrift 1
steht und </h1> entsprechend den Abschluss signalisiert. Fehlt uns nur noch das Anzeigen des Kommentarendes. Dieser folgt auf dem Fuße: ->
<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>
<!-- Zeit für einen weiteren Kommentar: das Standalone-Tag <br> genügtin HTML 4.01. XHTML-konform ist <br /> oder <br></br>. Es handelt
sich dann um ein leeres Element mit Anfangs- und End-Tag, aber ohne Inhalt. Eigentlich dachte ich, dass ich in meinem Beispiel auch die
XHTML-Schreibweise nehmen könnte. Der Validator unter validator.w3.org hat mich aber dafür heftigst kritisiert. Wie bei Elementnamen, so gilt
auch bei Attributnamen: bei herkömmlichem HTML spielt es keine Rolle, ob die Attributnamen in Klein- oder Großbuchstaben notiert werden. In
XHTML müssen Element- und Attributnamen dagegen durchgehend klein geschrieben werden. Warum also nicht direkt klein.-->
<hr>
<!-- <hr></hr> erzeugt eine Trennlinie (horizontal rule) mit Zeilenumbruch -->
<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>
HTML - Zusammenfassung
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...
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 HTMLElemente. 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 HTML
Es 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 HTML
2. 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 HTML
3. 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;
}
CSS - Einbindung in HTML
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 aus
type
Das Attribut weist die Sprache des StyleSheets in Form eines MIME-Typs
href
Das Attribut adressiert die Ressource des StyleSheets (hyper reference =
Hypertext-Referenz) mittels Pfadangabe oder URI
title
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
aus
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">
<!-- für HTML 4.01 Strict nicht /> nach dem Anführungszeichen verwenden! -->
<title>HTML - ein weiteres Beispiel für unseren Kurs</title>
</head>
<body>
<h1>HTML ist ganz was Feines</h1>
<!-- so wird ein Kommentar eingeleitet. Diesen nutze ich, um euch zu sagen, dass das einleitende Tag <h1> für heading 1 gleich Überschrift 1 steht und </h1>
entsprechend den Abschluss signalisiert. Fehlt uns nur noch das Anzeigen des Kommentarendes. Dieser folgt auf dem Fuße: -->
<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>
<!-- Zeit für einen weiteren Kommentar: das Standalone-Tag <br> genügtin HTML 4.01. XHTML-konform ist <br /> oder <br></br>. Es handelt sich dann um ein
leeres Element mit Anfangs- und End-Tag, aber ohne Inhalt. Eigentlich dachte ich, dass ich in meinem Beispiel auch die XHTML-Schreibweise nehmen könnte. Der
Validator unter validator.w3.org hat mich aber dafür heftigst kritisiert. Wie bei Elementnamen, so gilt auch bei Attributnamen: bei herkömmlichem HTML spielt es
keine Rolle, ob die Attributnamen in Klein- oder Großbuchstaben notiert werden. In XHTML müssen Element- und Attributnamen dagegen durchgehend klein
geschrieben werden. Warum also nicht direkt klein.-->
<hr>
<!-- <hr></hr> erzeugt eine Trennlinie (horizontal rule) mit Zeilenumbruch -->
<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)
CSS - ein paar weitere Grundlagen
Arten von StyleSheets:
Neben dem Autoren-StyleSheet existieren Browser- und BenutzerStyleSheets. 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...
HTML und CSS - Fazit
Struktur (HTML) und Layout (CSS) werden im HTMLRendering-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«.
Das Document Object Model (DOM)
Der Dokumentenstammbaum eines HTML-Dokuments lässt sich mit folgenden Begriffen
beschreiben:
Stammelement oder Wurzelelement
Elternelement
Kindelement (nachfolgendes / vorhergehendes)
Geschwisterelement
Vorfahrenelement
Nachkommenelement
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
Das Document Object Model (DOM)
<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.
JavaScript
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 - 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.
JavaScript - Was sind Event-Handler?
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: Event-Handler-Beispiele
Quelle: http://de.selfhtml.org/html/attribute/eventhandler.htm
JavaScript - Funktionen
- 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 - weitere Beispiele [8]
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-function Quadrat() {
var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value;
alert("Das Quadrat von " + document.Formular.Eingabe.value + " = " + Ergebnis);
}
//-->
</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
Quelle: http://de.selfhtml.org/html/attribute/eventhandler.htm
JavaScript - weitere Beispiele
JavaScript-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 Datei
Quelle: 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 HTMLFunktionalitä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.: AddisonWesley 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