Sie sind auf Seite 1von 3

5

Medienkompass 2

Prsent im hleb
Mal schauen, ob ich die Seite habe ,.

o
Schick nir die Seite http : / /www.wwf . ch /news . html 0

Anfrage
news
.

html

Browser

'Web.servel HTfP'

Du blickst hinter die Kulissen des lnternets und beschftigst dich damit, was es

braucht, um lnformationen im Web zu publizieren, ln diesem Zusammenhang lernst du die Begriffe Client, Server, Protokoll und HTML besser kennen und verstehen. Das Gelernte hilft dir, eine eigene Website zu planen und umzusetzen.
Antwort

<html><head><title>wWF Schwei
</head><body><h1>news</h1>

.r*
oder

Hier ist sie:

z</title> ... usw.

404: Seite nicht


gefunden

Wie macht die Website eine gute Figur?


Marion, Lsa und Stephanie mchten de Ergebnisse ihrer Projektarbeit
zu

Von Surfern und Servern


Viele Menschen mchten das Web nicht nur passiv nutzen, um Webseiten aufzu-

chende Seite an den Webserver. Der Server bearbeitet die Anfrage und schickt entweder die entsprechende Seite oder
eine Fehlermeldung (wenn die Seite nicht vorhanden ist) an den Client zurck. Damit sich Client und Server verstehen, mssen sie <die gleiche Sprache sprechen, und gemeinsame Regeln einhalten. Solche Regeln nennt man Protokolle. Das beim beschriebenen Beispiel verwendete Protokoll heisst HTTP (Hypertext Transfer Protocol). Deshal b begin nen Adressen im Web mit (http://r. Dabei ist HTTP nur eines von zahlreichen

Die URL (Uniform Resource Locator) ist eine weltweit eindeutige Adresse im lnternet. Als Beispiel hier die URL einer
Webseite:

Client und Server osprechen> ber


das Protokoll HTTP

Th em

a Sch

Ia

kheitswah n

ihren Mtschlerinnen und Mitschlern und ihren Eltern zur Verfgung stellen.
Sie

rufen, sondern auch ihre eigenen Texte, Bilder und Filme dort verffentlichen. Um im Web nur zu surfen, gengen ein lnternetanschluss und ein Computer mit ei-

http:// www.swissed uc.ch / informatik/ internet/ index.htm

o@@@@

HTML
Eine Webseite besteht aus Text

entscheiden sich fr eine

Website. DieTexte und Bilder stehen

schon in elektronischer Form bereit.


We sollen sievorgehen, um die

Website zu erstellen?

nem Webbrowser. Zum Publizieren im Web sind hingegen spezielle Computer ntig, auf denen rund um die Uhr ein Webserver die dort gespeicherten Webseiten zurVerfgung stellt. Wer Inhalte im Web verffentlichen will, muss deshalb Zugang zu Speicherplatz auf einem solchen Webserver haben.

in HTML

URL einer Webseite:

(Hypertext Markup Language), einer Aus-

@ Anwend

u ng

sd i en st (h i er : HTTP)

Die Publikation von Webseiten funktioClient-Server-Modell. Dabei hat ein Computer die Rolle des Clients (engl. fr Kunde), der bestimmte Dienste in Anspruch nimmt, die ein anderer Computer, der Server (engl. fr Diener), zur Verfgung stellt. lm Web sieht das so aus:Wird im Webbrowser die Adresse einer Webseite eingegeben, dann sendet der Client (der Browser) eine Anfrage

niert nach dem

anderen Protokollen, die in Computernetzwerken eingesetzt werden, damit die angeschlossenen Computer miteinander kommunizieren knnen. Je nach
Anwendungsdienst kommen andere Pro-

zeichnungssprache, die festgelegt, wie der lnhalt auf der Webseite erscheinen soll. HTML bestimmt sowohl die Struktur der Webseite als auch ihr Aussehen, wobei es letztlich vom verwendeten Browser abhngt, wie der HTML-Code dargestellt wird.
HTML verwendet speziel le Ma rkieru
n

@ Domainname
Webservers)

(-- Adresse des

Name des Verzeichnisses

(infor

matik) auf dem Webserver

@ Name des IJnterverzechnisses


(nternet) auf dem Webserver

@ Name
HTML

des Dokumentes (index.

html), her einet Webseite in

gen

tokolle zum Einsatz. So mssen Computer dasTCP/lP (Transfer Control Protocol/ lnternet Protocol) einhalten, damit sie ans lnternet angeschlossen werden knnen, und das FTP (File Transfer Protocol), wenn sie bers lnternet Daten verschieben sollen.

in spitzen Klammern, Tags genannt. Sie treten meist paarweise auf und fassen
den zu formatierenden Text ein. Beispiel: Mit dem Tag <b> (fr engl. bold = fett) wird ein bestimmterText fett dargestellt:

<b>Dieser Text ist fett.</b>


25

fr die entspre-

24

Medienkompass 2
Tags legen auch die Grundstruktur einer

dem <head> (Kopf) und dem


(Krper):

HTML-Seite fest. .Jede Seite besteht aus obody,,

Content-Ma nagement-Systeme Um lnhalte im Web zu publizieren, stehen zwei grundstzliche Wege offen: Wer sich mit HTML und Webdesign auskennt, kann die Webseiten auf dem eigenen Computer <von Hand> erstellen. Da-

server geladen. Den entsprechenden


Speicherplatz auf einem Webserver kann man bei einem Anbieter mieten. Wer sich hingegen nicht mit HTML beschftigen mchte, setzt ein sogenanntes Content-Ma nagement-System (CMS) ein, das die Organisation der Daten und

<html>
<head> <ttle>Titel der Webseite</title> </head> <body>
Hier steht der sichtbareText derWebseite.

bei wird mit einem einfachen

Text-

</body> </html>

programm entweder direkt HTML-Code geschrieben, oder die Seite wird mit einem speziellen Programm, dem HTMLEditor, gestaltet. Anschliessend wird das

deren Darstellung im Web bernimmt, sodass man sich nur noch um den lnhalt zu kmmern braucht. Dazu gehren Systeme wie Wikis, Blog oder der WebsiteGenerator von educanet2. Bei einem CMS

lm <head> stehen Daten ber die Webseite (sogenannte Metadaten), die nicht direkt sichtbar sind, aber von Suchmaschinen ausgewertet werden, etwa die Schlsselwrter (engl. keywords) und die Beschreibung (engl. description): <html>
<head>
<title>Bild manipu lationen</title> <meta name='description" content="Bildmanipulationen durch Fotomontage und andere Methoden"> <meta name="keywords" content="Manipu lation,Bild,Fotomontage, Jou rnalistische Eth ik,Bild kom position,Farbver&au ml;nderung">

HTML-Dokument samt den dazugehrigen Bildern, Tnen usw. auf den WebHot Potatoes - Website
WEESIIE.GEIERATOR

arbeitet man direkt auf dem Webserver.


Seten bers icht d es Webs ite- Gen e-

rators von educanet2


>

ila[SaL

t*tt

saltanntma

Saltanlryoot Utna Anrrung

o
D
D

@c
Blsplle

((e@(

Stndrd Llnkllsb tnkllst!

.05,200612:32
08.06.200617:59

(dOOOC)
((@o(

Ilownlods

Downlods 08.f6.200617:57
26.05,2,716:19

D ljnks

GI@G)
STTE EDITRE1{
Slaltannrmc
Hedline

Eingabeformular fr die Seite


<Home>

Anzeige des HTML-Quelhextes m


Browser Firefox

Browser verfgen ber einen Befehl, der den HTML-Code jederWebseite in einem Fenster anzeigt (2. B. Firefox: <Seitenquelltext anzeigen> im Men <Ansicht>).

orrchrllt
lworrshop Hot Potoes

arr

<htI>
<head>

ist

Homepage des Workshops zu Hot Fotatoes

<tile> Bildnanipulationen </tltlc> <ucta Da!a."description" contaDtr"Dildmanipulationen durch Fotonontage und andere Methoden"> <Dcta DtDa.'keywords' cotant."l,tanipulation, Eild, Fotonontage, JourIistische Ethik, Bildkonposition, Farbverauml;nderung"> <Det arlar'revisit-after" cotant."5 days"> <D.a !a."clasgification" cotat"Inforration page"> <ncta DaDa."robots' contot.'all"> <Dta c!a."distribution' cotct."Global'> <D.ta nlar'author" contcat."l(nLll"> <llnk rol.stylesheet typc--text/css' href.' . . /Styles/basic. cgs'>
<stylc>
Eine Webseite besteht also immer aus
Text in HTML. Alle anderen Elemente wie

1. BIH (JPeg, mx. 25{) Plxel brelt)

lld'looo

entfernn

edu

Dos sichtbare Ergebnis

lloma

Seite im Browser (Client)

Dateien aufdem Server

Bilder, Filme oderTne sind als separate

Downlord Llnkt

Workshop Hot Potatoes


Dle |rt dle Homcprg

d workhop. zu Hot

Potatocc

Elfmeter

Die Website fr Fussball und ailes, was damit zusammenhngt.

CF

Dateien auf dem Server gespeichert und werden einzeln aufgerufen. Der Browser setzt schliesslich alles zu einer sichtbaren

fussball.gif

webseite.html

Seite zusammen. lm nebenstehenden Beispiel mssen drei Dateien vom Webserver aufgerufen werden, die eigentliche Webseite in HTML sowie zwei Bilddateien (fr den Fussball und denTorwart).

torwartjpg

26

27

Medienkompass 2
Wenn mehrere Personen an einer gemeinsamen Website arbeiten, ist ein CMS fast immer die beste Wahl. CMS zeichnen sich durch folgende Merkmale aus: Sie bieten verschiedene Designvorlagen fr die Website. Sie bieten Vorlagen fr verschiedene Seitentypen (Seiten layouts). Sie verfgen ber eine vorgegebene Struktur fr dle Verlnkung. Text wird ber Felder in Formularen eingegeben.

Y
Strukturierung ber zwei Menebenen, eine Haupt- und eine Unterebene. Es lohnt slch, die Struktur der Website zu
skizzieren, etwa als Stemap:
Home
Beispiele Spiele Quiz
Tests

Tipps
> Werden Anderungen an derWebseite im Browser nicht angezeigt, so befindet
sich noch erne alte Fassung im Zwischenspeicher (Cache). Verwende den Befehl

Netz berlastet oder unterbrochen ist, suchen sich die Pakete einen anderen Weg. Weil es keine Zentrale gibt, kann das lnternet als Ganzes nie ausfallen.

Downloads

Links

bzw. die Taste <Neu laden>, um die aktuel le

Aufgaben
DerVater des Webs
HT M L-Cod e ei n e r Web seite
u

Version

ufzu rufen.

> Halte die Dategrsse von Bildern klein, damit die Webseiten ohne Wartezeit dargestellt werden: Skalere mit einem Blldbearbeitungsprogramm Bilder auf die passende Grsse und reduziere bei JPEGBildern die Qualitt.

ntersu chen

Jeder Browser bietet die Mglchket,


den Quelltext einer Webseite anzuzeigen. Untersucht so den HTML-Code einer Webseite eurer Wahl. Was knnt ihr aus den Schlsselwrtern (<keywords>) und aus der Beschrerbung (<description>) im

Timothy John Berners-Lee (geboren am 8. Juni 1955 in


Sir

London) st ein britischer Physiker und lnformatker und gilt als Begrnder des World Wide Web. 1989 schlug Berners-Lee seinem Arbeitgeber CERN (europisches Kernfor-

Es lsst

sich einstellen, welche ange-

meldeten Benutzerinnen und Benutzer das Recht zum Erstellen und Andern von Seiten haben.
Eine Website planen

Vor der eigentlichen Arbeit im CMS er-

folgt dle Planung der Website,


Zweck und Zielgruppe Zunchst muss man sich berlegen, wozu die Website dient und welcher Personen-

Bilder Bllder spielen auf Webseiten eine grosse Rolle. Sie werden oft als Blckfang oder zur Auflockerung von Texten eingesetzt. Damt Bilder im Web verwendet werden knnen, mssen sie in den Formaten JPEG, GIF oder PNG vorliegen. Man sollte sich frhzeitig berlegen, auf welchen Webseiten man welche Bilder zu welchem Zweck einsetzt.

> Die meisten Menschen berflregen


Texte am Bildschirm und suchen nach Schlsselwrtern, die hnen rasch lnformationen vermitteln. Schreibe und ge-

stalte deine Texte frs Web entsprechend:

Kopftell k head>) herauslesen? Entsprechen sie dem sichtbaren lnhalt derWebseite oder handelt es sich um ene Mogelpackung, um die Suchmaschinen zu
beeinflussen?

schungslabor in Genf ) ein Projekt vor, das auf dem Prinzip des Hypertexts beruhte und den weltweiten Austausch von lnformationen
zwlschen Wissenschaftern vereinfachen sollte. Die erste Webseite, die Berners-Lee erstellte - und damit die erste

- Schreibe kurzeTexte. - Nenne das Wichtigste zuerst. - Gliedere den Text in Abstze und
setze Zwischentitel.

Schrebe in einfacher, klarer Sprache.

Aufbau von Websites vergleichen

Vergleicht die Websites von einigen


grossen Firmen: Welche Gemeinsamkeiten im Aufbau knnt ihr erkennen? (Wo befindet sich die Navigation? Welche

berhaupt -, war http://info.


cern.ch. Sie ist heute noch zu sehen unter http: // info.cern. ch/ LMBrowser.html

kreis damit angesprochen werden soll. Aus den Bedrfnissen der Zielgruppe ergeben sich lnhalt und 5tl der Website. Struktur ln einem weiteren Schritt gilt es, den lnhalt zu strukturieren, d. h., auf verschiedene einzelne Webseiten zu verteilen und diese sinnvoll anzuordnen, Der Website-

Rechte

Wer Webseiten verffentlicht, muss sich ans geltende Recht halten. Verwendet man auf Webseiten Texte, Bilder oder andere Medien, die man nicht selbst hergestellt hat, snd die Urheberrechte zu beachten. Bevor Fotos oder Daten von Per-

Verteile lngeren Text auf mehrere einzelne Webseiten.

Tasten

und Funktionen sind auf

allen

Websrtes vorhanden? Wie werden Links

gekennzeichnet?)

Technik
Eigene Website planen Daten im lnternet werden nicht an einem Stck auf dem direktesten Weg von ComPlant den Aufbau einer Website, die neu eintretende Schlerinnen und Schler (und deren Eltern) ber eure Schule informiert. Notrert euch in Stichworten den lnhalt der einzelnen Webseiten auf Zet-

sonen verffentlicht werden, muss man


zuerst deren Einwilligung einholen, sonst

Generator

von educanet2 verfgt zur


> webslte-out-runi,urtuig

werden

Persn ich keitsrechte verletzt.


I

WEBSITE.GENERATOR
http: / / phzh. educa Funktlon
ne t 2, ch,/

i'

puter A zu Computer B transportiert, sondern fr die bertragung in Datenpakete aufgespaltet. Die einzelnen Pakete gehen unterschiedliche Routen, bis sre beim

teln. Veranschaulicht den Aufbau, indem

> GrundclnstGllungen

hot pota toe

s/

Gl rot t-'atorr..

Zielcomputer ankommen und dort wieder zusammengesetzt werden. Der Vorteil dieser Paketvermittlung ist die hohe Ausfallsicherheit. Wenn ein Abschnltt im

ihr die Zettel auf einem Plakat anordnet und die Verknpfungen zwischen den
Seiten einzeichnet.

Sltenname
r r
r

,=''Jgr'

f r J rtr' .:,fel'i,,,{,,1.', =.

E)

tl
rl

Home Beisoiele Soiele


Ouiz
Ha

6r ,1*,r6i 1.-:-li 'Ti'J',

uptebene

Home

i
:..11

Eeispielc
Spiele Unterebene Quiz

'+',81, ii,trtrrrfi

i-flrjttt*rrfir i, L =,'m +,,,6"fi,j',trr'6, 4 glrrTri{r't*,'f, ll


Webs ite- Ge n
e

Tests Downloads Links

Tests

Downloads

Iinks
Daten werden in Pakete aufgeSichtbares Men

rato r : Seite n be r si cht

teilt und gelangen aulverschedenen Routen zumZiel.

28

29