DVG3 - 15HTML1 HTML Vortrag: Jens Hoffmann 11.1.2000.

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

 (einzeiliger Kommentarbereich)

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

</table>

DVG3 - 15HTML 19

Rahmendicke, Gitternetzlinien, Randabstand• Dicke des Außenrahmens

<table border=8>  </table>

• Dicke der Gitternetzlinien

<table border=8 cellspacing=10>  </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>

DVG3 - 15HTML1 HTML Vortrag: Jens Hoffmann 11.1.2000.

Documents

Transcript of DVG3 - 15HTML1 HTML Vortrag: Jens Hoffmann 11.1.2000.