Thema: Seminarfach

Direkt zum Thema zu springen:


Allgemeines

Thema

Websites programmieren und gestalten



Stunden

- Eine Doppelstunde pro Woche
- Vier Halbjahre (Semester)



Bewertung

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, ...



Allgemeiner Inhalt

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


Facharbeit: Vorgaben


Facharbeit: Beurteilung

Beurteilung: Formale Anlage
Beurteilung: Methodische Durchführung
Beurteilung: Inhaltliche Bewältigung


HTML-Referenz

Aufbau der Datei

<!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.



Wichtige Tags

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)

Beispiel:

<ul>
    <li>Erster Eintrag</li>
    <li>Zweiter Eintrag</li>
    <li>Dritter Eintrag</li>
</ul>

Liefert:



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)

Beispiel:

<img src="Bilder/Instagram-Icon.png" alt="Instagram Logo" width="50" height="50">

Liefert:

Instagram Logo



Verlinkungen

<a href="..."> ein Link

Beispiel:

<a href="https://matheundphysik.de">MatheundPhysik.de</a>

Liefert:

MatheundPhysik.de



CSS-Referenzen

CSS-wiki.com Referenz
W3schools Tutorial (engl.)
W3schools Referenz (engl.)


CSS-Referenz

Struktur von CSS

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-Referenzen

CSS-wiki.com Referenz
W3schools Tutorial (engl.)
W3schools Referenz (engl.)



Wichtige Eigenschaften

Text formatieren

color Schriftfarbe
font-size Schriftgröße
font-weight Gewicht: dünner oder fetter
font-family Schriftart


Website nachbauen

Die Aufgabe

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.



Das Ziel

(aufklappen)

Download: Ziel.png



Der blanke Text

(aufklappen)

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!



Das einzufügende Bild

Download: Bild.png