300 likes | 547 Views
HTML. Vortrag: Jens Hoffmann 11.1.2000. ALLGEMEINES. HTML bedeutet H yper T ext M arkup L anguage. Das Beschreibungsschema von HTML geht von einer hierarchischen Gliederung aus. HTML ist ein sogenanntes Klartext-Format. HTML Dateien sind Universell einsetzbar. ERGÄNZUNGEN ZU HTML.
E N D
HTML Vortrag: Jens Hoffmann 11.1.2000 DVG3 - 15HTML
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
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
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
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
Beispiel <html> <head> <title>Text des Titels</title> </head> <body> Text, Verweise, Grafikreferenzen usw. </body> </html> DVG3 - 15HTML
Regeln beim Editieren von HTML • Umlaute • ä = äÄ = Äö = öÖ = Öü = üÜ = Üß = ß • HTML-eigene Zeichen maskieren DVG3 - 15HTML
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
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
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
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
Ü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
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
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
Numerierung beeinflussen <li value=10000>Listeneintrag, bekommt "10000." vorangestellt</li> DVG3 - 15HTML
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
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
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
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
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
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
E-Mail-Verweise • Verweis zu E-Mail-Adresse setzen • <a href="mailto:heatt@tfh-berlin.de">Mail an den Autor, heatt@tfh-berlin.de</a> • E-Mail-Verweise an mehrere Empfänger • <a href="mailto:muenz@csi.com?bcc=s.muenz@euromail.com;muenz@teamone.de"> Mail an den Autor </a> DVG3 - 15HTML
Grafik in HTML • Grafiken einbinden • <img src="datei.gif"> • Alternativer Text • <img src="datei.gif" alt="Kurzbeschreibung des Bildes"> DVG3 - 15HTML
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
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
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
Klick-Buttons • Klick-Buttons definieren • <input type=button value="Zurück" onClick="history.back()"> DVG3 - 15HTML
FRAMES • Mit Hilfe von Frames können Sie den Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente aufteilen. DVG3 - 15HTML
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
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