1.0.0 Allgemeine Informationen Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. Wir werden uns hauptsächlich mit HTML beschäftigen, weil es die wichtigste und am häufigsten gebrauchte Web-Programmiersprache ist. 1.0.1 Programme & Ordner Als erstes solltest du einen Ordner in deinem Profil erstellen (z.b. mit dem Namen "programmieren"). Diesen werden wir brauchen um alle Dateien der folgenden Kapitel zu speichern. Öffne den Windows-Editor: du findest ihn unter "Start/Programme/Zubehör". Anschliessend brauchen wir noch einen Browser, weil der Internet Explorer meistens nicht das tut, was man programmiert, empfehle ich Firefox. Das FGB unterstützt diesen nicht mehr, darum begnügen wir uns mit dem Internet Explorer. 1.1.0 HTML Nun fangen wir mit einer ganz einfachen Webseite an und denken daran: ein kleiner Fehler reicht und die Webseite funktioniert nicht mehr. Schau deine Programmtexte immer genau an, um zu prüfen, ob du alles richtig gemacht hast. Wir beginnen mit dem "Grundgerüst". Schreibe folgendes in den Editor: <html> <body> </body> </html> www.xardurius.com 1 Kenneth Alexander Kaufmann
Innerhalb der "<html>"- Tags steht der gesamte Code für die Webseite (mit Ausnahme von PHP, aber darauf wollen wir hier nicht näher eingehen). Im ""- Tag steht der Titel der Webseite, wie die Seite formatiert ist und noch weitere Tags die nicht direkt sichtbar sind. Der "<body>" - Tag ist sehr wichtig, weil dort alle Texte, Überschriften, Bilder, Videos etc. D aufgeführt werden. Ein Tag wird immer mit einem End-Tag beendet: "<...>" "</...>" Wir wollen jetzt unserer Webseite einen Titel geben, füge dazu folgenden Code zwischen "" und "" ein: <title>meine erste Webseite</title> Speichere diese Datei als "index.html" in dem Ordner, den du am Anfang erstellt hast. Nun kannst du die Datei im Internet Explorer öffnen. Es wird jetzt dein Titel in der Titelleiste angezeigt. 1.1.1 Text & Textformatierung Natürlich hat unsere Webseite noch keinen Text, das wollen wir jetzt ändern. Dazu schreiben wir zwischen "<body>" und "</body>": <h1>meine Webseite</h1> <p>das ist ein Beispieltext, den du auch ändern kannst blablablabla<br> blablablablabla, Beispieltext. <br><br> Das ist ein Beispieltext, den du auch ändern kannst blablablabla</p> "<h1>" steht für die grösste Überschrift, die wichtigste Überschrift (es gibt auch noch "<h2>, <h3>, <h4>, <h5>, <h6>" umso grösser die Ziffer/Zahl, desto kleiner ist die Überschrift), "<p>" ist der Tag für einen Absatz (paragraph), "<br>" steht für einen Zeilenumbruch. Um einen Text fett, kursiv oder zu unterstreichen, musst du folgendes eingeben: www.xardurius.com 2 Kenneth Alexander Kaufmann
<b>dick</b> <i>kursiv</i> <u>unterstrichen</u> "<b>": Englisch für Bold "<i>": Englisch für Italic "<u>": Englisch für Underline Wir wollen uns noch weitere Formatierungen ansehen: <sup>hochgestellt</sup> <sub>tiefgestellt</sub> "<sup>": superscript "<sub>": subscript Manchmal will man einen Teil der Webseite vom Rest abtrennen, das erreicht man mit einer Trennlinie: <hr /> "<hr />": horizontal ruler im Englischen Dieser Tag besteht nur aus einem Tag, was eigenartig ist. Es ist häufig hilfreich, wenn man sich Kommentare in die Datei hineinschreibt (diese sind auf der Webseite nicht sichtbar): <!-- KOMMENTAR über besonderheiten im Code--> 1.1.2 Listen und Tabellen Eine unsortierte Liste erstellt man in HTML wie folgt: <ul> <li>eintrag</li> <li>eintrag</li> <li>eintrag</li> </ul> "<ul>": unordered list www.xardurius.com 3 Kenneth Alexander Kaufmann
Eine sortierte/nummerierte Liste: <ol> <li>schreiben</li> <li>überprüfen</li> <li>speichern</li> <li>anschauen</li> </ol> "<ol>": ordered list Eine Tabelle: <table border="0"> <tr> <td>spalte 1</td> <td>spalte 2</td> <td>spalte 3</td> </tr> <tr> <td>eintrag</td> <td>eintrag</td> <td>eintrag</td> </table> "<tr>": table row, steht für eine neue Zeile "<td>": table data, steht für eine neue Datenzelle 1.1.3 Links Eines der sehr wichtigen Element auf einer Webseite sind die Links, denn ohne sie kann man nicht weitere Informationen von der eigenen Seitenstruktur oder von fremden Webseiten einbinden. Ein Link sieht wie folgt aus: <a href="...">das ist ein Link</a> Dabei muss in "href="..."" der genaue Pfad der Datei angegeben sein. Wenn die gewünschte Datei z.b. im gleichen Ordner ist wie die momentan geöffnete lautet der Pfad "seite2.html". Solltest du aber zu einer Datei ausserhalb des Ordners verlinken www.xardurius.com 4 Kenneth Alexander Kaufmann
z.b. im Ordner in dem auch unser Ordner sich befindet, lautet der Pfad: "../seite2.html". Das "../" steht dafür, dass der Browser einen Ordner zurück gehen soll. Dieses Element kannst du auch mehrmals vewenden. Bei dieser Methode, darfst du aber nicht die momentan geöffnete Datei in einen anderen Ordner verschieben, sonst funktioniert der Link nicht mehr. Sollte aber die gewünschte Datei in einem anderen Verzeichnis sein, empfiehlt sich eine absolute Angabe des Dateipfades zum Beispiel: "D:\Dateien\seite2.html". Diese Methode funktioniert auch wenn unsere "index" - Datei verschoben wird. Als Pfad kannst du auch eine Adresse einer Webseite eingeben z.b. "http://www.google.ch". Dabei musst du immer beachten, dass die Adresse genau stimmen muss und immer ein "http://" braucht, sonst wird es kein sinnvolles Ergebnis geben (eine Fehlermeldung..). Wenn du nicht willst, dass man deine Seite verlässt sobald man auf einen Link klickt, kannst du das so verhindern: <a href="..." target="_blank"> Es öffnet sich jetzt ein neuer Tab wenn du auf den Link klickst. 1.1.4 Bilder Eine Webseite ohne Bilder, sieht ein wenig leer aus. Darum fügen wir folgendes zwischen "<body>" und "</body>" ein: <img src="..." /> Wie auch beim Link, muss die Pfad-Angabe genau sein. Um die Grösse des Bilds zu verändern musst du nur zwei Definitionen hinzufügen: <img src="..." height="200px" width="300px" /> Auch dieser Tag besteht nur aus einem Tag. www.xardurius.com 5 Kenneth Alexander Kaufmann
2.0.0 CSS CSS wird benötigt um eine Webseite zu gestalten. Darum wollen wir als erstes die Schriftart unserer Seite festlegen: <style type="text/css"> font-family:arial; </style> Nun haben wir die Schriftart auf "Arial" festgesetzt, du kannst auch jede andere beliebige Schriftart auswählen, die auf deinem Computer installiert. Die Schriftgrösse wird so bestimmt: font-size:14px; Oder die Schriftfarbe: font-color:red; Auch die Ausrichtung der Schrift lässt sich definieren: align:center; Wenn du nur die Links formatieren möchtest, kannst du "body" durch "a" ersetzen. www.xardurius.com 6 Kenneth Alexander Kaufmann
Mit CSS ist es ebenfalls möglich den Hintergrund anzupassen: body { background-color:red; Es lässt sich ebenfalls ein Bild als Hintergrund einrichten: body { background-image: url(...); Auch hier muss wie beim Link ein genauer Pfad in "url(...)" stehen. 3.0.0 JavaScript JavaScript macht deine Seite dynamischer, mit Fenstern Zählern etc. Zuerst erstellen wir ein Fenster, das sofort erscheint wenn du deine Seite öffnest: <script type="text/javascript"> <!-- alert("hallo Welt!"); //--> </script> Nun soll dir die Webseite die aktuelle Uhrzeit verraten: <script type="text/javascript"> datum = new Date(); std = datum.gethours(); min = datum.getminutes(); sek = datum.getseconds(); document.write("<h3>uhrzeit: " +std+":"+min+":"+sek+"</h3>"); </script> www.xardurius.com 7 Kenneth Alexander Kaufmann