Einführung in das Erstellen von WebPages
Werbung
Art Director Thomas
Frierss
Programm
Vorträge
HTML I, II und III
PHP I und II
MySQL und PHP
JavaScript
Workshops
HTML
Webdesign
Dreamweaver
Flash
Photoshop
Folie 2
Info - Internet
Internet
TCP/IP
IP-Adresse
DNS-Server
URL
Web-Server
Web-Client
Folie 3
Info - Surfen
Eingabe der URL im Browser
Browser holt IP-Adresse vom DNSServer
Browser schickt Anfrage an IP-Adresse
Zielrechner schickt HTML-Datei zurück
Browser empfängt diese
Browser stellt HTML-Datei dar
Folie 4
HTML - Die Grundlagen
Hypertext Markup Language
Auszeichnungssprache
Hierarchische Gliederung
Hyperlinks
Verweise auf beliebige Stellen im eigenen
Dokument oder auf andere Dokumente
Universell einsetzbar
Folie 5
HTML - Dateinamen
Verwenden Sie Kleinbuchstaben
für Dateinamen, Verweise, Grafiken, etc.
Der Dateiname
bis zu 256 Zeichen möglich
keine Umlaute, Sonderzeichen und
Leerzeichen, am besten nur a-z, 0-9, _
"Einstiegsseite"
index.html (htm), welcome.html (htm) oder
default.html (htm)
Folie 6
HTML - Dateiendungen
HTML-Datei
GIF-Grafiken
JPEG-Grafiken
PNG-Grafiken
Stylesheets
JAVASkript
Shockwave-Flash
.html oder .htm
.gif
.jpg
.png
.css
.js
.swf
Folie 7
HTML - TAGs und Attribute
HTML-Dateien bestehen aus ASCII-Text
mit einfachem Text-Editor zu bearbeiten
vorteilhafter sind ausgereifte HTML-Editoren
TAGs
zwei spitze Klammern, die
HTML-Befehle beinhalten
einleitende (<b>) und abschließende (</b>)
Tags
Attribute
zusätzliche Einstellungen
Folie 8
Beispiel - TAG
Dieses Wort ist <b>fett</b>
Dieses Wort ist <font size="1">kleiner</font>
<h4 align="center">Dieser Text ist eine
Überschrift der 4. Ebene und wird zentriert
dargestellt</h4>
Folie 9
HTML - Eingaberegeln
Mit dem Grundgerüst beginnen
Tabulator, Return und mehrere
Leerzeichen hintereinander werden vom
Browser ignoriert
Zeilenumbrüche und Absätze lassen Sie
den Überblick behalten
Kommentare verwenden
Folie 10
HTML - Das Grundgerüst
<html> bzw. </html>
schließt den gesamten Inhalt einer HTML-
Datei ein
<head> bzw. </head>
definiert die Kopfzeile (Metaangaben)
<title> bzw. </title>
erscheint in der Titelleiste
<body> bzw. </body>
schließt die eigentliche WWW-Seite ein
Folie 11
HTML – Grundgerüst - Bsp
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>
...........
</body>
</html>
Folie 12
Live-Demonstration
Anlegen und Testen einer HTML-Seite
Folie 13
HTML - Metaangaben
Suchbegriffe definieren
<meta name="Keywords"
content="HTML, Web Publishing">
Autor angeben
<meta name="Author"
content="Franz Gonzo Mustermann,
f.mustermann@test.at">
Automatisch auf andere Seite
weiterleiten
<meta http-equiv="refresh" content="5;
url=http://www.kurier.at">
Folie 14
HTML - Farben
Festlegen von Farben durch
Angabe eines Farbnamens
○ leichtere Eingabe
○ jedoch nur 16 standardisierte Farbnamen
Angabe der RGB-Werte in Hexadezimalform
○ 00-FF (Rot) 00-FF (Grün) 00-FF (Blau)
z.B. 000000 Schwarz, 00FF00 Grün, FFFFFF Weiß
○ Browserunabhängig
○ 16,7 Mio. Farben möglich
Tipp: http://www.html-seminar.de/farben.htm
Folie 15
HTML - Absätze 1
Definition von Absätzen
normale Zeilenschaltung wird vom Browser
nicht interpretiert
entsprechender HTML-Befehl ist daher nötig
Referenz
Hier steht der erste Absatz.
<p>
Hier beginnt der zweite Absatz.
Folie 16
HTML - Absätze 2
<p> = paragraph
Position
steht am Zeilenende des vorherigen Absatzes,
in einer eigenen Zeile oder
am Zeilenanfang des nächsten Absatzes
der Form halber sollte zu Beginn eines
Absatzes ein einleitendes Tag <p> und am
Ende ein abschließendes Tag </p> stehen
Folie 17
HTML - Absätze 3
Ausrichtung von Absätzen
Absätze werden idR linksbündig ausgerichtet
mit dem Attribut align ist auch eine
rechtsbündige (right), zentrierte (center)
Ausrichtung sowie Blocksatz (justify) möglich
Referenz
<p align="right">Das ist ein rechtsbündiger Text
oder
<p align="center">Der Text ist zentriert</p>
Folie 18
HTML - Zeilenumbruch 1
Browser bricht Text automatisch um
<br> = break = Umbruch bewirkt einen
erzwungenen Zeilenumbruch
Referenz
Die Zeile endet hier.<br>
Hier beginnt die neue Zeile.
Position
am Ende, in einer eigenen Zeile oder
am Anfang der nächsten Zeile
Folie 19
HTML - Zeilenumbruch 2
Zeilenumbruch verhindern
in diesem Fall erzeugt der Browser keinen
automatischen Zeilenumbruch
horizontale Bildlaufleiste ermöglicht Blättern
Referenz
<nobr>Dieser Text wird nicht
umgebrochen</nobr>
Folie 20
HTML - Überschriften 1
6 Überschriftebenen (h1 bis h6)
h = heading = Überschrift
Keine Absatzschaltungen vor und nach
Überschriften
Referenz
<h1>Dies ist die höchste Ebene</h1>
<h6>Dies ist die niedrigste Ebene</h6>
Folie 21
HTML - Überschriften 2
Überschriften ausrichten
idR sind Überschriften linksbündig
ausgerichtet
mit dem Attribut align können Überschriften
wahlweise zentriert (center), rechtsbündig
(right) oder auch im Blocksatz (justify)
ausgerichtet werden
Referenz
<h1 align="center">Überschrift ist
zentriert</h1>
Folie 22
HTML - Numerierte Listen 1
Numerierte Listen definieren
alle Listeneinträge werden automatisch
durchnumeriert
Referenz
<ol>
<li>Das ist der 1. Punkt</li>
<li>Das ist der 2. Punkt</li>
<li>Das ist der 3. und letzte Punkt</li>
</ol>
Folie 23
HTML - Numerierte Listen 2
<ol> = ordered list
leitet eine Liste ein und </ol> beendet diese
<li> = list item
leitet einen neuen Punkt innerhalb der Liste
ein und </li> beendet den Eintrag
</li> ist nicht unbedingt erforderlich
Folie 24
HTML - Numerierte Listen 3
Listen werden idR mit 1., 2., 3., ...
numeriert
Numerierungsmöglichkeiten
<ol type="A"> Liste wird mit A., B., C., ...
numeriert
<ol type="a"> Liste wird mit a., b., c., ...
numeriert
<ol type="I"> Liste wird mit I., II., III., ...
numeriert
<ol type="i"> Liste wird mit i., ii, iii., ... numeriert
Folie 25
HTML - Numerierte Listen 4
Startwert der Numerierung festlegen
Listen beginnen idR mit dem Wert 1 bzw. A
Mit dem Attribut start kann ein neuer
Startwert eingegeben werden
○ <ol start="5">
<li>Der Eintrag beginnt mit Nummer 5.</li>
<li>Der Eintrag erhält die Nummer 6.</li>
</ol>
Folie 26
HTML - Aufzählungen 1
sogenannte Bullet-Listen
enthalten Aufzählungszeichen
Referenz
<ul>
<li>Listeneintrag</li>
<li>noch ein Listeneintrag</li>
<li>noch ein Listeneintrag</li>
</ul>
Folie 27
HTML - Aufzählungen 2
<ul> = unordered list
leitete eine Aufzählungsliste ein, die mit dem
Tag </ul> beendet wird.
<li> = list item
leitet einen neuen Punkt innerhalb der
Aufzählungsliste ein und </li> beendet den
Eintrag
</li> ist nicht unbedingt erforderlich
Folie 28
HTML - Aufzählungen 3
Aufzählungszeichen festlegen
<ul type="disc"> rund und ausgefüllt
<ul type="square"> eckig und ausgefüllt
<ul type="circle"> rund und ohne Füllung
Folie 29
HTML - Bereiche 1
Festlegen von Bereichen
mehrere Absätze, bestehend aus Text,
Grafiken, Tabellen, etc. können
zusammengefaßt werden
gemeinsame Ausrichtung ist möglich
Referenz
<div align="center">
<h1>Die Sonne scheint</h1>
<img src="sonne.gif">Sonnenschein
<p>Fließtext</p>
</div>
Folie 30
HTML - Bereiche 2
<div> = division = Bereich
leitet einen Bereich ein, der mehrere
Element beinhaltet und mit </div> beendet
wird
align="center"
legt fest, daß alle Elemente des festgelegten
Bereiches zentriert dargestellt werden
Folie 31
HTML - Textauszeichnung 1
Logische Textauszeichnung
WWW-Browser entscheidet über die Darstellung
anzuwenden bei wissenschaftlichen bzw. reinen
Informations-Texten
Beispiele für logische Textauszeichnung:
○ <strong> ... </strong> Text wird "stark betont"
○ <code> ... </code> Text wird als "Quellcode" formatiert
○ <cite> ... </cite> Text wird als "Zitat" formatiert
○ <kbd> ... </kbd> Text wird als "Tastatureingabe"
formatiert
Folie 32
HTML - Textauszeichnung 2
Physische Textauszeichnung
der Autor gibt vor, wie Text hervorzuheben ist
vor allem für grafische Umgebungen gedacht
Beispiel für physische Textauszeichung:
○ <b> ... </b> Text wird fett dargestellt
○ <i> ... </i> Text wird kursiv dargestellt
○ <u> ... </u> Text wird unterstrichen dargestellt
○ <s> ... </s> Text wird durchgestrichen dargestellt
○ <blink> ... </blink> blinkender Text
○ <sup> ... </sup> Text wird hochgestellt
○ <sub> ... </sub> Text wird tiefgestellt
Folie 33
HTML - Schriftgröße
absolute Schriftgröße
<font size="7">riesiger Text</font>
<font size="1">winziger Text</font>
relative Schriftgröße
<font size="+1">etwas größer als
normal</font>
<font size="-2">deutlich kleiner als
normal</font>
Folie 34
HTML - Schriftfarbe
Festlegen der Schriftfarbe
Kontrast zwischen Text- und
Hintergrundfarbe muß vorhanden sein
Referenz
<font color="#FFFFFF">weiße Schrift</font>
<font color="#0000FF">blaue Schrift</font>
<font color="green">grüne Schrift</font>
Folie 35
HTML - Schriftart
Festlegen der Schriftart
mehrere angegebene Schriftarten sind
möglich
Vorsicht bei "exotischen" Schriftarten
Referenz
<font face="Impact">Text in Schrift
Impact</font>
<font face="Impact, Arial Black">Text wird
entweder in Impact oder Arial Black
angezeigt</font>
Folie 36
HTML - Leerzeichen
Browser bricht bei Leerzeichen um
Geschütze Leerzeichen verhindern
einen unerwünschten Umbruch
&nbsp; = nonbreaking space oder
Zeichenfolge: &#160
Referenz
Teil&nbsp;1 der Homepage vermittelt einen
kurzen Überblick.
Folie 37
HTML - Sonderzeichen
Umlaute
ä durch &auml;
Ö durch &Ouml;
ß durch &szlig;
HTML-eigene Zeichen
" durch &quot;
& durch &amp;
Folie 38
HTML - Kommentare
An beliebiger Stelle einzugeben
Browser zeigt Kommentare nicht an
Festgelegte Zeichenfolge
<!-- Das ist ein Kommentar -->
<!-- Das ist ein mehrzeiliger Kommentar
Hier endet der Kommentar //-->
Folie 39
HTML - Hyperlinks allgemein
Hyperlinks ermöglichen
Strukturierung des Inhaltes
rasche Navigation
einfache Verweise
Die Goldene Mitte finden
zu viele Verweise verwirren den Leser
zu wenige Verweise erschweren das
Navigieren
Folie 40
HTML - Hyperlinks erzeugen
Einheitliches Schema
<a href="verweisziel">Verweistext</a>
Verweismöglichkeiten auf
andere HTML-Datei innerhalb einer
HomePage
eine beliebige WWW-Adresse
eMail-Adresse
Datei zum Download
ein Ziel innerhalb der gleichen HTML-Datei
Folie 41
HTML - Verweise auf Dateien
Verweis auf Datei im gleichen
Verzeichnis
<a href="dateiname.html">Text</a>
Verweis auf Datei in anderem
Verzeichnis
<a
href="pfadangabe/dateiname.html">Text</a>
Wechsel in ein höheres Verzeichnis
Pro Ebene einmal "../"
Folie 42
HTML - WWW Verweise
WWW-Adressen, die mit http://
beginnen
Verweisreferenz
<a href="http://www.univie.ac.at">Text</a>
Folie 43
HTML - eMail Verweise
eMail Verweise beginnen mit mailto:
Achtung: Keine doppelten Schrägstriche
dahinter!
Verweisreferenz
<a href="mailto:echo@univie.ac.at">Text</a>
Voraussetzungen
Browser muß das Erstellen/Absenden von Mails
unterstützen
oder ein externes Mailprogramm muß gestartet
werden
Folie 44
HTML - Verweise / Download
Hat der Verweis eine Datei zum Ziel,
bestimmt der Browser, ob
diese Datei angezeigt wird (.htm, .gif, .jpg,
andere Dateien, wenn ein entsprechendes
Plug-In installiert ist)
nachgefragt wird, mit welchem Programm
diese Datei geöffnet werden soll oder ob
diese gespeichert werden soll (vor allem
.exe, .zip)
Folie 45
HTML - Anker
Verweis innerhalb einer Datei
Zwei Befehle sind notwendig
Befehl, der Verweisziel (Anker) definiert
Befehl, der einen Verweis auf den Anker definiert
Definition von Anker
<a name="name">Text des Verweisziels</a>
Verweis auf Anker
<a href=“#name">Zum Verweisziel</a>
Verweis auf Anker in einer anderen Datei
<a href="dateiname.html#ankername">Text</a>
Folie 46
HTML - Grafiken 1
Geeignete Grafikformate
GIF, JPEG oder PNG
Grafikreferenz
<img src="grafikdatei.gif">Bild
Zu beachten
Grafiken im gleichen Verzeichnis wie HTML-
Datei speichern (Verweis ist einfacher!)
große Grafiken führen oft zu langen
Wartezeiten
Textalternative zur Grafik eingeben
Folie 47
HTML - Grafiken 2
Größe der Grafik
entweder absolut (Zahl) oder relativ (in %)
<img src="grafik.gif" width="45" height="60">
Alternativer Text
erscheint, wenn die Grafik nicht angezeigt wird
erscheint, noch bevor die Grafik vollständig
sichtbar ist (schnelles Navigieren möglich!)
Referenz
<img src="grafikdatei.jpg"
alt="bildbeschreibung">
Folie 48
HTML - Grafiken 3
Umrahmte Grafiken
Rahmenfestlegung erfolgt durch die Angabe
border
in Pixel und bedeutet Rahmendicke
Referenz
<img src="grafikdatei.jpg" border="10">
Abstand Grafik - Text
<img src="grafik.gif" vspace="10"
hspace="5">
Folie 49
HTML - Grafiken 4
Grafikbeschriftung
erfolgt wahlweise oben (top), in der Mitte
(middle) oder unten (bottom)
<img src="grafik.gif" align="bottom">
Grafikausrichtung
erfolgt wahlweise links oder rechts
<img src="grafik.gif" align="right">
Folie 50
HTML - Hintergrundbilder
Hintergrundbild wird wiederholt, sodaß
Tapeteneffekt (Wallpaper) entsteht
Kleine Grafiken in GIF-, JPEG-, oder
PNG-Format
Referenz
<body background="muster.gif">
Folie 51
HTML - Hintergrundfarben
Farbe für den Hintergrund
<body bgcolor="#CCFFFF">
Wird sowohl eine Hintergrundgrafik als
auch eine Hintergrundfarbe definiert, so
wird erstere angezeigt.
Folie 52
HTML - Image Maps 1
Bei Mausklick auf ein Detail einer Grafik wird
der Verweis ausgeführt
zB Landkarte, Gruppenfoto, Gebäudeplan
Referenz
<map name="landkarte">
<area shape="rect" coords="1,1,249,49" href="wien.html"
<area shape="rect" coords="1,51,149,299" href="http://www.kino.com"
</map>
<img src="wienaktuell.gif" usemap="#landkarte" border=0>
Folie 53
HTML - Image Maps 2
<map name="...">
einleitendes Tag für die verweissensitive Grafik
Name muß nicht mit dem Grafiknamen ident sein
<area shape="rect" ...>
definiert eine viereckige Fläche als verweis-sensitiv
<area shape="circle" ...>
definiert einen Kreis
<area shape="polygon" ...>
definiert eine beliebiges Vieleck
Folie 54
HTML - Image Maps 3
Coords="..."
Viereck: Koordinaten für x1,y1,x2,y2
○ x1 = linke obere Ecke (Pixel von links)
○ y1 = linke obere Ecke (Pixel von oben)
○ x2 = rechte untere Ecke (Pixel von links)
○ y2 = rechte untere Ecke (Pixel von oben)
Kreis: Koordinaten für x,y,r
○ x = Mittelpunkt (Pixel von links)
○ y = Mittelpunkt (Pixel von oben)
○ r = Radius in Pixel
Folie 55
HTML - Image Maps 4
Verweis-sensitive Grafik wird dahinter
eingebunden
Attribut usemap= kennzeichnet diese als
verweis-sensitiv
Name hinter usemap= muß der
Ankername sein, der im einleitenden
<map>-Tag vergeben wurde
("#landkarte")
Folie 56
HTML - Tabellen 1
Aufbau einer Tabelle
Tabellen mit sichtbaren Gitternetzlinien
○ für tabellarische Daten
Tabellen mit unsichtbaren Gitternetzlinien
○ für mehrspaltigen Text
○ exakte Ausrichtung von Text und Grafiken
Referenz
<table border="1">
Tabelleninhalt durch Gitternetzlinien getrennt
</table>
Folie 57
HTML - Tabellen 2
Zeilen und Spalten definieren
Tabelle besteht aus mind. einer, meist aber
mehreren Zeilen
Zeilen bestehen aus mehreren Zellen ->
Spalten
Gleiche Zellenanzahl pro Zeile
Leere Tabellenzellen mit Eingabe eines
geschützten Leerzeichen (&nbsp;)
Folie 58
HTML - Tabellen 3
Referenz
<table border="2">
<tr>
<th>Kopfzelle: 1. Zeile, 1. Spalte</th>
<th>Kopfzelle: 1. Zeile, 2. Spalte</th>
</tr>
<tr>
<td>Datenzelle: 2. Zeile, 1. Spalte</td>
<td>Datenzelle: 2. Zeile, 2. Spalte</td>
</tr>
</table>
Folie 59
HTML - Tabellen 4
<table> ... </table> = Tabellenanfang/ende
<tr> ... </tr> = Zeilenanfang/-ende
<th> ... </th> = Kopfzellenanfang/-ende
<td> ... </td> = Datenzellenanfang/-ende
Bemerkung
Ende-Tags wie </td>, </th> oder </tr> sind
nicht nötig. Jede neue Zelle/Reihe beendet
automatisch die vorherige Zelle/Reihe.
Folie 60
HTML - Tabellen 5
Stärke des Außenrahmens
Angabe erfolgt in Pixel
<table border="8">
Tabelleninhalt
</table>
geben Sie nur das Attribut border an, dann
wird eine Rahmenstärke von 2 Pixel
verwendet
Folie 61
HTML - Tabellen 6
Stärke der Gitternetzlinien
Angabe erfolgt in Pixel
<table border="8" cellspacing="10">
Tabelleninhalt
</table>
Damit die Tabelle überhaupt Gitternetzlinien
erhält, müssen Sie die Außenrahmendicke
angeben
Folie 62
HTML - Tabellen 7
Abstand Zellinhalt von Zellrand
Angabe erfolgt in Pixel
<table border="8" cellpadding="12">
Tabelleninhalt
</table>
diese Einstellung hat sowohl für Tabellen mit
Gitternetzlinien als auch für blinde Tabellen
(ohne Gitternetzlinien) Gültigkeit
Folie 63
HTML - Tabellen 8
Höhe (height) und Breite (width)
Angabe wahlweise in Pixel oder Prozent
Angaben zur Breite und Höhe sind nur
wirksam, wenn der Tabelleninhalt kleiner ist
und dadurch Leerraum entsteht
<table border="4" width="60%"
height="400">
Tabelleninhalt
</table>
Folie 64
HTML - Tabellen 9
Zellinhalte horizontal ausrichten
align-Attribut ermöglicht die linksbündige,
rechtsbündige oder zentrierte Ausrichtung
<table border="4">
<tr>
<td align="left">linksbündiger Text</td>
<td algin="center">zentrierter Text</td>
</tr>
</table>
Folie 65
HTML - Tabellen 10
Zellinhalte vertikal ausrichten
valign-Attribut ermöglicht eine Ausrichtung
nach oben, unten oder mittig
<table border="4">
<tr>
<td valign="top">obenbündiger
Text</td>
<td valign="bottom">untenbündiger
Text</td>
</tr>
</table>
Folie 66
HTML - Tabellen 11
Zellen spaltenweise verbinden
Spalte einer Zeile erstreckt sich über
mehrere Spalten (geeignet für
Überschriften)
<table border="4">
<tr>
<th colspan="2">Überschrift geht über 2 Spalten</th>
</tr>
<tr>
<td>Inhalt erste Spalte</td>
<td>Inhalt zweite Spalte</td>
</tr>
</table>
Folie 67
HTML - Tabellen 12
Zellen zeilenweise verbinden
Zeile in dieser Spalte erstreckt sich über
mehrere Zeilen hinweg
<table border="4">
<tr>
<th rowspan="2">Inhalt über 2 Zeilen</th>
<td>Inhalt erste Zelle in Zeile 1</td>
</tr>
<tr>
<td>Inhalt zweite Zelle in Zeile 2</td>
</tr>
</table>
Folie 68
HTML - Tabellen 13
Farbige Tabellen
Hintergrundfarbe Gesamttabelle
○ <table border="4" bgcolor="#CCFFFF">
Tabelleninhalt in hellblau
</table>
Hintergrundfarbe für Zeilen
○ <table border>
<tr bgcolor="#CCFFFF">
<td>Zeile 1, Spalte 1 in hellblau</td>
<td>Zeile 1, Spalte 2 in hellblau</td>
</tr>
</table>
Folie 69
HTML - Tabellen 14
Wallpaper für Tabellen
Hintergrunddatei für Tabellen und Zellen
○ <table border="4" background="datei.gif">
<tr>
<td background="datei2.gif">Zeile 1,
Spalte1</td>
<td>Zeile 1 Spalte 2</td>
</tr>
<tr>
<td background="datei2.gif">Zeile 2 Spalte
1</td>
<td>Zeile 2 Spalte 2</td>
</tr>
</table>
Folie 70
HTML - Tabellen 15
Text neben Tabellen
nimmt die Tabelle nicht das gesamte
Anzeige-fenster ein, kann Text links oder
rechts davon stehen
<table border="4" width="50%" align="left">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>
Text steht rechts neben der Tabelle
Folie 71
HTML - Frames 1
Grundgerüst
○ <html>
<head>
<title>Meine Frame-Seite</title>
</head>
<frameset ...>
Hier stehen die Framedefinitionen.
</frameset>
<body>
Zeigt Text an, wenn Browser nicht frame-fähig
</body>
</html>
Folie 72
HTML - Frames 2
Framesets definieren
bestimmt die Aufteilung des Anzeigefensters
Beispiel:
○ <frameset rows="20%,80%">
1. Frame
2. Frame
○ Anzeigefenster wird in Reihen aufgeteilt
obere Reihe 20% des Anzeigefensters
untere Reihe 80% des Anzeigefensters
Folie 73
HTML - Frames 3
Framesets definieren
bestimmt die Aufteilung des Anzeigefensters
Beispiel:
○ <frameset cols="200,*">
Frame 1
Frame 2
○ Anzeigefenster wird in Spalten aufgeteilt
linke Spalte erhält 200 Pixel des Anzeigefensters
rechte Spalte erhält den Rest des Anzeigefensters
Folie 74
HTML - Frames 4
Frames definieren
legt fest, welche Dateien in den einzelnen
Bereichen angezeigt werden sollen
Beispiel:
○ <frameset rows="20%,80%">
<frame src="inhalt.html" name="oben">
<frame src="index.html" name="unten">
</frameset>
Folie 75
HTML - Frames 5
Bildlaufleisten erzwingen/verhindern
Browser verwaltet Bildlaufleisten idR
automatisch
Beispiel:
○ <frameset cols="200,*">
<frame src="inhalt.html" name="oben"
scrolling="no">
<frame src="index.html" name="unten"
scrolling="yes">
</frameset>
Folie 76
HTML - Frames 6
Abstand Fensterrand - Fensterinhalt
ermöglicht die exakte Justierung zwischen
Fensterrand und Fensterinhalt
Beispiel:
<frameset cols="200,*">
<frame src="inhalt.html" name="o" marginwidth="0">
<frame src="index.html" name="u" marginheight="30">
</frameset>
Folie 77
HTML - Frames 7
Fixe Fenstergröße
Leser kann idR Größe der Framefenster verändern
Attribut noresize verhindert dies
Beispiel:
<frameset cols="200,*">
<frame src="inhalt.html" name="oben" noresize>
<frame src="index.html" name="unten">
</frameset>
Folie 78
HTML - Frames 8
Fensterrahmen
Rahmen unterdrücken
Browserspezifisch
<frameset … border="0" frameborder="0"
framespacing="0">
oder nach HTML
<frame … frameborder="0">
Folie 79
HTML - Frames 9
Verweise, die ein Frameset beenden
Inhalt des Verweisziels soll nicht im Frame
stehen
wichtig bei Verweisen zu fremden WWW-Seiten
Beispiel:
<a href="www.xgx.at/produkte/"
target="_blank">Produktpalette</a>
_blank = neues Browserfenster für Verweisziel wird geöffnet
_parent = Zustand des Anzeigefensters vor dem Start des FrameSets
_top = Verweisziel wird im gesamten Anzeigefenster angezeigt
Folie 80
HTML – Formulare 1
Formulare sind Bereiche auf HTMLSeiten, in denen der Benutzer Eingaben
tätigen kann.
In HTML-Dateien können beliebig viele
Formulare verwendet werden.
Für jedes Formular stehen die in
Windows gängigen Eingabeobjekte zur
Verfügung.
Folie 81
HTML – Formulare 2
Ein Formular wird mit dem Tag <form>
eingeleitet und mit </form> beendet.
Folgende Attribute sind dabei wichtig:
Name="..." Name des Formulars
Action="..." Was soll mit Formulardaten
geschehen (Versenden mit e-Mail oder
Übergaben an CGI-Script)
Method="..." Wie sollen die Daten verschickt (get
oder post) werden
Folie 82
HTML – Formulare 3
Die verwendbaren Formularobjekte sind:
Einzeilige Textfelder
Mehrzeilige Textfelder
Auswahlfelder (Drop-Down oder mehrzeilig)
Radiobuttons (Optionsgruppenfelder) und
Checkboxes
Befehlsschaltflächen
Gruppen
Folie 83
HTML – Formulare 4
Einzeiliges Textfeld <input>
Attribute:
Name="..." Name des Feldes
Size="..." Breite in Zeichen
Maxlength="..." Maximallänge in Zeichen
Value="..." Textvorbelegung
Type="password" Anzeige der Eingabe mit *
Readonly Keine Eingabe möglich
Folie 84
HTML – Formulare 5
Mehrzeiliges Textfeld <textarea>
</textarea> Abschließender Tag ist nötig
Attribute:
Name="..." Name des Feldes
Rows="..." Höhe in Zeilen
Cols="..." Breite in Zeichen
Wrap="..." Virtual (Automatische
Zeilenumbrüche werden nicht gesendet) oder
Physical.
Textvorbelegung zwischen den Tags
<textarea> </textarea>
Readonly Keine Eingabe möglich
Folie 85
HTML – Formulare 6
Auswahlfeld <select>...</select>
Name="..." Name des Feldes
Size="..." Höhe in Zeilen (wenn 1 dann
Drop-Down, sonst Liste)
multiple Erlaubt Mehrfachauswahl
Auswahlpunkt <option>...
Value="..." Besonderer Rückgabewert an
Stelle des Feldinhaltes, wenn Punkt gewählt
wird.
Selected Definiert vorausgewählten Wert
Folie 86
HTML – Formulare 7
Checkbox <input type="chekbox"> bzw.
Radiobutton <input type="radio">
Name="..." Name des Feldes
Value="..." Rückgabewert wenn dieser Punkt
gewählt wird.
checked Definiert vorausgewählten Wert
Alle Radiobuttons mit gleichem Namen bilden
Gruppe aus der immer nur ein Eintrag gewählt
werden darf.
Folie 87
HTML – Formulare 8
Button <button>...</button>
Alles innerhalb der <button>-Tags wird als
Beschriftung angezeigt, auch Grafiken möglich
Value="..." Rückgabewert wenn nichts
innerhalb der <button>-Tags steht
onClick="..." Definition der Aktion, wenn Button
angeklickt wird (zB Ausführen von JavaScript)
Standarbuttons für Absenden und Reset
<input type="submit" value="...">
<input type="reset" value="...">
Folie 88
HTML – Formulare 9
Gruppe <fieldset>...</fieldset>
Alles innerhalb der <fieldset>-Tags wird mit
einem Rahmen umgeben.
Die Beschriftung des Rahmens erfolgt mit den
Tags <legend>...</legend> innerhalb der
<fieldset>-Tags
Folie 89
CSS – Grundlagen 1
Cascading-Style-Sheets (CSS)
sind eine Erweiterung von HTML
sind logischer und strukturierter als HTML
bieten sämtliche HTML-Formate
bieten weitere, in HTML nicht enthaltene
Formate
können zentral verwaltet werden
sind für professionelles Webdesign unerläßlich
können unterschiedliche Formate für
verschiedene Medien vorsehen
Folie 90
CSS – Grundlagen 2
Style-Sheets
definieren eine oder mehrere Formate, für
○ global ein HTML-Objekt
○ global mehrere HTML-Objekte
○ individuell ein HTML-Objekt
○ alle Objekte die mit einem Style verbunden sind
Folie 91
CSS – Grundlagen 3
„Anwendungsvorrang“
Das Style-Format das am nächsten am Objekt
ist gilt vor denen, die weiter entfernt sind.
Format im Objekt geht vor
○ Format in der Seite geht vor
Format in externer Datei geht vor
- Browserstandard
Folie 92
CSS – Aufbau 1
Eigenschaft:Wert
Beispiele
Farbe auf Rot setzen: color:red
Höhe mit 10 Pixel bestimmen: height:10px
Als Schriftart Arial verwenden: font-family:Arial
Folie 93
CSS – Aufbau 2
Eigenschaft1:Wert; Eigenschaft2:Wert; ...
Beispiel
Farbe auf Rot, Höhe 10 Pixel, Schriftart Arial
color:red; height:10px; font-family:Arial
Folie 94
CSS – Eigenschaften 1
Wichtige Eigenschaften - Schrift
Schriftart: font-family
Schriftgröße: font-size
Fett: font-weight
Unterstreichen: text-decoration
Schriftfarbe: color
Folie 95
CSS – Eigenschaften 2
Wichtige Eigenschaften - Absatz
Ausrichtung - horizontal: text-align
Ausrichtung - vertical: vertical-align
Zeilehöhe: line-height
Folie 96
CSS – Eigenschaften 3
Wichtige Eigenschaften - Rahmen
Farbe: border-color
Breite: border-width
Typ: border-style
Beschränkung auf einzelne Seiten mit
-top- oben
-left- links
-right- rechts
-bottom- unten
Folie 97
CSS – Eigenschaften 4
Wichtige Eigenschaften – Größe / Position
Höhe: height
Breite: width
Open: top
Links: left
Positionierungsart: position
Folie 98
CSS – Eigenschaften 5
Wichtige Eigenschaften – Hintergrund
Hintergrundfarbe: background-color
Hintergrundbild: background-image
Folie 99
CSS – Zahlenwerte
Angabe der Zahl und der Einheit zB 12px
Wichtige Einheiten
Pixel: px
Millimeter: mm
Punkt: pt
Prozent: %
Folie 100
CSS – Definition 1
Styleangabe direkt beim betroffenen
Objekt
<OBJEKT style=" Eigenschaft:Wert ">
bzw.
<span style=" Eigenschaft:Wert ">
<OBJEKT>
<OBJEKT>
...
</span>
Folie 101
CSS – Definition 2
Styleangabe in Style-Bereich auf der Seite
<style type="text/css">
Objekt { Eigenschaft:Wert}
.Klasse { Eigenschaft:Wert}
</style>
Folie 102
CSS – Definition 3
Styleangabe in externer Datei – Datei in Seite
einbinden
Nach HTML
<head>
<link rel="stylesheet" type="text/css" ref="datei.css">
</head>
Nach CSS
<style type="text/css">
<!-@import url(datei.css); //-->
</style>
Folie 103
CSS – Globale Formatierung
Objekt { Eigenschaft:Wert }
Beispiele
p { color:red }
Alle Absätze haben rote Zeichen
body { background-image:url(test.gif)}
test.gif als Hintergrundbild verwenden
a { text-decoration:none }
Unterstreichung bei allen Links verhindern
Folie 104
CSS – Klassenformatierung
.Klasse { Eigenschaft:Wert }
<OBJEKT class="Klasse">
Beispiel
.Test { color:red }
<p class="Test">Text</p>
Folie 105
CSS – Praxistipps 1
Hyperlink-Formate ändern, sobald die Maus
darüber fährt
Links an sich formatieren (a { Eigenschaft:Wert })
a:hover { Eigenschaft:Wert}
wird angewendet, wenn Maus sich über Link
bewegt
Folie 106
CSS – Praxistipps 2
Ändern des Mauszeigers über Objekten mit
cursor:
pointer Mauszeiger in Handform (wie bei Links)
wait Sanduhr
help Fragezeichen
Folie 107
CSS – Praxistipps 3
Live-Demonstration von CSS
Folie 108
HTML/CSS – Nützliche Links
Self-HTML – die Seite von Stefan Münz,
die Umfassend über Web-Design
informiert – unbedingt ansehen
de.selfhtml.org
Die goldenen Regeln für schlechtes HTML
www.karzauninkat.com/Goldhtml
Online-Magazin Dr. Web
www.ideenreich.com
Folie 109
Das war´s
Danke für die Aufmerksamkeit
Viel Spaß mit HTML
Nicht vergessen – Das EDV-Zentrum
bietet HTML-Workshops an
Schönes Wochenende
Folie 110
