Internet Webdesign HTML

Internet Webdesign HTML Das Web Das Web ist eine Kurzform für World Wide Web (WWW) weltweites Netz. Das WWW ist eine (die bekannteste!) Anwendungen des Internet. Andere Anwendungen sind Email, FTP, etc. Das Internet ist also die Infrastruktur auf welcher Anwendungen wie das Web lauffähig sind. Das Internet selber wurde von amerikanischen Universitäten für das Militär entwickelt. Das militärische Netz, das ARPANET, wurde 1969 in Betrieb genommen. Zuerst waren die Computer der Universitäten von Utah, Los Angeles (UCLA), Santa Barbara (UCSB) sowie des Stanford Research Institute (SRI) über vier Knoten erstmals miteinander verbunden (siehe Originalskizze von 1969 rechts!). Später kamen viele andere Universitäten dazu, das Netz wurde immer mehr für wissenschaftliche Zwecke verwendet, ab 1991 auf für kommerzielle und damit wurde es öffentlich. Der Durchbruch zur Verwendung des Internet in der Öffentlichkeit geschah aber mit der Einführung des WWW. Das WWW wurde ab 1989 am CERN ( http://www.cern.ch ) in Genf vom Mathematiker Tim Berners Lee (Bild) entwickelt. Er hatte die Idee, Dokumente mit Hyperlinks miteinander zu verknüpfen und damit das Auffinden von Informationen in einem grossen, weltweiten Netz von Dokumenten zu erleichtern. Wie sich zeigte, war das eine sehr erfolgreiche Idee. Betreut wird das WWW vom W3C (World Wide Web Consortium; http://www.w3.org ). Sehen wir uns nun solche Dateien an, wie sie im WWW verlinkt sind: HTML Ein Webbrowser wie der Internet Explorer oder der Firefox holt sich von einem Server eine Datei und stellt ihren Inhalt in einem Fenster dar. Damit das klappt, muss der Inhalt der Datei gewissen Regeln folgen. Diese Regeln sind eigentlich eine Sprache, eine Seitenbeschreibungssprache. Die Seitenbeschreibungssprache, welche ein Browser versteht, heisst Hypertext Markup Language (HTML). Und so sieht der Inhalt einer ganz einfachen HTML Datei aus: Judihui, meine erste Webseite! Sie sehen, dass in der Datei neben dem darzustellenden Text Judihui, auch kurze englische Wörter in eckigen Klammern ( < > ) eingefügt sind. Diese so genannten Tags sind Anweisungen an den Browser. Zu den meisten Tags gibt es ein Endtag ( </ > ). IKT Kurs ri 2013c Web 1

So beginnt jede Webseite mit dem Tag und endet mit. Die Seite selber besteht aus zwei Teilen, dem Head (Kopf) und dem Body (Körper). Im Body steht der eigentliche Inhalt der Seite. Das sollen Sie gleich austesten: Öffnen Sie den Editor (Menü Start, Programme, Zubehör). Schreiben Sie im Editor den grau hinterlegten Text auf der vorangehenden Seite.. Speichern Sie den Text auf Ihrem P:, wählen Sie bei Dateityp Alle Dateien und geben Sie der Datei z.b. den Namen erste.html. Lassen Sie den Editor offen. Öffnen Sie den Browser, wählen Sie Menü Datei, Datei öffnen bzw. Öffnen, suchen Sie die soeben gespeicherte Datei und öffnen Sie sie voilà, Ihre erste Webseite! Oben in der Adresszeile sehen Sie übrigens, wo der Browser die Datei gefunden hat. Wir wollen den Inhalt noch etwas erweitern, zuerst, indem der Kopf auch einen Inhalt bekommt: <title>erste Webseite</title> Judihui, meine erste Webseite! Ergänzen Sie im Editor die Datei mit der fett gedruckten Zeile und speichern Sie. Laden Sie die Seite im Browser neu. Achtung: neu laden oder ähnlich wählen! Sehen Sie, wo im Browser der Titel der Seite erscheint? (Beachten Sie den oberen Rand des Fensters!) Den Text kann man natürlich auch formatieren wie in einer Textverarbeitung: Nehmen Sie die nachfolgende Ergänzung vor und testen Sie im Browser: <title>erste Webseite</title> Judihui, meine <b>erste</b> Webseite! Eine der wichtigsten Formatierungen ist wohl, mit einer neuen Zeile zu beginnen. Wenn Sie im Editor eine neue Zeile machen, dann macht der Browser keine neue! Das Tag, welches den Browser anweist, eine neue Zeile zu machen heisst <br> ( break ), eines der wenigen Tags, die kein Endtag haben! Testen Sie auch das aus. Bevor Sie sich auf grosse Formatierungsübungen stürzen, wollen wir den Hauptvorteil eines Hypertextes kennen lernen, nämlich dass man im Text einen Link setzen kann, der auf eine andere Datei verweist: IKT Kurs ri 2013c Web 2

Ergänzen Sie Ihren Text mit der folgenden fetten Zeile und speichern Sie: <title>erste Webseite</title> Judihui, meine <b>erste</b> Webseite!<br> Es gibt auch schon eine <a href="zweite.html">zweite</a>! Sie sehen, dass das Tag <a> ( Anker ) etwas komplizierter ist: Zwischen dem Tag und dem Endtag steht der Text, auf den man dann klicken wird (hier zweite ). Im Tag selber ist ein Parameter namens href ( Hypertext Referenz ), welcher auf die zu ladende Datei verweist. Bevor Sie das austesten können, müssen Sie eine zweite HTML Datei erstellen: Speichern Sie die erste Datei. Am besten starten Sie den Editor ein zweites Mal und erstellen eine zweite Datei namens zweite.html analog zur ersten mit einem kleinen Text (z.b. Meine zweite Datei! ). Speichern Sie auch diese zweite Datei. Jetzt können Sie die erste Datei neu laden und auf den Link klicken. Wie wär s, wenn die zweite Datei einen Link hätte zurück zur ersten? Hier noch einige Zusatzübungen zur freien Wahl: 1. Bilder: Bilder werden ähnlich wie Links eingebaut. Das Tag <img> ( Image ) hat den Parameter src ( Source ), welcher die Bilddatei angibt. Holen Sie sich z.b. die Datei smiley.gif von http://www.zipcon.net/~swhite/smiley/smiley.gif und speichern Sie sie im selben Ordner wie Ihre Webseiten. Fügen Sie dann folgendes Tag ein: <img src="smiley.gif"> und Sie sollten etwa nebenstehendes Bild sehen im Browser! 2. Bilder als Links: Auch ein Bild kann ein Link sein. Setzen Sie das Image Tag innerhalb des Anker Tags, z.b. so: <a href="zweite.html"><img src="smily.gif"></a> Wenn Sie auf das Smiley klicken, erscheint die zweite Seite! 3. Formatierungen: Testen Sie z.b. folgende Tags: <i> (Italic = Kursiv) <hr> (horizontal rule = horizontale Linie) <h1> <h2> <h3> (Heading = Überschrift) <center> (Zentrierung) <font size=4> (Schriftgrösse) <sub> (tiefgestellt) <sup> (hochgestellt) Und noch ein Tipp zum vereinfachten Üben: http://htmledit.squarefree.com Für Ihre weiteren Erkundungen der Sprache HTML finden Sie alle nötigen Informationen bei selfhtml: http://de.selfhtml.org IKT Kurs ri 2013c Web 3

KompoZer Sie haben sicher bemerkt, dass das Schreiben von Tags eine mühsame Sache ist. Eine solche monotone Tätigkeit ist eine typische Aufgabe für ein Computerprogramm. Es gibt viele Programme, welche HTML Tags in die Datei schreiben und uns gleichzeitig die Seite so darstellen, wie sie im Browser zu sehen sein wird. Wir wollen aus der Liste dieser HTML Editoren das Programm KompoZer verwenden. KompoZer hat den Vorteil, dass Sie es gratis zu Hause herunterladen können (http://kompozer.sourceforge.net/). Parallel dazu wird auch das gratis Programm Nvu unterhalten, Sie können auch dieses verwenden, es sieht fast gleich aus. Starten Sie KompoZer mit Start, Programme, Programmieren, KompoZer. Klicken Sie das Fenster mit den Tipps weg und Sie sehen das Hauptfenster von KompoZer (Ihre Version ist ev. englisch die englischen Begriffe sind im Skript in Klammern!): Das Fenster von KompoZer sieht ähnlich aus, wie das von Word. Sie werden auch ähnlich wie mit Word arbeiten Öffnen Sie Ihre erste Webseite mit der Taste Öffnen (Open) in der Werkzeugleiste. Formatieren Sie Ihren Text nach Lust und Laune. Beachten Sie das Menü Format mit seinen vielen Möglichkeiten. Viel anders als bei Word ist das nicht! Ein Bild fügen Sie ein mit der Taste Grafik in der Werkzeugleiste. Beachten Sie, dass Sie das Bild als Datei einfügen müssen und nicht von der Zwischenablage her. Am einfachsten ist es, wenn Ihre Seite und die Bilder im selben Ordner sind. Wichtig ist auch, dass das Häkchen vor URL relativ zur Seitenadresse im Dialogfenster gesetzt ist! Soll das Layout Ihrer Seite etwas raffinierter sein, ist es empfehlenswert, eine Tabelle einzufügen (Tast Tabelle in der Werkzeugleiste). Wenn Sie im Reiter Präzise bei Rand null eingeben, sieht man die Tabelle nicht. Sie können aber Ihre Bilder, Texte etc. in den Zellen der Tabelle so verteilen wie es Ihre Layout Wünsche erfordern. Mit der Taste Link in der Werkzeugleiste können Sie einfach einen Link erstellen: Markieren Sie den Text oder das Bild, welches zum Link werden soll und klicken Sie dann auf Link. Bei der Link Adresse gibt es zwei Möglichkeiten: Entweder Sie geben hier eine URL an wie z.b. http://www.slgb.ch/ (am besten im Browser kopieren!) oder Sie wählen über das Ordnersymbol rechts eine Datei in Ihrem Ordner. Bei Link wird geöffnet im Dialogfenster können Sie auch angeben, dass die verlinkte Seite in einem eigenen Fenster erscheinen soll. IKT Kurs ri 2013c Web 4

Auch in KompoZer können Sie die HTML Tags direkt eingeben: Klicken Sie dazu unter dem Editorfenster auf Quelltext (Source), ändern Sie irgendwas und sehen Sie sich die Sache mit Normal wieder an. Vorschau (Preview) zeigt Ihnen die Seite, wie sie im Browser zu sehen sein wird. Dem sagt man WYSIWYG (What you see is what you get). Aber Achtung: Verschiedene Leute werden mit verschiedenen Browsern Ihre Seiten auf verschiedenen Bildschirmen mit verschiedener Auflösung betrachten. Sie können also nie sicher sein, dass man Ihre Seite so sehen wird, wie Sie es jetzt sehen! Beachten Sie auch im Menü Format den Menüpunkt Seitenfarben und hintergrund. Wie bei PowerPoint ist aber auch hier darauf zu achten, dass der Vordergrund gut sichtbar ist auf dem Hintergrund. Und Achtung: Ein Hintergrundbild wird einfach repetiert, bis es das Fenster füllt. Als Lehrling schaut man dem Lehrmeister über die Schultern. Das ist beim Webdesign nicht anders. Und um genau hinzuschauen, wie es andere machen gibt es einen Trick: Öffnen Sie die Seite von der Sie abkupfern wollen im Browser. Wählen Sie dann im Firefox Menü Ansicht, Seitenquelltext anzeigen bzw. im Internet Explorer Kontextmenü (rechte Maustaste!), Quellcode anzeigen und Sie sehen wie die Seite gemacht wurde! Wenn Sie ernsthaft Webseiten gestalten wollen, dann müssen Sie sich CSS ansehen: Cascading Style Sheets sind so etwas wie die Formatvorlagen in Word mit denen man erreicht, dass die Seiten ein einheitliches Erscheinungsbild haben. KompoZer hat in der Werkzeugleiste unter dem Namen KaZcadeS einen CSS Editor. Eine gute Hilfe ist hier wiederum http://de.selfhtml.org/. Projekt Erstellen Sie Ihre private Webseite, welche anschliessend mit der Website der Klasse verlinkt wird. Das braucht kein Riesending zu sein. Und bedenken Sie, dass die ganze Welt Ihre Seite anschauen kann seien Sie also vorsichtig mit allzu persönlichen Angaben (z.b. private Telefonnummer). Seien Sie aber auch nicht allzu scheu: Warum nicht über Ihre Hobbies schreiben? Oder Ihre Beziehung zur Schule. Das darf ja alles auch witzig sein. Viel Spass! FTP Das File Transfer Protocol (FTP) dient dazu, Dateien ( files ) von A nach B zu transportieren. Wir brauchen es, um die erstellten HTML Dateien auf den Server zu kopieren. Für die Klasse ist auf dem schuleigenen Server www2.dgb.ch der Ordner k10c reserviert, in welchen Sie Ihre Dateien kopieren können. Um Ihre Dateien per ftp zu transportieren, brauchen Sie einen ftp Client. Verwenden Sie dazu das Gratisprogramm FileZilla, welches Sie auch zu Hause herunterladen ( http://www.filezilla.de ) und installieren können. In der Schule finden Sie das Programm im Start Menü: Starten Sie FileZilla ( Start, Programme, Internet, FileZilla ). Im mittleren Bereich sehen Sie links einen Fensterteil, der mit Lokale Seite bzw. Local site angeschrieben ist, rechts einen Teil mit Serverseite bzw. Remote site angeschrieben: Links sehen Sie also das Dateisystem Ihres lokalen Rechners, rechts dasjenige des entfernten Servers. Damit Sie das Dateisystem des Servers sehen, müssen Sie sich bei diesem anmelden: Hinter Adresse: schreiben Sie www2.dgb.ch, hinter Benutzer: k10c und das Passwort gebe ich Ihnen bekannt. Anschliessend klicken Sie auf Verbinden. IKT Kurs ri 2013c Web 5

Im Fensterteil unten sehen Sie diverse Meldungen, die zwischen FileZilla und dem Server hin und her geschickt werden und wenn die Verbindung steht, sehen Sie unter Serverseite einen oder mehrere Ordner. Nur im Ordner k10c können Sie schreiben, also suchen Sie diesen und öffnen Sie ihn, indem Sie darauf klicken: Im Fensterteil darunter sehen Sie seinen Inhalt. Klicken Sie mit der rechten Maustaste in dieses untere Fenster und wählen Sie im Kontextmenü Verzeichnis erstellen. Geben Sie als Namen für diesen neuen Ordner am besten Ihren Vornamen. Mit einem Doppelklick öffnen Sie diesen Ordner. Suchen Sie jetzt im linken Bereich auf P: Ihre beiden Webseiten und ziehen Sie sie mit der Maus vom linken in den rechten Fensterteil: Damit haben Sie eine Kopie Ihrer Dateien auf den Server geschickt. Testen Sie, ob Ihre Seiten wirklich auf dem Server verfügbar sind: Geben Sie im Webbrowser folgende Adresse ein: http://www2.dgb.ch/users/k10c. Sie sehen die Dateien und Ordner der Klasse auf dem Server. Mit einem Klick auf Ihren Ordner sehen Sie Ihre Dateien. Klicken Sie eine an Sie haben Ihre erste Webseite auf dem Server getestet! Vergegenwärtigen Sie sich nochmals, was da gelaufen ist mit Hilfe des folgenden Schemas: PC Nr. 123 P: Webbrowser http ftp www2.dgb.ch k0xy Apache Webserver IKT Kurs ri 2013c Web 6