HTML - Weierstrass Institute
Download
Report
Transcript HTML - Weierstrass Institute
HTML
Vortrag: Jens Hoffmann
11.1.2000
DVG3 - 15HTML
1
ALLGEMEINES
• HTML bedeutet HyperText Markup Language.
• Das Beschreibungsschema von HTML geht von
einer hierarchischen Gliederung aus.
• HTML ist ein sogenanntes Klartext-Format.
• HTML Dateien sind Universell einsetzbar
DVG3 - 15HTML
2
ERGÄNZUNGEN ZU HTML
• JavaScript
- Programmiersprache von Netscape
- Hilfesprache zum optimieren von WWW-Seiten.
• VRML (Virtual Reality Modeling Language)
- dient zu Darstellung von dreidimensionalen Objekte
-Die Idee zu dieser Sprache entstand auf der ersten World
Wide Web Konferenz 1994 in Genf
DVG3 - 15HTML
3
Allgemeine Regeln für HTML
• HTML-Dateien bestehen aus einem ASCII-Text
• Alle HTML-Befehle stehen in sog. Tags
• Fast alle Befehle von HTML bestehen aus einem
einleitenden und einem abschließenden Tag.
Beispiele:
<h1>...</h1> Zeigt eine Überschrift 1.Ordnung
<br> Zeilenumbruch
DVG3 - 15HTML
4
Grundgerüst einer HTML-Datei
• Eine gewöhnliche HTML-Datei besteht grundsätzlich
aus folgenden zwei Teilen:
Header (Kopf)
(enthält Angaben zu Titel u.ä.)
Body
(Körper)
(enthält den eigentlichen Text
mit Überschriften,
Verweisen, Grafikreferenzen usw.)
DVG3 - 15HTML
5
• Beispiel
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
Text, Verweise, Grafikreferenzen usw.
</body>
</html>
DVG3 - 15HTML
6
Regeln beim Editieren von HTML
• Umlaute
ä = ä
Ä = Ä
ö = ö
Ö = Ö
ü = ü
Ü = Ü
ß = ß
• HTML-eigene Zeichen maskieren
DVG3 - 15HTML
7
Farben und Schriften definieren in HTML
• Farbe für den Hintergrund
<body bgcolor=#CCFFFF>
• Farbe für Text und Verweise
<body bgcolor=#663333 text=#FFCC99 link=#FF9966
vlink=#FF9966 alink=#FFFFFF>
DVG3 - 15HTML
8
• Schriftfarbe definieren
<font color=#00C000>Grüner Text</font>
<font color= green>Grüner Text</font>
• Normalschriftfarbe festlegen
<basefont color=#FF0000>
Ab hier alles rot, nur <font
color=#000000>hier nicht</font>
DVG3 - 15HTML
9
• Normalschriftgröße festlegen
<basefont size=2>Text kleiner als normal, nur
<font size=4>hier nicht</font>
• Normalschriftart festlegen
<basefont face="Verdana">
Ab hier alles in Verdana, nur <font
face="Avalon">hier nicht</font>
Hier wieder alles in Verdana
• Hintergrundbilder (Wallpapers)
<body background="kacheln.gif">
DVG3 - 15HTML
10
Kommentare
• HTML beinhaltet die Möglichkeit, an beliebigen
Stellen innerhalb einer HTML-Datei Kommentare
einzufügen
<!-- Dieser Text ist ein Kommentar -->
(einzeiliger Kommentarbereich)
<!-- Erste Zeile eines mehrzeiligen
Kommentars
Letzte Zeile des Kommentars //-->
(mehrzeiliger Kommentarbereich)
DVG3 - 15HTML
11
Überschriften
• <h1>Überschrift 1. Ordnung</h1>
<h3>Überschrift 3. Ordnung</h3>
• Es gibt insgesamt 6 Ordnungen
• Überschriften ausrichten
<h1 align=center>Überschrift 1.
Ordnung</h1>
DVG3 - 15HTML
12
Textabsätze
• Textabsätze werden durch <p> definiert
Hier ist ein Absatz zu Ende.
<p>
Hier beginnt ein neuer Absatz.
• Textabsätze ausrichten
Hier ist ein Absatz zu Ende.
<p align=center>
Hier beginnt einDVG3
neuer
Absatz, der
- 15HTML
zentriert ausgerichtet wird.</p>
13
Numerierte Listen
• Numerierte Listen definieren
<ol>
<li>Listeneintrag, bekommt "1."
vorangestellt</li>
<li>Listeneintrag, bekommt "2."
vorangestellt</li>
<li>Listeneintrag, bekommt "3."
vorangestellt</li>
</ol>
• Listen alphabetisch numerieren
<ol type=A>
DVG3 - 15HTML
14
• Numerierung beeinflussen
<li value=10000>Listeneintrag, bekommt
"10000." vorangestellt</li>
DVG3 - 15HTML
15
Aufzählungslisten (Bullet-Listen)
• Aufzählungslisten definieren
<ul> <li>Listeneintrag</li> </ul>
<ul type=circle>
• Menü- und Verzeichnis-Listen
<menu> <li>Listeneintrag</li> </menu>
<dir> <li>Listeneintrag</li> </dir>
DVG3 - 15HTML
16
TABELLEN
• Zeilen und Spalten definieren
<table border>
<tr>
<th>Kopfzelle: 1. Zeile, 1.
Spalte</th>
</tr>
<tr>
<td>Datenzelle: 2. Zeile, 1.
Spalte</td>
</tr>
<tr>
<td>Datenzelle: 3. Zeile, 1.
Spalte</td>
</tr>
DVG3 - 15HTML
</table>
17
• Spalten vordefinieren
<table border>
<colgroup>
<col width=80>
<col width=100>
<col width=320>
</colgroup>
<tr>
<td >1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
</table>
DVG3 - 15HTML
18
Rahmendicke, Gitternetzlinien, Randabstand
• Dicke des Außenrahmens
<table border=8>
<!--hier folgt der Tabelleninhalt-->
</table>
• Dicke der Gitternetzlinien
<table border=8 cellspacing=10>
<!--hier folgt der Tabelleninhalt-->
</table>
DVG3 - 15HTML
19
Verweise - Hyperlinks
• Anker für Verweise definieren
• Erst müssen Sie ein <a href="#Zieldef">Ziel
für Verweise definieren</a>
• <a name="Zieldef">Verweisziel definieren</a>
• Verweis zu Anker innerhalb einer anderen Datei
• <a href="datei.htm#Zieldef">Verweistext</a>
DVG3 - 15HTML
20
• Schema für Verweise in HTML
<a href="[Verweisziel]">Verweistext</a>
• Verweis zu WWW-Adresse setzen
• <a
href="http://www.teamone.de/hypertext/">Hyperte
xt</a>
• Verweise auf Dateien am eigenen Rechner(netz) setzen
<a
href="file://localhost/c:/daten/html/homepage.h
DVG3 - 15HTML
21
tm">Lokale Homepage</a>
E-Mail-Verweise
• Verweis zu E-Mail-Adresse setzen
<a href="mailto:[email protected]">Mail an
den Autor, [email protected]</a>
• E-Mail-Verweise an mehrere Empfänger
<a
href="mailto:[email protected]?bcc=s.muenz@euromail
.com;[email protected]"> Mail an den Autor </a>
DVG3 - 15HTML
22
Grafik in HTML
• Grafiken einbinden
<img src="datei.gif">
• Alternativer Text
<img src="datei.gif"
alt="Kurzbeschreibung des Bildes">
DVG3 - 15HTML
23
Formulare
• Formular definieren
<form action="/cgi-bin/auswert.pl" method=get>
... Elemente des Formulars wie Eingabefelder,
Auswahllisten, Buttons usw. ...
</form>
• Einzeilige Eingabefelder definieren
• Ihr Spitzname: <input name="Spitzname"
size=60 maxlength=60> <br>
DVG3 - 15HTML
24
• Mehrzeilige Eingabefelder definieren
<p>Eingabefelder:</p>
<textarea name=“Eingabefelder" rows=10
cols=50></textarea>
• Auswahlliste definieren
<p>Ihr Favorit:</p>
<select name="top3" size=3>
<option> abc
<option> def
<option> ghi
</select>
DVG3 - 15HTML
25
• Radiobuttons definieren
Geben Sie Ihre Zahlungsweise an: <input
type=radio name="Zahlmethode"
value="Mastercard"> Mastercard <br>
• Checkboxen definieren
werden durch den Eintrag type=checkbox
definiert
DVG3 - 15HTML
26
Klick-Buttons
• Klick-Buttons definieren
<input type=button value="Zurück"
onClick="history.back()">
DVG3 - 15HTML
27
FRAMES
• Mit Hilfe von Frames können Sie den
Anzeigebereich des Browsers in verschiedene, frei
definierbare Segmente aufteilen.
DVG3 - 15HTML
28
• Grundgerüst einer HTML-Datei mit Frame-Sets
<html>
<head>
<title>Frame-Test</title>
</head>
<frameset ...>
... Frame-Definitionen ...
</frameset>
<noframes>
<body>
Dieser Text wird angezeigt, wenn der Browser keine
Frames kennt
</body>
</noframes>
</html>
DVG3 - 15HTML
29
Java-Applets einbinden
<applet code="AnimText" codebase="../"
alt="Text">
<param name=text value="Dieser Text
wird animiert dargestellt">
<param name=type value=wave>
<param name=bgcolor value=255:10:30>
<param name=fgcolor value=white>
<param name=style value=bold>
<param name=min value=14>
<param name=max value=48>
</applet>
DVG3 - 15HTML
30