Hypertext Markup Language (HTML)


Web Hyperlinks
Web Bild-Hyperlinks

Einordnung

Entwicklung

HTML4

Web-Zutaten

  1. Identifikation von Objekten: URL, URI

  2. Übertragung von Objekten: Protokolle, z.B. HTTP

  3. Hypertext: Darstellung und Navigation, z.B. HTML

HTML-Konzeption

  1. Dokumentstruktur durch Markup

  2. Dokument-Darstellung, Präsentation durch Browser

  3. Interaktion


Basis HTML

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" >

Syntax

Dokumentstruktur

Darstellung

Uniform Resource Locator (URL)

Elemente

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

Attribute

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

Beispiele


Volles HTML

Erweiterungen

Elemente

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

Attribute

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

Script-Ereignisse

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

Beispiele

Allgemeines zum Web-Design


Ausblick


© Universität Mannheim, Rechenzentrum, 1998-2000.

Heinz Kredel
Last modified: Wed Dec 6 22:46:20 MET 2000