Einordnung
Basis HTML
Volles HTML
Ausblick
Standard Generalized Markup Language (SGML)
Extended Markup Language (XML)
WYSIWYG im Gegensatz zu Markup
Orientierung am Bildschirm
Problem: Drucken
erster Ansatz von Tim Berners-Lee, 1989
erster Browser, und Server 1990/91
HTML 1.0, erster Entwurf 1992
Web-Technologie Public Domain, 1993
HTML 2.0, 1995, November
HTML 3.2, 1997 Januar
HTML 4.0, 1997 Dezember
HTML 4.01, 1999 Dezember
Identifikation von Objekten: URL, URI
Übertragung von Objekten: Protokolle, z.B. HTTP
Hypertext: Darstellung und Navigation, z.B. HTML
Dokumentstruktur durch Markup
Dokument-Darstellung, Präsentation durch Browser
Interaktion
HTML 4.0 ist eine SGML Anwendung
Festlegung in der Document Type Definition (DTD)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd" >
Zeichensatz: ISO/IEC 10646,
Universal Character Set (UCS), Unicode 2.0
Elemente: <name> Inhalt </name>
Markup oder Textauszeichnungen: Tags
werden in spitze Klammern eingeschloßen: <tag>
bei einigen Elementen ist das Ende-Tag optional
manchmal auch das Start-Tag, z.B. BODY
einige Elemente sind ohne Inhalt, d.h. leer
für XML auch kombinierte Beginn-Ende-Tags: <tag/>
Attribute: attname="wert"
<tag att1="wert1" att2="wert2" >
Groß-Klein-Schreibung wird ignoriert
Kommentare: <!-- ignorierter Text -->
spezielle Zeichen: < (<) > (>) ä (ä) & (&) å (å)
Grammatik von HTML
Schachtelung der Elemente
Festlegung in der Content-Model Spezifikation
Beispiel in EBNF:
HTML = HEAD BODY
UL = (LI)+
in SGML:
<!ELEMENT HTML O O (HEAD BODY) >
<!ELEMENT UL - - (LI)+ >
<!ELEMENT IMG - O EMPTY >
durch Browser
Mosaic, Netscape, MS Internet Explorer, W3C Amaya, Lynx, html2ps, Mobil-Telefone, Palm-Tops, Sprachausgabe, Blindenschrift
unbekannte Elemente werden ignoriert
nur der Inhaltsteil wird dargestellt
unbekannte Attribute werden ignoriert
bei unbekannten Attribut-Werten wird der Default genommen
dienst://hostname/pfad/object.ext
Dienst-Selektor
Hostname
Pfad-Selektor
Objekt im Dokument: doc.html#part_2
Relative URIs: ../images/bild.gif
oder adoc.html
Element | Bedeutung | Content-Model |
---|---|---|
HTML | SGML Anwendung | HEAD BODY |
HEAD | Kopfinformationen | TITLE (SCRIPT | STYLE | META | LINK)+ |
BODY | eigentlicher HTML Teil | alles ohne Kopfelemente |
TITLE | Titel, Inhaltsbezeichnung | Text |
H1, ..., H6 | Überschriften | Text |
A | Verweis, Link, Anker | Linktext etc. |
P | Paragraph | alles ohne Block-Elemente |
UL, OL | Listen: unnumeriert, numeriert | LI+ |
DL | Definitionslisten | (DT|DD)+ |
LI, DT, DD | Listenelement, Definitionsterm, Definition | alles mit Ausnahmen |
IMG | Bild im Text | EMPTY |
PRE | vorformatierter Text | Text |
BR | Zeilenumbruch | EMPTY |
EM, STRONG, CODE | Betonung, Hervorhebung, Auszeichnung | Text |
BLOCKQUOTE, Q | Einrückung | Text |
unvollständige Auswahl
Blanks und Zeilenumbrüche im Dokument werden (mit Ausnahmen) ignoriert
Attribut | Bedeutung | Werte |
---|---|---|
name | Ziel von einem Link | Text |
href | Link URI | Text |
alt | Alternative Bezeichnung | Text |
align | Textausrichtung | (LEFT | CENTER | RIGHT) |
value | Nummer in OL LI | Zahl |
type | Nummerstil in UL LI | (disk | square | circle) |
title | zusätzliche Beschreibung | Text |
Formulare
Tabellen
Frames
Style Sheets, Darstellungsvorlagen
Scripte, Eingebettete Programme
Eingebettete Objekte, Applets
Internationalization, I18N
Unicode, Textrichtung
Element | Bedeutung | Content-Model |
---|---|---|
FORM | Formulare | (INPUT | SELECT | other)+ |
INPUT | Eingabefeld im Formular | EMPTY |
SELECT | Auswahl-Menue | (OPTGROUP | OPTION)+ |
OPTION | Auswahl-Option | EMPTY |
TEXTAREA | Eingabebereich im Formular | Anfangstext |
TABLE | 2-D Tabellen | CAPTION, TR+ |
TR | Tabellen Zeile | (TH | TD)+ |
TH, TD | Tabellen Element | alles mit Ausnahmen |
MAP | Bilder mit Links verknüpfen | AREA+ | other |
AREA | Beschreibung der Bildkoordinaten | EMPTY |
FRAMESET | Aufteilung der Anzeigefläche | FRAME+ | NOFRAMES |
FRAME | separate Anzeigefläche | EMPTY |
NOFRAMES | alternative ohne Frames | alles |
LINK | Verweise, mit Rollenangaben, z.B. auf Style Sheet |
EMPTY |
STYLE | Stilangabe | Stil-Script |
SCRIPT | JavaScript Programm im Text | Programm |
APPLET | Java Programm wie Bild | PARAM+ |
PARAM | Parameter für Java Programm | EMPTY |
OBJECT | Programm oder Bild | PARAM+ |
META | Information über die Seite | EMPTY |
DIV | Dokument-Abschnitt, Block | alles |
SPAN | Text-Abschnitt, Inline | alles ohne Block-El. |
DEL, INS | Text Revisionen | alles mit Ausnahmen |
Attribut | Bedeutung | Werte |
---|---|---|
action | URL eines CGI Programms | Zeichenkette |
method | HTTP Methode | (GET | POST) |
type | Typ eines Eingabefelds | (TEXT | PASSWORD | RADIO | CHECKBOX | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON) |
selected, value | Option mit Wert | selected, Wert |
border | Rahmentyp | ( solid | none | dashed | n) |
height, width | Grösse | Pixel, Prozent, Meter |
cellpadding, cellspacing | Abstand zwischen Text und Rand Abstand zwischen Zellen |
Pixel, Prozent, Meter |
usemap | Verweis auf zugeordnete MAP | Bezeichner |
shape | Typ der AREA | circle | rect | poly |
coords | Koordinaten der AREA | Liste |
rows, cols | Spezifikation der Zeilen, Spalten | Pixel, Prozent, Meter |
target | Zielframe zur Anzeige der Seite | Bezeichner |
rel, rev | z.B.Stilverweis | STYLESHEET | next | prev |
style | Stilinformation | CSS Text |
class | Klassen-Identifikator | Bezeichner |
id | Identifikator | Bezeichner |
language | Programmiersprache | JavaScript | VBScript | other |
code, classid | auszuführender Programmcode | Bezeichner |
codetype | Typ des Programmcodes | Bezeichner |
name | Metainfo. Bezeichnung | Text |
http-equiv | Metainfo. HTTP-Server | Text |
content | Metainfo. Inhalt | Text |
lang | Sprache in einem Element | z.B. EN, DE |
dir | Textschreibrichtung | z.B. LTR, RTL |
Ereignis | Bedeutung |
---|---|
onLoad, onUnload | Aufruf beim Laden |
onChange | Aufruf bei änderungen |
onClick | Aufruf beim Anklicken |
onMouseOver | Maus über dem Element |
onMouseOut | Maus verläßt Element |
onSelect | bei Auswahl |
onSubmit | beim Versenden |
Web-Seiten bieten neue Möglichkeiten
aber auch Unterschiede z.B. zur Buchproduktion.
Welche Zielgruppe?
auf jeder Seite: Namen, Email, evtl. Copyright, Datum.
Konzept für dauerhafte URLs.
klares, durchsichtiges Hypertext-Konzept, Navigation.
prüfen Sie alle Links.
Navigationshilfen: Home, Site-Map, Stichworte, Suchmöglichkeiten.
gute, einheitliche Gestaltung, klare Farbkonzepte, Farbkontraste (==> CSS).
benutzen Sie Stilvorlagen (CSS).
achte auf Ladezeiten, 30-40KByte ok.
vermeide zu grosse Graphiken, insbesondere auf der Start-Seite.
verwende explizite Grössenangaben bei Tabellen und Graphiken
(width
, height
).
verwende Thumbnails (daumengrosse Mini-Graphiken) mit Link auf die "richtige" Graphik.
beachte auch nicht-visuelle Browser: Lynx, Organizer
(alt
, summary
).
beachte geringere Bildschirmauflösung (640x480, 800x600).
Testen Sie mit unterschiedlichen Browsern.
Testen Sie mit unterschiedlichen Bildschirmauflösungen.
Lassen Sie Ihre Seiten testen.
Halten Sie die Seiten aktuell.
Denken Sie ans Drucken.
Extensible HTML (XHTML)
HTML-Editoren und Tools
Cascading Style Sheets (CSS)
JavaScript
Document Object Model (DOM)
© Universität Mannheim, Rechenzentrum, 1998-2000.
Heinz Kredel Last modified: Wed Dec 6 22:46:20 MET 2000