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" >
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 |
HTML-Editoren
Cascading Style Sheets (CSS)
Document Object Model (DOM)
JavaScript
© Universität Mannheim, Rechenzentrum, 1998/1999.