HTML
Download
1 / 30

HTML - PowerPoint PPT Presentation


  • 150 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' HTML' - benson


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

HTML

Vortrag: Jens Hoffmann

11.1.2000

DVG3 - 15HTML


Allgemeines
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
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
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
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
Regeln beim Editieren von HTML

  • Umlaute

  • ä = &auml;Ä = &Auml;ö = &ouml;Ö = &Ouml;ü = &uuml;Ü = &Uuml;ß = &szlig;

  • HTML-eigene Zeichen maskieren

DVG3 - 15HTML


Farben und schriften definieren in html
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
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
Ü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

  • 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

  • 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 (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
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
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
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
E-Mail-Verweise

DVG3 - 15HTML


Grafik in html
Grafik in HTML

  • Grafiken einbinden

  • <img src="datei.gif">

  • Alternativer Text

  • <img src="datei.gif" alt="Kurzbeschreibung des Bildes">

DVG3 - 15HTML


Formulare
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

  • Klick-Buttons definieren

  • <input type=button value="Zur&uuml;ck" onClick="history.back()">

DVG3 - 15HTML


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


ad