grete kugler webdesign - teil 1 internet und www aufbau von html-seiten formatierungen und links

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


Web-Site

• Kombination mehrerer Webseiten in einer logischen Struktur

• Navigation durch Links• Text, Graphiken, Sound, ...• Web-Server• W3C-Consortium• Hypertext Transfer Protocol


Software

• Hypertext Markup Language• Textdatei Editor

– Texteditor– WISIWIG - Editor– Mischformen

• Entwicklungswerkzeuge Dreamweaver, Frontpage, GoLive, ...


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)


Beispiel

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML> <HEADER> <TITLE>Willkommen!</TITLE> </HEADER> <BODY> Hier folgt der eigentliche Inhalt </BODY></HTML>

Kommentare, Entities

• • Umlaute und Sonderzeichen

werden durch Entities maskiert:

Sonderz. Entity Sonderz. Entity

< < ß ß

& & Ä Ä

" " © ©


Formatierungen

• <BR> LineBreak, kein Ende-Tag• <NOBR> ... </NOBR>• <PRE> .... </PRE>• <P align="left"> ... </P>

weitere align-Werte:"right""center""justify"


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


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


Weitere Textattribute

• <BIG>relativ größere Schrift

• <SMALL>relativ kleinere Schrift

• <TT>dicktengleiche Schrift

• <BASEFONT>Basisfont: Times New Roman,

12pt, size=3


Überschriften

• Gliederung des Textes durch Überschriften

• 6 Ebenen, jede Ebenen hat ihren vordefinierten Font

• <H1>Größter Font</H1>• ...• <H6>Kleinster Font</H6>


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


Link - Beispiel

Kapitel 1

Abschnitt 1

Abschnitt 2


<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>


Kapitel 1

Hier steht die Einleitung von Kapitel 1

Abschnitt 1Hier steht alles zu Abschnitt 1



Abschnitt 1




Abschnitt 2



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>


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


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


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>

grete kugler webdesign - teil 1 internet und www aufbau von html-seiten formatierungen und links

Documents