1 / 30

HTML

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.

benson
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • ä = &auml;Ä = &Auml;ö = &ouml;Ö = &Ouml;ü = &uuml;Ü = &Uuml;ß = &szlig; • 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: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

  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&uuml;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 - 15HTML

More Related