Page 1


Internet und Webseiten Jahresarbeit

Verfasser: Johannes Dostal Betreuer: Karl Hruza April 2010 Rudolf Steiner-Schule Wien Mauer


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. Hintergrundinformaon ............................................................................Seite 20 3.2.2. So funkoniert 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

Seite 3


1. Vorwort Ich interessiere mich schon seit langer Zeit für die Funkonsweise von Computern, IT-Geräten und natürlich auch dem Internet. Allerdings benögt es sehr viel Zeit, um solche Dinge richg zu verstehen. Als es darum ging ein Jahresarbeitsthema zu finden, 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 Funkonsweisen in den meisten IT-Gebieten schon etwas geläufig 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 praksch 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 Applikaon 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 vielseig und groß wie das Internet ist, so vielseig und groß ist auch die Informaon über das Internet. Bemerkenswert ist allerdings, dass es kaum Bücher zu dem Thema gibt. So stammt auch ein Großteil meiner Informaonen aus dem Internet selbst, dort hingegen gibt es wohl mehr Arkel 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 inveserten Zeit verbrachte ich also damit, mich durch die verschiedenen Arkel zu wühlen und überall die beste Informaon herauszupicken. Ich hoffe diese Masse an Informaonen 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 Funkonsweise 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


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 wissenschalichen 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 Schaffung 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 finanziert 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 Erfinder 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 Aurieb 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, Grafiken 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 hoffnungslos ü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-Soware bezeichnet man eine Soware 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 5


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] finanziert 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 befindet, 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 6


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

Seite 7


2.4. Das OSI-Modell Das OSI-Schichtenmodell (auch OSI-Referenzmodell; engl. Open Systems Interconnecon Reference Model) ist ein Schichtenmodell der Internaonalen Organisaon für Normung (ISO). Es wurde als Designgrundlage von Kommunikaonsprotokollen entwickelt. Die Aufgaben der Kommunikaon wurden dafür in sieben aufeinander aufgebaute Schichten (layers) unterteilt. Für jede Schicht exisert eine Beschreibung, in welcher steht, was diese zu leisten hat. Diese Anforderungen müssen von den Kommunikaonsprotokollen realisiert werden. Die konkrete Umsetzung wird dabei nicht vorgegeben und kann daher sehr unterschiedlich sein. Deswegen exiseren 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 Kommunikaon nicht so einfach wie man sich das vorstellt. Gleichzeig 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 Kommunikaon 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. Applicaon 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. Presentaon Layer) setzt systemabhängige Darstellungen (z.B. ASCII American Standard Code for Informaon Interchange) in unabhängige Formen um, wodurch der Datenaustausch zwischen verschiedenen Systemen ermöglicht wird.

Schicht 5 – Kommunika!onssteuerungsschicht Die Kommunikaonssteuerungsschicht (engl. Session Layer) sorgt für die Kommunikaon zwischen verschiedenen Systemen. Sie ermöglicht unter anderem einen synchronisierten Datenaustausch sowie die richge Adressierung, trotz unterschiedlicher Systeme.

Seite 8


Schicht 4 – Transportschicht Zu den Aufgaben der Transportschicht (engl. Transport Layer) zählen die Segmenerung 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 definiert 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!ungsund 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 akvieren, bzw. deakvieren, sie aufrechtzuerhalten und Bits darüber zu transporeren. Das können z.B. elektrische Signale, opsche Signale (Lichtleiter, Laser), elektromagnesche 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 befindet 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 eintreffen, wird das Paket erneut gesendet (Wiederholungsmechanismus). Sollte die Prüfsumme eines Paketes nicht smmen [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 9


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 spezifiziert. 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 Router dienen zur Verbindung von verschiedenen Gerät bereits besetzt ist und wartet bis es frei Geräten innerhalb eines Netzwerks. 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.

Seite 11


Zugriffsauflö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 Spezifika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]-Spoofing (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 Internet1 Die MAC-Adresse ist die Hardwareadresse zur Idenfizierung jedes einzelnen Geräts innerhalb eines Netzwerks. 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 12


Zugangsserver ab. Ursprünglich wurde die DSL-Technologie dazu entwickelt, dass man über die Telefonleitung gleichzeig ins Internet und telefonieren kann, da DSL digitale Daten schickt, können diese gleichzeig 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 Ein DSL-Modem zur Verbindung mit dem Internet. 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 TeilnehmerAnschluss“); 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 Downund Upstreamrate und ist damit an Geschä!skunden angepasst, die auch einen schnellen Upload benögen. VDSL (Very High Speed Digital Subscriber Line)

Seite 13


2.7. TCP/IP Das Internet funkoniert 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 transporeren, allerdings nicht das Ethernet, welches nur 1.500 Byte große Pakete transporeren kann, durch welches die Daten auch fließ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 Kommunikaon 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 Informaonen 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 14


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 15


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 Eigenschaen 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ficaon: Dieses und die beiden folgenden Felder Flags und Fragment Offset 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fika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 Offset: 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: Spezifikaon für das höhere Protokoll (zum Beispiel 6 für TCP und 17 für UDP).

Seite 16


• • •

Checksum: Prüfsumme für den Header (Summe in Einerkomplement) Quellenadresse und Zieladresse: Die vollständigen IP-Adressen von Sender und Empfänger. Oponen + Pad: Mögliche zusätzliche Oponen und eventuelle Füllbits. Die Anzahl der Oponen 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 Die Zuständigkeitsbereiche der einzelnen RCRs. 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 praksch unmöglich ist, eine besmmte 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.

Seite 17


2.9. Der Weg durchs Internet Für jedes Datenpaket, das durch das Internet geschickt wird, wird der bestmögliche Weg erneut ermielt. 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 18


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 hae. 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 Der erste Webserver, entwickelt und implemen!ert vereinfachen sollte. Er verwirklichte dieses auf einem neXTcube-Computer. 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 Webbrowser, WorldWideWeb

Seite 19


So wie das Internet größer wurde und sich weiterentwickelt hat, hat sich auch die Web-Sprache weiterentwickelt. HTML befindet 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 befindet, 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. HTMLDokumente 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 20


Teilen besteht, aber auf Grund ihres Präsentaonsmediums dazu verdammt ist, von vorne bis hinten wahrgenommen zu werden. Hypertext ist ein nicht lineares Medium zur Präsentaon 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 Informaon und Unterhaltung vermielt. Unter den Medien geht der Trend allerdings hin zu visuell auffälligeren Mieln, also Bildern, Videos und Simulaonen. Die Weiterentwicklung von Hypertext ist daher Hypermedia. Hypermedia sollte nicht mit Mulmedia verwechselt werden, während Mulmedia für „viele Medien zugleich“ steht, so bezeichnet Hypermedia auch viele Medien, welche allerdings in der Art von Hypertext strukturiert sind. Das Präfix „Hyper-“ steht also für eine besmmte Art von Organisaon. Diese Organisaon zeichnet sich durch die Fragmenerung 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 Informaon geliefert wird, die man wünscht.

3.2.2. So funkoniert 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 praksch 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 WindowsComputer. 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 befinden, so wird automasch das Dokument mit dem Namen Index geöffnet.

<html> <html> </html>

Seite 21


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 definiert wird. Die Spitzklammern < > definieren 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 definierten Bereich kann man nun Befehle schreiben. Als erstes braucht das HTMLDokument 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> definiert, 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> definiert.

<body> Der Body (Körper) beinhaltet den Inhalt der Seite und befindet 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 22


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 Definieren von Bereichen haben wir im obigen Beispiel bereits kennengelernt. Wenn man so will, ist auch <html></html> ein Bereich, welcher HTML definiert. In diesem Bereich finden sich dann weitere Bereiche wie <head></head>, in welchen sich wiederum der Bereich < tle></ tle> befindet. Der Hauptbereich ist allerdings <body></body>, in welchem sich der gesamte, als Seite ersichtliche Inhalt befindet. Im Body können nun durch Tags viele weitere Bereiche definiert werden. Der wohl einfachste Tag zum Definieren eines Bereichs ist <p>: <html> <head> <title>Ich bin </head> <body> <p>Dieser Text <p>Dieser Text <p>Dieser Text <p>Dieser Text </body> </html>

eine Webseite</title>

steht steht steht steht

in in in in

einem einem einem einem

eigenen eigenen eigenen eigenen

Paragraphen</p> Paragraphen</p> Paragraphen</p> Paragraphen</p>

Ein neueres Tag, das wirklich nur dazu da ist einen Bereich zu definieren, ist <div> (von division, eng. Bereich). Mit diesem Tag kann man auch mehrere Paragraphen zu einem Bereich definieren, aber man kann auch Bilder oder andere Dinge in diesem Bereich definieren.

Seite 23


<html> <head> <title>Ich bin </head> <body> <div> <p>Dieser Text <p>Dieser Text <p>Dieser Text <p>Dieser Text </div> </body> </html>

eine Webseite </title>

steht steht steht steht

in in in in

einem einem einem einem

eigenen eigenen eigenen eigenen

Paragraphen</p> Paragraphen</p> Paragraphen</p> Paragraphen</p>

Nun sind die vier Paragraphen in einem Bereich definiert. 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 befindet 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 definiert, hierfür gibt es <h1> bis <h6>, wobei h1 die größte und h6 die kleinste Überschri! ist.

Seite 24


<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 wichg, dass diese richg 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ormaerungstags 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öffnet, 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 Nozen 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 25


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 Definieren 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 findet 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 26


<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 Aribut 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 Grafiken umgegangen ist. <hr> ist der einfache Befehl für eine Trennlinie. Diese kann man mit Aributen verändern. Hier ein paar Beispiele, was Aribute 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 27


Schrigröße, Art und Farbe Um Schrigröße, Art und Farbe ändern zu können, benögt man das Tag <font>. Die Schrigröße wird mit dem A!ribut size, die Farbe mit color und die Schriart mit face festgelegt. Schriarten können nur angezeigt werden, wenn der Benutzer diese auf seinem Rechner installiert hat, daher empfiehlt es sich, Standardschriarten zu verwenden und/oder mehrere Schriarten 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 28


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 </head> <body> <ul> <li>Listeneintrag <li>Listeneintrag <li>Listeneintrag <li>Listeneintrag </ul> </body> </html>

Webseite</title>

1</li> 2</li> 3</li> 4</li>

Eine Ordered List sieht so aus: <html> <head> <title>Ich bin eine </head> <body> <ol> <li>Listeneintrag <li>Listeneintrag <li>Listeneintrag <li>Listeneintrag </ol> </body> </html>

Webseite </title>

1</li> 2</li> 3</li> 4</li>

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 </head> <body> <ol type=“a“> <li>Listeneintrag <li>Listeneintrag <li>Listeneintrag <li>Listeneintrag </ol> </body> </html>

Webseite </title>

1</li> 2</li> 3</li> 4</li>

Seite 29


<html> <head> <title>Ich bin eine </head> <body> <ol type=“I“> <li>Listeneintrag <li>Listeneintrag <li>Listeneintrag <li>Listeneintrag </ol> </body> </html>

Webseite</title>

1</li> 2</li> 3</li> 4</li>

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 </head> <body> <ol start=“9“> <li>Listeneintrag <li>Listeneintrag <li>Listeneintrag <li>Listeneintrag </ol> </body> </html>

Webseite</title>

1</li> 2</li> 3</li> 4</li>

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 30


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


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 Druckersoware 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 befindet 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 befindet sich der Ankerpunkt </body> </html>

Würden sich nun zwischen dem Link und dem Ankerpunkt viele andere Inhalte befinden, 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äufigsten werden Links wohl dazu verwendet auf andere Seiten zu verweisen. Dies funkoniert im Prinzip gleich wie der Verweis auf einen Ankerpunkt:

Seite 32


<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 wichg, 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 findet. Was so als Nachteil aussieht, ist allerdings eine wesentliche Vereinfachung, um innerhalb einer Seite zu navigieren. Nehmen wir einmal an, wir befinden uns auf hp://www.amazon.de/Kamera-Foto und es befindet 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öffnet wird. Heute gibt es nur noch die Möglichkeit, diese im selben Tab oder in einem neuen zu öffnen. Früher gab es auch noch Möglichkeiten, den Link an einer besmmten 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 öffnen gibt.

Seite 33


<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öffnet 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 öffnet diesen Link dann in einem neuen Tab und merkt sich den angegebenen Namen. Wenn man nun einen weiteren Link öffnet, der als Ziel diesen Namen hat, so wird diese Seite in dem Tab mit dem Namen geöffnet.

Seite 34


<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 Popup bei Firefox von einem weiteren Parametern bes!mmt, welche von der Adresse Telnetverweis. mit einem ? getrennt werden. Sollten mehrere Parameter verwendet werden, so werden diese untereinander mit & getrennt.

Seite 35


Eine Kopie an weitere leiten: cc=post@gmail.com

Eine Blindkopie an weitere leiten: bcc=post@gmail.com

Einen Betreff angeben: Subject=Kartenreservierung

Einen vordefinierten Body verwenden: Body=Hier befindet sich ein vordefinierter Body

In Verwendung sieht das so aus: <html> <head> <title>Ich bin eine Webseite</title> </head> <body> <a href=â&#x20AC;&#x153;mailto:max.mustermann@gmail.com?cc=post@gmail.com&subject= Kartenreservierungâ&#x20AC;&#x153;>Mail an Max Mustermann</a> </body> </html>

Seite 36


Grafiken 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 befinden 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 definieren, 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 Grafik 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 37


<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 Aribut 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> definiert: <html> <head> <title>Ich bin eine Webseite</title> </head> <body> <table> </table> </body> </html>

In dem Bereich der Tabelle werden Zeilen mit <tr></tr> definiert, in welche mit <td></td> Spalten eingefügt werden.

Seite 38


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


<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 drie Spalte in der ersten Zeile und die drie Spalte in der drien Zeile weggelassen. Weitere Eigenschaen von Tabellen findet man unter: hp://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 40


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 41


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


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 fixiert 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&amp;q=Rudolf+Steiner-Schule+Wien-Mauer&amp;ie=UTF8&amp;hq=Rudol f+Steiner-Schule+Wien-Mauer&amp;hnear=Wien&amp;cid=229125965171737978&amp; source=embed&amp;ll=48.152488,16.271009&amp;spn=0.014315,0.029998&amp;z=15 &amp;iwloc=A&amp;output=embed“></iframe><br /><small><a href=“http://maps. google.at/maps?hl=de&amp;q=Rudolf+Steiner-Schule+Wien-Mauer&amp;ie=UTF8&a mp;hq=Rudolf+Steiner-Schule+Wien-Mauer&amp;hnear=Wien&amp;cid=22912596517 1737978&amp;source=embed&amp;ll=48.152488,16.271009&amp;spn=0.014315,0.02 9998&amp;z=15&amp;iwloc=A“ style=“color:#0000FF;text-align:left“>Größere Kartenansicht</a></small>

Seite 43


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&amp;q=Rudolf+Steiner-Schule+Wien-Mauer&amp;ie=UTF8&amp;hq=Rudolf +Steiner-Schule+Wien-Mauer&amp;hnear=Wien&amp;cid=229125965171737978&amp;so urce=embed&amp;ll=48.152488,16.271009&amp;spn=0.014315,0.029998&amp;z=15&am p;iwloc=A&amp;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&amp;q=Rudolf+SteinerSchule+Wien-Mauer&amp;ie=UTF8&amp;hq=Rudolf+Steiner-Schule+Wien-Maue r&amp;hnear=Wien&amp;cid=229125965171737978&amp;source=embed&amp;ll= 48.152488,16.271009&amp;spn=0.014315,0.029998&amp;z=15&amp;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 befindet 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 44


Es gibt noch einige weitere Funkonen für HTML. Eine vollständige und immer aktuelle Liste der Befehle mit Beschreibung der einzelnen Funkonen findet 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!ypdefinion gibt Informaonen 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 Definion, die so aussehen kann: <html xmlns=“http://www.w3.org/1999/xhtml“>

Wie man sieht, wird diese Informaon in das HTML-Tag als A!ribut geschrieben. Die dri!e wichge Informaon ist die Metainformaon, ein Minimum der Metainformaon sieht so aus: <meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-1“ />

Diese Informaon wird in den Head vom HTML-Dokument geschrieben. Sichtbare Auswirkungen hat charset, dieses A!ribut besmmt, 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 45


3.3. Cascading Style Sheets Cascading Style Sheets (CSS) ist eine deklarave StylesheetSprache 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 praksch alles auf der Webseite gestalten. Von der einfachen Schriart über die Posionierung 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 46


CSS befindet 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: definiert 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 definiert 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 styleA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 befinden. 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 Defini"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 definierten Tags eingetragen, dies sieht so aus:

Seite 47


<!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öffnet. 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 Defini#on in Style öffnen. Um eine id zu definieren 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 48


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


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 Schriart gewählt; die Schriart wird allerdings nur bei den Bereichen verwendet, die keine eigene Definion haben (in unserem Fall hat die class=“name“ eine eigene Schriart und verwendet daher nicht die in Body festgelegte Schriart.).

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 50


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


Programmiersprache verwendet Sprachelemente zur Kombinaon und Transformaon von Funkonen. Während HTML und CSS nur rudimentäre Möglichkeiten zur Nutzerakon bieten, können mit JavaScript Inhalte generiert und nachgeladen werden. JavaScript wird hauptsächlich clientseig eingesetzt, das bedeutet, dass die Aufgaben auf dem abrufenden Computer erledigt werden, während bei anderen Programmiersprachen wie PHP oder Perl ausschließlich serverseig eingesetzt wird (der Server ist für alle Rechenprozesse zuständig). Es gibt allerdings auch JavaScript-Applikaonen die serverseig eingesetzt werden können, dies nennt sich dann „Server-Side JavaScript“.

Anwendungsgebiete für JavaScript JavaScript wird vor allem für DOM-Scripng 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 Grafiken • Um Webseiten dynamische Funkonen hinzuzufügen • Soforges Vorschlagen von Suchbegriffen • 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 Funkonen 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-Öffnen 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öffnet 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ösarge 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 52


<!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 ScriptBereich befindet 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 befindet. Der Text befindet 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 53


Möchte man nun eine richge 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 besmmten Zeit etwas geschehen soll. In so einem Fall wird nur der Event in die Seite geschrieben, die Funkon 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 Funkon Quadrat() startet, der Browser schaut nun im separaten JavaScript nach, was er ausführen soll, und dort findet 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 54


Das machen die einzelnen Funkonen: 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, mulpliziert. Auf gut deutsch: Die eingegebene Zahl wird quadriert. ; Kennzeichnet immer das Ende eines Befehls alert() Öffnet ein Popup, auf dem der Text steht, der sich innerhalb der Klammer befindet (“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 Funkonen und Befehle für JavaScript kennen lernen möchte, so findet 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/xhtml1transitional.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 55


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äufig 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 Grafiken 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 befindet. Version 6 befindet sich gerade in Entwicklung, diese soll dann Unicode unterstützen, welches die Vorgängerversionen gar nicht oder nur teilweise konnten.

Seite 56


Funkonsweise PHP arbeitet serverseig, dadurch wird beim Client keine Rechenleistung verbraucht.

1. 2. 3. 4. 5.

Der Client schickt eine Anfrage für eine PHP-Datei Der Server nimmt die Anfrage entgegen und lädt die gewünschte Datei von seiner Festplae Anschließend übergibt der Server die PHP-Datei an den PHP-Interpreter Der PHP-Interpreter arbeitet die Datei ab 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-Kombinaonen werden LAMP(Linux, Apache, MySQL, PHP) und WAMP (Windows,...) genannt. Die serverseige Ausführung bringt einige Vorteile, da beim Client so keine Besonderheiten erforderlich sind. Außerdem können keine Kompabilitätsprobleme aureten, da die Sowarekombinaonen LAMP und WAMP fehlerfrei arbeiten. Ein Nachteil ist, dass jede Akon 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 57


Der PHP-Interpreter interpreert 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 funkoniert findet 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 58


3.6. MySQL Der MySQL Server ist ein relaonales 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]. Gleichzeig besitzt Oracle das volle Copyright auf den Quellcodes, dadurch ist die Soware alternav 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 limiert. Das bevorzugteste Einsatzgebiet von MySQL ist die Datenspeicherung für Webservices. Es wird häufig mit dem Webserver Apache und PHP eingesetzt. Viele Webdienste bedienen sich dieser Architektur. Sie betreiben mehrere hundert MySQL-Server, über die die Zugriffe aus dem Netz abgewickelt werden. MySQL ist mit mehr als 6 Millionen Installaonen und über 35.000 Downloads am Tag das meist genutzte Open-Source-Datenbankverwaltungssystem der Welt.

1 Eine relaonale Datenbank dient zur elektronischen Datenverwaltung in Computersystemen und beruht auf dem relaonalen Datenbankmodell. Dieses wurde 1970 von Edgar F. Codd erstmals vorgeschlagen und ist bis heute, trotz einiger Krikpunkte, ein etablierter Standard für Datenbanken. 2 Die GNU General Public License ist eine von der Free Soware Foundaon 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 Informaonstechnologie ein eigenständiger Teil eines Computerprogramms bezeichnet. Eine Engine ist o für gewisse in der Regel komplexe Berechnungen oder Simulaonen zuständig.

Seite 59


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 60


Quellenverzeichnis Bücher: „So funkoniert das Internet“ von Preston Gralla „ARPA Kadabra. Die Geschichte des Internet“ von Kae 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. Chrisane Dostal für das mehrfache Korrekturlesen. Und bei allen anderen, die mich unterstützt haben.

Seite 61


Internet und Webseiten  

Jahresarbeit Johannes Dostal 12. Klasse 09/10

Advertisement
Read more
Read more
Similar to
Popular now
Just for you