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


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

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

Attribute

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

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-2003.

Heinz Kredel
Last modified: Mon Oct 20 12:20:57 CEST 2003