Websites programmieren und gestalten
- Eine Doppelstunde pro Woche
- Vier Halbjahre (Semester)
Schriftlich: Außer im Semester der Facharbeit treten im Seminarfach an die Stelle von Klausuren gleichwertige Feststellungen von Schülerleistungen (z.B. Hausarbeiten).
Mündlich: Z.B. freier Vortrag, Agieren und Reagieren im Gespräch, Eigenständigkeit und Kreativität bei Recherche und Präsentation, Mitarbeit im Team, ...
Im Seminarfach stehen fachübergreifende und fächerverbindende Problemstellungen und die Einübung verschiedener Methoden im Vordergrund.
Es sind verschiedene Arbeitsformen sowie verschiedene Verfahren der Präsentation und der Erörterung von Ergebnissen anzuwenden.
Der Unterricht im Seminarfach intendiert die Vermittlung methodische Kompetenzen:
- Informationsbeschaffung
- Informationsverarbeitung
- Informationsbewertung
- Ergebniserstellung und -bewertung
- Ergebnispräsentation
Schwerwiegende und gehäufte Verstöße gegen die sprachliche Richtigkeit oder die äußere Form führen zu einem Abzug von 1-2 Punkten.
Tutorial: selfhtml - Erste Schritte
(Anderes Tutorial: w3docs - HTML-Einführung)
(Noch ein Tutorial: Mediaevent - HTML Tags)
<!DOCTYPE html>
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>
<h1>Eine oberste Überschrift</h1>
<p>Ein Absatz (Paragraph).</p>
</body>
</html>
Dieser Inhalt wird meistens in einer "index.htm"-Datei gespeichert und kann mit jedem Text-Editor bearbeitet werden.
Seite strukturieren
<html> | Umschließt den gesamten Inhalt |
<head> | Beinhaltet Infos zur Seite wie z.B. den Titel |
<body> | Umschließt den Inhalt der dargestellten Website |
<div> | Teilt den "body" in Sektionen ein (Divisions) |
Text strukturieren
<p> | Absatz (paragraph) |
<h1> | Überschrift (header) |
<h2> bis <h2> | kleinere Überschrift (geht bis h6) |
<br> | Zeilenumbruch (break) |
Text formatieren
<b> | fettgedruckt (bold) |
<i> | kursiv (italic) |
<u> | unterstrichen (underline) |
Listen
<ul> |
ungeordnete Liste (unordered list) mit Bindestrichen oder Punkten |
<ol> |
geordnete Liste (ordered list) für 1. 2. 3. ... oder a) b) c) ... |
<li> | Listeneintrag (list item) |
<ul>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ul>
Bilder und Videos einfügen
<img src="..."> | ein Bild (Image) aus einer Quelle (Source) |
<img src="..." alt="..."> | ein Bild mit einem Alternativtext, falls es nicht angezeigt werden kann |
<img src="..." width="..."> | ein Bild mit einer bestimmten Breite in Pixeln |
<img src="..." height="..."> | ein Bild mit einer bestimmten Höhe in Pixeln |
<video src="..." controls> | ein Video mit Steuerelementen (Controls) (Größe kann auch mit width und height eingestellt werden) |
<img src="Bilder/Instagram-Icon.png" alt="Instagram Logo" width="50" height="50">
Liefert:
Verlinkungen
<a href="..."> | ein Link |
<a href="https://matheundphysik.de">MatheundPhysik.de</a>
Liefert:
CSS-Referenzen
CSS-wiki.com Referenz
W3schools Tutorial (engl.)
W3schools Referenz (engl.)
Styles können für ein einzelnes Element eingestellt werden:
<p style="color: red; background-color: lightgrey;"> ... </p>
Sollen alle Elemente eines Typs verändert werden, kann man in den <head> einen <style> festlegen:
<style>
p {
color: red;
background-color: lightgrey;
}
</style>
Am übersichtlichsten ist es, wenn man die Styles in eine extra Datei schreibt. Sie kann im <head> geladen werden. Die Einstellungen können auch auf mehrere Dateien aufgeteilt werden, die unterschiedliche Namen tragen.
<link rel="stylesheet" href="styles.css">
In der Datei wird dann direkt der CSS-Code geschrieben:
p {
color: red;
background-color: lightgrey;
}
CSS-wiki.com Referenz
W3schools Tutorial (engl.)
W3schools Referenz (engl.)
Text formatieren
color | Schriftfarbe |
font-size | Schriftgröße |
font-weight | Gewicht: dünner oder fetter |
font-family | Schriftart |
Baue die dargestellte Website mit eigenem Code möglichst genau nach. Recherchiere dafür selbstständig nach passenden CSS-Eingaben. Sollte etwas im Detail noch nicht perfekt nachempfunden sein, kannst du trotzdem erstmal mit dem nächsten weitermachen.
Hauptüberschrift mit 3-facher Schriftgröße
Überschrift mit 2,2-facher Schriftgröße
Navigations-Links:
Ganz oben
Lorem ipsum
Eine Liste
Texte anpassen
Farbverlauf
Form nachbauen
Button gestalten
Anmerkungen:
- Der Hintergrund der Seite ist nicht Weiß, sondern Lightcyan.
- Die Seite ist in Divisions unterteilt.
- Mit den Links kann man zu den Divisions springen.
Lorem ipsum
Nachfolgend steht ein Text in "Lorem ipsum" mit 50 Wörtern. Das sind künstliche generierte Texte, die wie eine echte Sprache aussehen, aber sinnlos sind. Damit testet man Layouts, ohne sich um Inhalte Gedanken machen zu müssen.
(hier selbst generierten Text einfügen)
Unter loremipsum.de kann man die Wortanzahl einstellen und einen Text generieren.
Eine Liste
Eintrag 1
Eintrag 2
Eintrag 3
Unterpunkt a
Unterpunkt b
Unterpunkt c
Eintrag 4
Texte anpassen
Ein einzelnes Wort einfärben
Vertikal
Um 50 Pixel nach links verschoben
Abstände zwischen Buchstaben und Wörtern
Andere Schriftart
Farbverlauf
Hinter diesem Absatz gibt es einen Farbverlauf und seine Schrift ist größer.
Außerdem hat er einen Abstand von 20 Pixeln nach oben und unten und einen roten Rand.
Form nachbauen (div)
Button gestalten
Animieren
HUCH!
Download: Bild.png