` Tag. Die anderen Überschriften sind Überschriften 2. und 3. Ordnung, deshalb verwendet man für diese `` und ``.
++++
++++Hilfe zu Paragraphen/Fliesstext|
Meist ist es eine gute Idee, Fliesstext mit dem Paragraphen-Tag `
`. ++++ ++++Hilfe zu Paragraphen/Fliesstext| Meist ist es eine gute Idee, Fliesstext mit dem Paragraphen-Tag `
` zu versehen. Damit stellt man sicher, dass er auf einer neuen Zeile beginnt und das darauffolgende HTML-Element auf einer neuen Zeile beginnt. ++++ ++++Hilfe zu Listen| Es gibt unnummerierte (`
- `) und nummerierte (`
- `-Tag.
Unnummerierte Liste:++++ ==== Theorie zu HTML-Elementen ==== Als erstes ist es wichtig, den Unterschied zwischen Block-Elementen und Inline-Elementen zu verstehen. **Block-Elemente** sind die Bausteine einer Webseite, die in der Regel den grössten Teil des Inhalts ausmachen. Sie nehmen standardmässig die volle Breite des Elements ein, in dem sie sich befinden und beginnen auf einer neuen Zeile. Im Gegensatz zu Block-Elementen fügen sich **Inline-Elemente** nahtlos in den Textfluss einer Seite ein, ohne eine neue Zeile zu beginnen. Sie nehmen nur so viel Platz ein, wie sie benötigen, und ermöglichen so eine reibungslose Einbettung von Text und anderen Inline-Elementen. Die wichtigsten **Block-Elemente** sind: * Das `- Erstes Element
- Zweites Element
- Drittes Element
- Erstes Element
- Zweites Element
- Drittes Element
`-Element dient zur Darstellung von **Paragraphen** (Absätzen). Jeder Absatz beginnt auf einer neuen Zeile. * `
,
,
, ...
`: Diese Elemente repräsentieren **Überschriften** unterschiedlicher Hierarchieebenen. * `
- ,
- `: **Listen** werden in HTML mit diesen Elementen erstellt. `
- ` und `
- `.
* (``: Dieses Element steht für "Division" und wird in der Regel als Container verwendet, um HTML-Inhalte zu gruppieren oder zu strukturieren.) Die wichtigsten **Inline-Elemente** sind: * Mit `` resp. `` kann Text **betont** ('emphasis') resp. stark betont werden. Der entsprechende Text wird kursiv resp. fett dargestellt. Gewisse Tags benötigen **Attribute**, um zusätzliche Informationen angeben zu können: * **Hyperlinks** (Tag `` für anchor) benötigen das Attribut *href* (hyper reference). Mit diesem gibt man an, auf welche Website man beim Klick weitergeleitet werden soll: `Beim Link angezeigter Text.` * Ein **Bild** fügt man wie folgt ein: `
`. Mit dem Attribut *src* (source) gibt man den Pfad zum Bild an. Befindet sich das Bild *im gleichen Ordner* wie das index.html File, so kann man einfach den Namen des Bildes inkl. Dateiendung (typischerweise .jgp oder .png) angeben. Von allen bisher betrachteten HTML-Elementen ist dieses das einzige, welches *kein Endtag* verlangt.
VSCode ist ein hervorragender Editor mit vielen Features. Sehr praktisch ist, dass man **mehrere Zeilen gleichzeitig bearbeiten** kann. Dies ist zum Beispiel praktisch, um alle Elemente einer Liste gleichzeitig mit Tags zu versehen. Um den Cursor gleichzeitig auf mehreren Zeilen zu haben: Ctrl+Alt+Up/Down (Windows) resp. Opt+Cmd+Up/Down (macOS). Allgemein verfügt VSCode über viele Shortcuts: * Windows: [[https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf]] * macOS: [[https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf]] Sammlung wichtigster VSCode Shortcuts: * Mehrere Cursor: Ctrl+Alt+Up/Down / Opt+Cmd+Up/Down * Code Formatieren: Shift + Alt + F / Shift + Option + F Sammlung wichtigster allgemeinder Shortcuts: * Speichern: CTRL + S / CMD + S * Select All: CTRL + A / CMD + A * Cut, Copy, Paste: CTRL + X,C,V / CMD + X,C,V * Fenster wechseln: ALT + Tab / CMD + Tab ===== - Website stylen mit CSS ===== **Ziel:** Website von vorherigem Auftrag mithilfe von CSS stylen. ==== Auftrag III ==== 1. Erstelle für deine **KSR-Website** vom letzten Auftrag eine **CSS-Datei** mit Namen `style.css` und füge binde sie im HTML-File ein. Wie geht das? -> Slides oder Theorie unten.\\ \\ 1. **Style** nun die Website im CSS-File so, dass sie **wie unten angegeben** aussieht. Farben, Abstände usw. sollen einigermassen übereinstimmen. Die benötigte Theorie findet man unten und in den Slides. Hilfe erhältst du unterhalb des Bildes. {{ :gf_informatik:web_sca:website_ksr_html_css.png?&200 |}} ++++Hilfe zu Abständen| Vermeide manuelle Zeilenumbrüche mit `
`. Arbeite stattdessen mit **margins**. Beispiel: Betrachte folgenden Codeausschnitt:Titel
Ich bin ein Absatz.
Titel ...: ` Der einfachste Selektor besteht einfach aus dem HTML-Element (also dem Tag-Namen). Es gibt noch andere Selektoren, auf die wir hier nicht eingehen. Nach dem Selektor folgen geschweifte Klammern, die die Formatierungseigenschaften enthalten. Jede Eigenschaft wird gefolgt von einem Doppelpunkt, dem gewünschten Wert, und einem Semikolon. == Beispiel 1 == Mit `...` können wir Text hervorheben, indem wir diesen fett erscheinen lassen. Nun wollen wir, dass dieser Text zusätzlich einen roten Hintergrund hat. Dazu fügen wir folgende CSS-Regel hinzu: strong { background-color: red; }Nach einem Reload zeigt unsere Webseite nun `` Elemente mit rotem Hintergrund an. == Beispiel 2 == Ein etwas ausgereifteres CSS-File könnte wie folgt aussehen:body { background-color: lightgrey; font-family: sans-serif; } h3 { font-size: 5mm; color: darkgrey; } strong { background-color: red; padding: 1mm; border: 1px dashed black; }Wird diese in eine HTML-Datei eingebunden, sieht diese wie folgt aus:=== Weiterführende Links === Die Website [[https://wiki.selfhtml.org/wiki/CSS|SelfHTML]] bietet sowohl eine **Einführung in CSS** als auch ein **Nachschlagewerk** für die tausenden von Eigenschaften, Layouts, und Tricks. * mehr zu [[https://wiki.selfhtml.org/wiki/Grafik/Farbe|Farben]] * mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Ma%C3%9Fangaben|Grössenangaben]] * mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie|Schriftformatierung]] ===== - Eigene Website (Auftrag IV) ====== === Auftrag in Kürze === Erstelle mit HTML und CSS eine einfache Website, in der du etwas präsentierst, dass für die KlassenkollegInnen interessant sein dürfte. **Zeit: 5L** Beispiele: * Lieblingsrezept * Website zu deiner Kunst (Zeichnungen, Musik, \ldots) * Website zu dir === Auftrag im Detail === 1. Überlege dir ein Thema. Spreche es mit deinem **Lehrer** ab. 2. Erstelle einen **neuen Ordner** für das Projekt mit Namen `fritz_meier_1mh`. Verwende also deinen Vornamen, Nachnamen und Klasse. Nur Kleinbuchstaben und Underlines anstelle Leerzeichen. 3. Öffne diesen Ordner im VSCode und erstelle darin die folgenden Files: `index.html` und `style.css`. 4. Schreibe jetzt den **Code** für deine Website. 5. **Abgabe:** 1. Erstelle ein **Zip-File** aus deinem Projektordner. 1. Zip mit deinem Namen und Klasse **benennen** im Format `fritz_meier_1mh`. 1. Abgabe per **Teams-Abgabe**. === Kriterien === * Muss mind. zwei Bilder enthalten * Muss verschiedene Überschriften beinhalten. * Inhalt muss korrekt und gut sein. * Korrekte Sprache, Rechtschreibung * Ansprechende Gestaltung mit CSS. Verwende die bisher gelernten Regeln. * Startseite muss `index.html` heissen. * Alle Dateien der Website befinden sich im gleichen Ordner. Keine Unterordner! * Darf keine absoluten Pfade enthalten. Korrekt: `Title
Section heading
My first paragraph, it's so strong!
` (relativer Pfad), Falsch: `
` (absoluter Pfad).
=== Bewertung ===
* Der Auftrag muss *bestanden* werden.
* Es gibt keine Note dafür. Dein HTML & CSS Knowhow wird in einer Prüfung überprüft. Dieses Projekt dient also der Prüfungvorbereitung.
* Falls der Auftrag mehrheitlich aber nicht ganz zufriedenstellend erfüllt wurde, muss dieser punktuell nachgebessert werden.
* Falls der Auftrag nicht zufriedenstellend ausgeführt wurde, muss eine neue Website zu einem neuen, vom Lehrer vorgegebenen Thema erstellt werden.
=== Optionale Features ===
* Andere Medien als Bilder: Videos, Musik
* Verwende JavaScript. Beispiel: Rezept, in dem man Anzahl Personen angeben soll, dann werden Mengenangaben entsprechend berechnet.
* Responsive (andere Darstellung z.B. auf Smartphone)
* Website mit mehreren Seiten (Navigation zw. Seiten)
* ...
===== - JavaScript (optional) =====
Die weltweit am meisten verwendete Programmiersprache ist JavaScript, die Sprache, mit denen man Webseiten programmieren kann.
==== JS einbinden ====
Erstelle ein File `script.js` (js für JavaScript) im gleichen Ordner wie das `index.html` File. Binde das JS-File nun im HTML ein, in dem du in dessen *head* die folgende Zeile hinzufügst:
.... ....Alle Sprachelemente wie Variablen, Schleifen, Verzweigungen und Funktionen gibt es auch in JavaScript - der Syntax (die Sprachregeln) sind nur etwas anders. Im folgenden Codeblock werden für alle kurze Beispiele gemacht. ==== Bemerkungen und Tipps ==== * Alle Codezeilen müssen mit **Semikolon** enden. * Anstelle von Einrückungen wie in Python arbeitet man mit **geschwungenen Klammern** `{...}`, um Codeblöcke zu kennzeichnen. * Verwende **AutoComplete** in VSCode: Um z.B. eine for-Schleife zu programmieren, tippe `for`, wähle dann "$\square$ for" aus und drücke Enter und schon hast du das Grundgerüst für eine for-Schleife. * Verwende **ChatGPT** o.ä. * **Konsole im Browser:** Im JS-Code kannst du mit `console.log(...)` dort etwas ausgeben. Auch Fehler werden dort angezeigt. Die Browser-Konsole öffnet man wie folgt: Rechte Maustaste und ... * Chrome: "Untersuchen" -> "Konsole" * Safari (Mac): "Element-Informationen" -> "Konsole" ==== JavaScript Basics ==== Hier werden die wichtigsten Sprachelemente von JavaScript ganz kurz erklärt:// IN KONSOLE AUSGEBEN (quasi das print() von JavaScript) console.log(42); // VARIABLEN & KONSTANTEN let x = 42; // Variablen benötigen let const y = 43; // Konstanten sind wie Variablen, ausser dass sie sich nicht verändern lassen. // im Zweifelsfall: einfach let verwenden // WHILE-SCHLEIFE let i = 0; while (i < 10) { console.log(i); } // FOR-SCHLEIFE for (let i = 0; i < 10; i++) { console.log(i); } // VERZWEIGUNG x = 42; if (x > 0) { console.log("Zahl positiv"); } else if (x === 0) { console.log("Zahl Null"); } else { console.log("Zahl negativ"); } // FUNKTION function mySquare(x) { // Deklaration der Funktion return x*x; } let sq = mySquare(5); // Funktionsaufruf console.log(sq);==== Beispiele für JS ==== === Eingabe / Input === Im **HTML**-File:// gibt andere types: wie text, date, password // onchange="handleKeyPress(event)": JS-Funktion handleKeyPress wird aufgerufen, sobald Enter gedrückt wird // alternativen zu onchange: // oninput: Aufruf sobald Input geändert // onkeydown, onkeyup // on...Im **JavaScript**-File:function handleKeyPress(event) { let inputNr = document.getElementById("inputNumber"); // identifiziert HTML-Element über dessen ID console.log(inputNr.value); // und gibt dessen Wert aus }=== HTML-Element mit JS ändern ===Die Zahl:
// kann in JS über id direkte auf Element zugreifen: spanNr.textContent = 41;++++Alternative Methode| Alternativ kann man mit `document.getElementById()` auf ein Element zugreifen, dieses in einer Variable speichern und über diese dann den Wert ändern. Vorteil: Code etwas einfacher nachvollziehbar, gerade wenn länger ist. Nachteil: mehr Code ++++ ==== Auftrag: Dies und das ==== **Idee:** Einfache Website mit JavaScript programmieren, die einige kleine (mehr oder weniger) nützliche Tools beinhaltet: {{ :gf_informatik:web_sca:diesunddas_1.png?300 |}} {{ :gf_informatik:web_sca:diesunddas_2.png?300 |}} **Vorgehen:** 1. **Zusammen "Schnapps-Bier-Sirup"** programmieren. 1. Selber einige der restlichen Tool programmieren. Tipps: 1. Siehe Tutorial oben und Tipps unten. 1. Recherchiere selbst im Internet 1. verwende AI (auf sinnvolle Art und Weise) 1. Website mit CSS **stylen** 1. eigene Idee(n) einbauen ++++Tipps Clicker| * Erstelle im JavaScript-Code eine Variable, z.B. `counter`, die zählt, wie oft man bereits geklickt hat. * Erstelle im HTML einen Button. * Über den Event `onclick` (ganz ähnlich wie `onchange` beim SBS) wird beim Klicken auf den Button ... * ... eine Funktion im JavaScript-Code aufgerufen, die die Variable `counter` um $1$ erhöht. * Vergesse auch nicht, den `counter` anzuzeigen. ++++ ++++Tipps No Click no Fun| * Für die Wahrscheinlichkeit: mit `Math.random()` erzeugst du Zufallszahlen zwischen $0$ und $1$, z.B. $0.4159567158853703$. Wenn diese Zahl unter einem gewissen Wert ist, z.B. $0.1$ (also $10%$), wird counter zurückgesetzt. ++++ ++++Tipps Würfel| * Mit `Math.floor(Math.random() * 6) + 1;` erzeugst du eine zufällige natürliche Zahl im Bereich von $1$ bis und mit $6$. * Für Anzeige des Würfels: verwende HTML-Element **canvas**. Recherchiere online. ++++ ++++Tipps Buchstabenzähler| * Verwende ein Textfeld (textarea) ++++ ===== - Fortgeschrittene Ausrichtung von HTML-Elementen (optional) ===== Bisher sind die Blockelemente wie Überschriften, Paragraphen usw. immer direkt *untereinander angeordnet* worden. Oftmals möchte man aber mehr Kontrolle über die Anordnung von HTML-Elementen haben und zum Beispiel mehrere Blockelemente nebeneinander haben. In modernen Websites ist es auch üblich, dass sich die Anordnung von Elementen je nach Bildschirmgrösse ändert, zum Beispiel: ^ **Breiter Bildschirm** (z.B. Laptop) ^ **Mittlerer Bildschirm** (z.B. Tablet) ^ **Schmaler Bildschirm** (z.B. Smartphone) ^ |{{:gf_informatik:web_sca:flex_breit.png?300|}} | {{:gf_informatik:web_sca:flex_mittel.png?200|}} | {{:gf_informatik:web_sca:flex_schmal.png?100|}}| Zwei gängige Methoden dafür sind **Flexbox** oder **Grid**, welche beide hier kurz vorgestellt werden. Für beide Methoden ist es üblich, mit dem **div**-Tag zu arbeiten. Dieses wird verwendet, um einen Block von Inhalten zu *gruppieren* und zu *strukturieren*. Es hat keine eigene Bedeutung oder Standardformatierung, dient aber als Container für andere Elemente und ermöglicht eine gezielte Gestaltung mit CSS oder eine Manipulation mit JavaScript. ==== Flexbox ==== {{youtube>phWxA89Dy94?}} === Getting Started === Es erlaubt eine einfache und flexible Anordnung von Elementen in einer Zeile oder Spalte. Im HTML-Dokument erstellt man dafür mit dem div-Tag einen Container:.container{ /* da container class ist, muss Punkt vor Selektor schreiben */ display: flex; /* flexbox aktivieren */ }Nun werden die drei Elemente nicht mehr untereinander sondern nebeneinander angezeigt. Die Items können nun über ihren eigenen Selektor gestylt werden. === Ausrichtung === Flexbox arbeitet mit zwei Achsen: Einer **Hauptachse** und einer **Kreuzachse**. Standardmässig zeigt die Hauptachse horizontal nach rechts und die Kreuzachse vertikal nach unten. Elemente werden der *Hauptachse* entlang angeordnet. Man kann die beiden Achsen auch vertauschen und umdrehen:.container{ display: flex; flex-direction: column; /* row, row-reverse, ... */ }Inhalt wird standardmässig links- und oben-bündig ausgerichtet. Dies kann man wie folgt anpassen:.container{ display: flex; justify-content: center; /* Ausrichten entlang Hauptachse */ height: 80vh; /* Setzt Höhe des Containers auf 80% Fenstergrösse */ align-items: center; /* Ausrichten entlang Kreuzachse */ }Werte für **justify-content:** ^ Wert ^ Beschreibung ^ |flex-start (Standard)|Links ausgerichtet| |flex-end |Rechts ausgerichtet| |center |Zentriert| |space-between |Erster & letzter Item am Rand, dazwischen gleichmässiger Abstand| |space-around |Gleichmässige Abstände um jedes Item| |space-evenly |Gleichmässige Abstände zwischen allen Elementen| Werte für **align-items:** ^stretch (Standard) ^Items dehnen sich gleichmäßig^ |flex-start |Oben ausgerichtet| |flex-end |Unten ausgerichtet| |center |Mittig ausgerichtet| |baseline |Orientierung an der Textbasis| Achtung, damit man zum Beispiel etwas in der Mitte des Fensters platzieren kann, muss man dem Container eine genügend hohe Hohe verleihen, z.B. mit `height: 80vh;`. === Flex-Wrap === Standardmässig werden alle Elemente auf *einer Zeile* dargestellt. Mit *flex-wrap* kann man sie umbrechen:.container { display: flex; flex-wrap: wrap; /* Erlaubt Zeilenumbruch */ align-content: center; /* nur aktiviert falls flex-wrap: wrap */ }^Wert^Beschreibung^ |nowrap (Standard) |Alle Elemente bleiben in einer Zeile| |wrap |Elemente umbrechen in die nächste Zeile| |wrap-reverse |Umbruch, aber in umgekehrter Reihenfolge| Falls `flex-wrap: wrap;`, so wird die Ausrichtung entlang der Kreuzachse mit `align-content` anstelle `align-items` festgelegt. === Social Distancing === Zwischen den Elementen fügt man wie folgt einen **Abstand** hinzu:.container { display: flex; gap: 3em; }=== Kontrolle über einzelne Flex-Items === **Flex-grow** bestimmt, wie viel Platz ein Element im Vergleich zu anderen einnimmt. Im folgenden Beispiel teilen sich alle Items den gesamten zur Verfügung stehenden Platz zu gleichen Teilen:.item{ flex-grow: 1 }Falls ebenfalls der gesamte Platz gebraucht werden soll, das dritte Element aber doppelt so breit sein soll wie das erste, so schreibt man:Element 1Element 2Element 3#item-1{ flex-grow: 1; } #item-3{ flex-grow: 3; }**Flex-shrink** bestimmt, ob ein Element schrumpfen darf, wenn nicht genug Platz da ist..item { flex-shrink: 0; /* Verhindert das Schrumpfen */ }Je grösser der angegebene Wert, desto *schneller schrumpft* es im Vergleich zu den anderen Elementen. **Flex-basis** legt die Grundgrösse eines Elements fest..item { flex-basis: 100px; /* Jedes Item startet mit 100px Breite */ }=== Beispiel: Mehrere Bilder nebeneinander === Im folgenden Beispiel werden drei Bilder nebeneinander platziert. **HTML:**
.container { display: flex; /* Aktiviert das Flexbox-Layout */ flex-wrap: wrap; /* Erlaubt das Umbruchverhalten bei kleinen Bildschirmen */ justify-content: center; /* Zentriert die Bilder */ gap: 10px; /* Abstand zwischen den Bildern */ } .container img { width: 300px; /* Grösse der Bilder */ }==== Grid Layout ==== Mithilfe des **Grid Layout Modules** kann man seiner Website ein Raster zugrundelegen, welches sich dynamisch anpasst, z.B. wenn man die Fenstergrösse des Browsers verändert oder die Website auf einem Smartphone anschaut. Einzelne Elemente der Website können dann den Zellen des Rasters zugeordnet werden: {{ :gf_informatik:web_sca:grid_layout.png?400 |}} === Grid Einrichten === Erzeuge im Body des HTML-Seite ein div-Element und weise diesem die Klasse 'Container' zu:.container{ property: value; }Beachte, dass vor einer Klasse im CSS immer ein Punkt geschrieben werden muss. Die **Grundeinstellungen** im CSS für ein 4x3-Grid sehen wie folgt aus:body{ margin: 0; /* damit kein Rand um Grid-Container */ } .container { display: grid; width: 100vw; /* 100% der verfügbaren Breite */ height: 100vh; /* 100% der verfügbaren Höhe */ grid-template-columns: 1fr 2fr 2fr; /* drei Spalten, wobei die 2. und 3. beide doppelt so breit sind wie erste */ grid-template-rows: 60px 1fr 1fr 50px; /* vier Zeilen, erste und letzte haben fix angegebene Höhe, ... */ gap: 10px; /* gap um Elemente des Grids */ }Nun wollen wir dem Grid ein **Elemente** hinzufügen, wie: header, footer, sidebar oder content. Machen wir ein Beispiel:Content.content{ grid-column: 2 / 3; /* erste Zahl: in welcher Zeile beginnt, zweite Zahl: in welcher aufhört */ grid-row: 2; }Mit `grid-column` und `grid-row` kann angegeben werden, über welchen Bereich des Rasters sich das Element erstreckt. Alternativ kann man auch `grid-column-start, grid-column-end, ...` verwenden. === Responsive Grid === Typischerweise möchte man, dass sich das Grid anpasst, wenn man eine Website auf einem kleineren Bildschirm wie einem Smartphone anschaut. Mit der folgenden **Medienabfrage** kann man angeben, wie sich die Darstellung ändern soll, wenn die Breite des Viewports unter einen gewissen Wert fällt:@media only screen and (max-width: 500px) { /* überschreibe hier für alle Selektoren, für die sich etwas ändern soll, die entsprechenden Werte, wie z.B. */ .container{ grid-template-columns: 1fr; /* ... */ } }Falls ein Element in einer gewissen Situation gar nicht mehr angezeigt werden soll, z.B. die Sidebar in der Mobile-View, passe einfach seine `visibiliy` an:display: none;Mehr Infos über **Medienabfragen (Media Queries)** wie diejenigen im Beispiel oben findest du zum Beispiel unter: * https://wiki.selfhtml.org/wiki/CSS/Media_Queries * https://www.w3schools.com/cssref/css3_pr_mediaquery.php Die Website responsive zu machen ist ein wenig mühsam, wenn man die Ranges der einzelnen Grid Elemente wie oben beschrieben mit `grid-column` und `grid-row` festlegt, da man dann die CSS-Einträge sämtlicher Grid Elemente anpassen muss. Alternativ kann man mit `grid-template-areas` arbeiten, dann muss man nur Veränderungen im Eintrag für `.container{...}` vornehmen. Dazu muss man den Elementen einen Namen zuweisen und kann dann über die Namen die Zuteilung der Zellen vornehmen:.container { ... grid-template-areas: "h h h" ... ; ... } .header{ grid-area: h; }==== - Flexbox ==== ===== Lösungen LP =====++++KSR Website HTML| KSR GMS an der Kanti Romanshorn
Kanti Romanshorn, die innovative Schule im Grünen.
Hier geht es zur echten Website der KSR.
Überblick
Während ihrer vierjährigen Ausbildungszeit an der KSR erleben unsere Schülerinnen und Schüler neben dem regulären Unterricht (Grundlagenfächer ab dem 1. Ausbildungsjahr, Schwerpunktfach zusätzlich ab dem 2. Ausbildungsjahr und Ergänzungsfach ab dem 3. Ausbildungsjahr) Spezialtage und Spezialwochen. Diese dienen, wie auch die Maturaarbeit, zur vertieften Auseinandersetzung mit ausgewählten Themenbereichen.Die gesamte Ausbildung an der Kanti Romanshorn ist ausgerichtet auf die bewusste Förderung der nötigen Kompetenzen, um unsere Schülerinnen und Schüler optimal auf ein späteres Studium, die Arbeitswelt und anspruchsvolle Aufgaben in der Gesellschaft vorzubereiten.
Fächer
Das Fächerangebot an der KSR ist bewusst sehr breit angelegt. Die Grundlagenfächer sind für alle Schülerinnen und Schüler obligatorisch. Weiter wählen alle Schülerinnen und Schüler jeweils ein Schwerpunkt- und ein Ergänzungsfach.Schwerpunktfächer GMS
Ab dem zweiten Ausbildungsjahr setzt das Schwerpunktfach ein. Zur Wahl stehen an unserer Schule folgende Fächer bzw. Fächerkombinationen:- Biologie und Chemie
- Italienisch
- Latein
- Physik und Anwendungen der Mathematik
- Spanisch
- Wirtschaft und Recht
- Bildnerisches Gestalten (ab 2021)
Ergänzungsfächer GMS
Mit dem Start des Ergänzungsfachs im dritten Ausbildungsjahr der Kanti Romanshorn ist die Fächerzusammensetzung komplett. Zur Wahl stehen an unserer Schule folgende Ergänzungsfächer bzw. Fächerkombinationen:- Anwendungen der Mathematik
- Bildnerisches Gestalten
- Geografie
- Geschichte
- Informatik
- Musik
- Naturwissenschaften plus (umfasst Projekte aus der Biologie, Chemie und Physik)
- Philosophie/Ethik
- Psychologie/Pädagogik
- Sport
- Wirtschaft und Recht
Dies und das Dies und das
Schnaps-Bier-Sirup
Du darst trinken:
Clicker
Clicker Count: 0
No Click not Fun!
Ziel: Counter so hoch bringen wie möglich. Aber Achtung: bei jedem Klick besteht die (relativ kleine) Wahrscheinlichkeit, dass der Counter zurückgesetzt wird! Mögliches Spiel: Wer erreicht den höchsten Wert in einer Minute?
Clicker Count: 0
Würfel
Dice:
Buchstabenzähler
Buchstabenzähler: 0
Vergangene Tage
Anzahl vergangene Tage: 0
// SCHNAPS-BIER-SIRUP function handleKeyPressSBS(event) { let inpAge = document.getElementById("inputAge"); let drink = document.getElementById('spanDrink'); let age = inpAge.value; if (age >= 18) { drink.textContent = "Schnaps!"; } else if (age >= 16) { drink.textContent = "Bier!"; } else { drink.textContent = "Sirup!"; } } // CLICKER let count = 0; function handleBtnClicker(event) { count += 1; let spanClick = document.getElementById("spanClicker"); spanClick.textContent = count; } let funCount = 0; const funProb = 0.1; function handleBtnFunClicker(event) { funCount = funCount + 1; const randFloat = Math.random(); if(randFloat < funProb){ funCount = 0; } spanFunClicker.textContent = funCount; } // DICE const l = 200; const diceImages = [ [[0.5*l, 0.5*l]], [[0.25*l, 0.25*l],[0.75*l, 0.75*l]], [[0.25*l, 0.25*l],[0.5*l, 0.5*l],[0.75*l, 0.75*l]], [[0.25*l, 0.25*l],[0.75*l, 0.75*l],[0.75*l, 0.25*l],[0.25*l, 0.75*l]], [[0.25*l, 0.25*l],[0.75*l, 0.75*l],[0.75*l, 0.25*l],[0.25*l, 0.75*l],[0.5*l, 0.5*l]], [[0.25*l, 0.25*l],[0.25*l, 0.5*l],[0.25*l, 0.75*l],[0.75*l, 0.25*l],[0.75*l, 0.5*l],[0.75*l, 0.75*l]], ] function handleBtnDice(event){ let randomInt = Math.floor(Math.random() * 6) + 1; spanDice.textContent = randomInt; // draw dice const ctx = canvasDice.getContext('2d'); canvasDice.width = l; canvasDice.height = l; ctx.clearRect(0, 0, canvasDice.width, canvasDice.height); // Clear the canvas // Draw the dice outline ctx.strokeStyle = 'black'; // ctx.lineWidth = 5; const diceImage = diceImages[randomInt-1]; diceImage.forEach(point => { ctx.beginPath(); ctx.arc(point[0],point[1], 20, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); // Outline the circle ctx.closePath(); }); } // CHAR COUNTER function handleInputTextArea(event) { let txtArea = document.getElementById("txtArea"); let spanBuchstaben = document.getElementById("spanBuchstabenCounter"); spanBuchstaben.textContent = txtArea.value.length; } // DATE function handleDateSelected(event) { const inpDate = document.getElementById('inputDate'); const dateSelected = inpDate.value; // get date of today const today = new Date(); const year = today.getFullYear(); // Get the current year (e.g., 2023) const month = today.getMonth() + 1; // Get the current month (January is 0) const day = today.getDate(); // Get the current day of the month const dateToday = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`; // Format the date (e.g., YYYY-MM-DD) // create date objects const start = new Date(dateSelected); const end = new Date(dateToday); // determine difference const deltaMs = end - start; const deltaDays = Math.floor(deltaMs / (1000 * 60 * 60 * 24)); const passedDays = document.getElementById('spanPassedDays'); passedDays.textContent = deltaDays; }body { font-family: sans-serif; background-color: cornsilk; } h1, h2 { background-color:aliceblue; padding: 10px; border: solid black 3px; border-radius: 5px; } canvas { background-color: aliceblue; width: 100; height: 100; border: black solid 3px; border-radius: 8px; } button, input, textarea { background-color: aliceblue; border: solid black 1px; border-radius: 5px; padding: 5px; }++++
- ` sind Container für Listenpunkte `
- `.
* (`
- ,
- `) Listen. Für die einzelnen Punkte der Liste verwendet man das `