Minimales HTML

Transcription

Minimales HTML

MedienTechnik
Minimales HTML-Dokument
Datei:
NeueSeite.htm
Wie man
einen Seitentitel einfügt
<html>
<head>
<title> Seitentitel </title>
</head>
<body>
</body>
</html>
1
MedienTechnik
Datei:
NeueSeite.htm
<html>
<head>
<title> Seitentitel
</title>
</head>
<body>
</body>
</html>
2
MedienTechnik
Datei:
NeueSeite.htm
<html>
<head>
<title> Seitentitel
</title>
Wie man
eine Überschrift einfügt
Überschrift H1
</head>
<body>
<h1> Überschrift H1 </h1>
</body>
</html>
3
MedienTechnik
Datei:
NeueSeite.htm
<html>
<head>
<title> Seitentitel
</title>
</head>
<body>
<h1> Überschrift H1
</h1>
</body>
</html>
4
MedienTechnik
Datei:
NeueSeite.htm
Wie man
einen Absatz einfügt
<html>
<head>
<title> Seitentitel
</title>
Es gibt 6 Überschriftengrößen. H1 ist die größte, H6 die kleinste.
</head>
<body>
</h1>
<p> Es gibt 6 Überschriftengrößen.
H1 ist die größte, H6 die
kleinste. </p>
</body>
</html>
5
MedienTechnik
Datei:
NeueSeite.htm
Wie man
ein Bild einfügt
<body>
<html>
<h1>
<head>
Überschrift H1
<title> Seitentitel
</h1>
</title>
<p>
Es gibt 6 Übersch
H1 ist die größte, H6
</head>
kleinste.
</p>
<body>
<h6>
Dies ist eine Über
<p><img src=“bild.gif“>
</h1>
</p>
<p> Es gibt 6 Übersch
kleinste. </p>
</body>
</html>
URL = Universal Resource Locator
6
MedienTechnik
Datei:
NeueSeite.htm
<body>
</h1>
kleinste. </p>
<h6> Dies ist eine Über
</p>
</body>
</html>
7
MedienTechnik
Datei:
NeueSeite.htm
Wie man
ein Html-Editor benutzt
<body>
</h1>
kleinste. </p>
<h6> Dies ist eine Über
</p>
</body>
</html>
8
MedienTechnik
Gratis:
Frontpage Express
Netscape Composer
Shareware:
Hotmetal
Käuflich:
MS Frontpage
MS Visual Interdev
Adobe Pagemill
Hotmetal Pro
Wie man
den Hintergrund färbt
9
MedienTechnik
Wie man
# XX XX XX
R
G
B
10
MedienTechnik
Wie man
# XX XX XX
R
G
B
11
MedienTechnik
12
Zusammenfassung:
MedienTechnik
<title> ... </title>
<html>
<head>
<meta ....>
</head>
<body>
<h1> ... </h1>
....
<h6> ... </h6>
<p> ... </p>
<img src=url height= width= alt= >
<strong> ... </strong>
<em> ... </em>
<u> ... </u>
</body>
</html>
13
HTML-Seite
MedienTechnik
<html>
Kopf
Rumpf
</html>
Kopf
<head>
SyntaxDiagramme
</head>
Kopf-Tags
Rumpf
<body>
</body>
Rumpf-Tags
14
Kopf-Tags
MedienTechnik
Titel-Tag
Meta-Tag
SyntaxDiagramme
Titel-Tag
<title>
PCDATA
Rumpf-Tags
</title>
H1-Tag
P-Tag
....
15
MedienTechnik
Begriff:
Offener Standard
16
Wie man eine Tabelle erstellt
MedienTechnik
Tabellen<table>
sind
wichtiges <tr> <td>
Formatierungshilfsmittel für
<tr> <td>
HTML-Seiten
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</td> </tr>
</td> </tr>
</table>
17
MedienTechnik
<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>
18
</table>
MedienTechnik
SyntaxDiagramme
Tabelle
Nonterminal
Terminal
(Rechteck)
(runde Ecken)
Tabellenstart
Tabellenzeile
</table>
19
MedienTechnik
Tabelle
Tabellenzeile
Tabellenstart
Nonterminal
Terminal
(Rechteck)
(runde Ecken)
Tabellenstart
<tr>
Tabellenzeile
Tabellenzelle
<table
</table>
</tr>
>
Tab-Param
noch nicht definiert
20
Tabellen-Feinheiten
MedienTechnik
<td bgcolor="#FFFFFF"
bordercolor="#00FFFF"
bordercolordark="#00FF00"
bordercolorlight="#FFFF00">
Diese Zelle ...
</td>
<table border="10"
cellpadding="10"
cellspacing="10"
width="400"
bgcolor="yellow"
bordercolor="blue"
bordercolordark="red"
bordercolorlight="green">
<td align="center“
colspan="2“
background="bluenice.gif">
Verbundene Zelle colspan=2</td>
21
Literaturempfehlung
MedienTechnik
Weitere Themen:
CSS
Cascading Style Sheets
JavaScript
DHTML
Dynamic HTML
Document Object
Model
http://www.teamone.de/selfaktuell/
22
Prinzip HTTP-Server
MedienTechnik
index.html
TCP/IPVerbindung
Http-Server
Homeverzeichnis
~benutzer
/www
index.html
www.uni-koblenz.de
Get "/~benutzer
http://www.uni-koblenz.de/~benutzer
Unterverzeichnis
~benutzer/www
muss für "others"
executable sein (ox)
Datei index.html
muss für "others"
readable sein (or)
Browser
23
Stile selbst definieren: <Style>-Tag
MedienTechnik
<HEAD> </HEAD><
<body>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
H1
{ border-width: 1;
border: solid;
text-align: center
}
24
Cascading Style Sheets: Externes Style Sheet
MedienTechnik
<HEAD>
<LINK
<STYLErel="stylesheet“
type="text/css">
href="common.css“
H1 {border-width: 1; border: solid; text-align: center}
type="text/css">
</STYLE>
</HEAD>
Datei:
common.css
H1
{ border-width: 1;
border: solid;
text-align: center
}
H2
{ font-size: 125%;
font-family: Arial, sans-serif;
font-weight: bold
}
25
Cogito,
ergo sum!
MedienTechnik
Res cogitans: denkende Substanz
Subjekt, zur Erkenntnis fähig
Res extensa: ausgedehnte Substanz
(erkennbare) Objekte
René Descartes
1596-1650
Kategorischer
Imperativ
»Handle so, dass die
Maxime deines Willens
jederzeit zugleich als
Prinzip einer allgemeinen
Gesetzgebung gelten Immanuel Kant
könne.«
1724-1804
Grau ist alle Theorie
Was für Descartes das Objekt,
ist für Immanuel Kant die Erscheinung,
während als Objekt bei ihm das im Akt
der Vorstellung vorgestellte
Gedankending zu verstehen ist.
In der modernen Sprachphilosophie
und in der Logik wird jeder Gegenstand,
auf den unterscheidend Bezug
genommen werden kann, als Objekt
bezeichnet.
Informatik: Programmiersprachen-Objekt
26
Instanz, definiert durch Eigenschaften, Methoden, Ereignisse
MedienTechnik
Brendan Eich
ab 1995
„LiveScript“
Aktuelle Version
1.6 (2005)
Mozilla FireFox
JavaScript und das Document
Object Model
JavaScript (NetScape&Sun) ist eine Skriptsprache (wird
interpretiert)
Hat nichts mit Java zu tun, Marketing-Namensgebung,
keine Klassen, aber Objekte
Hauptanwendung: Skripte in Web-Seiten, wird im
Browser ausgeführt:
Plausibilitätsprüfung in Web-Formularen
Laufschriften, Banner, Rollovereffekte
CSS-Werte ändern, Dynamic HTML
usw.
27
MedienTechnik
JavaScript und das Document
Object Model
JavaScript (NetScape&Sun) ist eine Skriptsprache (wird
Brendan Eich
interpretiert)
ab 1995
Hat nichts mit Java zu tun, Marketing-Namensgebung,
„LiveScript“
keine Klassen, aber Objekte
Hauptanwendung: Skripte in Web-Seiten, wird im
<SCRIPT
language=JavaScript><!-Browser ausgeführt:
Aktuelle
Version
wechsel() Plausibilitätsprüfung in Web-Formularen
1.6 function
(2005)
Laufschriften, Banner, Rollovereffekte
{ ifFireFox
(document.images(0).src==UrBild)
Mozilla
CSS-Werte ändern, Dynamic HTML
document.images(0).src='Seitentitel-Dateien/erhardt.gif';
usw.
else
document.images(0).src='Seitentitel-Dateien/bild.gif';
}
// --></SCRIPT>
28
MedienTechnik
Sprachelemente von JavaScript
var kontonummer = 0;
var kontoinhaber = "";
var kontostand = 0.0;
JavaScript
online
Workshop
Stefan Mintert
und
Christine Kühnel
(Hrsg.)
var meinArray = new Array();
// Array mit Inhalt füllen:
meinArray[0] = "D";
meinArray[1] = "C";
meinArray[2] = "B";
meinArray[3] = "A";
while (bedingung)
{ anweisungen }
function quadrat(x)
{ return x*x; }
while (bedingung)
{ anweisungen }
for (var i=1 ; i<=10 ; i=i+1) {
summe = summe + 1; }
document.writeln("Ergebnis ist: ",summe);
if (kontostand < 0)
{ document.writeln("Du bist pleite :-("); }
else
{ if (kontostand == 0)
{ document.writeln("Du hast kein Geld :-|"); }
else
{ document.writeln("Du bist reich :-)"); }
}
29
DOM
MedienTechnik
Document
Object
Model
<BODY bgColor=#ffffff>
<P><IMG onclick=wechsel() alt="bild.gif (1250 b
src="Seitentitel-Dateien/bild.gif"> <BR>Bild ankl
<P>
<SCRIPT language=JavaScript><!-document.writeln('images(0).src=',document.ima
UrBild = document.images(0).src;
var coll = document.all;
if (coll!=null) { last = coll.length;
for (i=0; i<last; i++)
document.writeln(coll.item(i).tagName, '<br
}
30
MedienTechnik
Objekt
„window“
Das gesamte
Browserfenster
Objekt
„window.document.images[0]“
Das 1. Bild im Dokument (URL)
Objekt
„window.document“
Das geladene Dokument
31
Browser-Objekt: window
MedienTechnik
S
H4
H5
H6
P
Table
Td
getAttribute()
setAttribute()
S.H1
S(“H1“)
S(0)
removeAttribute()
32
window.document
MedienTechnik
Liste aller HTML-Elemente
window.document.all(11)
JavaScript, VBScript:
Manipulation dieser Objekte
HTML
HEAD
TITLE
META
META
STYLE
BODY
H1
P
H6
P
IMG
STRONG
EM
U
P
EM
STRONG
U
P
33
MedienTechnik
<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
Eigenschaften:
document.writeln('defaultCharset=',document.defaultCharset
document.writeln('fgColor=',document.fgColor,'<br>');
alinkColor (Farbe für Verweise beim Anklicken)
document.writeln('lastModified=',document.lastModified,'<b
bgColor (Hintergrundfarbe)
document.writeln('linkColor=',document.linkColor,'<br>');
charset (verwendeter Zeichensatz)
document.writeln('referrer=',document.referrer,'<br>');
cookie (beim Anwender speicherbare Zeichenkette)
document.writeln('title=',document.title,'<br>');
defaultCharset (normaler Zeichensatz)
document.writeln('URL=',document.URL,'<br>');
fgColor (Farbe für Text)
document.writeln('vlinkColor=',document.vlinkColor,'<br>')
lastModified (letzte Änderung am Dokument)
// --></script></p>
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)
34
MedienTechnik
Formulare & JavaScript
<h1>Formular</h1>
<form name="Formular" action=http://de.selfhtml.org/cgi-bin/for
method="post" onsubmit="return chkFormular()">
<pre> Name: <input type="text" size="40" name="User">
Wohnort: <input type="text" size="40" name="Ort">
E-Mail: <input type="text" size="40" name="Mail">
Alter: <input type="text" size="40" name="Alter">
Formular: <input type="submit" value="Absenden">
<input type="reset" value="Abbrechen">
Zum Absenden muss eine Internet-Verbindung bestehen!
</pre>
35
</form>
MedienTechnik
<script type="text/javascript">
function chkFormular () {
if (document.Formular.User.value == "") {
alert("Bitte Ihren Namen eingeben!");
document.Formular.User.focus();
return false;
}
if (document.Formular.Ort.value == "") {
alert("Bitte Ihren Wohnort eingeben!");
document.Formular.Ort.focus();
return false;
}
if (document Formular Mail value == "") {
36
MedienTechnik
if (document.Formular.Mail.value == "") {
alert("Bitte Ihre E-Mail-Adresse eingeben!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Mail.value.indexOf("@") == -1) {
alert("Keine E-Mail-Adresse!");
document.Formular.Mail.focus();
return false;
}
….
}
var chkZ = 1;
37
MedienTechnik
var chkZ = 1;
for (i = 0; i < document.Formular.Alter.value.length; ++i)
if (document.Formular.Alter.value.charAt(i) < "0" ||
document.Formular.Alter.value.charAt(i) > "9")
chkZ = -1;
if (chkZ == -1) {
alert("Altersangabe keine Zahl!");
document.Formular.Alter.focus();
return false;
}
}
38
</script>
MedienTechnik
Das wird abgeschickt:
POST Verarbeitungsscript.cgi
Host: www.remotehost.de
User-Agent: MeinBrowser 1.1
Contenlength: 95
Cpntent-type: application/x-www-form-urlencoded
Name=Eingabe&Ort=Koblenz&…..
39
MedienTechnik
Vorlesung „Medientechnik SS 2006“
Dr. Manfred Jackel
Institut für Informatik
Universität Koblenz-Landau
Postfach 201602
56072 Koblenz
Literatur zu diesem Kapitel
Hyperlinks zu diesem Kapitel
Stefan Münz: SelfHTML
http://www.teamone.de/selfaktuell/
Stefan Min tert u. Christine Kühnel;
www.JavaScript-workshope.de
W3C
http://www.w3.org/TR/html40
XML
http://www.w3schools.com
© Manfred Jackel
E-Mail: jkl@uni-koblenz.de
WWW: www.uni-koblenz.de/~jkl
mtech.uni-koblenz.de
Grafik-Quellen
Bild-Logo
www.bild.de
40

Minimales HTML

Transcription

Similar documents

WichtigeMeta-TagsfürHTML-Dokumente

Einführung in F