This page is currently available in German only...
Einführung in die Dokumenterstellung mit HTML
- Kurze Einführung zum Thema Internet
- Kurze geschichtliche Grundlage
- urspünglich zum Informationsaustausch von Unis verwendet, um Forschungsergebnisse
möglichst plattformunabhängig zu publizieren
- Unterschied Internet und WWW
- WWW populärster Dienst im Internet, allerdings noch weitere, wie z.B. FTP, Archie
- Grundbegriffe zu HTML
- Hyper Text Markup Language
- aus den Anforderungen ergab sich eine Inhaltsorientierte (Inhalt zählt, nicht die
Formatierung) Seitenbeschreibungssprache.
- HTML ist keine Programmiersprache.
- Einführung in HTML
- Grundsätzlicher Aufbau eines Tags (<...> </...>)
-Tags dienen zur Formatierung und logischen Gliederung des Dokuments.
- stehen in spitzen Klammern.
- öffnendes Tag: <Tagname>
- schließendes Tag: </Tagname>
- Was sind Attribute
- Parameter, die die Darstellung oder Funktionsweise von Tags genauer spezifizieren (z.B.
ALIGN zur Ausrichtung von Bildern, Absätzen...)
- Grundsätzlicher Dokumentenaufbau
<HTML>
<HEAD>
<TITLE>Titel des
Dokuments</TITLE>
</HEAD>
<BODY>
Dokumentkörper - dieser Bereich wird im
Browser Dargestellt
</BODY>
</HTML>
- Die wichtigsten Tags
- <HTML>
- <HEAD>, <TITLE>
- <BODY>
- Attribute: BACKGROUND, BGCOLOR, TEXT, LINK, VLINK, ALINK
- <H1> ... <H6>
- Attribute: ALIGN {left, right, center, justify}, NOWRAP
- <P> (kein </P>, aber nicht tragisch)
- Attribute: ALIGN {left, right, center, justify}, NOWRAP
- Zeilenumbruch (<BR>)
- Zeilenumbruch verhindern (<NOBR>)
- Zeichenformatierung
- BASEFONT-Tag (Grundgröße der Schrift)
- Attribute: SIZE (nur absolute Angaben)
- nur einmal pro Dokument verwenden!!
- FONT-Tag (Größe, Farbe...)
- Attribute: SIZE (absolut, relativ), COLOR (entweder Farbnamen oder, hex-values)
- Zeichenattribute (Fett, unterstrichen ...)
- Fett: <B>
- Kursiv: <I>
- Durchgestrichen: <S>
- Unterstrichen: <U>
- Tiefgestellt: <SUB>
- Hochgestellt: <SUP>
- "Teletype"-Schrift: <TT>
- Größer schreiben: <BIG>
- Kleiner schreiben: <SMALL>
- Kommentar (<!-- ... -->)
- Horrizontale Trennline (<HR>)
- Attribute: SIZE (Dicke), WIDTH (Länge), ALIGN (Ausrichtung: left, center, right),
NOSHADE (einfache Linie)
- Listen
- Unsortierte Listen (<UL>)
- Attribute: PLAIN (keine Aufzählungspunkte), COMPACT (der Browser soll versuchen Platz
zu sparen)
- <LH>: Listenüberschrift
- <LI>: Listeneintrag
- Sortierte Listen (<OL>)
- Attribute: TYPE (siehe unten), START (Startnummer der Liste)
- <LH>: Listenüberschrift
- <LI>: Listeneintrag - Attribute: VALUE
- Nummerierungsformate (TYPE-Attribut)
- 1: arabische Ziffern
- A: Großbuchstaben
- a: kleine Buchstaben
- I: große römische Ziffern
- i: kleine römische Ziffern
- Definitionslisten (<DL>)
- <LH>: Listenüberschrift
- <DT>: zu definierender Begriff
- <DD>: Definition des Begriffs
- Tabellen
- Attribute: BORDER, WIDTH, HEIGHT, ALIGN, VALIGN, CELLPADDIG (Verschiebung des
Zelleninhalts innerhalb der Zelle), CELLSPACING (Abstand zwischen den Zellen), BGCOLOR
- Tablellenzeile <TR>...</TR>
- Attribute: ALIGN, VALIGN, HEIGHT, BGCOLOR
- Tabllenkopf <TH>...</TH>
- Attribute: ALIGN, VALIGN, WIDTH, HEIGHT, BGCOLOR
- Feldinhalt <TD>...</TD>
- Attribute: ALIGN, VALIGN, WIDTH, NOWRAP, BGCOLOR, COLSPAN, ROWSPAN
- Hyperlinks <A> ... </A>
- Links auf eine Seite auf dem eigenen Server
- Attribute: HREF - Aufbau: HREF="relative Lageangabe"
- Beispiel: <A HREF="/index.html">Home</A>
- Links zu einem entfernten Server
- Attribute: HREF - Aufbau: HREF="Protokoll://Server/Seite"
- Beispiel: <A HREF="http://members.xoom.com/chrordig/">Meine
Homepage</A>
- Sprung zu einer bestimmten Stelle in einem Dokument
- Vorgehensweise:
1. Textmarke setzen: <A NAME="Markenname"></A>
2. Eigentlichen Sprung zur Textmarke einfügen: <A
HREF="Dokumentname#Markenname">Link-Text</A>
- Graphiken <IMG>
- Attribute: SRC, HEIGHT, WIDTH, ALIGN, ALT
- werden relativ zur Textgrundlinie positioniert
- vertikale Ausrichtung (ALIGN):
top - am höchsten Punkt auf der Grundlinie ausgerichtet
middle - Mitte des Bildes in Höhe der Grundlinie
absmiddle - Mitte des Bildes in Mitte der Zeilenhöhe
bottom - unterer Bildrand in Höhe der Grundlinie
absbottom - unterer Bildrand am unteren Rand der aktuellen Zeile
- Unterstützte Formate
- GIF, JPEG (JPG)
Download: Gesamten Vortrag als ZIP-Archiv downloaden.
© 1998 by Christian Ordig