Download - 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.
<!--danach kommt der Kommentar und endet mit-->
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:
Eine Blindkopie an weitere leiten:
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.