Jahrgang 10 - Webdesign:

6.1.)
Neues Thema: Gestaltung einer Webseite

Öffne folgende Webseite, lies dir die Texte intensiv und genau durch und beantworte dann in einem Libre Office Textdokument folgende Fragen:

1.Was ist ein "Tutorial" ?
2. Was ist ein Browser?
3. Was braucht man, um Webseiten zu erstellen?
4. Muss man online sein, um Webseiten zu erstellen?
5. Wer hat die Sprache "HTML" erfunden und wann war das?
6. Was bedeuten die Buchstaben "H-T-M-L" ?
7. Wofür braucht man HTML?
8. Was sind die zwei grundlegenden Bestandteile von HTML?
9. Das Zeichen "<>" ist ein .............
10. Das Zeichen "" heißt ..............
11. Was muss ich schreiben, damit der Text "fett" dargestellt wird?
12. Wofür steht das Element h1 ?
13. Die HTML-Befehle "b", "h1", "h2" usw. sind Tags oder Elemente?
14. Sollte man Tags in Klein- oder in Großbuchstaben schreiben?
15. Erstelle deine ersten HTML-Zeilen. Beginne mit den Aufgaben auf
folgender Seite:


6.2.)
Fortsetzung 1: Gestaltung einer Webseite

Öffne folgende Webseite, lies dir die Texte intensiv und genau durch und beantworte dann in einem Libre Office Textdokument folgende Fragen:
Solltest du auf der verlinkten Webseite die Antwort nicht finden, suche in Lektion 7 oder 8.....

16. Wozu dient das Element "title"? In welchen Bereich der Webseite (head oder body) gehört er? Wo erscheint der Text, den man dort hineinschreibt?
17. Wie sieht die Grundstruktur jeder Webseite aus? Denke an die vier wichtigsten Elemente.
18. In welchen Bereich der Webseite gehört der eigentliche Inhalt der Seite?
19. Wie schreibt man kursiv?
20. Wie erzeugt man einen Absatz?
21. Wie erzielt man einen Zeilenumbruch?
22. Was ist der Unterschied zwischen einer ungeordneten und einer geordneten Liste?
23. Welche Elemente muss man dafür verwenden?


6.3.) Fortsetzung 2: Gestaltung einer Webseite

Öffne folgende Webseite, lies dir die Texte intensiv und genau durch und beantworte dann in einem Libre Office Textdokument folgende Fragen:

24. Was sind Attribute?
25. Gebe Beispiele für Attribute, indem du die Syntax (die verwendeten HTML Befehle) aufschreibst.
26. Wie werden Farben "programmiert"?
27. Welchen Farbcode hat "schwarz", welchen Farbcode hat "gelb"?
28. Muss man den Farbcode eingeben oder geht es auch einfacher?
29. Wie kann ich im HTML Code einen Link auf eine andere Seite oder ein Bild etc setzen?
30. Wann muss bei einem Link die Webadresse vollständig ausgeschrieben werden und wann nicht?
31. Gebe ein Beispiel für den HTML Code, den man verwendet, um innerhalb ein und derselben Seite in einen anderen Bereich zu springen.
32. Wie verlinkt man E-Mail Adressen? Wie lautet der Code?


6.4.) Webdesign mit Blue Griffon

Das Programm "Blue Griffon" ist in unserer Schule auf allen Rechnern installiert. Es ist ein Open-Source Programm.

33. Informiere dich im Web, was der Begriff "open source" bedeutet.
34. Öffne das Programm "Blue Griffon" und schaue dich ein wenig auf der Oberfläche um.
35. Leider gibt es keine deutschsprachigen Tutorials zu dem Programm. Nur eine kleine Einführung in einer älteren Sendung des
Computerclubs. Schaue dir das Video an und vollziehe die Schritte mit einem eigenen Text (kann ruhig irgendwoher kopiert werden) und eigenen Bildern nach.
Speichere die Webseite ab und sende mir die "index.html" Datei.

6.5.) HTML für Anfänger 1

In den folgenden Einheiten kannst du HTML von Grund auf lernen. Dazu gibt es auf Youtube verschiedene Tutorials.
Ich habe mal eins herausgegriffen. Das Tutorial unterteilt sich in mindestens acht Videos. Manche Videos haben ein paar "Längen", weil der Ersteller der Videos (der sich mit dem Thema sehr gut auskennt, ohne Zweifel) manchmal nicht ganz bei der Sache zu sein scheint. Jedoch ist es für einen Anfänger gut nachzuvollziehen.

Sollten die Videos auf Youtube nicht mehr verfügbar sein, kannst du sie vom Schulserver aus (Laufwerk "Vorlagen") ansehen.

Aufgabe: Schaue dir
Video 1 und Video 2 an und vollziehe die Schritte mit dem Programm "Notepad++" nach. Es befindet sich im Prdner "Programme". Schicke mir dein Ergebnis in "EINER" Mail mit angehängtem Textdokument. Nenne die Aufgabe: "6.5"

6.6.) HTML für Anfänger 2

Hier geht es weiter mit dem HTML Tutorial.

Aufgabe: Schaue dir
Video 2 und Video 3 an und vollziehe die Schritte vollziehe die Schritte mit dem Programm "Notepad++" nach. Schicke mir dein Ergebnis in "EINER" Mail mit angehängtem Textdokument. Nenne die Aufgabe: "6.6"


6.7.) HTML für Anfänger 3

Es geht weiter mit dem HTML Tutorial.

In den letzten beiden Videos hast du ein paar typische Elemente kennengelernt. Hier geht es weiter:

Aufgabe: Schaue dir
Video 4 und Video 6 an und vollziehe die Schritte mit "Notepad ++" nach. Schicke mir dein Ergebnis in "EINER" Mail mit angehängtem html-Textdokument. Nenne die Dateien: 6.7.1 und 6.7.2.



6.8.) HTML für Anfänger 4

Es geht weiter mit dem HTML Tutorial. Dieses Mal geht es um erweiterte Tabellen und der Grundstruktur einer Webseite.

In den letzten beiden Videos hast du ein paar typische Elemente kennengelernt. Hier geht es weiter:

Aufgabe: Schaue dir
Video 7 und Video 8 an und vollziehe die Schritte mit "Notepad ++" nach. Schicke mir dein Ergebnis in "EINER" Mail mit angehängtem html-Textdokument. Schicke mir dein Ergebnis in "EINER" Mail mit angehängten Textdokumenten als html.
Nenne die Aufgaben 6.8.1 und 6.8.2.


6.9.) HTML für fortgeschrittene Anfänger 5

Es geht weiter mit dem HTML Tutorial. Dieses Mal geht es um erweiterte Tabellen und der Grundstruktur einer Webseite.

In den letzten beiden Videos hast du ein paar typische Elemente kennengelernt. Hier geht es weiter:

Aufgabe: Schaue dir
Video 9 und Video 10 an und vollziehe die Schritte mit "Notepad ++" nach. Schicke mir dein Ergebnis in "EINER" Mail mit angehängten html-Textdokumenten.
Nenne die Aufgaben 6.9.1 und 6.9.2.



6.10.) HTML für fortgeschrittene Anfänger 6

Es geht weiter mit dem HTML Tutorial. Du findest hier eine Aufgabe, bei der du ohne Hilfe eine (noch recht einfache) Webseite nachbilden sollst.
Hierbei geht es um absolute Exaktheit. Jedes Wort, jeder Zeilenumbruch, jede Formatierung muss am Ende genauso aussehen wie auf folgendem
Bild:

Schicke mir das Ergebnis als HTML-File.


6.11.) HTML für fortgeschrittene Anfänger 7

Es geht weiter mit dem HTML Tutorial. Dieses Mal geht es um CSS - Grundlagen. Was ist eigentlich CSS und wozu braucht man es? Besuche folgende Webseite und lies dir den Text gut durch. Beantworte folgende Fragen:

1. Was bedeuten die Buchstaben "CSS"
2. Was kann man mit dieser Stilsprache in HTML Dokumenten festlegen?
3. Welche Vorteile bringt CSS? Was kann durch durch CSS vereinfacht werden?
4. Welche drei Methoden gibt es, um "CSS" in ein HTML Dokument einzubinden?
5. Was ist ein "style-sheet"?


6.12.) HTML für fortgeschrittene Anfänger 8

ACHTUNG: Ab sofort schickt ihr mir bitte Screenshots eurer Ergebnisse. Das macht man am besten mit dem "Snipping-Tool" im Ordner "Programme".

Weiter geht es mit CSS. Schaue dir das folgende
Video
an und vollziehe alle Schritte nach. Am Ende schickst du mir den Screenshot des Ergebnisses.

6.13.) HTML für fortgeschrittene Anfänger 9

Weiter geht es mit CSS. Schaue dir die beiden folgenden Video1 , Video2 an. Es sind Änderungen, bzw. Verbesserungen an dem Webseitenlayout welches du in Aufg. 6.12 bereits erstellt hast. Die folgenden Videos bauen also darauf auf.
Dieses Mal schickst du mir zwei Screenshots ( Bildschirm-Hardcopies). Nenne sie 6.13_Menu und 6.13_Farbe



6.14.) HTML für fortgeschrittene Anfänger 10

Weiter geht es mit CSS. Schaue dir die beiden folgenden Video1 , Video2 an. Es sind Änderungen, bzw. Verbesserungen an dem Webseitenlayout welches du in Aufg. 6.13 bereits erstellt hast. Die folgenden Videos bauen also darauf auf.
Schicke mir zwei Screenshots. Nenne sie 6.14_Footer und 6.14_Schatten


6.15.) HTML für fortgeschrittene Anfänger 11

Weiter geht es mit CSS. Schaue dir die beiden folgenden Video6 , Video7 an. Es sind Änderungen, bzw. Verbesserungen an dem Webseitenlayout welches du in Aufg. 6.14 bereits erstellt hast.
Die folgenden Videos bauen also wieder darauf auf.
Schicke mir zwei Screenshots. Nenne sie 6.15_Schrift und 6.15_Inhaltsbereich


6.16.) HTML für fortgeschrittene Anfänger 12

Weiter geht es mit CSS. Schaue dir die beiden folgenden Video8 , Video9 an. Es sind Änderungen, bzw. Verbesserungen an dem Webseitenlayout welches du in Aufg. 6.15 bereits erstellt hast.
Die folgenden Videos bauen also wieder darauf auf.
Schicke mir zwei Screenshots. Nenne sie 6.16_Menu und 6.16_Header


6.17.) HTML für fortgeschrittene Anfänger 13

Weiter geht es mit CSS. Schaue dir die beiden folgenden Video10 , Video11 an. Es sind Änderungen, bzw. Verbesserungen an dem Webseitenlayout welches du in Aufg. 6.16 bereits erstellt hast.
Die folgenden Videos bauen also wieder darauf auf.
Schicke mir zwei Screenshots. Nenne sie 6.17_Hintergrund und 6.17_Startseite



7.1.) HTML für Fortgeschrittene 1

So, ab jetzt brauchen wir unseren USB Stick. In dem Video12 ,und Video13 werden wir mit unserem eigenen Webserver arbeiten. Dazu müssen wir zuerst die Software "XAMPP" herunterladen und installieren.
Da nicht sicher ist, ob wir das innerhalb des Schulnetzwerkes auf unseren Rechnern einfach so installieren können, ist es angebracht, dies auf einem USB Stick zu tun.

Schaue dir zuerst Video12 an. Danach kommt Video13 ins Spiel.

Solltest du noch keinen USB-Stick dabei haben, schaue dir bitte folgendes "Jimdo"-Tutorial an:

https://www.youtube.com/watch?v=sIHA4omnpRA