Upload
hartman-woerner
View
105
Download
1
Embed Size (px)
Citation preview
Grete Kugler
Webdesign - Teil 1
Internet und WWWAufbau von HTML-Seiten
Formatierungen und Links
Webdesign - Teil1 2Grete Kugler
Internet und WWW
• Weltweiter Verbund von Computern• Kommunikationsprotokoll: TCP/IP
Sucht bei Ausfall Umweg• Jeder Rechner hat eine IP-Adresse
– Netzwerkadresse– Hostadresse
• Domäne• DNS: Domain Name Service
Webdesign - Teil1 3Grete Kugler
Web-Site
• Kombination mehrerer Webseiten in einer logischen Struktur
• Navigation durch Links• Text, Graphiken, Sound, ...• Web-Server• W3C-Consortium• Hypertext Transfer Protocol
Webdesign - Teil1 4Grete Kugler
Software
• Hypertext Markup Language• Textdatei Editor
– Texteditor– WISIWIG - Editor– Mischformen
• Entwicklungswerkzeuge Dreamweaver, Frontpage, GoLive, ...
Webdesign - Teil1 5Grete Kugler
HTML Dokument
• ASCII-Datei mit Text und Metasymbolen (Tag)
• Tags treten i.A. paarweise auf• <B>Dieser Text ist fett</B>• Aufbau
– Dokumentendeklaration– Header mit Titel– Textkörper (body)
Webdesign - Teil1 6Grete Kugler
Beispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML> <HEADER> <TITLE>Willkommen!</TITLE> </HEADER> <BODY> Hier folgt der eigentliche Inhalt </BODY></HTML>
Webdesign - Teil1 7Grete Kugler
Kommentare, Entities
• <!-- Kommentar -->• Umlaute und Sonderzeichen
werden durch Entities maskiert:
Sonderz. Entity Sonderz. Entity
< < ß ß
& & Ä Ä
" " © ©
Webdesign - Teil1 8Grete Kugler
Formatierungen
• <BR> LineBreak, kein Ende-Tag• <NOBR> ... </NOBR>• <PRE> .... </PRE>• <P align="left"> ... </P>
weitere align-Werte:"right""center""justify"
Webdesign - Teil1 9Grete Kugler
Horizontale Linien
<HR align="center" size="5" width="50%", color="#FF0000">
– align: right / left / center– size: Größe in Pixel– width: Länge in Pixel oder % der
Fensterbreite– color: Farbe als RGB-Wert
Webdesign - Teil1 10Grete Kugler
Textattribute
• <B>bold</B>• <I>italic</I>• <U>unterstrichen</U>• <S>strike</S>• <SUB>hoch</SUB>• <SUP>tief</SUP>• <FONT face="verdana"
color="00FF00" size=+1>Text</FONT>
• bold• italic• unterstr.• strike• hoch
• tief
• Text
Webdesign - Teil1 11Grete Kugler
Weitere Textattribute
• <BIG>relativ größere Schrift
• <SMALL>relativ kleinere Schrift
• <TT>dicktengleiche Schrift
• <BASEFONT>Basisfont: Times New Roman,
12pt, size=3
Webdesign - Teil1 12Grete Kugler
Überschriften
• Gliederung des Textes durch Überschriften
• 6 Ebenen, jede Ebenen hat ihren vordefinierten Font
• <H1>Größter Font</H1>• ...• <H6>Kleinster Font</H6>
Webdesign - Teil1 13Grete Kugler
Links
• Verweise von einer Stelle eines Dokumentes zu einer anderen Stelle des gleichen oder eines anderen Dokumentes.
• Link = Hyperlink = Weblink• 2 Seiten (Anker = anchor) und eine
Richtung
Webdesign - Teil1 14Grete Kugler
Link - Beispiel
Kapitel 1
Abschnitt 1
Abschnitt 2
Webdesign - Teil1 15Grete Kugler
<p>
<a href = "Kapitel1.html">
Kapitel 1
</a>
</p>
Webdesign - Teil1 16Grete Kugler
<p>
<a href = "Kapitel1.html#Abschnitt1>
Abschnitt 1
</a>
</p>
Webdesign - Teil1 17Grete Kugler
<p>
<a href = "Kapitel1.html#Abschnitt2>
Abschnitt 2
</a>
</p>
Webdesign - Teil1 18Grete Kugler
Kapitel 1
Hier steht die Einleitung von Kapitel 1
Abschnitt 1Hier steht alles zu Abschnitt 1
Abschnitt 2Hier steht alles zu Abschnitt 2
Webdesign - Teil1 19Grete Kugler
Abschnitt 1
Abschnitt 1Hier steht alles zu Abschnitt 1
Abschnitt 2Hier steht alles zu Abschnitt 2
Webdesign - Teil1 20Grete Kugler
Abschnitt 2
Abschnitt 2Hier steht alles zu Abschnitt 2
Webdesign - Teil1 21Grete Kugler
Kapitel1.html
<html> ...<body>
Hier steht die Einleitung von Kapitel 1. <h1> <a name = "Abschnitt1">Abschnitt 1</a> </h1><p>Hier steht alles zu Abschnitt 1</p>
<h1> <a name = "Abschnitt2">Abschnitt 2</a> </h1><p>Hier steht alles zu Abschnitt 2</p>...
</body> </html>
Webdesign - Teil1 22Grete Kugler
URL
• URL:protokoll://hostname/directoryname/filename#marke
• protokoll: Zugriffsart– http -ftp– mailto -news– file
• hostname: www.tgm.ac.at• directoryname/filename: Datei, die angezeigt
wird• marke: Stelle innerhalb der Datei
Webdesign - Teil1 23Grete Kugler
absoluter/ relativer URL
– Der absolute URL gibt die komplette Adresse an, vom Protokoll bis allenfalls zu Marke
– Der relative URL geht von der Position im Directorybaum der angezeigten Datei aus.
– ../dateidatei befindet sich im übergeordneten Directory
– /directory/dateidatei befindet sich im untergeordenten Directory
Webdesign - Teil1 24Grete Kugler
Menue.html
<html> <body><p><a href="Kapitel1.html">Kapitel 1 </a></p><p><a href="Kapitel1.html#Abschnitt1">
Abschnitt 1 </a></p><p><a href="Kapitel1.html#Abschnitt2">
Abschnitt 2 </a></p></body> </html>