Wir haben das Arbeiten mit Audacity abgeschlossen und uns mit HTML-Programmierung beschäftigt. Also Programm haben wir den Standard- Editor von Windows.
Die Grundlagen von HTML:
Die Hypertext Markup Language (HTML), ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt.
Syntax :
Dem Text wird durch Auszeichnungen von Textteilen mit in der Regel paarweisen (öffnenden und schließenden) Tags eine Struktur verliehen. Ein Tag beginnt immer mit dem Zeichen <. Es folgt eine entsprechende Buchstabenfolge und, wenn man keine Attribute verwendet, hört er nach einem > wieder auf. Ein Tag benötigt immer auch einen zweiten Tag der die Aktion beendet indem ein Slash hinzugefügt wird. zB: <head> </head>
Struktur einer HTML Datei:
Ein HTML-Dokument besteht hauptsächlich aus 2 Teilen:
- HTML- HEAD, der hauptsächlich technische oder dokumentarische Informationen enthält, die nicht direkt im Browser sichtbar sind
- HTML- BODY, der anzuzeigende Informationen enthält.
Die Grundstruktur einer Webseite sieht so aus:
<html> <head> <title>Titel der Webseite</title> </head>
<body> Inhalt der Webseite </body> </html>
Das Programmieren:
wir haben ein einfaches Beispiel versucht mit dem Standard-Editor von Windows um das Prinzip von HTML-Programmierungen zu verstehen und einige Befehle näher kennen zu lernen. Hier sind einige wichtige Befehle aufgeführt:
- <title> …. </title> Diese Tags enthalten den Titel der Website (also das, was der User im Tab des Browsers sieht). Diese müssen in den Head geschrieben werden.
- <h1>…. </h1> Diese Tags enthalten die Überschrift, die auf der Website für den User sichtbar ist. Um Unterüberschriften hinzuzufügen werden Tags wie: <h2>… <h2> und <h3> …. </h3> verwendet.
- <a href=“http://www.gympurkersdorf.ac.at“ target=“blank“>Gym Purkersdorf</a> Mit diesem Tag wird ein Link angegeben. <a href weist auf den Link hin. Auf = muss unter “ die Zieladresse eingefügt werden. Durch das target-Atribut sagt man, ob die neue Seite z. b. in einem neuen Fenster erscheinen soll (blank). Nach > kommt die Bezeichnung des Links. Geschlossen wird alles mit </a>
- <a href=“../s2.html“2. Seite </a> Mit dem Tag kann eine Seite intern verlinkt werden. Wenn man etwa auf eine andere Seite der eigenen Webseite verlinken will, verwendet man einen ähnlichen Code wie beim verlinken zu einer anderer Webseite. Man muss nur statt einer genauen Webadresse den genauen Pfad einer Datei (die auf dem selben Server liegt) angeben. Liegt sie im gleichen Ordner wie index.html, reicht ausschließlich der Dateiname. Liegt sie z. B. eine Ebene daarüber, muss man dies mit ../ angeben
Formatierungstabs:
- <b> (bold) - Fett
- <u> – Unterstrichen
- <i> (italic) – Kursiv
- <centre> – Zentriert
- <br> (break) – Zeilenumbruch
- <bgcolor> – background color –> wird als Attribut im BODY eingefügt und legt die Hintergrundfarbe fest, welche im Hexadezimalsystem angegeben wird.
- <font face=“Arial“>Text</font> - Ändert die Schriftart auf Arial.
Damit unsere Test-Webseiten für andere öffentlich auch zugänglich sind, haben wir sie auf unseren Schulserver hochgeladen. Dazu verwendeten wir FileZilla. Jeder musste sich zuerst einen Orner anlegen und seine Dateien dort ablegen (man durfte zur Benennung des Ordners nur Kleinbuchstaben, keine Sonderzeichen und weniger als 8 Buchstaben verwenden). Um die Seite dann zu betrachten, muss man schueler.gympurkersdorf.ac.at/Ordnername in den Browser schreiben. –> hier ist meine Test-Webseite:
http://schueler.gympurkersdorf.ac.at/haus/
Validator:
Um mögliche Fehler oder Kompatibilitätsprobleme auf HTML-Webseiten zu erkennen und vermeiden gibt es die Möglichkeit mit einem Dienst die Seite auf solche Fehler zu durchsuchen. Dazu muss der URL unter http://validator.w3.org/ eingegeben werden und auf check geklickt werden. So bekommt man eine genaue Fehlerauflistung.
