Internet und Webseiten

Internet und WebseitenJahresarbeit

Verfasser: Johannes Dostal

Betreuer: Karl Hruza

April 2010 Rudolf Steiner-Schule Wien Mauer

Seite 3

Inhalt

1. Vorwort ..........................................................................................................................Seite 4

2. Das Internet ...............................................................................................................Seite 5

2.1. Die Geschichte des Internets ....................................................................................Seite 5

2.2. So arbeitet das Internet ............................................................................................Seite 6

2.3. Struktur des Internets ...............................................................................................Seite 6

2.4. Das OSI-Modell .........................................................................................................Seite 8

2.5. Ethernet ....................................................................................................................Seite 11

2.6. DSL ............................................................................................................................Seite 12

2.7. TCP/IP ........................................................................................................................Seite 14

2.7.1. Der Header eines IP-Paketes .....................................................................Seite 16

2.8. Adressen und Domains .............................................................................................Seite 17

2.9. Der Weg durchs Internet ...........................................................................................Seite 18

3. Das World Wide Web .......................................................................................Seite 19

3.1. Grundlage und Geschichte ........................................................................................Seite 19

3.2. HTML .........................................................................................................................Seite 20

3.2.1. Hintergrundinforma� on ............................................................................Seite 20

3.2.2. So funk� oniert HTML ................................................................................Seite 21

3.3. CSS ............................................................................................................................Seite 46

3.4. JavaScript ..................................................................................................................Seite 51

3.5. PHP............................................................................................................................Seite 56

3.6. MySQL .......................................................................................................................Seite 59

4. Nachwort .....................................................................................................................Seite 60

1. Vorwort

Ich interessiere mich schon seit langer Zeit für die Funk� onsweise von Computern, IT-Geräten

und natürlich auch dem Internet. Allerdings benö� gt es sehr viel Zeit, um solche Dinge rich� g zu

verstehen. Als es darum ging ein Jahresarbeitsthema zu fi nden, kam dann der Gedanke auf, über

eines dieser Themen zu schreiben, da ich mir nun endlich einmal die Zeit nehmen wollte, mich

damit auseinanderzusetzen. Während mir die Funk� onsweisen in den meisten IT-Gebieten schon

etwas geläufi g waren, wusste ich über das Internet fast gar nichts. Und so nahm ich mir das Thema

„Internet“ als Jahresarbeitsthema. Doch schon recht früh musste ich feststellen, dass es kaum

Möglichkeiten gab mich mit diesem Thema prak� sch auseinanderzusetzen. Also beschloss ich, mein

Thema auf „Internet und Webseiten“ zu erweitern. Nun konnte ich mich auch mit der Entstehung

einer Webseite beschä� igen und selber welche gestalten. Außerdem ist das World Wide Web die

größte, bekannteste und am meisten genutzte Applika� on des Internets, viele Menschen verwechseln

sogar das eine mit dem anderen. Internet und Webseiten haben also einen engen Zusammenhang,

allerdings sind es immer noch zwei verschiedene Sachen.

So vielsei� g und groß wie das Internet ist, so vielsei� g und groß ist auch die Informa� on über das

Internet. Bemerkenswert ist allerdings, dass es kaum Bücher zu dem Thema gibt. So stammt auch ein

Großteil meiner Informa� onen aus dem Internet selbst, dort hingegen gibt es wohl mehr Ar� kel zu

einem einzigen Kapitel meiner Jahresarbeit, als es Bücher für ein gesamtes Arbeitsthema für jeden

meiner Kollegen gibt. Einen Großteil der inves� erten Zeit verbrachte ich also damit, mich durch die

verschiedenen Ar� kel zu wühlen und überall die beste Informa� on herauszupicken. Ich hoff e diese

Masse an Informa� onen auch für Laien gut verständlich zusammengesetzt zu haben.

Trotz des engen Zusammenhangs von Internet und Webseiten habe ich beschlossen, diese Themen

so weit als möglich separat voneinander zu behandeln, um eine bessere Übersicht zu gewähren.

Der erste Teil dieser Arbeit widmet sich der Funk� onsweise des Internets und was alles dafür nö� g

ist. Der zweite Teil handelt über das World Wide Web und im speziellen über die Webseite, welche

Programmiersprachen dafür notwendig sind und welche Möglichkeiten es gibt, um eine Webseite zu

gestalten.

Seite 4

Seite 5

2. Das Internet

2.1. Die Geschichte des Internets

Das Internet ging aus dem im Jahr 1969 entstandenen ARPANET hervor, einem Projekt der einem

Projekt der Advanced Research Project Agency (ARPA) des US-Verteidigungsministeriums. Allerdings

sollte das ARPANET nicht militärischen Zwecken dienen, sondern rein wissenscha� lichen Zwecken.

Ziel des Projekts war zunächst, die damals knappen Rechnerkapazitäten sinnvoll zu nutzen. Anfangs

befanden sich die Knotenpunkte des ARPANETs nur in den USA, später wurden auch einige Punkte in

Europa angeschlossen, zu diesem Zeitpunkt setzte sich allerdings schon langsam der Begriff Internet

durch. Die Anfänge des Internets sind eng mit dem Betriebssystem Unix (Heute basieren Mac- und

Linuxsysteme auf Unix) verbunden. Nachdem das ARPANET auf die Protokolle TCP/IP[siehe Kapitel

2.7.] umges� egen ist, begann sich dann der Begriff Internet durchzusetzen.

Nach einer weit verbreiteten Legende bestand das ursprüngliche Ziel des Projektes vor dem

Hintergrund des Kalten Krieges in der Schaff ung eines verteilten Kommunika� onssystems, um

im Falle eines Atomkrieges eine störungsfreie Kommunika� on zu ermöglichen. In Wirklichkeit

wurden vorwiegend zivile Projekte gefördert, auch wenn die ersten Knoten von der ARPA fi nanziert

wurden. Anlass der Gründung von der ARPA war, dass die Russen den ersten Satelliten, Sputnik,

in den Weltraum beförderten. Durch die Gründungsgeschichte der ARPA wird das Gerücht eines

militärischen Zwecks vom ARPANET nur verstärkt. Allerdings betonte der geis� ge Erfi nder des

Internets, Bob Taylor, auch bei der 40 jährigen Jubiläumsfeier des Internets ganz stark, dass das

Internet von ihm und seinen Kollegen nie für militärische Zwecke gedacht war.

Rasanten Au� rieb erhielt das Internet seit dem Jahr 1993, in welchen das World Wide Web[siehe

Kapitel 3.] von Tim Berners-Lee erfunden wurde. Durch diese Applika� on des Internets wurde es

erstmals möglich, Grafi ken im Web zu verwenden. Außerdem war die Bedienung des WWW so

einfach, dass erstmals auch Laien etwas mit dem Internet anfangen konnten. In diesem Jahr wurden

(besonders in den USA) so viele Computer und Internetanschlüsse gekau� , dass ein Großteil des

amerikanischen Telefonnetzes in der Zeit nach Weihnachten lahmgelegt wurde, da es hoff nungslos

überlastet wurde.

Bis heute ist das WWW die meist genutzte Applika� on im Internet und wird es wohl auch bleiben.

Trotzdem kamen im Laufe der Zeit immer neue Applika� onen dazu, und neue Techniken wurden

entwickelt, die teilweise neben den alten und teilweise sta� der alten Techniken zum Einsatz

kommen. Die Internet-Telefonie mit der Voice over IP (VoIP) Technologie erfreut sich sehr großer

Beliebtheit, aber auch andere Dinge wie Groupware[1], Wikis, Blogs, Breitbandzugänge (DSL [siehe

Kapitel 2.6.]), Peer-to-Peer-Vernetzung[2], sowie Onlinespiele zählen zu neueren Applika� onen des

Internets.

1 Als Groupware bzw. Gruppen-So� ware bezeichnet man eine So� ware zur Unterstützung der Zusammenarbeit in einer Gruppe über zeitliche und/oder räumliche Distanz hinweg. Groupware ist die Umsetzung der theore� schen Grundlagen der computergestützten Gruppenarbeit in eine konkrete Anwendung. Gelegentlich werden auch Hardware-Komponenten zu einer Groupware hinzugezählt.

2 Die Verbindung zwischen zwei gleichgestellten Computern.

Seite 6

2.2. So arbeitet das Internet

Das Internet ist nicht, wie viele denken, ein einziges Netzwerk, das über die gesamte Erde geht und

alle Computer miteinander verbindet. Es besteht aus vielen kleinen Netzwerken, die miteinander

verbunden sind. Diese werden von Universitäten, Privatunternehmen, staatlichen Organen und

Internetprovidern[1] fi nanziert und erhalten.

In vielen Ländern wird ein Hochleistungsnetzwerk von der Regierung oder einer Telefongesellscha�

betrieben, welches Großrechenzentren miteinander verbindet. Diese Netzwerke bilden sozusagen

die Autobahnen im Internet, an die die kleinen Netzwerke angeschlossen werden. Diese

Hochleistungsleitungen nennt man im Allgemeinen Backbones.

NICs (Network Informa� on Center, engl. Netzwerk-Informa� onszentrum) helfen den Organisa� onen

das Internet zu verwenden. Das InterNIC, welches von der Na� onal Science Founda� on (von den

USA) unterstützt wird, hil� den lokalen NICs bei der Verwaltung.

Das Internet Registry verzeichnet die Adressen und verbindet die Internetadressen mit einer

Domain[siehe Kapitel 2.8.], meistens wird diese Aufgabe vom lokalen NIC übernommen.

Die Internet Society ist eine private, nicht kommerzielle Organisa� on, die technische und

architektonische Empfehlungen für das Internet erstellt, wie z.B. den TCP/IP Standard.

Es gibt noch einige weitere Organisa� onen, die für Teilbereiche des Internets zuständig sind, diese

werden teilweise später erläutert.

2.3. Struktur des Internets

Die Struktur des Internets lässt sich gut mit der eines Straßennetzes vergleichen. Es gibt die

Hauptverbindungen, im Falle des Straßennetzes sind das die Autobahnen, im Internet sind es

sogenannte Backbones (engl. Rückgrat, da diese Netze das Rückgrat für das Internet bilden).

Diese Backbones verbinden Internet-Knotenpunkte[2] miteinander, wie zum Beispiel in Wien den

VIX (Vienna Internet eXchange) welcher Österreichs größter Internet-Knotenpunkt ist. An solchen

Internet-Knotenpunkten werden nun kleinere Netzwerke (z.B. von Telekom Austria) angeschlossen.

Diese kann man mit Hauptstraßen vergleichen, die von der Autobahn wegführen. Beim Internet

werden an die Netzwerke von Internet Providern die einzelnen Häuser angeschlossen, in welchen

sich meist auch noch ein kleines Netzwerk befi ndet, welches man Ethernet [siehe Kapitel 2.5.] nennt.

An diesem ist der Computer angeschlossen, mit dem man ins Internet geht. Das Ethernet ist also wie

die kleinen Straßen und Gassen, die zu den einzelnen Häusern führen. Falls man kein Ethernet haben

sollte, wäre dies einfach als ob man an einer Hauptstraße wohnen würde.

1 Internet Dienstanbieter. Internetprovider bieten meistens Internetanschluss und Server gegen monatliche Gebühren an.

2 An sogenannten Internet Exchange Punkten können einzelne Netzwerke angeschlossen werden, die so miteinander verbunden werden.

Seite 7

Europäische Serverzentren verbunden mit Backbones (Quelle: de.wikipedia.org)

Seite 8

2.4. Das OSI-Modell

Das OSI-Schichtenmodell (auch OSI-Referenzmodell; engl. Open Systems Interconnec� on Reference

Model) ist ein Schichtenmodell der Interna� onalen Organisa� on für Normung (ISO). Es wurde als

Designgrundlage von Kommunika� onsprotokollen entwickelt.

Die Aufgaben der Kommunika� on wurden dafür in sieben aufeinander aufgebaute Schichten (layers)

unterteilt. Für jede Schicht exis� ert eine Beschreibung, in welcher steht, was diese zu leisten hat.

Diese Anforderungen müssen von den Kommunika� onsprotokollen realisiert werden. Die konkrete

Umsetzung wird dabei nicht vorgegeben und kann daher sehr unterschiedlich sein. Deswegen

exis� eren für jede dieser Schichten zahlreiche Protokolle. Standardisiert wurde das Modell 1983 von

ISO, die Entwicklung begann allerdings schon 1979.

In einem Netzwerk, in welchem meistens viele Dienste zur Verfügung stehen, ist die Kommunika� on

nicht so einfach wie man sich das vorstellt. Gleichzei� g muss Sicherheit und Zuverlässigkeit für die

gesendeten Daten gewährt werden. Die Probleme die hierbei gelöst werden müssen, reichen von

Fragen der elektronischen Übertragung über eine geregelte Reihenfolge in der Kommunika� on bis hin

zu abstrakteren Aufgaben, die sich innerhalb der kommunizierenden Anwendungen ergeben.

Wegen dieser Vielzahl an Problemen, die gelöst werden müssen, entschied man sich, diese in

einzelnen Ebenen zu beheben.

Jede dieser 7 Ebenen stellt Dienste zur Verfügung, die von der direkt darüber liegenden Ebene

genutzt werden kann. Die einzelnen Schichten bewirken folgendes:

Schicht 7 – Anwendungsschicht

Die Anwendungsschicht (engl. Applica� on Layer) ist die oberste der sieben hierarchischen Schichten.

Sie verscha! den Anwendungen Zugriff auf das Netzwerk (z.B. für Datenübertragungen, E-Mail, etc.).

Die Anwendungen selber liegen überhalb dieser Schicht und werden nicht vom OSI-Modell erfasst.

Schicht 6 – Darstellungsschicht

Die Darstellungsschicht (engl. Presenta� on Layer) setzt systemabhängige Darstellungen (z.B. ASCII

American Standard Code for Informa� on Interchange) in unabhängige Formen um, wodurch der

Datenaustausch zwischen verschiedenen Systemen ermöglicht wird.

Schicht 5 – Kommunika! onssteuerungsschicht

Die Kommunika� onssteuerungsschicht (engl. Session Layer) sorgt für die Kommunika� on zwischen

verschiedenen Systemen. Sie ermöglicht unter anderem einen synchronisierten Datenaustausch

sowie die rich� ge Adressierung, trotz unterschiedlicher Systeme.

Seite 9

Schicht 4 – Transportschicht

Zu den Aufgaben der Transportschicht (engl. Transport Layer) zählen die Segmen� erung von

Datenpaketen [siehe Kapitel 2.7. TCP/IP] und die Stauvermeidung.

Schicht 3 – Vermi! lungsschicht

Die Vermi! lungsschicht (engl. Network Layer) ist für die Adressierung und Übertragung der Pakete

zuständig. Sie defi niert im Prinzip das, wofür das IP [siehe Kapitel 2.7. TCP/IP] zuständig ist.

Schicht 2 – Sicherungsschicht

Aufgabe der Sicherungsschicht (engl. Data Link Layer) ist es, eine zuverlässige, weitgehend fehlerfreie

Übertragung zu gewährleisten. Dazu dient das Au# eilen des Bitdatenstroms in Blöcke und das

Hinzufügen von Prüfsummen. Fehlerha# e oder verlorengegangene Blöcke können durch Qui! ungs-

und Wiederholungsmechanismen[1] erneut angefordert werden. Die Blöcke werden auch als Frames

oder Rahmen bezeichnet.

Schicht 1 – Physikalische Schicht

Die Bitübertragungsschicht (engl. Physical Layer) ist die unterste Schicht. Sie stellt mechanische,

elektrische und weitere Hilfsmi! el zur Verfügung, um physikalische Verbindungen zu ak� vieren, bzw.

deak� vieren, sie aufrechtzuerhalten und Bits darüber zu transpor� eren. Das können z.B. elektrische

Signale, op� sche Signale (Lichtleiter, Laser), elektromagne� sche Signale (Drahtlose Netzwerke)

oder Schall sein. Auch alle Geräte, die solche Signale weiterleiten, sind der Bitübertragungsschicht

zugeordnet, wie z.B. Antenne, Verstärker, Stecker, Kabel, Repeater[2], Hub[3], etc.

Auf der nächsten Seite befi ndet sich eine gut dargestellte Tabelle des OSI-Modells.

1 Wenn ein Computer ein Datenpaket erhalten hat, schickt dieser eine Bestä� gung an den Absender, sollte diese Bestä� gung nach einem kurzen Zeitraum nicht eintreff en, wird das Paket erneut gesendet (Wiederholungsmechanismus). Sollte die Prüfsumme eines Paketes nicht s� mmen [siehe Kapitel 2.7. TCP/IP], wird dies dem Absender mitgeteilt und er sendet das Paket ebenfalls erneut (Qui! ungsmechanismus).

2 Signalverstärker

3 Gerät zur Verbindung von Netzwerkknoten

Seite 11

2.5. Ethernet

Kurzbeschreibung

Ethernet ist eine Technik für ein kabelgebundenes Datennetz, das ursprünglich für lokale

Datennetze (LANs) gedacht war und daher auch als LAN-Technik bezeichnet wird. Sie ermöglicht

den Datenaustausch in Form von Datenpaketen zwischen den in einem lokalen Netz (LAN)

angeschlossenen Geräten (Computer, Drucker etc.). Derzeit sind Übertragungsraten von 10

Megabit/s, 100 Megabit/s (Fast Ethernet), 1 Gigabit/s (Gigabit Ethernet) und 10 Gigabit/s spezifi ziert.

Normalerweise erstreckt sich Ethernet nur über einzelne Gebäude, allerdings ist es inzwischen

möglich, via Glasfaserkabel weitere Strecken zu überbrücken.

Ethernet umfasst Festlegungen für Kabeltypen und Stecker sowie für Übertragungsformen (Signale

auf der Bitübertragungsschicht, Pake� ormate). Ethernet entspricht größtenteils der IEEE-Norm

802.3.[1] Es wurde ab den 1990ern zur meistverwendeten LAN-Technik und hat andere LAN-Standards

wie Token Ring verdrängt oder, wie im Fall von ARCNET, in Industrie- und Fer� gungsnetzen zu

Nischenprodukten für Spezialgebiete gemacht.

CSMA/CD-Algorithmus

Der Algorithmus mit dem Namen „Carrier Sense Mul� ple Access with Collision Detec� on“ (CSMA/

CD) regelt den Zugriff der Systeme auf das gemeinsame Medium. Es ist eine Weiterentwicklung des

ALOHAnet-Protokolls, das in den 1960er-Jahren auf Hawaii zum Einsatz kam. Man kann sich diesen

Algorithmus wie eine Party vorstellen, auf der Menschen sind; das gemeinsame Verbindungs-medium

dieser Menschen ist die Lu" . Die Lu" dient in diesem Fall dazu, Worte zu übertragen. Wenn sich

nun mehrere Menschen unterhalten und zwei

gleichzei� g anfangen zu sprechen, merken sie

dies und hören auf zu sprechen bis einer wieder

neu ansetzt. Der Algorithmus macht im Prinzip

dasselbe, wenn z.B. zwei Computer gleichzei� g

auf ein Gerät (Drucker, Scanner, etc.) zugreifen

wollen, merken sie dies und versuchen nach

einem zufälligen Zeitraum wieder auf das Gerät

zuzugreifen. Wenn nun ein Computer auf das

Gerät zugrei" und ein anderer ebenfalls auf das

Gerät zugreifen möchte, merkt dieser, dass dieses

Gerät bereits besetzt ist und wartet bis es frei

wird. Bei dem Beispiel mit der Party wäre dies,

wie wenn man merkt, dass jemand anderer spricht und wartet, bis er ausgesprochen hat.

Eigentlich spielt dieser Algorithmus heute kaum noch eine Rolle, da die meisten Netzwerke im

Vollduplexmodus laufen, wodurch keine Kollisionen mehr entstehen können, da Switches für eine

1 Das IEEE (Ins� tute of Electrical and Electonics Engineers) hat einige Standards für So" ware und Datentransport festgelegt. Im Fall des Ethernets hat dies den Vorteil, dass so keine Kommunika� onsprobleme bei Komponenten verschiedener Firmen au" reten können.

Router dienen zur Verbindung von verschiedenen

Geräten innerhalb eines Netzwerks.

Seite 12

Zugriff saufl ösung sorgen. Trotzdem wird der CSMA/CD-Algorithmus im Ethernet beibehalten, da

dieser auch gewisse Paketgrößen vorgibt, um zu kleine Pakete zu vermeiden, die vorgegebenen

Größen hängen hierbei von der Übertragungsrate des Ethernets, sowie von der Übertragungsstrecke

ab. Bei 10 Mbit/s und 100 Mbit/s muss ein Datenpaket eine Minimalgröße von 64 Byte haben (davon:

14 Byte Header, 46 Byte Nutzdaten und 4 Byte CRC(Cyclic Redundancy Check, =Prüfsumme)). Bei den

1 Gigabit/s und 10 Gigabit/s Spezifi ka� onen muss ein Paket eine Minimalgröße von 520 Byte haben,

sollte diese nicht erreicht werden, wird das Paket einfach soweit aufgefüllt bis es die Minimalgröße

erreicht.

Verbesserungen

Ethernet funk� onierte früher nur gut, wenn es nicht ausgelastet war, sobald es über 50% ausgelastet

war, trat ein als Conges� on (Verstopfung) bekanntes Phänomen auf, wobei regelrechte Staus

entstanden, da der Chance Speicher für Kollisionen zu klein war. Dafür entwickelte man das Switched

Ethernet. Hierbei wurden die alten Hubs durch Switching Hubs ersetzt. Diese zerteilen nun die

Collision Domain (Kollisionsdomän) in mehrere Collision Domains, wodurch eine Kollision nur noch in

seltenen Fällen vorkommt. Die Switches ermöglichen auch einen Vollduplexmodus, wodurch Daten

von einem Gerät gleichzei� g gesendet und empfangen werden können. Allerdings muss hierfür das

Gerät diese Technologie auch unterstützen.

Broadcast

Früher wurden in Ethernets alle Daten an alle angeschlossenen Teilnehmer gesendet, dadurch

bestand das Risiko, dass Sendungen auch von Dri! en protokoliert werden konnten, obwohl man dies

nicht wollte. Heute besteht dieses Sicherheitsrisiko nicht mehr in dieser Form, da Switches zwischen

den einzelnen Geräten fungieren, wodurch nicht mehr alle Daten an alle Teilnehmer gesendet

werden, sondern nur noch an das gewünschte Ziel. Allerdings ist das Ethernet dadurch nicht absolut

sicher, da man immer noch Daten durch MAC[1]-Spoofi ng (seine eigene Netzwerkkennung so ändern,

dass man die gleiche wie das eigentliche Zielgerät hat) erhalten kann.

2.6. DSL

Digital Subscriber Line (engl. für Digitaler Teilnehmeranschluss) ist der heu� ge Standard für

einen normalen Internetanschluss. Es bezeichnet eine Reihe von Übertragungsstandards der

Bitübertragungsschicht, bei der Daten mit hohen Übertragungsraten (bis zu 500 Mbit/s[2]) über

einfache Kupferleitungen wie die Teilnehmeranschlussleitung gesendet und empfangen werden

können. DSL handelt die Verbindungsparameter wie Frequenz, Downstream- sowie Upstream-

Übertragungsrate[3] aus. Die tatsächliche Internet-Übertragungsrate hängt allerdings vom Internet-

1 Die MAC-Adresse ist die Hardwareadresse zur Iden� fi zierung jedes einzelnen Geräts innerhalb eines Netz-werks. MAC-Adressen werden vom IEEE vergeben

2 h! p://www.onlinekosten.de/news/ar� kel/33621/0/VDSL2-Ericsson-erreicht-500-Mbits-im-Live-Test

3 Die Geschwindigkeit, in welcher man Daten aus dem Internet empfängt und senden kann.

Seite 13

Zugangsserver ab. Ursprünglich wurde die

DSL-Technologie dazu entwickelt, dass man

über die Telefonleitung gleichzei� g ins Internet

und telefonieren kann, da DSL digitale Daten

schickt, können diese gleichzei� g mit einem

Telefongespräch gesendet werden, da sich die

Frequenzbereiche nicht überschneiden, wie bei

einem herkömmlichen Modem. Ein weiterer

Vorteil der digitalen Übertragung liegt darin,

dass die Übertragung auf einem viel breiteren

Frequenzbereich sta� indet, wodurch wesentlich

höhere Geschwindigkeiten bei der Übertragung

gegeben sind. Beim Normalverbraucher wird

die DSL Verbindung ganz normal über die

Kupferdrah� elefonverbindung geleitet, allerdings

gibt es in der Industrie auch eigene DSL-Leitungen

die teilweise auch aus Glasfaser bestehen, da es bei dem Übertragungstyp nicht auf die Leitungen,

sondern auf das übertragende Modem ankommt.

Es gibt verschiedene Typen von DSL, die Verschiedenheiten liegen dabei in erster Linie bei

verschieden Übertragungsraten.

• ADSL (Asymmetric Digital Subscriber Line / engl. „asymmetrischer, digitaler Teilnehmer-

Anschluss“); wie der Name bereits verrät ist diese Art asymmetrisch im Vergleich von

Downstream und Upstream. Der Downstream ist hierbei erheblich schneller als der Upstream

und ist damit an den Normalverbrauchen angepasst, der wesentlich mehr downloadet als

uploadet.

• SDSL (Symmetric Digital Subscriber Line); diese Anschlussmöglichkeit hat eine gleichhohe Down-

und Upstreamrate und ist damit an Geschä! skunden angepasst, die auch einen schnellen Upload

benö� gen.

• VDSL (Very High Speed Digital Subscriber Line)

Ein DSL-Modem zur Verbindung mit dem Internet.

Seite 14

2.7. TCP/IP

Das Internet funk� oniert mit der Packet-Swiching-Technologie. Das heißt, dass Daten in einzelne

Pakete zerlegt werden bevor sie verschickt werden. Die Pakete werden unabhängig voneinander

verschickt und können auch über verschiedene Wege geleitet werden, je nach Auslastung der

verschiedenen Routen. Am Zielort angelangt werden die Daten wieder zusammengesetzt.

Zwei Protokolle teilen die Daten auf, schicken sie durch das Internet und setzen sie wieder zusammen:

das Transmission Control Protocol (TCP) teilt die Daten in Pakete auf und setzt sie beim Empfänger

wieder zusammen, das Internet Protocol (IP) ist für die Zustellung der Pakete verantwortlich.

Gesendete Pakete haben ein maximales Datenvolumen von 1.452 Byte, das IP kann zwar bis zu

65.535 Byte große Pakete transpor� eren, allerdings nicht das Ethernet, welches nur 1.500 Byte große

Pakete transpor� eren kann, durch welches die Daten auch fl ießen müssen.

Zusätzlich benö� gen der Header von IP und TCP je 20 Byte weitere 8 Byte

werden vom Point-to-Point Protocol, welches für die Kommunika� on

zwischen Internet und Ethernet zuständig ist, benö� gt. Dadurch ergibt sich

eine maximale Größe von 1.500 − 20 − 20 − 8 = 1.452 Byte.

Jedes dieser Pakete bekommt einen Header, in dem Informa� onen stehen,

beispielsweise in welcher Reihenfolge die Pakete zusammen gesetzt

gehören. Beim Zusammenstellen der Pakete berechnet TCP auch eine

Prüfsume, die sich aus der genauen Datenmenge des Paketes ergibt.

Die Datei wird vom TCP in Pakete aufgeteilt,

welche eine Prüfsume im Header haben.

Die Pakete werden vom IP in „Briefumschläge“ gesteckt. Diese werden mit der Zieladresse versehen.

Die IP-Briefumschläge erhalten zusätzlich einen Header, der Absenderadresse, Zustelladresse und

ein Zeitraum, der für die Übertragung vorgesehen ist, beinhaltet. Bei zu langen Übertragungszeiten

werden die Pakete einfach verworfen.

Seite 15

Absendender Router

Die Pakete werden durch das Internet zu ihrem Zielort geschickt.

Empfänger

Beim Empfänger errechnet TCP die Prüfsumme des Paketes und vergleicht sie mit der mitgeschickten

Prüfsumme des Senders. Sollten die Summen nicht übereins! men, weiß TCP, dass bei der

Übertragung ein Fehler aufgetreten sein muss. In diesem Fall wird das Paket weggeworfen und der

Absender um eine erneute Übermi" lung des Pakets gebeten.

Bei diesem Paket stellt TCP fest, dass die

Prüfsummen nicht übereins! mmen und fordert

daher das Paket erneut an.

Die erneute Sendung ist nun rich! g angekommen.

Sobald alle Pakete intakt angekommen sind, werden sie von

TCP wieder in die ursprsüngliche Datei zusammengesetzt.

Seite 16

2.7.1. Der Header eines IP-Paketes

Wie vorher erwähnt, hat jedes Datenpaket, das durch das Internet geschickt wird einen Header

(Kopfdatenbereich). Die folgende Tabelle zeigt den Inhalt eines IPv4 Headers.

Erklärung:

• Version: Gibt die Version des IP (internet Protocol) an, Standard für das Internet ist momentan

Version 4 (IPv4)

• IHL (Internet Header Length): Gibt die Größe der Headers an, wobei die Zahl mit 32bit mal

genommen werden muss. Steht hier beispielsweise eine 5, so ist der Header 5*32 Bit = 160 Bit

oder 20 Byte lang, was zugleich der minimalen Größe eines Headers entspricht. Die IHL dient

dazu, dass der Empfänger weiß, wo der Content (Inhalt) des Paketes beginnt.

• TOS (Type of Service): Gibt Eigenscha� en für die Übertragung an, u.a. die Priorität eines Paketes.

Falls es wo zu Überlastungen kommen sollte, kann ein Router die weniger wich� gen Pakete

verwerfen, damit die wich� gen weitergeleitet werden können.

• Total Length: Zeigt die Gesamtlänge eines Paketes (Header+ Daten) in Byte an. Die maximale

Größe beträgt 65.535 Byte (64KB).

• Iden� fi ca� on: Dieses und die beiden folgenden Felder Flags und Fragment Off set steuern die

Reassembly (Zusammensetzen von zuvor fragmen� erten IP-Datenpaketen). Eindeu� ge Kennung

eines Datagramms. Anhand dieses Feldes und der 'Source Address' kann der Empfänger

die Zusammengehörigkeit von Fragmenten detek� eren und sie wieder zusamenfügen. Die

Iden� fi ka� on des Pakets ist notwendig, falls das Paket für die unteren Übertragungsschichten in

kleinere Pakete (Fragmente), zum Beispiel bei Ethernet maximal 1500 Byte, zerlegt werden muss.

Jedes Fragment enthält den vollständigen IP-Header zusammen mit einem Anteil der Daten.

• Flags: Gibt Informa� onen über die Fragmen� erung an:

Bit 0 : reserviert, muss 0 sein

Bit 1 (DF (Don't Fragment)) : 0/1 darf/darf nicht zerlegt (fragmen� ert) werden

Bit 2 (MF (More Fragments)) : 0/1 letztes Fragment/weitere Fragmente folgen

Fragment Off set: Die laufende Nummer des ersten Bytes im Datenteil rela� v zum ersten Byte

des gesamten Datagramms.

• TTL: Time To Live. Zähler für die maximale Lebensdauer eines Datagramms. Der Sender setzt TTL

auf einen Startwert (zurzeit 64). Jeder Router auf dem Weg dekremen� ert TTL. Ist der Wert Null

erreicht, wird das Datagramm vernichtet.

• Protocol: Spezifi ka� on für das höhere Protokoll (zum Beispiel 6 für TCP und 17 für UDP).

Seite 17

• Checksum: Prüfsumme für den Header (Summe in Einerkomplement)

• Quellenadresse und Zieladresse: Die vollständigen IP-Adressen von Sender und Empfänger.

• Op� onen + Pad: Mögliche zusätzliche Op� onen und eventuelle Füllbits. Die Anzahl der Op� onen

berechnet sich aus der angegebenen Header-Länge.

2.8. Adressen und Domains

Um Daten im Internet versenden zu können, benö� gt man Adressen. Vom Internet Protocol

werden sogenannte IP-Adressen verwendet. Jeder Computer, der an das Internet angeschlossen

ist, bekommt eine solche IP-Adresse. Die IP-Adressen werden weltweit von der Internet Assigned

Numbers Authority (IANA) verwaltet. Diese teilt verschiedenen Regional Internet Registries (RIRs)

IP-Adressbereiche zu, welche von den RIRs weiter an Local Internet Registrys (LIRs) aufgeteilt

werden. Von diesen LIRs erhalten dann einzelne

Betriebe und Personen die IP-Adressen. Im Fall

eines normalen Endverbrauchers, der einen

Internetanschluss bei der Telekom Austria hat,

erhält die Telekom Austria einen Adressbereich

von NIC.at (dem österreichischen LIR) und teilt

aus diesem Adressbereich eine Adresse dem

Endverbraucher zu.

Die heute verwendeten IPv4-Adressen bestehen aus vier Zahlen zwischen 0 und 255, die jeweils

durch einen Punkt getrennt sind. Eine IPv4-Adresse kann z.B. so aussehen: 208.77.188.166.

Da es sehr schwierig ist, sich so Internetadressen zu merken, besonders weil sich diese manchmal

ändern und es so prak� sch unmöglich ist, eine bes� mmte Webseite aufzurufen oder jemandem

eine E-Mail zu schicken, hat man das Domain Name System (DNS) entwickelt. Das DNS kann die uns

bekannten Internetdomains, z.B. www.orf.at, mit einer IP-Adresse (194.232.104.27) verbinden. Wenn

man nun eine Webseite wie www.orf.at abru! , so fragt der Computer zuerst bei einem DNS-Server

nach der IP-Adresse an, diese wird dann an den Computer geschickt und er kann den erwünschten

Server anwählen.

Die Zuständigkeitsbereiche der einzelnen RCRs.

Seite 18

2.9. Der Weg durchs Internet

Für jedes Datenpaket, das durch das Internet geschickt wird, wird der bestmögliche Weg erneut

ermi� elt. Wenn ein Paket durch das Internet verschickt wird, geschieht dies über eine End-zu-End

Verbindung. Das heißt, der Absender hat das Paket beispielsweise an 137.42.6.72 adressiert, da er

aber nicht direkt mit diesem Empfänger verbunden ist, schickt er es an einen Router, der dem Ziel

näher liegt und gleichzei� g noch Kapazitäten über hat. Dieser Router sucht wieder einen Router,

der dem Ziel näher ist und schickt es an diesen. Die Router schicken das Paket solange weiter in die

Richtung des Empfängers, bis es angekommen ist.

Die vier verschiedenfarbigen Pfeillienien zeigen mögliche Wege, um vom Sender zum Empfänger zu

kommen. Wenn eine Datei nun in mehrere Pakete geteilt versendet wird, kommt es nicht selten vor,

dass die Pakete über verschiedene Wege zum Empfänger gelangen, da die Auslastung der einzelnen

Verbindungen ständig variiert und dadurch auch jeweils verschiedene Verbindungen die besten sein

können.

Seite 19

3. Das World Wide Web

3.1. Grundlage und Geschichte

Das World Wide Web wurde von Tim Berners-Lee

erfunden und entwickelt. Er arbeitete damals

am CERN, welches Forschungseinrichtungen

auf französischem und Schweizer Gebiet

ha� e. Damals gab es in diesen Ländern

unterschiedliche Netzwerk-Infrastrukturen,

wodurch ein Kommunizieren unter den

Forschungseinrichtungen prak� sch unmöglich

war. 1989 schlug Berners-Lee dem CERN ein

Projekt vor, das auf dem Hypertext beruht und den

weltweiten Austausch sowie die Aktualisierung

von Informa� onen zwischen Wissenscha� lern

vereinfachen sollte. Er verwirklichte dieses

Projekt und entwickelte den ersten Browser

WorldWideWeb (der später in Nexus umbenannt wurde, um den Unterschied zum World Wide Web

deutlicher zu machen).

Das von Tim Berners-Lee entwickelte WWW basiert auf HTML (Hypertext Markup Language).

HTML wurde ebenfalls von Berners-Lee entwickelt, da die Sprache notwendig für das WWW ist.

Der erste Webserver, entwickelt und implemen! ert

auf einem neXTcube-Computer.

Der erste

Webbrowser,

WorldWideWeb

Seite 20

So wie das Internet größer wurde und sich weiterentwickelt hat, hat sich auch die Web-Sprache

weiterentwickelt. HTML befi ndet sich bereits in der 5. Genera� on (XHTML 1.0), wobei es auch noch

viele Zwischengenera� onen gab.

Außerdem werden heute weitere Programmiersprachen zum Au� au einer Website verwendet:

• CSS (Cascading Style Sheets) ist für die Struktur und das Layout der Webseite zuständig.

• JavaScript ist eine Programmiersprache, mit der man dynamische Objekte programmieren kann,

sodass sich die Seite auch an bes� mmte Umstände des abrufenden Computers anpassen kann,

was bei reinem HTML nicht möglich ist. Als es noch kein CSS gab, verwendete man JavaScript

auch für Layouts.

• PHP + MySQL. MySQL ist eine Datenbank, die sich auf einem Server befi ndet, und PHP wird wie

HTML vom Webbrowser abgerufen und kann dann auf die MySQL Datenbank zurückgreifen.

Diese Programmiersprachen werden z.B. in Foren verwendet. Wenn ich nun einen neuen Beitrag

in ein Forum schreibe, wird dieser von PHP entgegengenommen und in die MySQL Datenbank

integriert. Möchte ein anderer Forenuser nun die neuen Beiträge lesen, so zeigt PHP diese an,

nachdem es die Beiträge aus MySQL abgerufen hat.

3.2. HTML

Die Hypertext Markup Language (HTML

dt. Hypertext-Auszeichnungssprache) ist

eine textbasierte Auszeichnungssprache

zur Strukturierung von Inhalten wie Texten,

Bildern und Hyperlinks in Dokumenten. HTML-

Dokumente sind die Grundlage für das World

Wide Web und werden von einem Webbrowser

dargestellt. Neben den vom Browser angezeigten

Inhalten kann HTML noch Metainforma� onen,

z.B. über die verwendete Sprache oder

Urheberrechte enthalten. HTML wird vom World

Wide Web Consor� um (W3C) weiterentwickelt.

Die aktuelle Version von HTML ist 4.01, während

Version 5 in Entwicklung ist. Parallel dazu gibt es die Extensible Hypertext Markup Language (XHTML),

welche meistens verwendet wird.

3.2.1. Hintergrundinforma! on

Hypertext und Text

Es gibt eine moderne Kri� k an der Linearität von Text. Nicht unbedingt an der Linearität von

einzelnen Sätzen, sondern auf der Ebene von größeren Texten, die aus vielen in sich erkennbaren

Seite 21

Teilen besteht, aber auf Grund ihres Präsenta� onsmediums dazu verdammt ist, von vorne bis hinten

wahrgenommen zu werden.

Hypertext ist ein nicht lineares Medium zur Präsenta� on solcher Texte. Sta� dem Buchstabenwurm

gibt es viele einzelne Einheiten, die miteinander vernetzt sind. Dank der Hilfe von Computern

schwindet die Abhängigkeit von der Rolle, vom rein linearen Medium. Durch diese Möglichkeit konnte

man das Verfassen und Lesen von Texten dem menschlichen Denken (welches ebenfalls nicht linear

ist)besser anpassen als bisher.

Hypertext, Hypermedia und Mul! media

Hypertext ist nichts anderes als Text. Allerdings kein Text mehr, bei dem der Leser das Gefühl hat,

dass er ihn von vorne bis hinten lesen muss. Durch Hypertext wird Informa� on und Unterhaltung

vermi� elt. Unter den Medien geht der Trend allerdings hin zu visuell auff älligeren Mi� eln, also

Bildern, Videos und Simula� onen. Die Weiterentwicklung von Hypertext ist daher Hypermedia.

Hypermedia sollte nicht mit Mul� media verwechselt werden, während Mul� media für „viele Medien

zugleich“ steht, so bezeichnet Hypermedia auch viele Medien, welche allerdings in der Art von

Hypertext strukturiert sind. Das Präfi x „Hyper-“ steht also für eine bes� mmte Art von Organisa� on.

Diese Organisa� on zeichnet sich durch die Fragmen� erung einzelner Einheiten und eine intelligente

Vernetzung dieser Einheiten aus. Der Unterschied zwischen Hypertext und Hypermedia ist also

nicht sehr relevant, während der Unterschied zwischen „Hyper-“ und „Mul� -“ einen gravierenden

Unterschied darstellt. Während bei „Mul� -“ alles zugleich serviert wird und man leicht den Überblick

verliert, so wird bei „Hyper-“ nur die Informa� on geliefert wird, die man wünscht.

3.2.2. So funk� oniert HTML

HTML wird in einfache Dokumente geschrieben, diese haben das Dateiformat .html oder .htm. Um

HTML zu schreiben, gibt es aufwändige Programme wie Adobe Dreamweaver, welcher prak� sch das

gesamte Schreiben des Codes abnehmen kann (man kann ihn natürlich auch selber schreiben). Es

gibt allerdings auch einfachere Programme wie Notepad++, welches nur die Übersicht erleichtert.

Allerdings reicht im Prinzip ein einfacher Editor wie z.B. der von Microso# auf jedem Windows-

Computer. Wenn man also selber etwas probieren möchte, kann man das in den einfachen Editor

schreiben und das ganze über „Speichern unter“ abspeichern und hierbei darauf achten, dass es als

.html Dokument abgespeichert wird. Sollte diese Möglichkeit nicht zur Verfügung stehen, kann man

„Alle Dateien“ auswählen und an den Dateinamen

.html anhängen, z.B. index.html. Index ist

übrigens ein spezieller Name, sollten sich mehrere

Dokumente an einem Zielverzeichnis befi nden, so

wird automa� sch das Dokument mit dem Namen

Index geöff net.

<html>

<html>

</html>

Seite 22

Die erste Zeile weist den Browser darauf hin, dass es sich um ein HTML Dokument handelt. In der

zweiten Zeile steht ein / vor dem html, wodurch das Ende defi niert wird. Die Spitzklammern < >

defi nieren die Befehle, damit der Browser Befehle von Inhaltstext unterscheiden kann. Solche Befehle

in Klammern werden Tags genannt.

<head>

<html> <head> <title>Ich bin eine Webseite</title> </head>

</html>

In den als HTML defi nierten Bereich kann man nun Befehle schreiben. Als erstes braucht das HTML-

Dokument einen Kopf, in welchen man Befehle schreiben kann, welche vor dem Anzeigen ausgeführt

werden sollen (z.B. JavaScript, einen Titel, CSS,…). Der Kopf des Dokuments wird bei HTML durch

<head> defi niert, auch hier wird wieder ein Endtag </head> benö" gt. In diesen Kopf kommt nun der

Titel der Webseite, in unseren Fall „Ich bin eine Webseite“, dieser Titel wird durch das Tag <! tle>

</! tle> defi niert.

<body>

Der Body (Körper) beinhaltet den Inhalt der Seite und befi ndet sich in dem Tag <body></body>

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> Das ist Inhalt von der Seite </body>

</html>

Diesen einfachen Code kann man nun als HTML Dokument abspeichern und sich von einem

Webbrowser anzeigen lassen.

Tags

Tags sind Steuerzeichen für den Browser, um beispielsweise Bereiche oder Tabellen darzustellen.

Bevor CSS (Cascading Style Sheet) eingeführt wurde, konnte man mit HTML auch Text forma" eren,

genau genommen kann man das immer noch, es wird aber nicht mehr als „sauber“ angesehen.

Solche Tex# orma" erungstags haben beispielsweise so ausgesehen:

<B>Dieser Text ist fett</B>

Resultat: Dieser Text ist fe!

Seite 23

Das B in den Tags steht für bold, was Fe� bedeutet. Es ist groß geschrieben, weil früher der gesamte

HTML Code groß geschrieben wurde. Heute hingegen schreibt man alles klein, auch hier könnte man

die alte Methode anwenden und den Code groß schreiben, was wiederum als „nicht sauber“ gilt.

Hier eine Tabelle mit Beispielen für alte Tex� orma� erungstags. Achtung: Diese Tags können heute

durch CSS ersetzt werden!

Tags zum Defi nieren von Bereichen haben wir im obigen Beispiel bereits kennengelernt. Wenn man

so will, ist auch <html></html> ein Bereich, welcher HTML defi niert. In diesem Bereich fi nden sich

dann weitere Bereiche wie <head></head>, in welchen sich wiederum der Bereich < tle></ tle>

befi ndet. Der Hauptbereich ist allerdings <body></body>, in welchem sich der gesamte, als Seite

ersichtliche Inhalt befi ndet. Im Body können nun durch Tags viele weitere Bereiche defi niert werden.

Der wohl einfachste Tag zum Defi nieren eines Bereichs ist <p>:

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <p>Dieser Text steht in einem eigenen Paragraphen</p> <p>Dieser Text steht in einem eigenen Paragraphen</p> <p>Dieser Text steht in einem eigenen Paragraphen</p> <p>Dieser Text steht in einem eigenen Paragraphen</p> </body>

</html>

Ein neueres Tag, das wirklich nur dazu da ist einen Bereich zu defi nieren, ist <div> (von division, eng.

Bereich). Mit diesem Tag kann man auch mehrere Paragraphen zu einem Bereich defi nieren, aber

man kann auch Bilder oder andere Dinge in diesem Bereich defi nieren.

Seite 24

<html> <head> <title>Ich bin eine Webseite </title> </head> <body> <div> <p>Dieser Text steht in einem eigenen Paragraphen</p> <p>Dieser Text steht in einem eigenen Paragraphen</p> <p>Dieser Text steht in einem eigenen Paragraphen</p> <p>Dieser Text steht in einem eigenen Paragraphen</p> </div> </body></html>

Nun sind die vier Paragraphen in einem Bereich defi niert. Würde man sich diese jetzt anschauen,

würde man keinen Unterschied zu demselben Dokument ohne <div> sehen, allerdings weiß der

Browser, dass es sich hierbei um eine Einheit handelt. An dieser Einheit kann man später mit CSS

einige Dinge umstellen, z.B. die Schri! art, die Tex" orma# erung oder man kann der ganzen Einheit

eine andere Posi# on zuteilen.

Ein einfaches, o! verwendetes Tag ist <br />. Br steht für break, also einen Zeilenumbruch.

<html> <head> <title>Ich bin eine Webseite </title> </head> <body> Dieser Text steht in einer Zeile <br /> Da jetzt ein Zeilenumbruch war, steht das hier in einer neuen Zeile. </body>

</html>

Am Ende des Tags befi ndet sich immer ein /, da dieses Tag keinen Inhalt hat und daher nicht

geschlossen wird. Solche Tags nennt man „self closing tags“

Auch Überschri! en werden durch Tags defi niert, hierfür gibt es <h1> bis <h6>, wobei h1 die größte

und h6 die kleinste Überschri! ist.

Seite 25

<html> <head> <title> Ich bin eine Webseite </title> </head> <body> <h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <h3>Überschrift 3</h3> <h4>Überschrift 4</h4> <h5>Überschrift 5</h5> <h6>Überschrift 6</h6> <p>ganz normaler Text</p> </body>

</html>

Schachtelung von Tags

Wenn man nun mehrere dieser Tags verwendet, ist es wich� g, dass diese rich� g ineinander

geschachtelt sind. Es ist darauf zu achten, dass der erste Endtag zu dem vorigen Beginntag gehört.

Möchte ich beispielsweise einen Text fe� und kursiv mit den alten Tex� orma� erungstags schreiben,

so gibt es 2 Möglichkeiten dafür:

<b><i>Dieser Text ist kursiv und fett</i></b>

<i><b>Dieser Text ist kursiv und fett</b></i>

Bei der ersten Möglichkeit wird zuerst <b> und danach <i> aufgemacht, da also <i> das letzte

Beginntag ist, muss man <i> auch zuerst wieder schließen. Beim zweiten Beispiel ist es genau

andersrum, <b> ist das letzte Beginntag, also muss es auch zuerst wieder geschlossen werden.

Eine falsche Schachtelung von Tags würde z.B. so aussehen:

<b><i>Dieser Text ist kursiv und fett</b></i>

Hier wird als letztes <i> geöff net, aber <b> zuerst wieder geschlossen.

Kommentare

Man kann sich überall im HTML Code Kommentare schreiben, die der Browser einfach nicht anzeigt.

Damit kann man sich einfache No� zen in den Code machen, um sich an etwas zu erinnern, oder eine

Beschreibung von Befehlen einfügen. Das ist auch sehr nützlich, um Befehle, die man beim Entwerfen

der Webseite nicht braucht, ausklammern zu können, sodass man sie nicht gleich löschen muss, falls

man später wieder auf sie zurückgreifen möchte.



Seite 26

Sonderzeichen

Um Sonderzeichen im Text anzeigen zu können, konnte man nicht einfach dieses auch ins HTML

schreiben, sondern musste einen eigenen Befehl für jedes einzelne Sonderzeichen schreiben, hier ein

paar Beispiele:

Es gab für jedes einzelne Sonderzeichen so einen Befehl, der mit & anfängt und ; endet. Heute ist es

möglich die meisten dieser Zeichen, so wie sie sind, ins HTML zu schreiben. Allerdings gibt es ein paar

Dinge, die man nach wie vor über diesen Umweg schreiben muss.

Diese Zeichen werden ganz einfach deshalb noch so geschrieben, weil sie zum Defi nieren von

Befehlen benö� gt werden, und der Browser sonst nicht wüsste, ob es sich um einen Befehl, oder ein

einfaches Zeichen handelt.

Eine vollständige Liste von solchen Zeichen fi ndet man unter:

h! p://de.sel" tml.org/html/referenz/zeichen.htm

A! ribute

A! ribute sind dazu da, verschiedenen Tags genauere Informa� onen zu geben, die man selber

einstellen kann, z.B. Höhe und Breite einer Tabelle, oder wie groß ein gewisser Abstand sein

muss. Viel verwendete und wich� ge A! ribute sind id und class, diese werden dazu verwendet um

verschiedene Tags zu „benennen“ damit sie vom Browser erkannt werden. Dies ist nö� g damit andere

Programmiersprachen wie CSS auf die einzelnen HTML Tags zugreifen können.

Seite 27

<html> <head> <title>Ich bin eine Webseite </title> </head> <body> <p class=“beispiel“>Dieser Text steht in einem eigenen Paragraphen</p> <p id=“unikat“>Dieser Text steht in einem eigenen Paragraphen</p> <p class=“beispiel“>Dieser Text steht in einem eigenen Paragraphen</p> <p id=“einzigartig“>Dieser Text steht in einem eigenen Paragraphen</p> </body>

</html>

Das A� ribut wird also direkt in das Tag hineingeschrieben. Der genaue Unterschied zwischen id und

class besteht darin, dass id etwas Einmaliges ist, während eine gleichnamige class ö� er vorkommen

kann. In dem obigen Beispiel gibt es die class „beispiel“ und die ids „unikat“ und „einzigar� g“. Diese

Namen sind willkürlich und könnten auch komple� anders heißen, man muss nur dem anderen

zugreifenden Code (CSS) genau denselben Namen geben, damit er weiß, worauf er zugreifen muss.

Trennlinien

Auch für Trennlinien gibt es eigene Tags, da man früher sparsam mit Grafi ken umgegangen ist.

<hr> ist der einfache Befehl für eine Trennlinie. Diese kann man mit A� ributen verändern.

Hier ein paar Beispiele, was A� ribute bewirken können:

<hr />

Eine einfache Trennlinie

<hr width=“100“ />

Eine Trennlinie mit 100 Pixel Breite

<hr width=“70%“ />

Eine Trennlinie mit 70% Breite (vom angezeigten Bild)

<hr width=“100“ align=“left“ />

Eine Trennlinie mit 100 Pixel Breile, linksbündig

<hr width=“70%“ align=“right“ />

Eine Trennlinie mit 70% Breite, rechtsbündig

Seite 28

Schri� größe, Art und Farbe

Um Schri� größe, Art und Farbe ändern zu können, benö� gt man das Tag <font>. Die Schri� größe

wird mit dem A! ribut size, die Farbe mit color und die Schri� art mit face festgelegt. Schri� arten

können nur angezeigt werden, wenn der Benutzer diese auf seinem Rechner installiert hat, daher

empfi ehlt es sich, Standardschri� arten zu verwenden und/oder mehrere Schri� arten anzugeben,

welche durch Kommas getrennt werden.

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <font size=“7“>Das ist sehr großer Text</font><br /> <font size=“1“>Das ist winziger Text</font><br /> <font face=“Arial,Helvetica“>Dieser Text wird in Arial angezeigt, sollte diese Schriftart nicht vorhanden sein, wird auf Helvetica zurückgegriffen</font><br /> <font color=“blue“>Diese Schrift ist blau</font><br /> <font face=“Arial,Helvetica“ size=“5“ color=“red“>Bei diesem Tagwurden Schriftart, Farbe und Größe bestimmt</font> </body>

</html>

Wie man beim letzten font-Tag sehen kann, ist es auch möglich, einem Tag mehrere A! ribute zu

geben.

Seite 29

Listen

Auch für Listen gibt es in HTML eigene Tags, der Browser übernimmt hier das Nummerieren. Es gibt

zwei Arten von Listen, zum einen die Unordered List <ul> und zum anderen die Ordered List <ol>. In

diese Listen macht man einzelne Einträge mit dem Tag <li>. Dies sieht folgendermaßen aus:

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <ul> <li>Listeneintrag 1</li> <li>Listeneintrag 2</li> <li>Listeneintrag 3</li> <li>Listeneintrag 4</li> </ul> </body>

</html>

Eine Ordered List sieht so aus:

<html> <head> <title>Ich bin eine Webseite </title> </head> <body> <ol> <li>Listeneintrag 1</li> <li>Listeneintrag 2</li> <li>Listeneintrag 3</li> <li>Listeneintrag 4</li> </ol> </body>

</html>

Ordered Lists kann man mit A! ributen auch andere Ausführungsarten geben, wie z.B. alphabe" sche

Buchstaben, oder römische Zahlen.

<html> <head> <title>Ich bin eine Webseite </title> </head> <body> <ol type=“a“> <li>Listeneintrag 1</li> <li>Listeneintrag 2</li> <li>Listeneintrag 3</li> <li>Listeneintrag 4</li> </ol> </body>

</html>

Seite 30

<html> <head> <title>Ich bin eine Webseite</title> </head><body> <ol type=“I“> <li>Listeneintrag 1</li> <li>Listeneintrag 2</li> <li>Listeneintrag 3</li> <li>Listeneintrag 4</li> </ol> </body>

</html>

Es ist nicht nur möglich, dass man eine Liste von 1 wegzählen lässt, sondern auch, dass man bei einer

beliebigen Zahl startet:

<html> <head> <title>Ich bin eine Webseite</title> </head><body> <ol start=“9“> <li>Listeneintrag 1</li> <li>Listeneintrag 2</li> <li>Listeneintrag 3</li> <li>Listeneintrag 4</li> </ol> </body>

</html>

Verschiedene Arten, Text hervorzuheben

Als es noch kein CSS gab, musste man sich mit HTML-Tags behelfen, wenn man Text hervorheben

wollte. Hierfür gab es folgende A! ribute:

<blockquote> rückt den Text etwas ein:

<html> <head> <title>Ich bin eine Webseite</title> </head><body> <blockquote> Dieser Text ist etwas eingerückt </blockquote> </body>

</html>

Seite 31

<address> hebt den Text durch kursivschreiben hervor:

<html> <head> <title>Ich bin eine Webseite</title> </head><body> <address> Dieser Text wurde durch Address hervorgehoben </address> </body>

</html>

<pre> Präforma! erter Text:

<html> <head> <title>Ich bin eine Webseite </title> </head> <body> <pre> Dieser Text wurde mit PRE verändert </pre> </body>

</html>

Heute gibt es neben der Möglichkeit von CSS auch neue HTML-Tags, um Text zu betonen:

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <em>Emphasized text</em><br /> <strong>Strong text</strong><br /> <dfn>Defi nition term</dfn><br />

<code>Computer code text</code><br />

<samp>Sample computer code text</samp><br />

<kbd>Keyboard text</kbd><br />

<var>Variable</var><br />

<cite>Citation</cite>

</body>

</html>

Seite 32

Links

Links sind Verweise auf andere Seiten. Es ist allerdings auch möglich, sie dafür zu verwenden auf

eine andere Stelle der Seite zu springen, oder auf andere Dienste wie ein Mailprogramm oder

Druckerso� ware zu starten.

Um auf eine andere Stelle auf der Seite springen zu können, muss man zuerst die Stelle, auf die der

Browser dann springen soll mit einem Ankerpunkt markieren. Dies funk� oniert folgendermaßen:

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <a name=“ankerpunkt“ /> Hier befi ndet sich der Ankerpunkt

</body>

</html>

Um nun auf diesen Ankerpunkt zu kommen wird ein Verweis benö� gt, besser bekannt als Link:

<html>

<head>

<title>Ich bin eine Webseite</title>

</head>

<body>

<a href=“#ankerpunkt“>gehe zu Ankerpunkt</a>

<a name=“ankerpunkt“ />

Hier befi ndet sich der Ankerpunkt

</body>

</html>

Würden sich nun zwischen dem Link und dem Ankerpunkt viele andere Inhalte befi nden, sodass man

den Ankerpunkt nicht mehr sieht, würde der Browser automa� sch die Seite so anzeigen, dass dieser

im Bild ist, wenn man auf den Link klickt.

Am häufi gsten werden Links wohl dazu verwendet auf andere Seiten zu verweisen. Dies funk� oniert

im Prinzip gleich wie der Verweis auf einen Ankerpunkt:

Seite 33

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <a href=“http://www.google.at/“>Hier geht es zu Google</a> </body></html>

Bei solchen Verweisen ist es wich� g, dass der komple� e Link angegeben wird. Also nicht so, wie

wenn man direkt auf eine Seite geht und nur google.at eingibt. Würde man nicht die volle Adresse

angeben, würde der Browser davon ausgehen, dass er von der aktuellen Seite weg weitergehen soll.

Angenommen man ist auf der Seite h� p://www.example.com/beispiel und klickt auf dieser einen

falsch geschriebenen Link (in diesem Fall google.at) an, so geht der Browser auf folgenden Pfad:

h� p://www.example.com/google.at auf welcher er logischerweise keine Seite fi ndet.

Was so als Nachteil aussieht, ist allerdings eine wesentliche Vereinfachung, um innerhalb einer Seite

zu navigieren. Nehmen wir einmal an, wir befi nden uns auf h� p://www.amazon.de/Kamera-Foto und

es befi ndet sich auf dieser Seite ein Link zu der Kategorie Notebook und PC, so muss dieser nur mit

Notebook-PC verlinkt werden, ansta� mit h� p://www.amazon.de/Notebook-PC

Wenn man nun eine andere Seite verlinkt, ist es möglich einzustellen, wo diese geöff net wird. Heute

gibt es nur noch die Möglichkeit, diese im selben Tab oder in einem neuen zu öff nen. Früher gab es

auch noch Möglichkeiten, den Link an einer bes� mmten Stelle in derselben Seite anzuzeigen, was

heute nicht mehr benö� gt wird, da diese Seiten anders aufgebaut waren, als es heute üblich ist.

Das A� ribut target ist für das Ziel zuständig, für welches es die Werte “_blank“ für ein neues Tab und

“_self“ um die Seite im selben Fenster zu öff nen gibt.

Seite 34

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <a href=“http://www.google.at/“ target=“_blank“>Hier geht es zu Google, die Seite wird in einem neuen Tab geöffnet</a><br /> <a href=“http://www.google.at/“ target=“_self“>Hier geht es zu Google, die Seite wird im selben Tab statt der jetzigen Seite angezeigt</a> </body>

</html>

Da ein Link standardmäßig im selben Tag geöff net wird, ist es auch nicht mehr nö� g target=“_self“

zu verwenden.

Die zwei nicht mehr verwendeten Möglichkeiten sehen so aus:

_parent

_top

Deren Funk� onsweise bestand darin, nur einen Teil der Seite zu ändern, während andere Teile

unverändert bleiben.

Doch es gibt nicht nur die Standardwerte, man kann auch einen beliebigen Namen angeben, der

Browser öff net diesen Link dann in einem neuen Tab und merkt sich den angegebenen Namen. Wenn

man nun einen weiteren Link öff net, der als Ziel diesen Namen hat, so wird diese Seite in dem Tab mit

dem Namen geöff net.

Seite 35

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <a href=“http://www.google.at/“ target=“_max“>Google</a><br/> <a href=“http://orf.at/“ target=“_max“>ORF</a> </body>

</html>

Weitere Verweise:

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <a href=“telnet://xyz.wwx. at:1560“>Telnet Verweis</a><br /> <a href=“mailto:max.mustermann@gmail. com“>Mail an Max Mustermann</a> </body>

</html>

Bei einem Verweis, um ein Mail zu schreiben, wird der

standardmäßig eingestellte Maildienst verwendet.

Hier gibt es auch Möglichkeiten, weitere Funk! onen

einzubauen. Diese zusätzlichen Funk! onen werden mit

weiteren Parametern bes! mmt, welche von der Adresse

mit einem ? getrennt werden. Sollten mehrere Parameter

verwendet werden, so werden diese untereinander mit & getrennt.

Popup bei Firefox von einem

Telnetverweis.

Seite 36

Eine Kopie an weitere leiten:

[email protected]

Eine Blindkopie an weitere leiten:

[email protected]

Einen Betreff angeben:

Subject=Kartenreservierung

Einen vordefi nierten Body verwenden:

Body=Hier befi ndet sich ein vordefi nierter Body

In Verwendung sieht das so aus:

<html>

<head>

<title>Ich bin eine Webseite</title>

</head>

<body>

<a href=“mailto:[email protected][email protected]&subject=

Kartenreservierung“>Mail an Max Mustermann</a>

</body>

</html>

Seite 37

Grafi ken

Ein Bild einzufügen ist ähnlich wie das Einbauen eines Links, allerdings geht es hier darum, dass man

das Bild von Extern bezieht, aber in der Seite anzeigt.

<html> <head> <title> Ich bin eine Webseite </title> </head> <body> <img src=“http://www.insight21. net/waldorf-ed..gif“ /> </body>

</html>

Auch hier muss darauf geachtet werden, dass

der Quellpfad korrekt angegeben wird. Würde

sich das Bild im selben Ordner befi nden wie

die Seite, so müsste man als Quelle lediglich

[Bildname] angeben. Möchte man ein Bild in

einer anderen Größe angezeigt haben, kann man

diese Größe einfach defi nieren, das Bild wird dann

entsprechend gestreckt, gestaucht, vergrößert

oder verkleinert. Beispiel:

<html> <head> <title> Ich bin eine Webseite </title> </head> <body> <img src=“http://www.insight21. net/waldorf-ed..gif“ width=“80“ height=“150“ /> </body>

</html>

Für den Fall, dass eine Grafi k einmal nicht zur Verfügung stehen sollte, gibt es das A" ribut alt=““. In

dieses kann man den Namen des Bildes eintragen oder eine kurze Beschreibung. Wenn nun das Bild

nicht angezeigt werden kann, so wird sta" dessen der Text von alt angezeigt.

Seite 38

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <img src=“http://www.insight21.net/waldorf-ed..gif“ width=“80“ height=“150“ alt=“Farben“ /> </body></html>

Wenn man möchte kann man den Bildern mit

dem A� ribut border=““ einen Rahmen geben, die

Breite des Rahmens wird mit einem eingesetzten

Wert bes! mmt, welcher in Pixeln umgesetzt wird.

<html> <head> <title> Ich bin eine Webseite </title> </head> <body> <img src=“http://www.insight21.net/waldorf-ed..gif“ width=“80“ height=“150“ alt=“Farben“ border=“4“ /> </body>

</html>

Tabellen

Eine Tabelle besteht aus Zeilen und Spalten. Jede Zeile hat gleich viele Spalten. Ebenso ist jede

x. Spalte in allen Zeilen gleich lang. Beispiel: Die 2. Spalte in einer Tabelle hat in allen Zeilen die

gleiche Länge, vergrößert man die 2. Spalte in der ersten Zeile, so geschieht dies auch in allen andern

Zeilen. Um einen Text über mehrere Zeilen oder Spalten laufen zu lassen, gibt es Möglichkeiten,

Spalten/Zeilen miteinander zu verbinden.

Der Bereich einer Tabelle wird durch das Tag <table></table> defi niert:

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <table> </table> </body>

</html>

In dem Bereich der Tabelle werden Zeilen mit <tr></tr> defi niert, in welche mit <td></td> Spalten

eingefügt werden.

Seite 39

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <table> <tr> <td>Zeile 1 Spalte 1</td> <td>Zeile 1 Spalte 2</td> </tr> <tr> <td>Zeile 2 Spalte 1</td> <td>Zeile 2 Spalte 2</td> </tr> </table> </body>

</html>

Wie man sehen kann ist die Tabelle unsichtbar. Um einen Rahmen anzuzeigen benö� gt man das

A� ribut border=““. Die eingesetzten Zahlen werden immer in Pixel gerechnet.

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <table border=“3“> <tr> <td>Zeile 1 Spalte 1</td> <td>Zeile 1 Spalte 2</td> </tr> <tr> <td>Zeile 2 Spalte 1</td> <td>Zeile 2 Spalte 2</td> </tr> </table> </body>

</html>

Mit Hilfe von colspan (Spalten verbinden) und rowspan (Zeilen verbinden) kann man mehrere

Spalten/Zeilen miteinander verbinden, um beispielsweise einen Text über mehrere Spalten laufen zu

lassen.

Seite 40

<html> <head> <title>Ich bin eine Webseite</title> </head> <body> <table border=“3“> <tr> <td>Zeile 1 Spalte 1</td> <td colspan=“2“>2 Spalten verbunden</td> </tr> <tr> <td>Zeile 2 Spalte 1</td> <td>Zeile 2 Spalte 2</td> <td rowspan=“2“>2 Zeilen verbunden</td> </tr> <tr> <td>Zeile 3 Spalte 1</td> <td>Zeile 3 Spalte 2</td> </tr> </table> </body></html>

Zu beachten ist hierbei, dass man bei den Spalten und Zeilen, die man mit Colspan und Rowspan

verbunden hat, immer die Spalten und Zeilen, die mit der ersten verbunden wurden nicht noch

einmal aufschreibt. In dem obigen Beispiel wurden die dri� e Spalte in der ersten Zeile und die dri� e

Spalte in der dri� en Zeile weggelassen.

Weitere Eigenscha� en von Tabellen fi ndet man unter:

h� p://www.w3schools.com/tags/tag_table.asp

Frames

Frames dienen dazu, um andere Seiten innerhalb der eigenen Seite anzuzeigen, oder um mehrere

Seiten auf einer anzuzeigen.

<html> <head> <title>Ich bin eine Webseite</title> </head> <frameset cols=“70%,*“> <frame src=“http://www.ebay.at/“> <frame src=“http://www.google.at/“> </frameset> <noframes> <body> Dieser Text erscheint, falls der Browser keine Frames unterstützt. </body> </noframes>

</html>

Seite 41

cols=“70%,*“ steht dafür, dass das Fenster in zwei Spalten geteilt wurde, da nur ein Komma gesetzt

wurde. Die 70% stehen dafür, dass das erste Frame 70% der Fenstergröße groß ist, man kann hier

auch mit normalen Zahlen arbeiten, welche dann einfach in Pixeln gerechnet werden. cols=“*,350“

bedeutet zum Beispiel, dass das zweite Frame 350 Pixel breit ist. Der Stern * steht dafür, dass der

restliche verfügbare Platz genutzt wird, also im ersten Beispiel ist das zweite Frame 30% des Fensters

breit und im zweiten Beispiel füllt das erste Frame den restlichen, verfügbaren Platz aus.

Man kann Frames natürlich auch in Zeilen aufspalten, hierfür verwendet man sta! cols=““ rows=““.

<html> <head> <title>Ich bin eine Webseite</title> </head> <frameset rows=“70%,*“> <frame src=“http://www.ebay.at/“> <frame src=“http://www.google.at/“> </frameset> <noframes> <body> Dieser Text erscheint, falls der Browser keine Frames unterstützt. </body> </noframes>

</html>

Seite 42

In den oberen Beispielen kann man die Fensterbreite verschieben. Um das zu verhindern, wird

noresize hinter den Quellpfad gesetzt.

Wenn eine der Seiten größer sein sollte als der dafür vorgesehene Bereich, werden automa� sch

Scrollbalken angezeigt, möchte man diese nicht, so kann man das A� ribut scrolling=“no“ einsetzen.

<html> <head> <title>Ich bin eine Webseite</title> </head> <frameset rows=“70%,*“> <frame src=“http://www.ebay.at/“ noresize scrolling=“no“> <frame src=“http://www.google.at/“> </frameset> <noframes> <body> Dieser Text erscheint, falls der Browser keine Frames unterstützt. </body> </noframes>

</html>

Seite 43

Hier kann man in dem Frame, in dem Ebay angezeigt wird, nicht scrollen. Die Höhe kann man bei

beiden nicht ändern, da die von Ebay fi xiert ist, und es nicht möglich ist die Höhe von Google zu

verschieben ohne die von Ebay damit zu verändern. Allerdings ist es im Bereich von Google noch

möglich zu scrollen.

Es ist auch möglich die Breite zwischen den Frames mit dem A� ribut border=““ zu ändern.

Da diese Art Frames einzubinden sehr wenige Op! onen geboten hat, wurde später das iframe

erfunden –nein, nicht von Apple, der Name ist die Abkürzung für Inlineframe- das Iframe kann

einfach in den Body von HTML geschrieben werden, wodurch ein komplizierter Framebereich en" ällt.

Außerdem ist es so möglich, ein Frame wirklich in eine Seite einzubinden und das an einer beliebigen

Stelle.

Eine bekannte Einsatzmöglichkeit ist das Einbe� en von Anfahrtsplänen von Googlemaps.

Hier ein Beispiel von der Rudolf Steiner-Schule:

<iframe width=“700“ height=“500“ frameborder=“0“ scrolling=“no“ marginheight=“0“ marginwidth=“0“ src=“http://maps.google.at/maps?hl=de&q=Rudolf+Steiner-Schule+Wien-Mauer&ie=UTF8&hq=Rudolf+Steiner-Schule+Wien-Mauer&hnear=Wien&cid=229125965171737978&source=embed&ll=48.152488,16.271009&spn=0.014315,0.029998&z=15&iwloc=A&output=embed“></iframe><br /><small><a href=“http://maps.google.at/maps?hl=de&q=Rudolf+Steiner-Schule+Wien-Mauer&ie=UTF8&hq=Rudolf+Steiner-Schule+Wien-Mauer&hnear=Wien&cid=229125965171737978&source=embed&ll=48.152488,16.271009&spn=0.014315,0.029998&z=15&iwloc=A“ style=“color:#0000FF;text-align:left“>Größere

Kartenansicht</a></small>

Seite 44

Der HTML-Code wird von Google genau so zur Verfügung gestellt, sodass man ihn nur noch mit Copy

& Paste in die Webseite einbinden muss. Allerdings ist das schon mehr als nur ein Iframe, das reine

Iframe ist:

<iframe width=“700“ height=“500“ frameborder=“0“ scrolling=“no“ marginheight=“0“ marginwidth=“0“ src=“http://maps.google.at/maps?hl=de&q=Rudolf+Steiner-Schule+Wien-Mauer&ie=UTF8&hq=Rudolf+Steiner-Schule+Wien-Mauer&hnear=Wien&cid=229125965171737978&source=embed&ll=48.152488,16.271009&spn=0.014315,0.029998&z=15&iwloc=A&output=embed“></iframe>

Wie man sehen kann, sind hier schon einige A! ribute, die von Google im Vorhinein festgelegt

wurden. Diese Werte kann man natürlich im Nachhinein ändern.

<small><a href=“http://maps.google.at/maps?hl=de&q=Rudolf+Steiner-Schule+Wien-Mauer&ie=UTF8&hq=Rudolf+Steiner-Schule+Wien-Mauer&hnear=Wien&cid=229125965171737978&source=embed&ll=48.152488,16.271009&spn=0.014315,0.029998&z=15&iwloc=A“ style=“color:#0000FF;text-align:left“>Größere Kartenansicht</a></small>

Diese zweite Häl" e des von Google zur Verfügung gestellten Codes ist im Prinzip nur ein Link, der zur

Googlemaps-Seite führt. Dieser Link befi ndet sich in dem Tex$ orma% erungstag <small>, wodurch der

Text etwas kleiner angezeigt wird. Das A! ribut Style wird im Kapitel CSS erklärt [sihe Kapitel 3.3.].

Seite 45

Es gibt noch einige weitere Funk� onen für HTML. Eine vollständige und immer aktuelle Liste der

Befehle mit Beschreibung der einzelnen Funk� onen fi ndet man unter:

h! p://www.w3schools.com/tags/default.asp

Metainforma! onen und Doctype

An den Anfang eines HTML-Dokuments wird immer der Doctype gesetzt. Diese

Dokumen! ypdefi ni� on gibt Informa� onen darüber, wie der Code in dem Dokument behandelt

werden soll. Sollte kein Doctype vorhanden sein, werden Standardeinstellungen verwendet, dies

sollte aber nicht der Fall sein, da solche Standardeinstellungen von Land zu Land unterschiedlich sein

können. So sieht ein Doctype aus:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

Auch HTML braucht eine genauere Defi ni� on, die so aussehen kann:

<html xmlns=“http://www.w3.org/1999/xhtml“>

Wie man sieht, wird diese Informa� on in das HTML-Tag als A! ribut geschrieben.

Die dri! e wich� ge Informa� on ist die Metainforma� on, ein Minimum der Metainforma� on sieht so

aus:

<meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-1“ />

Diese Informa� on wird in den Head vom HTML-Dokument geschrieben. Sichtbare Auswirkungen

hat charset, dieses A! ribut bes� mmt, mit welcher Zeichencodierung die Webseite angezeigt wird.

Die bekanntesten sind wohl UTF-8 und ANSI, es wurden allerdings auch einige ISO-Normen für

verschiedene Erdteile festgelegt, wie z.B. iso-8859-1 für Westeuropa.

Seite 46

3.3. Cascading Style Sheets

Cascading Style Sheets (CSS) ist eine deklara� ve Stylesheet-

Sprache für strukturierte Dokumente. Sie wird in Bezug

auf Webseiten mit HTML verwendet. CSS legt fest, wie

der Inhalt von Webseiten dargestellt werden soll. Durch

die Einführung von CSS ist es möglich, den Inhalt von der

Gestaltung der Webseite zu trennen.

Mit CSS ist es möglich, die Ausgabe für verschieden Medien

unterschiedlich zu gestalten. So können Webseiten auch

auf Smartphones und anderen Geräten mit geringerer

Aufl ösung übersichtlich dargestellt werden, während sie auf

einem normalen Computer immer noch wie eine normale

Webseite aussehen. Es kann auch eine eigene Druckansicht

entworfen werden, sodass z.B. Hyperlinks in anderen

Farben dargestellt werden. Mit CSS kann man prak� sch alles

auf der Webseite gestalten. Von der einfachen Schri� art

über die Posi� onierung von Elementen bis hin zu verschiedenen Darstellungen auf verschiedenen

Geräten.

So wird CSS bei Webseiten verwendet

Man könnte sagen, CSS besteht aus besseren A! ributen für HTML. Es kann auch genauso eingesetzt

werden. Nehmen wir zur Anschauung das Beispiel mit Paragraphen von HTML:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html xmlns=“http://www.w3.org/1999/xhtml“> <head> <title> Ich bin eine Webseite </title> </head> <body> <p>Dieser Text steht in einem eigenen Paragraphen</p> <p style=“ font-family: Helvetica,Calibri,sans-serif;“>Dieser Text steht in einem eigenen Paragraphen</p> <p style=“ color:red;“>Dieser Text steht in einem eigenen Paragraphen</p> <p style=“ margin-top:100px;“>Dieser Text steht in einem eigenen Paragraphen</p> </body>

</html>

Seite 47

CSS befi ndet sich sozusagen in einem eigenen A� ribut. Beim ersten Paragraphen kann man sehen,

wie es ohne eine Veränderung durch CSS aussehen würde. Font ist die Schri� , folglich ändert man

mit font-family: die Schri� art, bei mehreren Möglichkeiten werden die Schri� arten durch Kommas

getrennt. Wie man sehen kann wird mit color: die Farbe der Schri� geändert, in diesem Fall Rot.

margin-top: defi niert den Abstand von oben, also wieviel Abstand zum nächsten darüber liegenden

Element eingehalten werden soll, in diesem Fall sind es 100 Pixel. Bei CSS müssen auch immer die

Maßeinheiten angegeben werden; px steht für Pixel, em defi niert die Breite eines „m“ von der

verwendeten Schri� art und en die Breite vom „n“ der verwendeten Schri� art. Um zu erkennen, wo

ein Befehl endet wird am Schluss immer ein ; gesetzt, so können auch mehrere Befehle in ein style-

A� ribut gesetzt werden, Dies sieht so aus:

<p style=“font-family: Arial,serif; color:blue ; margin-left:15em;“>Dieser Text steht in einem eigenen Paragraphen</p>

Dieser Text würde nun in Arial und blau angezeigt werden und sich 15„m“ vom linken Rand en! ernt

befi nden.

Wenn man jedes einzelne Tag so gestalten würde, würde dies sehr aufwändig und vor allem

unübersichtlich sein. Deswegen lagert man CSS aus, um in HTML keine deklara" ven Befehle, die die

Übersicht erschweren, zu haben. Dazu dienen die bei HTML angesprochenen A� ribute class und

id. Der Paragraph, der diese Änderungen bekommen soll, erhält class=“name“ für die Defi ni" on.

Wie dieser Paragraph nun genau aussehen soll, wird in einem eigenen Bereich style im Head des

HTML-Dokuments festgelegt. In diesen Bereich werden alle Eigenscha� en für alle defi nierten Tags

eingetragen, dies sieht so aus:

Seite 48

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html xmlns=“http://www.w3.org/1999/xhtml“> <head> <title>Ich bin eine Webseite</title> <style> .name { font-family: Arial,serif; color:blue; margin-left:15em; } </style> </head> <body> <p >Dieser Text steht in einem eigenen Paragraphen</p> <p class=“name“>Dieser Text steht in einem eigenen Paragraphen</p> <p>Dieser Text steht in einem eigenen Paragraphen</p> <p class=“name“>Dieser Text steht in einem eigenen Paragraphen</p> </body></html>

Damit der Browser weiß, bei welchen Elementen er die Befehle von CSS anwenden soll, werden diese

Befehle in einen eigenen Bereich in <style> geschrieben. Da es sich um eine Klasse handelt, wird

ein Punkt vor den Namen der Klasse gesetzt, nach dem Namen der Klasse wird eine geschwungene

Klammer geöff net. Nach dieser Klammer kommen die einzelnen Befehle, zwischen welchen

normalerweise Zeilenumbrüche sind, um eine bessere Übersicht zu gewähren. Nach den Befehlen

wird die geschwungene Klammer wieder geschlossen, damit der Browser weiß, dass die nächsten

Befehle nicht mehr zu der Klasse gehören. Wenn man nun eine Webseite mit Inhalt hat, welcher

verschieden gestaltet werden soll, so kann man mehrere Klassen anlegen und dann einfach eine neue

Defi ni# on in Style öff nen. Um eine id zu defi nieren macht man ebenfalls einen eigenen Bereich in

<style> auf, allerdings setzt man vor den Namen der id keinen Punkt sondern #.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html xmlns=“http://www.w3.org/1999/xhtml“> <head> <title>Ich bin eine Webseite</title> <style> .name { font-family: Arial,serif; color:blue ; margin-left:15em; } #beispiel { Font-size:20px; } #format { color:white; background-color:black; } </style> </head>

Seite 49

<body> <p id=“beispiel“>Dieser Text steht in einem eigenen Paragraphen</p> <p class=“name“>Dieser Text steht in einem eigenen Paragraphen</p> <p id=“format“>Dieser Text steht in einem eigenen Paragraphen</p> <p class=“name“>Dieser Text steht in einem eigenen Paragraphen</p> </body></html>

Wenn man Dinge allgemein festlegen möchte, kann man dafür ganz einfach einen Bereich für Body

aufmachen:

<html> <head> <title>Ich bin eine Webseite</title> <style> Body { Background-color:#e0eedc; Font-family:’Courier New’; } .name { font-family: Arial,serif; color:blue ; margin-left:15em; } #beispiel { Font-size:20px; } #format { color:white; background-color:black; } </style> </head> <body> <p id=“beispiel“>Dieser Text steht in einem eigenen Paragraphen</p> <p class=“name“>Dieser Text steht in einem eigenen Paragraphen</p> <p id=“format“>Dieser Text steht in einem eigenen Paragraphen</p> <p class=“name“>Dieser Text steht in einem eigenen Paragraphen</p> </body></html>

Seite 50

Vor Body muss kein Punkt oder keine Raute gesetzt werden, da es ein Standardbereich ist. Wie man

sehen kann, wurde ein leichter Hintergrund hinzugefügt und eine andere Schri� art gewählt; die

Schri� art wird allerdings nur bei den Bereichen verwendet, die keine eigene Defi ni� on haben (in

unserem Fall hat die class=“name“ eine eigene Schri� art und verwendet daher nicht die in Body

festgelegte Schri� art.).

Das Auslagern von CSS

Da der große style-Bereich im Head von HTML auch nicht sehr übersichtlich war, lagert man heute

CSS komple! aus. Dies funk� oniert, indem man den komple! en Inhalt von <style> in ein eigenes

Dokument schreibt. Diesem Dokument gibt man einen Namen und den Dateityp .css, und verlinkt

dieses Dokument im Head von dem HTML-Dokument:

HTML-Dokument:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html xmlns=“http://www.w3.org/1999/xhtml“> <head> <title>Ich bin eine Webseite</title> <link href=“style.css“ rel=“stylesheet“ type=“text/css“ /> </head> <body> <p id=“beispiel“>Dieser Text steht in einem eigenen Paragraphen</p> <p class=“name“>Dieser Text steht in einem eigenen Paragraphen</p> <p id=“format“>Dieser Text steht in einem eigenen Paragraphen</p> <p class=“name“>Dieser Text steht in einem eigenen Paragraphen</p> </body></html>

Seite 51

CSS-Dokument:

Body { Background-color:#e0eedc; Font-family:‘Courier New’;}.name { font-family: Arial,serif; color:blue ; margin-left:15em;}#beispiel { Font-size:20px;}#format { color:white; background-color:black;}

Der eingefügte Link hat das Quellverzeichnis “style.css“, das heißt, dass das Dokument den Namen

„style“ haben und im selben Ordner wie das HTML-Dokument gespeichert sein muss.

Die großen Vorteile von CSS gegenüber HTML-A! ributen besteht darin, dass es wesentlich mehr

Gestaltungsmöglichkeiten gibt durch eine komple! e Trennung von Inhalt und Gestaltung, welche

nicht nur zu mehr Übersicht für den Programmierer führt, sondern auch die Möglichkeit bietet,

verschiedene „Ou" its“ für eine Webseite zu gestalten.

Eine komple! e und immer aktuelle Liste für CSS-Befehle fi ndet man unter:

h! p://www.w3schools.com/css/css_reference.asp

3.4. JavaScript

JavaScript ist eine Programmiersprache, die

hauptsächlich für DOM-Scrip$ ng (Document

Object Model. Neuer Name für Dynamic

HTML) verwendet wird. Der Sprachkern von

JavaScript wurde als ECMAScript (ECMA

262) standardisiert und dient als dynamisch

typisierte, objektorien$ erte, aber klassenlose

Skriptsprache. Mit JavaScript kann man sowohl

prozedural als auch funk$ onal programmieren.

Prozedural programmieren bedeutet, dass die

Programmiersprache aus kleinen, einzelnen

Aufgaben besteht, die der Computer Anweisung

für Anweisung abarbeitet. Eine funk$ onale

Seite 52

Programmiersprache verwendet Sprachelemente zur Kombina� on und Transforma� on von

Funk� onen. Während HTML und CSS nur rudimentäre Möglichkeiten zur Nutzerak� on bieten, können

mit JavaScript Inhalte generiert und nachgeladen werden.

JavaScript wird hauptsächlich clientsei� g eingesetzt, das bedeutet, dass die Aufgaben auf dem

abrufenden Computer erledigt werden, während bei anderen Programmiersprachen wie PHP oder

Perl ausschließlich serversei� g eingesetzt wird (der Server ist für alle Rechenprozesse zuständig). Es

gibt allerdings auch JavaScript-Applika� onen die serversei� g eingesetzt werden können, dies nennt

sich dann „Server-Side JavaScript“.

Anwendungsgebiete für JavaScript

JavaScript wird vor allem für DOM-Scrip� ng eingesetzt, speziell für folgende Gebiete:

• Um mehrere Frames auf einmal zu wechseln, ohne dass der Browser dabei die Seite neu laden

muss

• Banner, Laufschri! en und andere bewegte Grafi ken

• Um Webseiten dynamische Funk� onen hinzuzufügen

• Sofor� ges Vorschlagen von Suchbegriff en

• Verschleiern von Daten wie E-Mail-Adressen, um Spam zu vermeiden, o! wird damit auch der

gesamte Quelltext verschleiert, um keine Kopien der Seite zu ermöglichen.

Leider werden auch einige Funk� onen von JavaScript missbraucht. Angefangen durch einfaches

Verschleiern des Quelltextes und anderer auf der Webseite ersichtlicher Dinge, wie Bilder, Links, etc.

über das unaufgeforderte Einblenden von Werbe-Popups oder zahlloser Dialogfenster, bis hin zu

unerwünschtem Schließen, Größe-verändern oder Neu-Öff nen des Browsers.

Das Sandbox-Prinzip

JavaScript wir im Browser in einer so genannten Sandbox ausgeführt. Das bedeutet, dass JavaScript

in einem eigenen isolierten Bereich ausgeführt wird, sodass es keinen Zugriff auf das gesamte System

hat, wodurch es keinen Schaden anrichten kann.

Außerdem wird jeder Webau! ri$ separat behandelt, sollte man also mehrere Tabs geöff net haben,

so kann JavaScript von Tab3 nicht auf JavaScript von Tab1 zugreifen. So wird sichergestellt, dass

Daten nicht unbewusst an Dri$ e gelangen können. Ohne eine solche separate Behandlung wäre es

beispielsweise möglich, dass eine bösar� ge Seite die Daten vom Onlinebanking abfangen könnte.

Durch das Sandbox-Prinzip ist es außerdem nicht mehr möglich, dass JavaScript den Browser schließt,

oder andere unerwünschte Dinge dieser Art macht, ohne das Einverständnis des Benutzers.

Anwenden von JavaScript

JavaScript wird ähnlich wie CSS in ein HTML-Dokument eingebaut bzw. verlinkt. Es kann sowohl direkt

an der Stelle, wo es benö� gt wird, mit einer Verlinkung in Head oder ganz ausgelagert verwendet

werden.

Seite 53

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html xmlns=“http://www.w3.org/1999/xhtml“> <head> <meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /> <title>Unbenanntes Dokument</title> </head> <body> <script type=“text/javascript“>document.writeln(“Dieser Text wird mit JavaScript eingefügt“);</script> </body></html>

Wie man sehen kann, wird mit diesem Befehl nur Text in die Webseite eingefügt, was so nicht sehr

sinnvoll ist, aber am einfachsten zu verstehen ist. JavaScript wird, wenn es direkt in den HTML-Code

eingebaut ist, immer im Bereich <script></script> ausgeführt, das A! ribut type=“text/javascript“

wird angegeben, damit der Browser weiß, dass es sich um JavaScript handelt. In diesem Script-

Bereich befi ndet sich nun das rich# ge JavaScript:

document.writeln(“Dieser Text wird mit JavaScript eingefügt“);

document ist der erste Befehl und weist den Browser darauf hin, dass die folgenden Befehle im

Dokument ausgeführt werden sollen. Die einzelnen Befehle werden mit einem Punkt getrennt.

writeln() ist ein Befehl, dass in den angegebenen Bereich der Text geschrieben werden soll, der sich

in der Klammer befi ndet. Der Text befi ndet sich in ““, damit der Browser weiß, dass es sich um Text

handelt, der einfach nur angezeigt werden soll, da es auch die Möglichkeit gibt, in diese Klammer

Befehle zu schreiben, die der Browser bearbeiten muss und dann das Ergebnis anzeigt.

Das JavaScript kann man nun einfach in den Head verlagern. Da es einfach nur im Body angezeigt

werden soll, ist es nicht nö# g eine Verlinkung zu erstellen.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html xmlns=“http://www.w3.org/1999/xhtml“> <head> <meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /> <title>Dokument</title> <script type=“text/javascript“>document.writeln(„Dieser Text wird mit JavaScript eingefügt“);</script> </head> <body> </body></html>

Seite 54

Möchte man nun eine rich� ge Bedingung schreiben, so ist diese nicht mehr so kurz. Diese ist

meistens an ein Event gebunden, das bedeutet, dass man z.B. auf einen Bu� on klicken muss, oder

dass nach einer bes� mmten Zeit etwas geschehen soll. In so einem Fall wird nur der Event in die

Seite geschrieben, die Funk� on die ausgeführt werden soll, wird in den separaten JavaScript-Bereich

geschrieben.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html xmlns=“http://www.w3.org/1999/xhtml“> <head> <title>JavaScript Beispiel</title> <script type=“text/javascript“> function Quadrat() { var Ergebnis = document.Formular.Eingabe.value * document. Formular.Eingabe.value; alert(“Das Quadrat von “ + document.Formular.Eingabe.value + “ = “ + Ergebnis); } </script> </head> <body> <form name=“Formular“ action=““> <input type=“text“ name=“Eingabe“ size=“3“> <input type=“button“ value=“Quadrat errechnen“ onclick=“Quadrat()“> </form> </body></html>

Nachdem man eine Zahl eingegeben hat, klickt man auf den Bu� on „Quadrat errechnen“. Dadurch

wird der Event onclick gestartet, welcher die Funk� on Quadrat() startet, der Browser schaut nun im

separaten JavaScript nach, was er ausführen soll, und dort fi ndet er die func on Quadrat(), aus der er

ablesen kann, was er tun soll.

Wenn man nun eine Zahl eingibt und auf den Bu� on klickt kommt folgendes Popup:

In diesem Fall wurde 3 eingegeben.

Seite 55

Das machen die einzelnen Funk� onen:

var Ergebnis =

Die Variable mit dem Namen „Ergebnis“(frei wählbarer Name) ist

document.Formular.Eingabe.value * document.Formular.Eingabe.value

Die Zahl, die in das Eingabefeld mit dem Namen „Eingabe“(frei wählbarer Name)eingegeben wurde,

wird mit der Zahl, die in das Eingabefeld mit dem Namen „Eingabe“ eingegeben wurde, mul� pliziert.

Auf gut deutsch: Die eingegebene Zahl wird quadriert.

;

Kennzeichnet immer das Ende eines Befehls

alert()

Öff net ein Popup, auf dem der Text steht, der sich innerhalb der Klammer befi ndet

(“Das Quadrat von “ + document.Formular.Eingabe.value + “ = “ + Ergebnis)

Der Text innerhalb der Klammer besteht aus mehreren Teilen. “Das Quadrat von “ steht in

Anführungszeichen und wird daher angezeigt wie es ist. + wird zwischen die einzelnen Tex# eile

geschrieben. document.Formular.Eingabe.value ist die Zahl die eingegeben wurde. “ = “ wird wieder

als einfacher Text behandelt. Ergebnis ist der Wert, der bereits vorher ausgerechnet wurde.

Wenn man mehr Funk� onen und Befehle für

JavaScript kennen lernen möchte, so fi ndet man

unter h# p://www.w3schools.com/jsref/default.

asp Listen mit allen verfügbaren Befehlen und was

diese bewirken.

Auslagern von JavaScript

HTML-Dokument:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html xmlns=“http://www.w3.org/1999/xhtml“> <head> <title>JavaScript Beispiel</title> <script src=“JavaScript.js“ type=“text/javascript“></script> </head> <body> <form name=“Formular“ action=““> <input type=“text“ name=“Eingabe“ size=“3“> <input type=“button“ value=“Quadrat errechnen“ onclick=“Quadrat()“> </form> </body></html>

Seite 56

JavaScript-Dokument (JavaScript.js):

function Quadrat() { var Ergebnis = document.Formular.Eingabe.value * document.Formular. Eingabe.value; alert(“Das Quadrat von “ + document.Formular.Eingabe.value + “ = “ + Ergebnis);}

3.5. PHP

PHP (rekursives Akronym für „PHP: Hyp, Backronymertext

Preprocessor“ aus „Personal Home Page Tools“) ist eine Skriptsprache

mit einer an C angelegten Syntax (Die Programmiersprache C ist die

Grundlage für alle Unix-Systeme, an ihr orien! eren sich viele bekannte

und häufi g verwendete Programmiersprachen wie C++, C#, Java,

Perl etc.). PHP wird hauptsächlich für dynamische Webseiten und

Webanwendungen verwendet.

PHP zeichnet sich durch eine gute Datenbankunterstützung und Internet Protokolleinbindung sowie

die Verfügbarkeit zahlreicher, zusätzlicher Funk! onsbibliotheken aus. Beispielsweise exis! eren

Programmbibliotheken, um Grafi ken und Bilder in Webseiten dynamisch zu generieren.

PHP wurde von Rasmus Lerdorf entwickelt, sein Ziel war es, das bereits exis! erende Perl-Skript zu

ersetzen. Die erste Version von PHP war allerdings noch eingeschränkter als Perl. PHP2 war kein

allzu großer Fortschri$ , erst mit PHP3 machte man bedeutende Fortschri$ e. Seit 2004 gibt es PHP5,

welches sich momentan in Version 5.3 befi ndet. Version 6 befi ndet sich gerade in Entwicklung,

diese soll dann Unicode unterstützen, welches die Vorgängerversionen gar nicht oder nur teilweise

konnten.

Seite 57

Funk� onsweise

PHP arbeitet serversei� g, dadurch wird beim Client keine Rechenleistung verbraucht.

1. Der Client schickt eine Anfrage für eine PHP-Datei

2. Der Server nimmt die Anfrage entgegen und lädt die gewünschte Datei von seiner Festpla� e

3. Anschließend übergibt der Server die PHP-Datei an den PHP-Interpreter

4. Der PHP-Interpreter arbeitet die Datei ab

5. Das Ergebnis (welches meist in Form einer HTML-Datei ist, allerdings werden auch Bilder und

PDF-Dokumente unterstützt) wird an den Server zurückgegeben

6. Der Server schickt die Datei an den abrufenden Client.

Um PHP im Rahmen einer Webanwendung verwenden zu können, wird ein System benö� gt,

welches PHP unterstützt. Der wohl am meisten verwendete PHP-Interpreter ist neben IIS

Apache. Als Betriebssystem kann Windows oder Linux verwendet werden. Als Datenbank wird

MySQL verwendet, welches übrigens die meist genutzte freie-so� ware Datenbank ist. Diese fast

ausschließlichen So� ware-Kombina� onen werden LAMP(Linux, Apache, MySQL, PHP) und WAMP

(Windows,...) genannt. Die serversei� ge Ausführung bringt einige Vorteile, da beim Client so keine

Besonderheiten erforderlich sind. Außerdem können keine Kompa� bilitätsprobleme au� reten, da die

So� warekombina� onen LAMP und WAMP fehlerfrei arbeiten.

Ein Nachteil ist, dass jede Ak� on des Benutzers erst bei erneuten Aufrufen der Seite erfasst wird.

Außerdem belastet jeder erneute Aufruf einer Seite den Server, da der Interpreter alle Daten

ausarbeiten muss. Um diese Last für den Interpreter zu verringern gibt es verschiedene Arten von

Cache-Speichern, welche ausgearbeitete Daten speichern und diese bei einem erneuten Aufruf gleich

zur Verfügung stellen können.

Code-Beispiel

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html xmlns=“http://www.w3.org/1999/xhtml“> <head> <title>Beispiel</title> </head> <body> <?php echo „Hier steht einfach nur Text“; ?> </body></html>

Seite 58

Der PHP-Interpreter interpre� ert nur den Code zwischen <?php und ?>. Der restliche Code wird, wie

er ist, an den Client geschickt. Das Resultat würde so aussehen:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html xmlns=“http://www.w3.org/1999/xhtml“> <head> <title>Beispiel</title> </head> <body> Hier steht einfach nur Text </body></html>

Genauere Beschreibungen, wie PHP funk� oniert fi ndet man unter h" p://www.php.net/.

Um PHP-Programmieren zu lernen kann man sich auch die Tutorials unter

h" p://www.php-einfach.de/ anschauen.

php.net php-einfach.de

Seite 59

3.6. MySQL

Der MySQL Server ist ein rela� onales

Datenbankverwaltungssystem[1]. MySQL

ist als Open-Source-So� ware sowie als

kommerzielle Enterpriseversion für verschiedene

Betriebssysteme verfügbar und bildet die

Grundlage für viele dynamische Webau� ri� e.

Ursprünglich wurde MySQL Server vom

schwedischen MySQL AB entwickelt. Im Februar

2008 wurde MySQL AB von Sun Microsystems

übernommen, das nun für die Weiterentwicklung des Codes verantwortlich ist. Im Januar 2010 wurde

Sun Microsystems von Oracle übernommen, wodurch MySQL Eigentum eines der größten Anbieter

von kommerziellen Datenbanken wurde.

MySQL ist eine freie So� ware und steht unter der General Public License (GPL)[2]. Gleichzei� g

besitzt Oracle das volle Copyright auf den Quellcodes, dadurch ist die So� ware alterna� v in der

Enterpriseversion erhältlich (Duales Lizenzsystem).

MySQL zeichnet sich dadurch aus, dass es auf fast jedem Betriebssystem läu� . Ausgelegt wurde es

jedoch für Unix-Systeme (Linux, Mac), während es auf Windows nur mit einigen Einschränkungen

läu� .

Einer Datenbankmanagementsystem-Engine[3] können mehrere Datenbanken zugeordnet

werden. In einer Datenbank können mehrere Tabellen angelegt werden. Die Tabellen können von

unterschiedlichem Typ sein. Die maximale Größe der

Tabellen wird im Prinzip nur durch das Betriebssystem

limi� ert.

Das bevorzugteste Einsatzgebiet von MySQL ist die

Datenspeicherung für Webservices. Es wird häufi g mit

dem Webserver Apache und PHP eingesetzt. Viele

Webdienste bedienen sich dieser Architektur. Sie

betreiben mehrere hundert MySQL-Server, über die

die Zugriff e aus dem Netz abgewickelt werden.

MySQL ist mit mehr als 6 Millionen Installa� onen und

über 35.000 Downloads am Tag das meist genutzte

Open-Source-Datenbankverwaltungssystem der Welt.

1 Eine rela� onale Datenbank dient zur elektronischen Datenverwaltung in Computersystemen und beruht auf

dem rela� onalen Datenbankmodell. Dieses wurde 1970 von Edgar F. Codd erstmals vorgeschlagen und ist bis

heute, trotz einiger Kri� kpunkte, ein etablierter Standard für Datenbanken.

2 Die GNU General Public License ist eine von der Free So� ware Founda� on herausgegebene Lizenz mit

Copyle� für die Lizenzierung freier So� ware. Sie wird zurzeit hauptsächlich in ihrer zweiten Version und seit

dem 29. Juni 2007 auch in ihrer dri� en Version verwendet.

3 Mit Engine (von engl. Antrieb, Motor) wird in der Informa� onstechnologie ein eigenständiger Teil eines

Computerprogramms bezeichnet. Eine Engine ist o� für gewisse in der Regel komplexe Berechnungen oder

Simula� onen zuständig.

Seite 60

4. Nachwort

Nun ist fast ein Jahr vergangen, in dem ich mich mit Internet und Webseiten beschä� igt habe. Ein

Jahr, das in diesem Sinn viel zu kurz war. Ich verstehe nun die Grundlagen des Internets und kann

einfache Webseiten programmieren, trotzdem ist es nur ein Bruchteil dessen, was man erforschen

kann. Es was zwar nicht mein Ziel alles zu erforschen, da mir schon im voraus bewusst war, dass sich

das nie ausgehen würde, trotzdem hä� e ich im Nachhinein gerne noch mehr Zeit dafür gehabt.

Nach dieser Jahresarbeit mit einem Thema, das mir so zugesagt hat, bin ich mir sehr sicher, dass

ich mich auch in Zukun� mit Informa� onstechnik auseinandersetzen werde. Während ich vorhabe,

das Thema Internet vorerst so zu belassen wie es ist, werde ich mit Webseiten jede Menge zu tun

haben, insgesamt stehen mir schon drei Webseiten-Projekte ins Haus, für welche ich während der

Jahresarbeit nur wenig zeit ha� e.

Nach Matura und Zivildienst habe ich dann vor, mich auch im Studium mit der Informa� k

auseinanderzusetzen. Allerdings nicht mehr konzentriert auf das Internet, sondern allgemein. Meine

Jahresarbeit hat mich bei diesem Vorhaben sehr bestärkt, da mir besonders das Webprogrammieren

sehr zugesagt hat, welches doch einige Gemeinsamkeiten mit normalem Programmieren aufweist.

Seite 61

Quellenverzeichnis

Bücher:

„So funk� oniert das Internet“ von Preston Gralla

„ARPA Kadabra. Die Geschichte des Internet“ von Ka� e Hafner und Ma� hew Lyon

Webseiten:

h� p://wikipedia.org/

h� p://www.vix.at/

h� p://www.nic.at/

h� p://www.denic.de/

h� p://www.tecchannel.de/

h� p://www.chip.de/

h� p://www.internet.com/

h� p://php.net/

h� p://php-einfach.de/

h� p://www.w3.org/

h� p://mysql.com/

h� p://de.sel! tml.org/

h� p://www.w3schools.com/

h� p://www.gotapi.com/

h� p://www.ripe.net/

h� p://orf.at/

h� p://fm4.orf.at/

Danksagung

Ich möchte mich bedanken bei:

Meinem Betreuer Karl Hruza für die Gespräche, seine Tipps und weitere wertvolle Unterstützung.

Peter Bi� ner für die vielen Stunden Programmierkurse.

Lukas Neugebauer, der mir half, auf dieses Thema zu kommen.

Chris� ane Dostal für das mehrfache Korrekturlesen.

Und bei allen anderen, die mich unterstützt haben.

Documents

Internet und Webseiten