Die Arbeit mit dem Skript

Werbung
Skript zum
Thema HTML und CSS
Dies ist das Skript von:
Diese Arbeit ist lizensiert unter der Creative Commons Namensnennung -NichtKommerziell-Weitergabe unter gleichen
Bedingungen 4.0 International License, Robert Kores
Informatik Klasse 9
2015/16
INHALTSVERZEICHNIS
Regeln für das Schuljahr ............................................................................................................... 2
Die Arbeit mit dem Skript ............................................................................................................. 2
Deine Lieblingswebsite ................................................................................................................. 3
7 Qualitätskriterien zur Beurteilung von Webseiten - und Web-Designern (Siehe
Dokument „Qualitätskriterien“) ................................................................................................ 4
1. HTML – Grundlagen .................................................................................................................... 4
1.1 Es geht los... ........................................................................................................................................... 4
1.2 HTML: Übungen 1 ................................................................................................................................ 4
2. Projektbeginn: Erste selbstgebaute Website .................................................................... 9
2.1 - 1. Schritt: Das HTML5 Grundgerüst aufbauen...................................................................... 10
2.2 Die Seite mit Inhalt füllen............................................................................................................... 10
2.3 Den Text „schön“ machen, ihn also formatieren ................................................................... 12
2.4 Die Seite in verschiedene Bereiche aufteilen ......................................................................... 13
2.5 Das Grundlayout der verschiedenen Bereiche basteln ....................................................... 15
2.6 Das Einfügen von Bildern ............................................................................................................... 17
2.7 Einstieg ins Design:........................................................................................................................... 19
CSS-Datei mit Hintergrundfarben zur Orientierung ................................................................... 19
2.8 - 3-Spalten-Layout in CSS anlegen .............................................................................................. 23
2.9 Zentriertes Layout über CSS .......................................................................................................... 25
2.10 Der Universalselektor................................................................................................................... 28
2.11 Kopfbereich der Website erstellen .......................................................................................... 29
2.12 Hintergrundgrafiken für unsere Website.............................................................................. 31
2.13 Bilder im aside Bereich mit Design versehen ...................................................................... 33
2.14 Abstände und Schrift setzen ....................................................................................................... 35
2.15 Design für die Steuerung auf der linken Seite...................................................................... 36
2.16. Steuerung mit Schaltflächen-schöner Klicken mit Design ............................................. 37
2.17 Fuß der Website .............................................................................................................................. 40
1
Informatik Klasse 9
2015/16
REGELN FÜR DAS SCHULJAHR
1. Verspätungen werden vermerkt und bei Häufungen im Zeugnis erwähnt.
2. 10 Minuten vor dem Ende der Stunde schreibt ihr in euer Lerntagebuch. Dies fließt mit 10% in die Schuljahresendnote mit ein.
DIE ARBEIT MIT DEM SKRIPT
Ihr besitzt entweder alleine oder zu zweit dieses Skript und schreibt auf dem Deckblatt ganz
unten eure Namen auf. Die Aufgaben könnt ihr direkt hier im Skript digital beantworten.
WICHTIG: Ihr müsst immer dafür Sorge tragen, dass die aktuellste Version mit Datum der
letzten Bearbeitung abgespeichert ist (Stick / Dropbox etc.).
Sobald du in diesem Skript schreibst, achte darauf, dass die Formatierung erhalten bleibt
und das Dokument weiterhin „schön“ aussieht. Scheue dich nicht mich zu fragen, wenn du
nicht weiter weißt!
2
Informatik Klasse 9
2015/16
DEINE LIEBLINGSWEBSITE
Wähle eine Website aus, die dir gefällt. Wenn du deine Lieblingswebsite gefunden hast, beantworte bitte folgende Aufgaben in ganzen Sätzen:
1. Beschreibe in kurzen Sätzen, um welche Inhalte es auf der Seite geht.
2. Notiere, warum und für wen die Seite wohl erstellt worden ist.
3. Erkläre den Aufbau der Website. Versuche den Aufbau in Worte zu fassen.
4. Gebe die Navigation der Website wieder. Würdest du eventuell etwas verändern?
5. Ordne die Farben und Schriften der Website ein. Glaubst du sie wurden bewusst so
ausgewählt?
6. Stelle die Informationen über den Betreiber der Website dar, die du auf der Seite
finden kannst.
Sobald du alle Antworten aufgeschrieben hast, gib mir Bescheid und bereite dich darauf vor
deine Antworten vor der Klasse vorzutragen.
Deine Antworten:
3
Informatik Klasse 9
2015/16
7 QUALITÄTSKRITERIEN ZUR BEURTEILUNG VON WEBSEITEN - UND
WEB-DESIGNERN (SIEHE DOKUMENT „QUALITÄTSKRITERIEN “)
1. HTML – GRUNDLAGEN
1.1 ES GEHT LOS...
Nun wirst du verschiedenste Aufgaben bekommen, um HTML und CSS kennenzulernen. Sobald wir diese Aufgabenreihe abgeschlossen haben, beginnt ein größeres Projekt. Ziel des
Projekts wird es sein, eine Website zu basteln, die alles Gelernte zusammenfasst und darstellt. Wie du die Seite designst, ob du Bilder benutzt (vielleicht eignen sich Screenshots?)
oder wie du die Navigation aufbaust, ist ganz allein dir überlassen. Selbstverständlich werden eure Websites am Ende bewertet. Ich werde auch versuchen mit euch zusammen die
Seiten online zu stellen, sodass ihr daran weiter arbeiten könnte oder eurer Familie oder
Freunden zeigen könnt, was ihr gelernt habt.
1.2 HTML: ÜBUNGEN 1
Für das Lösen der Übungsaufgaben bekommst du direkt nach den Übungsaufgaben hier im
Skript theoretischen Input, du kannst jederzeit Informationen aus dem Internet holen, z.B.
hier: http://wiki.selfhtml.org oder du kannst zusätzlich die Internetseite
www.w3schools.com zur Hilfe nehmen. Dort kannst du rechts bei dem „HTML-Example“
unter „Try it yourself“ deinen Code ausprobieren.
1) Erkläre die Bedeutung der folgenden Tags:
Tag
Erklärung
<a href="http://www.kaifugymnasium.de">swr3</a>
<i>Text</i>
<h2>Text</h2>
<img src="cartoon.jpg" width=200 height=120
border=0>
<title>Klassenfoto</title>
4
Informatik Klasse 9
2015/16
<font size="2" color="red"></font>
2) Ergänze den Quellcode der folgenden HTML-Seite so, dass nach dem Text noch das
Bild "foto12.jpg" eingefügt wird. Vervollständige den Code für die Seite!
<html>
<head>
<title>Klassenhomepage</title>
</head>
<body>
<h4>Unsere Klassenhomepage</h4>
Hier ein Foto unserer Klasse:
3) Schreibe den Quellcode für die folgende Bildschirmdarstellung (achte auf die Formatierung):
-
auf dem Wort HIER einen Link zu www.w3schools.com
-
die Inhalte als Liste formatieren; Informationen dazu bitte selbständig ermitteln
Website von _______
Liebe Websitebastler!
Wir freuen uns, dass Ihr auf unserer Seite gelandet seid. Wir bieten Euch folgende
Inhalte:
• Was ist HTML & CSS?
• Grundlegende Befehle von HTML
• Eine erste selbst gebaute Website
• Du willst es ausprobieren? Kein Problem – klicke HIER
Viel Spaß!
5
Informatik Klasse 9
2015/16
(Wie mache ich
6
Informatik Klasse 9
2015/16
Input zu den ersten Übungsaufgaben
Webseitenerstellung mit HTML und XHTML
Dr. Stefan Staiger:
HTML-Grundlagen 1: Struktur, Zeichenformatierung
HTML = Hyper Text Markup Language
Seitenbeschreibungssprache zur Beschreibung der Elemente einer Webseite
Struktur
Die folgende einfache H TML-Seite zeigt die HTML-Grundstruktur:
<html>
<head>
<title>Meine Homepage</title>
</head>
<body>
Hallo!
</body>
</html>
· Alle Anweisungen beginnen mit einer öffnenden spit zen Klammer < und enden
mit einer schließenden spit zen Klammer >. Dazwischen steht der Name des "Tags"
(deutsch: "Etikette" oder "Marke").
· Viele Tags markieren Bereiche und bestehen daher aus e inem öffnenden Tag
(z.B. <title> und einem schließenden Tag (z.B. </title>).
·
Zunächst zeigt <html> den Beginn und </html> das Ende einer html-Seite an.
· Anschließend gliedert sich die Seite in den Kopf (eingerahmt von <head> und
</head>) und den Körper (eingerahmt von <body> und </body>)
·
Im Kopf steht der Dokumententitel zwischen den title-Tags.
·
Der Körper enthält Texte, Links, Bilder usw.
· Die erstellte Datei wird mit der Endung ".htm" oder ".htm l" abgespeichert und
kann dann im Browser betrachtet werden.
Zeichenformatierung
·
Die Formatierung von Zeichen erfolgt durch Tags, die um den zu formatierenden
Textbereich platziert werden.
Beispiele:
Tag
Resultat
<b>fett</b>
fett
kursiv
<i>kursiv</i>
<u>unterstrichen</u>
unterstrichen
·
Die Schriftart und -größe wird so angegeben:
<font face="Arial" size="2" color="red">
·
Mit den Tags <h1> <h2> <h3> <h4> <h5> <h6> werden Überschriften in 6
Größen festgelegt.
·
<p> und </p> schließen Absätze ein.
·
<br/> sorgt für den Beginn einer neuen Zeile.
© 2005, Schulen ans Net z e.V.
1
7
Informatik Klasse 9
2015/16
8
Informatik Klasse 9
2015/16
2. PROJEKTBEGINN: ERSTE SELBSTGEBAUTE WEBSITE
So soll die Seite am Ende aussehen:
9
Informatik Klasse 9
2015/16
2.1 - 1. SCHRITT: DAS HTML5 GRUNDGERÜST AUFBAUEN
Aufgabe: Öffne das Programm „notepad++“, erstelle eine neue Datei und speichere sie als
„index.html“ Datei in deinen Dokumenten Ordner ab. Erzeuge nun das Grundgerüst für unsere Seite, indem du folgende Begriffe in richtiger Reihenfolge in die Datei schreibst (Tipp:
www.w3schools.com):

<title> Fennek und seine Umwelt – Beispielseite HTML5</title>

<meta name="description" content="160 Zeichen zum Beschreiben des Inhalts">

<link href="style.css" type="text/css" rel="stylesheet">

</body>

<!DOCTYPE html>

<html>

<meta charset="UTF-8">

</head>

<head>

</html>

<body>
2.2 DIE SEITE MIT INHALT FÜLLEN
Füge folgenden Inhalt in unsere Webseite (die Datei in notepad++ index.html) ein. Selbstverständlich kannst du den Inhalt hier kopieren und in die Webseite einfügen. Wie war noch
mal die Tastenkombination für „Kopieren“ und „Einfügen“? Wenn du deine index.html nun
aus deinem Dokumenten Ordner öffnest, solltest du nun den Inhalt der Website sehen. Natürlich sieht es noch nicht schön aus, doch Schritt für Schritt...
10
Informatik Klasse 9
2015/16
Wüstenläufer
Kontakt
Impressum
Startseite
Vorstellung
Einzelteile
Startseite
über diese Website
Einzelteile
Design verwenden
Bildersammlung: Fennek schlafend Fennek schläft noch immer Fenneks
sind Nachts wach
Fennek - Wüstenläufer
Der Fennek bzw. der Wüstenfuchs ist ein Wildhund mit extrem großen
Ohren, die dem Wärmeausgleich dienen. Die Ohren sind ca. 15 cm lang
- bei einer Gesamtläge von ca. 40 cm ist das proportional beachtlich.
Lebt gerne im Sand sprich in Wüsten und schläft tagsüber.
Mahlzeiten des Fennek
Zu der Nahrung der Fenneks zählen:
Mäuse
Heuschrecken
Eidechsen
Vögel
Obst und Beeren (in Gefangenschaft)
Der Mozilla-Fennec
Bei dem Fennec von Mozilla handelt es sich um einen mobilen Webbrowser, der als kleiner Bruder des Firefox einen passenden Namen benötigt hat. Und ein Fennek ist definitiv kleiner als ein Fuchs:)
Diese Seite hat nichts mit Fennec von mozilla.org zu tun - wenn Sie
aber zu Mozillas mobilem Webbrowser Fennec wollen, gehen Sie zu
http://www.mozilla.org/projects/fennec/1.0a1/releasenotes
Sinn und Zweck dieser Website
Diese Website dient als Nachbau-Objekt und zum Lernen von HTML und
CSS. Alle benötigten Einzelteile bekommen Sie auf den Unterseiten.
Beachten Sie, dass der Hintergrund frei ausgetauscht werden kann.
So - nun viel Spaß daran.
Axel
© 2013 - www.fennek.mobi
11
Informatik Klasse 9
2015/16
2.3 DEN TEXT „SCHÖN“ MACHEN, IHN ALSO FORMATIEREN
Nun hast du den Inhalt und du weißt wie dieser am Ende aussehen soll. Formatiere also nun
den Inhalt mit den dir bekannten Tags (Farben bitte ignorieren!!!). Orientiere dich an diesem Zielbild:
http://www.mozilla.org/projects/fennec/1.0a1/releasenotes
Überschrift h1
Überschrift h2
Liste mit bullets
Überschrift h2
Link zu
http://www.mozilla.org/projects/
fennec/1.0a1/releasenotes
Überschrift h2
12
Informatik Klasse 9
2015/16
2.4 DIE SEITE IN VERSCHIEDENE BEREICHE AUFTEILEN
Wie du auf der Zielseite erkennen kannst, hat die Seite fünf verschiedene Bereiche:

<header>

<nav>

<section>

<aside>

<footer>
13
Informatik Klasse 9
2015/16
Teile nun die Seite in diese Bereiche ein. Du arbeitest nun also komplett im body-tag. Ein
Beispiel: Suche den Inhalt, der zum header gehört und tagge ihn als header:
<header>
Wüstenläufer
Kontakt
Impressum
</header>
Sobald du alle Bereiche getaggt hast, kannst du bereits Veränderungen auf deiner Seite erkennen. Es sollte jetzt so aussehen:
14
Informatik Klasse 9
2015/16
2.5 DAS GRUNDLAYOUT DER VERSCHIEDENEN BEREICHE BASTELN
Für den body-tag hast du bereits das Grundlayout erstellt. Du hast die Überschriften, Listen
und Links gekennzeichnet. Dasselbe mache nun bitte mit allen anderen Bereichen. Schaue
dir dazu die Zielseite an, wie es am Ende aussehen soll. Hinweise: Die Menüpunkte in den
nav-tag Bereichen werden alle als unsortierte Liste angezeigt! Die Bilder können wir zunächst ignorieren! Hier wieder das Beispiel zum header:
<header>
<p>
<strong> Wüstenläufer </strong>
</p>
<p>
<a href "kontakt.html"> Kontakt </a> <br />
<a href "impressum.html"> Impressum </a>
</p>
</header>
Den strong-tag nutzt du, um das Wort Wüstenläufer besonders hervorzuheben. (So wie es
auf der Zielseite zu sehen ist). Ich wiederhole noch einmal: Es geht jetzt nur um den Inhalt,
die Anordnung und das Grundlayout der Seite (Hervorheben von Wörtern, Listen, Links,
Überschriften). Die Gestaltung, also z.B. das Verändern der Farben, erfolgt später mit der
Programmiersprache CSS.
Wie du weißt, führt ein Link immer zu einer anderen Internetseite. Später möchtest du,
dass man im header bei einem Klick auf „Kontakt“ oder „Impressum“ zu den entsprechenden Seiten gelangst. Wie bereits erwähnt ist die Internetseite „index.html“ immer deine
Startseite. Nun brauchen wir also zwei weitere Seiten. Ich würde sie „kontakt.html“ und
„impressum.html“ nennen, damit wir sofort bescheid wissen, was dort enthalten ist. Auch
wenn diese Seiten noch gar nicht existieren, können wir bereits einen Link dorthin verfassen. Schaue bei www.w3schools.com nach was der tag <br /> tut!
15
Informatik Klasse 9
2015/16
Wenn du alle Bereiche bearbeitet hast, sollte deine Seite so aussehen:
16
Informatik Klasse 9
2015/16
2.6 DAS EINFÜGEN VON BILDERN
Bisher habt ihr den Text bearbeitet. Auf der Webseite gibt es im Kopfbereich (header) und
im rechten Bereich (nav) Bilder. Bei Bildern muss immer als erstes die Überlegung angestellt
werden, ob es sich bei den Bildern um Inhalt oder Design handelt. Wenn ein Bild für das
Design gedacht ist, wird dieses über CSS eingebaut. Dazu gehören Hintergrundbilder, wie
z.B. in unserem 3-Spalten-Layout die Wüste ganz im Hintergrund und der Fenek im Kopfbereich. Wenn die Bilder Inhalt sind, dann gehören diese mit den entsprechenden HTMLBefehlen in die HTML-Seite integriert. So gehören die 3 Bilder auf der rechten Seite zum Inhalt.
Da du dich immer erst mit dem Inhalt einer Seite beschäftigst, interessieren dich zunächst
nur die 3 Bilder für den Inhalt. Lade Sie dir herunter und speichere sie mit einem Rechtsklick
über „Als Bild speichern“ in deinen Ordner „website“ und dort in dem Ordner „bilder“. Solltest du noch keinen haben, lege wie folgt einen an: Ordner Dokumente/website/bilder erstellen. In dem Ordner „website“ muss die Datei „index.html“ liegen. Speichere die Bilder
indem du als Dateiformat „.jpg“ auswählst und die Namen „fennek-1“, „fennek-2“ und
„fennek-3“.
http://www.fennek.mobi/bilder/fennek-klein-2633.jpg
http://www.fennek.mobi/bilder/fennek-klein-2646.jpg
http://www.fennek.mobi/bilder/fennek-klein-2672.jpg
Versuche nun durch selbstständiges Recherchieren die Bilder in dem Bereich „aside-tag“
einzufügen! Tipp: Der benötigte tag heißt <img>!
17
Informatik Klasse 9
2015/16
Deine Seite sollte nun so aussehen:
18
Informatik Klasse 9
2015/16
2.7 EINSTIEG INS DESIGN:
CSS-DATEI MIT HINTERGRUNDFARBEN ZUR ORIENTIERUNG
Ab jetzt geht es in das eigentliche Design. In den vorherigen Kapiteln hast du deine HTMLDatei erstellt mit dem kompletten Inhalt und der Struktur. Auf diese Struktur greifst du jetzt
über die CSS-Anweisungen zu und kannst so Design über die HTML-Datei „stülpen“. Wichtig,
damit klar ist, wo man gerade arbeitet sind während der Erstellungsphase Hintergrundfarben für die einzelnen Bereiche.
1. Aufgabe: Die CSS-Anweisungen für das Design befinden sich in einer separaten Datei
namens „style.css“. Die Dateiendung .css zeigt, dass es sich um eine CSS Datei handelt. Überprüfe ob du den Link zu dieser Datei im Kopf deiner HTML Datei korrekt
angegeben hast! So sollte/kann es in deinem <head>-tag aussehen:
2. Aufgabe: Nun musst du in dem Verzeichnis wo sich deine „index.html“ Datei befindet
die „style.css“ Datei anlegen. Dafür erzeugst du mit Hilfe deines Editors eine neue
leere Datei und speicherst sie unter dem Namen „style.css“ in den Ordner wo sich
auch die „index.html“ Datei befindet.
19
Informatik Klasse 9
2015/16
3. Aufgabe: Kontrolliere ob du alles richtig gemacht hast! Mit dem folgenden Befehl
sorgst du dafür, dass alle Überschriften mit einem <h1>-tag in deiner HTML Datei die
rote Farbe bekommen:
Jetzt ist es extrem wichtig, allen Bereichen eine Hintergrundfarbe mitzugeben, damit du dich
beim Entwickeln der Seite daran orientieren kannst und nicht im Nebel stocherst. Durch die
Farben ist immer exakt klar, wo wir uns befinden und welche Größen die einzelnen Elemente annehmen.
4. Aufgabe: Bestimme für alle Bereiche deiner Seite (header, nav, aside, footer, section)
eine Hintergrundfarbe! Hier ein Beispiel für aside:
20
Informatik Klasse 9
2015/16
Die Farben werden in der Hexadezimalschreibweise dargestellt. Um für alle deine Wunschfarben die passende Hexadezimalvariante zu erfahren, klicke auf diese Seite:
http://www.colorhexa.com
Hier kannst du einfach oben links eine Wunschfarbe hinzufügen und so die Hexadezimalschreibweise erfahren. Scrollst du weiter herunter, kannst du die Farbe sogar noch verfeinern, bist du exakt die Farbe hast, die du haben möchtest. Siehe hier:
Du fragst dich, wie man den nav-Bereich ansteuern soll, da es ja zwei gibt? Das machst du,
indem du in der HTML-Datei beim Bestimmen der Bereiche jedem nav-Bereich eine ID zuweist, über die du den Bereich in der CSS-Datei ansteuern kannst! Zum Beispiel:
in der HTML Datei:
in der CSS Datei:
Der Unterschied: IDs werden in der CSS-Datei mit Hilfe einer Raute angesprochen, die bei
Bereichen ohne ID wegfällt.
21
Informatik Klasse 9
2015/16
Deine Website sollte nun wie folgt aussehen:
22
Informatik Klasse 9
2015/16
2.8 - 3-SPALTEN-LAYOUT IN CSS ANLEGEN
Im nächsten Schritt legst du die 3 Spalten über CSS an. Dafür sollst du selbst mit folgenden
Ausdrücken herumprobieren:

width = Breite
 Beispiel = width: 300px;

float = Der Bereich bekommt die Eigenschaft, wo er sich befindet und dass es von
den folgenden Bereichen umflossen werden darf.
 Beispiel = float: left;
Du brauchst noch folgende Fakten, bevor du anfangen kannst:
1. Der linke nav-Bereich soll 220px (Pixel) breit sein, er soll links zu sehen sein und alle
folgenden Bereiche sollen ihn umfließen.
2. Der aside-Bereich soll 175px breit sein, er soll sich rechts befinden und alle folgenden
Bereiche sollen ihn umfließen.
Deine Seite sollte nun so aussehen:
23
Informatik Klasse 9
2015/16
Der Inhalt in der Mitte umfließt das rechte und linke Element. Allerdings fließt er auch unterhalb weiter, wenn Platz da ist. Genau das ist die Funktionsweise von float: fließen.
Damit nun der Inhalt in der Mitte auch wie eine Spalte aussieht und nicht unterhalb der anderen Elemente fließt, gebe diesem einen Außenabstand mit. Dieser Außenabstand muss
größer sein als der benötigte Platz der jeweiligen Spalte.
Also für die linke Spalte mindestens 220 Pixel und rechts mindestens 175 Pixel. Gebe nun
dem Inhalt, der im Bereich <section> steckt, die Außenabstände mit:
Nun sollte deine Seite so aussehen:
Zeige nun deinem Lehrer dein Ergebnis und führe im vor, was passiert, wenn man das Browserfenster mit deiner Website größer und kleiner macht!
24
Informatik Klasse 9
2015/16
2.9 ZENTRIERTES LAYOUT ÜBER CSS
Zur Zeit füllt deine Website das komplette Browserfenster. Wie du auf der Zielwebsite erkennen kannst, wollen wir unsere eigentliche Seite allerdings mittig haben, da wir unter der
eigentlichen Seite noch ein Hintergrundbild legen wollen. Zur Erinnerung:
25
Informatik Klasse 9
2015/16
Damit du die Seite zentriert in die Mitte anlegen kannst, musst du einen weiteren Bereich
mit einer ID erzeugen. Dieser Bereich soll alle anderen Bereiche beinhalten, da wir ja die
komplette Seite mittig haben wollen! Bitte nenne diesen Bereich „wrapper“ (Umschlag). Du
erzeugst ihn mit Hilfe des div-tags. Dadurch werden in der HTML-Datei neue Bereiche angelegt. So soll es in der HTML-Datei aussehen:
Überprüfe ob es geklappt hat, indem du in der CSS-Datei dem Bereich „wrapper“ eine krasse
Hintergrundfarbe gibst:
Um die nächste Aufgabe zu lösen, benötigst du folgende Befehle:

border = Rand
o px (Dicke des Rands)
o dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen)
o Farbe
 Beispiel = border: 5px, dashed, #000000;
26
Informatik Klasse 9

2015/16
margin = Außenabstand
o px/auto Abstand nach oben
o px/auto Abstand nach rechts
o px/auto Abstand nach links
o px/auto Abstand nach unten
„auto“ bedeutet, dass der verfügbare Platz gleichmäßig aufgeteilt wird.
 Beispiel = margin: auto, 5px
Bei diesem Beispiel wäre der Abstand oben und unten gleichmäßig aufgeteilt und
der Abstand nach rechts 5 Pixel.
Aufgabe:

Der Rand des wrapper-Bereiches soll 2 Pixel breit sein, eine durchgezogene Linie haben und aus der Farbe Rot bestehen.

Die Breite soll 900 Pixel betragen.

Der Abstand nach oben soll 0 sein und der Abstand nach rechts und links soll gleichmäßig verteilt sein.
Deine Webseite soll so aussehen:
27
Informatik Klasse 9
2015/16
2.10 DER UNIVERSALSELEKTOR
Der Universalselektor ist das * zu Beginn einer CSS Datei. Füge folgende Befehle an den Anfang deiner CSS Datei:
Beschreibe hier in kurzen Sätzen, was sich verändert hat:
Der Grund für dieses Vorgehen wir hier beschrieben:
Woher kommen diese Abstände und warum sehen diese bei jedem Browser leicht anders
aus? Dazu muss man wissen, dass alle Browser voreingestellte Werte haben. Erst dadurch
wird eine reine HTML-Webseite ohne jegliches CSS sauber dargestellt. Es gibt also Voreinstellungen für Schriftgrößen und Abstände. Diese Abstände variieren von Browserhersteller
zu Browserhersteller (selbst zwischen den einzelnen Versionen eines Browsers). Und daher
ist es die beste Variante, alle vorgegeben Einstellungen zum Teufel zu jagen, um keine Überraschungen zu erleben.
28
Informatik Klasse 9
2015/16
2.11 KOPFBEREICH DER WEBSITE ERSTELLEN
So soll deine Website am Ende des Kapitels ausschauen:
1. Schritt: Du brauchst das Bilder für den header, also lade es dir mit einem Rechtsklick
herunter und speichere es in deinen Website-Ordner, wo auch die index.html Datei
liegt (wichtig!!!).
http://www.fennek.mobi/bilder/wuestenlaeufer-1-ohr.png
2. Schritt: Erkundige dich im Internet wie man in einer CSS Datei Bilder einfügt und führe den Befehl im header aus!
3. Schritt: Damit der header auf die Größe des Bildes angepasst werden kann, finde die
Größe des Bildes raus! Tipp: Rechtsklick auf die Bilddatei plus Eigenschaften!
4. Schritt: Füge unter dem Befehl aus dem 2. Schritt die Größe für den header ein, indem du sie mit height: 123px; angibst!
29
Informatik Klasse 9
2015/16
5. Schritt: Jetzt soll der Schriftzug „Wüstenläufer“ designt werden! Wähle für diesen
Abschnitt in der HTML Datei eine ID, damit wir mit der ID in der CSS Datei weiter arbeiten können:
6. Schritt: Nun kannst du anhand der ID in der CSS Datei bestimmen, wo das Wort
„Wüstenläufer“ positioniert sein soll, wie groß es ist und welche Farbe es hat:
7. und letzter Schritt: Da „Kontakt“ und „Impressum“ auch weiß sein soll, müssen wir
das in der CSS Datei für den Tag „a“ bestimmen, da „a“ für Links steht und es sich
hierbei ja auch um Links handelt:
30
Informatik Klasse 9
2015/16
2.12 HINTERGRUNDGRAFIKEN FÜR UNSERE WEBSITE
Schaue dir die Zielwebsite noch einmal an: http://www.fennek.mobi
Jetzt geht’s um die Hintergrundgrafik (Düne), um das transparente (halbdurchsichtige) Bild
in der Mitte und um das Ohr von dem Fennek ganz oben auf der Seite, welches in den Himmel ragt.
Es kommen jetzt folgende Schritte auf dich zu. Lese dir zunächst alle durch, bevor du mit der
Arbeit beginnst! Prüfe nach jedem Schritt, was sich auf der Website verändert hat, indem du
die „index.html“ immer wieder neu öffnest, bzw. sie aktualisierst!
1. Herunterladen / Speichern / Den „halbdurchsichtigen“ Bereich in die Website einfügen.
2. Herunterladen / Speichern / Die Dünenlandschaft in die Website einfügen.
3. Die Farben der Bereiche <wrapper>, <steuerunglinks>, <aside>, <section> herausnehmen, indem du sie auskommentierst und NICHT löscht.
4. Das Hintergrundbild (Dünen) fixieren, damit es beim scrollen nicht mit scrollt.
5. Das Ohr des Fenneks soll in Himmel ragen und unsere 3 Spalten sollen dort nicht
sichtbar sein.
Auf geht’s! 
1. Schritt
Lade dir das Bild herunter und speichere es in deinem Bilder Ordner:
http://www.fennek.mobi/durchsichtig8.png
Füge es als background-image in den Tag <wrapper>! Denke daran: Wir sind jetzt am designen und arbeiten ausschließlich in der CSS Datei!
31
Informatik Klasse 9
2015/16
2. Schritt
Lade dir das Bild herunter, speichere es in deinem Bilder Ordner und benenne es wie folgt
um: duene.jpg
http://www.fennek.mobi/bilder/1376.jpg
Füge es als background-image in den Tag <body>!
3. Schritt
Kommentiere die „background-color“-Tags in den Bereichen <wrapper>, <steuerunglinks>,
<aside>, <section> aus! Solltest du nicht wissen, wie man Code in einer CSS Datei auskommentiert, google nach „CSS auskommentieren“!
PS: Auskommentieren bedeutet, dass dieser Code nicht mehr als Programmcode gelesen
wird und somit keine Auswirkungen mehr hat.
4. Schritt
Fixiere das Dünenbild, indem du folgenden Tag in den <body> Bereich einfügst:
background-attachment: fixed;
5. Schritt
Der Fennek ist im <header> Bereich zu sehen. Damit das Ohr in den Himmel ragen kann,
musst du diesen Bereich also erst einmal frei stellen, da zur Zeit der <wrapper> Bereich ja
die ganze Seite „bedeckt“. Sorge also dafür, dass der <wrapper> Bereich erst NACH dem
<header> beginnt.
Jetzt hast du das Problem, dass es zwei Fenneks gibt, da der <header> nicht weiß, wie breit
er sein soll. Gehe also in die CSS Datei und gib dem <header> folgende Breite:
Kontrolliere alles und lasse es von deinem Lehrer prüfen!
32
Informatik Klasse 9
2015/16
2.13 BILDER IM ASIDE BEREICH MIT DESIGN VERSEHEN
Rechts hast du im Bereich <aside> die 3 Bilder mit den kleinen Fenneks. Diese sollst du nun
mit Design über CSS versehen. Die Bilder sollen in dem Bereich zentriert werden und mit
einem Rahmen versehen werden.
Um die drei Bilder zu designen, benötigen wir einen neuen Tag im Bereich <aside>. Man
nennt das „Typ-Selektor“, weil du in <aside> alle Elemente ansprechen möchtest vom Typ
„img“ (Image = Bilder). Füge diesen Typ-Selektor in deinen <aside> Bereich!
In diesem Tag musst du jetzt mit den Befehlen „margin-left“ für den Außenabstand (Die Bilder sollen ja mittig sein) und „border“ arbeiten (für den Rand um die Bilder). Probiere so
lange aus, bis die Bilder mittig im <aside> Bereich sind und einen dünnen (1px), durchgehenden silbernen Rand haben.
Ziel:
33
Informatik Klasse 9
2015/16
Fehlt noch die Beschriftung „Bildersammlung“ als Überschrift über den drei Bildern!
Überprüfe in deiner HTML Datei, ob die Bildüberschrift, inkl. den drei Bildern, von einem
Absatz Tag umschlossen werden  <p>! Über einen neuen Typ Selektor in der CSS Datei im
<aside> Bereich kannst du dann über das <p> die Beschriftung „Bildersammlung“ designen.
Füge also den Typ Selektor <aside p> in deine CSS Datei ein und bestimme denselben Abstand mit Hilfe von <margin-left> wie bei den Bildern zuvor!
Überprüfe dein Ergebnis!!!
Jetzt wirken 2 x der Abstand auf die Bilder – einmal von dem Absatz <p>, in dem die Bilder
drin stecken und einmal von dem Abstand <margin-left>, den wir vorher den Bildern zugeteilt haben <aside img>.
Unsere Bilder sind also bereits mit einem Abstand versehen, denn du jetzt wieder entfernen
musst. Gehe zum <aside img> und kommentiere dort den Abstand aus!
Sieht es jetzt gut aus?
Richtig, den roten Rand musst du noch entfernen. Suche die Stelle in der CSS Datei, die den
roten Rand erstellt und kommentiere diese aus!
34
Informatik Klasse 9
2015/16
2.14 ABSTÄNDE UND SCHRIFT SETZEN
Die Abstände im Bereich <section> und die Schrift auf der gesamten Website sind noch
nicht richtig formatiert. Beschäftige dich zunächst mit der Festlegung der gesamten Schrift
auf den Typ „arial“.
1. Aufgabe: Füge in den <body> Bereich die Schrift „arial“ ein, sodass der gesamte Bereich aus dieser Schriftart besteht!
Jetzt stürze dich auf die Abstände. Diese (sowohl Innen- wie Außenabstände) hast du über
den Universalselektor komplett auf 0 gesetzt, damit du nicht von unterschiedlichen Browsern Überraschungen durch unerwünschte Abstände erlebst.
2. Aufgabe: Gehe in den Bereich <section> und sorge dafür, dass folgende Abstände
programmiert werden:

<h1>: Abstand nach oben – 20px, Abstand nach unten – 0.4em (em ist die
Einheit für einen relativen Abstand) sowie die Farbe #dd9661.

<p>: Alle Absätze bekommen einen relativen Abstand von 0.1em.

<h2>: Die Farbe ist wie bei <h1>, der Abstand nach oben beträgt 1em und
nach unten 0.6 em.

<ul>: Die Punkte sollen um 3em einrücken.

<li>: Die Aufzählungspunkte sollen einen Abstand von 0.5em haben.
Ziel:
35
Informatik Klasse 9
2015/16
2.15 DESIGN FÜR DIE STEUERUNG AUF DER LINKEN SEITE
Ziel:
Es geht jetzt um die linke Navigationsleiste. Über deinen selbst bestimmten Tag, kannst du
sie in der CSS Datei ansprechen. Die meisten haben „<nav steuerunglinks> gewählt. Per
„#steuerunglinks“ kannst du den Bereich in der CSS Datei designen.
1. Aufgabe: Die komplette Navigation soll um 2em einrücken und einen Abstand nach
oben von 20px haben.
2. Aufgabe: Die einzelnen Punkte <li> sollen einen Abstand von 0.5em zueinander halten.
3. Aufgabe: Entferne die Aufzählungspunkte für die erste Liste <ul> und ändere die Aufzählungspunkte der Unterliste <ul> in Quadrate!
a. 1. Tipp: Arbeite mit dem Befehl: list-style-type
b. 2. Tipp: Die Unterliste erreichst du über den Befehl „#steuerunglinks ul ul“
36
Informatik Klasse 9
2015/16
2.16. STEUERUNG MIT SCHALTFLÄCHEN-SCHÖNER KLICKEN MIT DESIGN
Kommen wir zur Steuerung unter dem Kopf-Bereich, die horizontal verläuft. Hier stecken
einige Besonderheiten darin. Hier muss man mit der Maus nicht exakt auf die Schrift treffen
sondern der komplette Bereich reagiert wie ein Button – allerdings ohne Grafik. Und der
Benutzer bekommt visuell ein Feedback, indem der Bereich bei Mausberührung dunkler
wird.
Ziel:
1. Aufgabe: Blende die Aufzählungspunkte bei der Navigationsliste aus!
37
Informatik Klasse 9
2015/16
2. Aufgabe: Platziere die einzelnen Elemente der Liste nebeneinander.
Tipp: display: inline;
3. Aufgabe: Die Links stehen noch zu dicht nebeneinander. Diese kannst du über den
<a> Tag ansprechen. Du erinnerst dich? Über diesen Tag hast du in der HTML Datei
deine Links programmiert. In der CSS Datei sprichst du ihn also z.B. wie folgt an:
#steuerungoben a. Sorge dafür dass alle Links...:
a. ...den Befehl display:block; enthalten.
b. ...eine Breite von 230 px besitzen.
c. ...die Hintergrundfarbe gelb haben (damit wir es besser sehen können).
d. ...sich links befinden und von folgenden Elementen umschlossen werden.
e. ...einen rechten Rand besitzen, welcher 1px dick, rot und durchgehend ist.
f. ...der Text in der Mitte steht.
Jetzt fehlt noch der Effekt, der entstehen soll, wenn man mit der Maus über ein Feld fährt,
welches ein Link enthält. Dazu lade zunächst folgende Grafik herunter und speichere sie im
Bilder Verzeichnis: http://www.fennek.mobi/bilder/grau-50.png.
Informiere dich nun über den „hover“ Befehl:
http://www.w3schools.com/cssref/sel_hover.asp
38
Informatik Klasse 9
2015/16
4. Aufgabe: Sorge dafür dass das Bild „grau-50.png“ als Hovereffekt genutzt wird, wenn
man mit der Maus über einen Link fährt (nur in der oberen Navigationsleiste!).
5. Aufgabe: Jetzt sieht es rechts neben dem Link „Einzelteile“ noch nicht so schön aus.
Packe das Bild „grau-50.png“ als kompletten Hintergrund in dem Bereich #steuerungoben und gib ihm eine Höhe von 24px. Natürlich musst du auch den gelben
Hintergrund auskommentieren!
6. Aufgabe: Jetzt fehlt noch die gleichmäßige Höhe, damit es nicht wie eine Treppe aussieht. Gib dem Bereich #steuerungoben a dieselbe Höhe (Der Befehl muss hier „lineheigh“ heißen) wie dem Bereich #steuerungoben aus der Aufgabe zuvor.
7. Aufgabe: Abschließend entfernst du noch die Unterstreichungen und änderst die
Farbe der Links. Die Farbe soll weiß werden und die „text-decoration“ soll auf „none“
stehen.
39
Informatik Klasse 9
2015/16
2.17 FUß DER WEBSITE
Ziel:
1. Aufgabe: Füge im Footer ebenfalls das Bild „grau-50-png“ ein.
2. Aufgabe: Setze die Farbe auf weiß und sorge dafür, dass der Text mittig steht.
3. Aufgabe: Mache einen Test und entferne einen großen Teil des Inhalts (Am besten
mit STRG+X ausschneiden, damit du ihn gleich wieder einfügen kannst!!!!!). Deine
Website sollte wie folgt aussehen:
40
Informatik Klasse 9
2015/16
Das ist natürlich nicht perfekt. Der Footer sollte immer ganz unten bleiben, egal wie viel
Inhalt die Seite hat. Setze dafür den Befehl clear:both in deinen Footer und überprüfe,
ob der Footer unten bleibt.
Setze nun den Inhalt wieder ein!
Du bist fertig! 
41
Herunterladen
Explore flashcards