Date post: | 05-Apr-2015 |
Category: |
Documents |
Upload: | adalwolfa-gegenheimer |
View: | 109 times |
Download: | 1 times |
DVG3 - 15HTML 1
HTML
Vortrag: Jens Hoffmann
11.1.2000
DVG3 - 15HTML 2
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 3
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 4
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 5
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 6
• Beispiel
<html> <head>
<title>Text des Titels</title>
</head> <body>
Text, Verweise, Grafikreferenzen usw.
</body> </html>
DVG3 - 15HTML 7
Regeln beim Editieren von HTML• Umlaute
ä = äÄ = Äö = öÖ = Öü = üÜ = Üß = ß
• HTML-eigene Zeichen maskieren
DVG3 - 15HTML 8
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 9
• 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 10
• 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 11
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 12
Ü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 13
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 ein neuer Absatz, der zentriert ausgerichtet wird.</p>
DVG3 - 15HTML 14
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 15
• Numerierung beeinflussen
<li value=10000>Listeneintrag, bekommt "10000." vorangestellt</li>
DVG3 - 15HTML 16
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 17
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> </table>
DVG3 - 15HTML 18
• 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 19
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 20
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 21
• Schema für Verweise in HTML
<a href="[Verweisziel]">Verweistext</a>
• Verweis zu WWW-Adresse setzen
• <a href="http://www.teamone.de/hypertext/">Hypertext</a>
• Verweise auf Dateien am eigenen Rechner(netz) setzen
<a href="file://localhost/c:/daten/html/homepage.htm">Lokale Homepage</a>
DVG3 - 15HTML 22
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][email protected];[email protected]"> Mail an den Autor </a>
DVG3 - 15HTML 23
Grafik in HTML
• Grafiken einbinden
<img src="datei.gif">
• Alternativer Text
<img src="datei.gif" alt="Kurzbeschreibung des Bildes">
DVG3 - 15HTML 24
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 25
• 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 26
• 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 27
Klick-Buttons• Klick-Buttons definieren
<input type=button value="Zurück" onClick="history.back()">
DVG3 - 15HTML 28
FRAMES• Mit Hilfe von Frames können Sie den
Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente aufteilen.
DVG3 - 15HTML 29
• 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 30
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>