Kurs:Webdesign/HTML Grundlagen

   

Webdesign

   

HTML Grundlagen

Erste Webseite

1. Erstellen Sie einen neuen Ordner mit dem Namen homepage. Alle weiteren Dateien und Unter-Ordner sollen in diesen Ordner!
2. Erstellen Sie mit einem Texteditor eine Webseite mit dem Dateinamen index.html
3. Schreiben Sie Ihren Namen auf die Webseite, und eine sehr kurze Beschreibung Ihrer Person. (Diese Webseite wird im weiteren Ihre Homepage genannt.)
4. Betrachten Sie die Webseite in zwei verschiedenen Browsern - sieht sie so aus wie Sie das erwartet haben?

Erste korrekte Webseite

Alle HTML-Übungsaufgaben sollen Sie als korrektes XHTML erstellen! Es gilt der W3C-Validator.

1. Ergänzen Sie Ihre Webseite (falls nötig) so, dass Sie die richtige Grundstruktur hat.
2. Testen Sie Ihre Seite mit dem Validator des World Wide Web Consortium.
3. Verbessern Sie die Seite so lange, bis alle Fehler beseitigt sind.

Text formatieren

Fügen Sie folgenden Text als Absatz in Ihre Webseite ein (mit 'copy and paste', nicht abtippen!):

   Alle Menschen sind frei und gleich an Würde und Rechten geboren. 
   Sie sind mit Vernunft und Gewissen begabt und sollen einander im 
   Geist der Brüderlichkeit begegnen.

Formatieren Sie einzelne Wörter um sie zu betonen. (siehe HTML-Tags <em> und <strong>)

Achtung: Wieder mit dem Validator testen!

Text formatieren nach Vorschrift

Fügen Sie den Text noch einmal in Ihre Webseite ein:

   Alle Menschen sind frei und gleich an Würde und Rechten geboren. 
   Sie sind mit Vernunft und Gewissen begabt und sollen einander im 
   Geist der Brüderlichkeit begegnen.

formatieren Sie diesmal jedes dritte Wort kursiv und jedes zweite Wort fett. Es kann also Wörter geben, die fett und kursiv sind.

Vergessen Sie nicht Ihren Code mit dem Validator zu überprüfen!

Bilder einfügen

1. Besorgen Sie ein paar Bilder, in Web-tauglichem Format und Dimension, z.b. von wiki commons, und speichern Sie diese Dateien in den gleichen Ordner, in dem Ihre Homepage liegt.

(Wichtig: Wollen sie ihre Website veröffentlichen, müssen sie darauf achten, dass ihre Bilder ungeschützt sind)

1. Fügen Sie ein paar Bilder in ihre Homepage ein (siehe <img>-Tag)
2. bitte nicht vergessen: nur weil ich ein Bild kopieren kann heisst das noch lange nicht, dass es richtig oder legal oder ok ist das Bild zu kopieren und wieder zu verwenden

--TheHT 14:46, 25. Feb. 2009 (CET)

--TheHT 14:47, 25. Feb. 2009 (CET)

Links einfügen

1. Fügen Sie in Ihre Homepage drei Links ein:
   1. Einen Link zu Ihrer Lieblings-Seite in der Wikipedia,
   2. einen Link zur schönsten Webseite die Sie kennen,
   3. einen Link zu Ihrer E-Mail Adresse!
2. Testen Sie alle drei Links mit einem Browser!
3. Testen Sie Ihre Seite wieder mit dem Validator!

Relative Links

1. Legen Sie eine zweite Webseite mit dem Dateinamen photos.html an.
2. Setzen Sie einen Link von Ihrer Homepage zu der neuen Webseite.
3. Setzen Sie einen Link von der neuen Seite zurück zur Homepage

Tipp: in der Adresse sollte nicht file: vorkommen!

Anker und interne Links

Kopieren Sie die diesen langen Text in die Datei geschichte.html. (Achtung: Nicht nur den Text im Browser sondern den HTML-Code kopieren.) Setzen Sie 8 weitere interne Links in dieser Seite (zwei Links sind schon vorgegeben).

Bilder vorbereiten und Einbauen

Sie wissen schon, mit welchem HTML-Tag man ein Bild in eine Webseite einbaut. In dieser Übung geht es nun um die Arbeit, die vorher kommt:

1. Bringen Sie ein von Ihnen selbst gemachtes Vektorbild in ein geeignetes Format fürs Web (jpg, gif, png, nicht breiter als 750 Pixel) und bauen Sie es in Ihre Homepage ein.
2. Bringen Sie ein von Ihnen selbst bearbeitetes Pixelbild (z.b. ein Photo von Ihnen, bearbeitet mit Photoshop) in ein geeignetes Format fürs Web und bauen Sie es in Ihre Homepage ein.
3. Achten Sie auf ein vernünftiges Verhältnis von Bildqualität und Datenmenge. Sie müssen wissen in welchem Format Ihre Bilder gespeichert sind, und Sie müssen argumentieren können warum das das geeignete Format ist.

--TheHT 14:40, 25. Feb. 2009 (CET)