Minimales HTML Dokument

(1)

2

Medien−

Technik

Millennium Edition

<html>

<head>

<title> Seitentitel

</title>

</head>

<body>

</body>

</html>

Datei:

NeueSeite.htm

1

Medien−

Technik

Millennium

Edition

Minimales HTML−

Dokument

<html>

<head>

</head>

<body>

</body>

</html>

Datei:

NeueSeite.htm

Wie man

einen Seitentitel einfügt

<title> Seitentitel </title>

4

Medien−

Technik

<html>

<head>

<title> Seitentitel

</title>

</head>

<body>

<h1> Überschrift H1

</h1>

</body>

</html>

Datei:

NeueSeite.htm

3

Medien−

Technik

<html>

<head>

<title> Seitentitel

</title>

</head>

<body>

</body>

</html>

Datei:

NeueSeite.htm

Wie man

eine Überschrift einfügt

Überschrift H1

<h1> Überschrift H1 </h1>

(2)

6

Medien−

Technik

<html>

<head>

<title> Seitentitel

</title>

</head>

<body>

<h1> Überschrift H1

</h1>

<p> Es gibt 6 Übersch H1 ist die größte, H6 kleinste. </p>

</body>

</html>

Datei:

NeueSeite.htm

Wie man ein Bild einfügt

<body>

<h1> Überschrift H1

</h1>

<p> Es gibt 6 Übersch H1 ist die größte, H6 kleinste. </p>

<h6> Dies ist eine Über

</body>

</html>

<p><img src=®bild.gif®>

</p>

URL = Universal Resource Locator

5

Medien−

Technik

<html>

<head>

<title> Seitentitel

</title>

</head>

<body>

<h1> Überschrift H1

</h1>

</body>

</html>

Datei:

NeueSeite.htm

Wie man

einen Absatz einfügt

Es gibt 6 Überschriftengrößen. H1 ist die größte, H6 die kleinste.

<p> Es gibt 6 Überschriftengrößen.

H1 ist die größte, H6 die kleinste. </p>

8

Medien−

Technik

<body>

<h1> Überschrift H1

</h1>

<p> Es gibt 6 Übersch H1 ist die größte, H6 kleinste. </p>

<h6> Dies ist eine Über

<p><img

src=®bild.gif®>

</p>

</body>

</html>

Datei:

NeueSeite.htm

Wie man

ein Html−Editor benutzt

7

Medien−

Technik

<body>

<h1> Überschrift H1

</h1>

<p> Es gibt 6 Übersch H1 ist die größte, H6 kleinste. </p>

<h6> Dies ist eine Über

<p><img

src=®bild.gif®>

</p>

</body>

</html>

Datei:

NeueSeite.htm

(3)

10

Medien−

Technik

Wie man

den Hintergrund färbt

#

XX XX XX

R G B

9

Medien−

Technik

Gratis:

Frontpage Express Netscape Composer

Shareware:

Hotmetal

Käuflich:

MS Frontpage MS Visual Interdev Adobe Pagemill Hotmetal Pro

Linux: (kostenlos)

Quanta+ (gpl) fte

Wie man

den Hintergrund färbt

12

Medien−

Technik

11

Medien−

Technik

Wie man

den Hintergrund färbt

#

XX XX XX

R G B

(4)

14

Medien−

Technik

Millennium

Edition

HTML−Seite

<html> Kopf Rumpf <html>

Kopf

<body>

Rumpf−Tags

</body>

<head>

Kopf−Tags

</head>

Rumpf

Syntax−

Diagramme

13

Medien−

Technik

<strong> ... </strong>

<em> ... </em>

<u> ... </u>

<html>

<head>

</body>

</html>

</head>

<body>

<title> ... </title>

<meta ....>

<h1> ... </h1>

....

<h6> ... </h6>

<p> ... </p>

<img src=url height= width= alt= >

Zusammenfassung:

16

Medien−

Technik

Begriff:

Offener Standard

15

Medien−

Technik

Millennium

Edition

Kopf−Tags

Titel−Tag Meta−Tag

Rumpf−Tags H1−Tag P−Tag

....

Titel−Tag

<titel>

</titel>

PCDATA

Syntax−

Diagramme

(5)

18

Medien−

Technik

<table border="1">

<tr>

<td>Dies ist ein Blindtext. Er dient ausschließlich dazu, das Aussehen der Schrift zu demonstrieren</td>

<td>numnoi numnoi</td>

<td>Dies ist eine einfache Tabelle ohne besondere Angaben zu das Aussehen</td>

</tr>

<tr>

<td>Die Darstellung dieser Tabelle wird dem Browser überlassen.</td>

<td><img src="bild.gif" width="125"

height="126"></td>

<td>In einer Tabellenzelle kann beliebiger Text stehen, auch Bilder, weitere Tabellen usw.</td>

</tr>

</table>

Wie man eine Tabelle erstellt

17

Medien−

Technik

Millennium

Edition

Wie man eine Tabelle erstellt

Tabellen sind wichtiges Formatierungs−

hilfsmittel für HTML−Seiten

</table>

<table>

<tr>

</tr>

<tr>

</tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

20

Medien−

Technik

Millennium

Edition

Wie man eine Tabelle erstellt

Tabelle Tabellenstart Tabellenzeile </table>

Nonterminal

(Rechteck)

Terminal

(runde Ecken)

Tabellenzeile <tr> Tabellenzelle </tr>

Tabellenstart <table

Tab−Param

>

noch nicht definiert

19

Medien−

Technik

Millennium

Edition

Wie man eine Tabelle erstellt

Tabelle Tabellenstart Tabellenzeile </table>

Nonterminal

(Rechteck)

Terminal

(runde Ecken)

Syntax−

Diagramme

(6)

22

Medien−

Technik

Literaturempfehlung

http://www.teamone.de/selfaktuell/

CSS

Cascading Style Sheets

JavaScript DHTML

Dynamic HTML

Document Object Model

Weitere Themen

21

Medien−

Technik

Millennium

Edition

Tabellen−Feinheiten

<table border="10"

cellpadding="10"

cellspacing="10"

width="400"

bgcolor="yellow"

bordercolor="blue"

bordercolordark="red"

bordercolorlight="green">

<td bgcolor="#FFFFFF"

bordercolor="#00FFFF"

bordercolordark="#00FF00"

bordercolorlight="#FFFF00">

Diese Zelle ...

</td>

<td align="center®

colspan="2®

background="bluenice.gif">

Verbundene Zelle colspan=2</td>

24

Medien−

Technik

<HEAD>

<STYLE type="text/css">

H1 {border−width: 1; border: solid; text−align: center}

</STYLE>

</HEAD>

<HEAD> </HEAD><

<body>

Stile selbst definieren: <Style>−Tag

<STYLE>

H1

{ border−width: 1;

border: solid;

text−align: center }

</STYLE>

23

Medien−

Technik

Http−Server

Homeverzeichnis

~benutzer /www index.html

Browser

www.uni−koblenz.de

http://www.uni−koblenz.de/~benutzer Get "/~benutzer

index.html

Unterverzeichnis

~benutzer/www muss für "others"

executable sein (ox) Datei index.html muss für "others"

readable sein (or)

TCP/IP−

Verbindung

Prinzip HTTP−Server

(7)

25

Medien−

Technik

<HEAD>

<STYLE type="text/css">

H1 {border−width: 1; border: solid; text−align: center}

</STYLE>

</HEAD>

<HEAD>

<LINK rel="stylesheet®

href="common.css“

type="text/css">

</HEAD>

Cascading Style Sheets: Externes Style Sheet

H1

{ border−width: 1;

border: solid;

text−align: center }

H2

{ font−size: 125%;

font−family: Arial, sans−serif;

font−weight: bold }

Datei:

common.css

28

Medien−

Technik

Browser−Objekt: window

H4 H5 H6 P Table Td getAttribute() setAttribute() removeAttribute()

S

S.H1 S(®H1®) S(0)

27

Medien−

Technik

Millennium

Edition

Objekt

¯window®

Objekt

¯window.document

®

Objekt

¯window.document.images[0]

®

Das gesamte Browserfenster

Das geladene Dokument Das 1. Bild im Dokument (URL)

(8)

30

Medien−

Technik

Document Eigenschaften:

alinkColor (Farbe für Verweise beim Anklicken) bgColor (Hintergrundfarbe)

charset (verwendeter Zeichensatz)

cookie (beim Anwender speicherbare Zeichenkette) defaultCharset (normaler Zeichensatz)

fgColor (Farbe für Text)

lastModified (letzte Änderung am Dokument) linkColor (Farbe für Verweise)

referrer (zuvor besuchte Seite) title (Titel der Datei)

URL (URL−Adresse der Datei)

vlinkColor (Farbe für Verweise zu besuchten Zielen)

<p><script language="JavaScript"><!−−

document.writeln(’alinkColor=’,document.alinkColor,’<br>’);

document.writeln(’bgColor=’,document.bgColor,’<br>’);

document.writeln(’charset=’,document.charset,’<br>’);

document.writeln(’cookie=’,document.cookie,’<br>’);

document.writeln(’defaultCharset=’,document.defaultCharset,’<br>’);

document.writeln(’fgColor=’,document.fgColor,’<br>’);

document.writeln(’lastModified=’,document.lastModified,’<br>’);

document.writeln(’linkColor=’,document.linkColor,’<br>’);

document.writeln(’referrer=’,document.referrer,’<br>’);

document.writeln(’title=’,document.title,’<br>’);

document.writeln(’URL=’,document.URL,’<br>’);

document.writeln(’vlinkColor=’,document.vlinkColor,’<br>’);

// −−></script></p>

32

Medien−

Technik

Vorlesung ¯Medientechnik WS 1999/2000®

Dr. Manfred Jackel

Studiengang Computervisualistik Institut für Informatik

Universität Koblenz−Landau Rheinau 1

56075 Koblenz

Manfred Jackel

E−Mail:jkl@uni−koblenz.de WWW: www.uni−koblenz.de/~jkl

mtech.uni−koblenz.de

Literatur zu diesem Kapitel Hyperlinks zu diesem Kapitel Stefan Münz: SelfHTML

http://www.teamone.de/selfaktuell/W3C

http://www.w3.org/TR/html40

Grafik−Quellen Bild−Logo

www.bild.de

Dietrich Paulus

Sommersemester 2002

31

Medien−

Technik

Document Unterobjekte:

all anchors applets areas embeds forms

images Feld aller Bilder, images.length= Anzahl, images(0) das erste!

layers links plugins

<p><script language="JavaScript"><!−−

document.writeln(’images(0).src=’,document.images(0).src,’<br>’);

UrBild = document.images(0).src;

// −−></script></p>

<script language="JavaScript"><!−−

function wechsel()

{ if (document.images(0).src==UrBild) document.images(0).src=’bild2.jpg’;

else

document.images(0).src=’bild.gif’;

}

// −−></script>

<img src="bild.gif"

alt="bild.gif (1250 bytes)®

width="125" height="126"

onclick="wechsel()">