Rettet die Bienen! – Expedition ins Internet
Zurück zum Dashboard
0 Fähigkeitspunkte
0 Neuro-Netz Punkte
0 Web-Creator Punkte
0 Daten-Detektiv Punkte

Kursabschnitte

Abschnitt 1
Einführung
1
1.01 Bienen sind wichtig!
2
1.02 Alle müssen es wissen!
Abschnitt 2
WWW
1
1.03 URL – Wo hängt das Plakat?
2
1.04 Bäume im Internet
3
1.05 So Surft es sich leichter
Abschnitt 3
Planung
1
1.06 Wir machen einen Plan
2
1.07 Infos sammeln
3
1.08 Inhalt ist gleich Inhalt?
4
1.09 Schlagzeilen
Abschnitt 4
Inhalte
1
1.10 Poster im Internet aufhängen
2
1.11 Fließtexte in HTML
3
1.12 Erstelle deine eigene Webseite!
4
1.13 Fülle deine Seite mit Inhalten
5
1.14 Texte hervorheben
6
1.15 Listen
7
1.16 Ein Blick auf die To-Do-Liste
8
1.17 Bilder in HTML
9
1.18 Jetzt wird’s bunt!
10
1.19 Videos in HTML
11
1.20 Webseiten untersuchen
12
1.21 Hyperlinks in HTML
13
1.22 Head und Body
Abschnitt 5
Style
1
1.23 CSS: so wird richtig gestylt!
2
1.24 CSS: Schriftarten
3
1.25 Rot, Grün, Blau,…
Abschnitt 6
Finale
1
1.26 Ein Meisterwerk

Style

1.25 Rot, Grün, Blau,…

In CSS kannst du Textfarben ganz einfach ändern. Für den Wert kannst du einfach den englischen Namen einer Farbe verwenden:

tag {
   color: red;
}

Beispiele: red, green, blue, yellow,…

Auch die Hintergrundfarbe deiner Webseite kannst du ganz einfach mit dem “body”-Tag anpassen:

body {
   background-color: blue;
}

Spiele mit den Farben deiner Webseite. Passe z.B. die Farbe von Hintergrund, Texten, Überschriften und fett- oder kursiv Geschriebenem an.

Viele Farben kannst du in CSS direkt über ihren englischen Namen benutzen, z.B.: red, green, blue, black, yellow,…

Du hast aber noch eine vieeeeeel größere Farbauswahl, wenn du ihre “Codierungen” verwendest. In CSS sind vor allem zwei Codierungsarten üblich: die RGB- und die HEX-Codierung (es gibt auch noch andere!). Hier siehst du Beispiele:

FarbeHEXRGBFarbenname
 #FF0000rgb(255,0,0)red
 #00FF00rgb(0,255,0)green
 #0000FFrgb(0,0,255)blue
 #000000rgb(0,0,0)black
 #808080rgb(128,128,128)gray
 #FFFFFFrgb(255,255,255)white

Farbtafeln sind ein sehr hilfreiches Instrument, um einen Überblick über verschiedene Farben und ihre Codierung zu bekommen. Du kannst z.B. deine eigenen Farben auf der Farbtafel von Adobe auswählen.

Farbtafel von Adobe
Farbtafel von Adobe

See the Pen WEB_25_Beispiellösung by RockStartIt (@RockStartIt) on CodePen.

1. Geschweifte Klammer “{” und”}”

Für “{” drücke “alt gr+7”. Für “{” drücke “alt gr+0”.

2. Strichpunkt “;”

Drücke “shift+,”.

3. Kopieren und Einfügen

Oft ist es nützlich Texte oder Elemente einfach zu kopieren. Markiere dafür den Text mit der linken Maustaste. Drücke dann die Tasten “strg”+”c”. Klicke dann an die Stelle, wo der Text eingefügt werden soll. Drücke dann die Tasten “strg”+”v”.

Bild von Tastatur

4. Tags: “<” und “>”

Für “<” drückst du nur die Taste rechts oben von “Strg”. Für “>” drückst du “Shift+<“. “Shift” ist die Taste direkt oberhalb von “Strg”.

5. Schrägstrich “/”

Für “/” drückst du “Shift+7”.

6. Anführungszeichen “:

Drücke “Shift+2”.

Falls du dein Codepen-Fenster versehentlich geschlossen hast, oder deine Arbeit aus einem anderen Grund verloren gegenagen ist, kannst du hiermit weiterarbeiten. Klicke einfach auf den folgenden “Codepen”-Button. Es wird sich ein neues Codepen-Fenster öffnen, indem du weiterarbeiten kannst.

Jetzt bis du richtig fit! Welches Design passt zum Code?

Style 1.24 CSS: Schriftarten
Vollständig
Finale 1.26 Ein Meisterwerk