Einordnung
Elementares 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
XHTML 1.0, 2000 Januar
XHTML Basic, 2000 Dezember
XHTML 1.1 - Module based XHTML, 2001 Mai
XHTML 2.0, Working Draft, 2003 Januar
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 >
in XML:
<!ELEMENT html (head body) >
<!ELEMENT ul (li)+ >
<!ELEMENT img EMPTY >
durch Browser
Mosaic (April 1993), 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 |
---|---|---|
href | Link URI in a | Text |
name | Ziel von einem Link in a | Text |
src | Bild URI in img | Text |
alt | Alternative Bezeichnung in img | Text |
align | Textausrichtung in p | (left | center | right) |
value | Nummer in ol li | Zahl |
type | Nummerstil in ul li | (disk | square | circle) |
title | zusätzliche Beschreibung | Text |
bgcolor | Hintergrundfarbe | black, silver, gray, white, maroon, red, purple, fuchsia,
green, lime, olive, yellow, navy, blue, teal, aqua oder #rrggbb |
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 | Text der Option |
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 |
html | SGML Anwendung | head frameset |
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 in form | Zeichenkette |
method | HTTP Methode in form | (get | post) |
type | Typ eines Eingabefelds in input | (text | password | radio | checkbox | submit | reset | file | hidden | image | button) |
selected, value | Option mit Wert in option | 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 in img | Bezeichner |
shape | Typ der area | circle | rect | poly |
coords | Koordinaten der area | Liste |
rows, cols | Spezifikation der Zeilen, Spalten in frameset | Pixel, Prozent, Meter |
name | Name in frame | Bezeichner |
frameborder | Rahmentyp eines Frames | ( solid | none | dashed | n) |
target | Zielframe zur Anzeige der Seite in a | Bezeichner |
rel, rev | z.B. Stilverweis in link | stylesheet | next | prev |
style | Stilinformation fast überall | CSS Text |
class | CSS-Klassen-Identifikator, fast überall | Bezeichner |
id | Identifikator wie name, fast überall | Bezeichner |
language | Programmiersprache in script | JavaScript | VBScript | other |
code, classid | auszuführender Programmcode in applet, object | Bezeichner |
codetype | Typ des Programmcodes in applet, object | Bezeichner |
name | Metainfo. Bezeichnung, in meta | Text |
http-equiv | Metainfo. HTTProtokol, in meta | Text |
content | Metainfo. Inhalt, in meta | 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-2003.
Heinz Kredel Last modified: Mon Oct 20 12:20:57 CEST 2003