Einordnung
Basis HTML
Volles HTML
Ausblick
Standard Generalized Markup Language (SGML)
Extended Markup Language (XML)
WYSIWYG
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
Identifikation von Objekten: URL, URI
Übertragung von Objekten: Protokolle, z.B. HTTP
Hypertext: Darstellung und Navigation, z.B. HTML
Dokument-Struktur
Dokument-Darstellung, Präsentation
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 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, DL | Listen: unnumeriert, numeriert, für Definitionen |
LI+ |
LI | Listenelement | alles mit Ausnahmen |
IMG | Bild im Text | EMPTY |
PRE | vorformatierter Text | Text |
BR | Zeilenumbruch | EMPTY |
EM, STRONG, CODE | Hervorhebungen | Text |
BLOCKQUOTE, Q | Einrückung | Text |
unvollständige Auswahl
Blanks und Zeilenumbrüche im Dokument
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) |
inputtype | 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 ) |
height, width | Grösse | 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, Copyright.
klares, durchsichtiges Hypertext-Konzept, Navigation.
prüfen Sie alle Links.
Navigationshilfen: Home, Site-Map, Stichworte, Suchmöglichkeiten.
gute, einheitliche Gestaltung, klare Farbkonzepte, Farbkontraste (==> 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.
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: Sat Jan 29 20:24:29 MET 2000