fh-hof html - einführung richard göbel. fh-hof komponenten des world wide webs www browser...
TRANSCRIPT
FH-Hof
HTML - Einführung
Richard Göbel
FH-Hof
Komponenten des World Wide Webs
WWW Browser
HyperText Transfer Protocol (HTTP) via Internet
WWW Server
Dokumente: HyperText Markup Language HTML
Adresse: Uniform Resource Locator URL
FH-Hof
Uniform Resource Locator
Absolute URL
http://mis.fh-hof.de/projekte/isodp.html
Dokument
Verzeichnis
Rechner
Protokoll
Relative URL
isodp.html
FH-Hof
• schließenden Tag
• öffnenden Tag
HyperText Markup Language HTML
Ein HTML-Dokument besteht aus so genannten Elementen Einführung<h1> </h1>
Dieses Dokument gibt eine kurze Einführung in HTML.
<p>
</p>
Verschiedene Elemente werden unterschiedlich dargestellt
• Inhalt Elemente bestehen aus dem:
FH-Hof
Struktur einer HTML-Datei
<html>
</html>
<head>
</head>
<body>
</body>
...
<title>...</title>
...
Element HTML:Klammer für den HTML-Code
Dokument besteht aus:
• Kopf: Element HEAD
• Rumpf: Element BODY
Kopf enthält mindestens den den Titel des Dokuments
FH-Hof
Beispiel: Erstellen der ersten HTML-Seite
Voraussetzung:
Texteditor (zum Beispiel Windows Editor)
WWW Browser (z.B. Netscape Navigator,
Microsoft Internet Explorer, . . . )
Text mit Markierungen in den Editor eingeben
Datei mit Endung “.html” (alternativ .htm)
abspeichern
Datei mit WWW Browser laden
FH-Hof
Darstellung eines HTML-Dokuments
Darstellung von Leer- und Zeilenendezeichen:
Leerzeichen am Anfang und Ende eines Texts
werden unterdrückt
Leerzeichen innerhalb eines Texts werden bis
auf ein Zeichen nicht dargestellt
Zeilenendezeichen werden ignoriert
Zentraler Punkt:
HTML definiert in der Regel nur die Bedeutung
einzelner Textstellen aber nicht ihre Darstellung
Die Darstellung erfolgt entsprechend der
Möglichkeiten des Browsers und des Rechners
FH-Hof
Beispiele für unterschiedliche Darstellungen
<em>Test</em>
<strong>Test</strong>
Test
<p>
</p>
Test
Test
Test
Test
Test
Test
Darstellung 1 Darstellung 2
FH-Hof
Hyperlinks: Konzept
Beispiel1
Dies ist ein HTML-Dokument mitzwei Verweisen:• Dies ist der erste Verweis• Dies ist der zweite Verweis
Beispiel3
Dies ist ein weiteres HTML-Dokument, das keine weiteren Verweise enthält.
Dies ist der zweite Absatz für dieses Beispieldokument
Beispiel2: Venedig
WWW Browser
WWW Dokumente
Beispiel1
Dies ist ein HTML-Dokument mitzwei Verweisen:• Dies ist der erste Verweis• Dies ist der zweite Verweis
Beispiel2: Venedig
URLURL
Internet
FH-Hof
<a><a href=” ”><a href=”Beisp1.html”>
<a><a href=” ”><a href=”http://www.fh-hof.de”>
Dieser Text verweist auf unsere
erste HTML-Datei
und auf die
Startseite der FH Hof
Hyperlinks: Verwendung in HTML
</a>
</a>
Der Ausgangspunkt eines Hyperlinks wird mit dem Tag <a> markiert
Die URL wird als Wert des Attributs “href” angegeben
- eigene Dateien werden mit relativen URL’s identifiziert
- fremde Dateien werden mit absoluten URL’s identifiziert
FH-Hof
Beispiel: HTML-Seite mit Hyperlinks
Link auf eigenes HTML-Dokument eintragen mit
relativer URL:
<a href=“Beisp1.html“> . . . </a>
Link auf fremdes HTML-Dokument eintragen mit
absoluter URL:
<a href=“http://www.fh-hof.de/“>
. . .
</a>
FH-Hof
src="Venedig.jpg"
Einbinden von Bildern in HTML Dokumente
<img
alt= "Venedig">
</img>
Bilder werden mit dem IMG-Element eingebunden
Verweis auf die Bilddatei mit Attribut ‘src’
Kurzbeschreibung desBildes (Attribut “alt”)
Kein Ende-Tag!
FH-Hof
Typen von Bilddaten: Bilddatenformate
JPEG GIF
Endungen: .jpg, .jpeg Endung: .gif
FH-Hof
Wichtige Kenndaten weiterer Elemente
Name des Elements
Start- und/oder Ende-Tag verpflichtend?
Kurzbeschreibung des Elements
Kurzbeschreibung aller Attribute
Inhalt des Elements
FH-Hof
HTML-Formulare
Formulare werden mit dem Element FORM in
ein Dokument eingebunden.
Formularelemente mit dem Element INPUT:
Text, Password, Checkbox, Radio
Buttons: Submit, Reset, Client Script
Versteckte Felder
Dateinamen zur Übertragung von Dateien
Weitere Formularelemente
Auswahlmenüs: SELECT, OPTION und OPTGROUP
Mehrzeilige Eingabefelder: TEXTAREA
Weitere Buttons: BUTTON
FH-Hof
Typischer Aufbau eines Formulars
HTML-Code
<form action=URL method="POST">:
. . .
<input type="submit">
</form>
Die URL verweist auf ein Programm auf dem
Server
Die Methode gibt mit „get“ oder „post“ die
verwendete HTTP-Methode an („post“
verpflichtend ab HTML 4)
Das Formular enthält genau ein Input-Element
mit Typ „submit“ zur Übertragung der Eingaben
FH-Hof
Beispiele für Eingabeelemente
Einzeiliges Feld für die Texteingabe
<input type=text size=10 name="start">
Mehrzeiliges Feld für die Texteingabe
<textarea cols=20 rows=2 name="Eingabefeld">
Defaulttext
</textarea>
Checkbox
<input type=checkbox name="checkit">
Die Eingabe wird als Wert für den Namen
(Attribut „name“) dem Server übergeben