====== HTML ====== ++++Lernziele| * Grob wissen, was das **Internet** ist. * Wissen, welche Dinge durch die Einführung des Internets revolutioniert wurden und welchen Einfluss dies auf die Gesellschaft hatte. * Wissen, wofür **HTML** steht und was es (nicht) ist. * Das Grundgerüst einer Website mit HTML erstellen können. Zum Beispiel: Was gehört in *head*, was in *body*. * Den Unterschied von Block- und Inline-Elementen beschreiben können. * Die wichtigsten HTML-Elemente kennen und anwenden können. * Für jedes dieser HTML-Elemente wissen, ob es sich um ein Block- oder Inline-Element handelt. * Wissen, wofür **CSS** steht und wozu man es benötigt. * Die Fachbegriffe von CSS kennen. * Mithilfe der wichtigsten CSS-Befehle eine Website stylen können. * Mithilfe von `id` und `class` einzelne resp. ausgewählte Elemente stylen. ++++ **Ziel** dieses Blocks ist, zu verstehen, wie eine Website aufgebaut ist. Dies erreichen wir, indem wir Schritt für Schritt eine Website (nach)bauen. ===== Grundgerüst einer Website ===== [[https://kantonsschuleromanshorn.sharepoint.com/:p:/s/FSInformatik/EUBo3BIntxNFuWaIUKxt7hsBCfrv3LY9060NXsHQ9pP1qg|Präsentation]] **Ziele:** * Visual Studio Code installieren und kennenlernen * Einfaches Grundgerüst der Website erstellen ==== Auftrag I ==== 1. Lade den Editor **Visual Studio Code** (kurz **VSCode**) herunter und installiere diesen: [[https://code.visualstudio.com]] 1. **Erstelle einen Ordner** mit Namen `website_ksr` und speichere an einem passendenden Ort auf deinem Computer. 1. Starte nun VSCode und **öffne** darin diesen Ordner: Datei > Ordner öffnen > Ordner `website_ksr` suchen und öffnen. 1. Klicke auf das Symbole (1) oben links, um den "Explorer" zu öffnen. Darin, also im Feld (2), siehst du alle Dateien und Unterordner, die im geöffneten Ordner vorhanden sind. Mit (3) kannst du darin neue Dateien und Unterordner erstellen. Mit Doppelklick auf eine Datei wird diese im Feld (4) geöffnet. {{ :gf_informatik:web_sca:vscode_index.png?400&nolink |}} 1. Erstelle nun eine **neue Datei**, die *zwingend* den Namen `index.html` haben muss. 1. Öffne nun `index.html` in VSCode und erstelle darin das **Grundgerüst** der Website. Tippe dazu folgendes ab (nicht copy paste): Titel der Website Hier kommt der Inhalt der Website hinein. 1. Verschaffe dir einen **Überblick** über den HTML-Code oben: * HTML besteht aus vielen **Tags**. Die meisten HTML-Elemente haben einen Start- und einem Endtag. * Der HTML-Körper beginnt mit dem Starttag `` und endet mit dem Endtag ``. Dieser beinhaltet den **Inhalt** der Website, also das, was im Hauptfenster des Browsers angezeigt wird. * Der HTML-Kopf (zwischen `` und ``) beinhaltet Einstellungen und zusätzliche Informationen, die nicht im Hauptfenster des Browsers angezeigt wird, z.B.: * `Titel der Website`: Speichert Titel der Seite, wird in der Titelleiste des Browsers angezeigt * ``: sorgt dafür, dass z.B. Umlaute ä,ö,ü richtig angezeigt werden\\ \\ 1. Gratulation, du hast deine erste Website erstellt! **Öffne** sie nun **im Browser:** Navigiere im Datei Explorer deines Computers (nicht von VSCode) zu deiner Website (also `index.html`) und öffne diese per Doppelklick. Nun sollte die Website im Browser angezeigt werden. {{ :gf_informatik:web_sca:html_tattoo_head_body.png?nolink&300 |}} Wenn man mit VSCode arbeitet, sollte man *nicht* einzelne Dateien mit Doppelklick öffnen. Besser öffnet man wie oben beschrieben den **ganzen Ordner**. Jetzt kann diesen in der "Explorer"-Ansicht direkt verwalten: Dateien bearbeiten, neue Dateien und Ordner erstellen, ... Die Hauptseite jeder Website trägt den Namen `index.html`. Wähle deshalb immer diesen Namen, ganz egal, um was es bei der Website geht. ===== Website erstellen mit HTML ===== **Ziel** dieses Block ist, die wichtigsten **HTML-Elemente** kennenzulernen und mit ihnen eine **Website nachzubauen**. ==== Auftrag II ==== 1. Studiere die **Theorie** unten. **Probiere** alle dort vorgestellten Elemente (ausser `
` kurz in deiner HTML-Datei der letzten Aufgabe aus. Ziel hier ist, dass du **selbständig** herausfindest, wie das genau funktioniert. Du kannst dir dafür jede erdenkliche Hilfe holen (Google, KI, ...), aber am Schluss musst du verstehen, wie es funktioniert! 1. Kopiere dann den reinen **Text der Website** in den Body der Datei `index.html`, die du im letzten Kapitel erstellt hast. ++++Inhalt Website (click me!)| GMS an der Kanti Romanshorn Kanti Romanshorn, die innovative Schule im Grünen. Hier geht es zur echten Website der KSR (https://www.ksr.ch). Ü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 ++++ 1. Lade das **Bild** herunter und kopiere es in den Ordner, in dem sich die `index.html`-Datei befindet: {{ :gf_informatik:web_sca:img_xlarge.jpeg?200 |}} 1. Wende dann dein im Theorieteil gelerntes Wissen über HTML-Elemente an, um den Inhalt der **Website so zu gestalten**, dass diese genau so aussieht wie in der Vorlage: {{ :gf_informatik:web_sca:website_ksr_html.png?200 |}} Achtung: Mache nicht zu viele Schritte auf einmal. Gehe stattdessen **wie folgt vor:** 1. Setze ein **einziges** HTML-Element um (z.B. h1-Überschrift) 1. **Speichere** die HTML-Datei. 1. Zeige die Website im Browser an / **Lade die Website neu**: * Windows: F5 (Achtung: ev. muss zusätzlich Fn gedrückt werden) * MacOS: ⌘ + R 1. Stelle sicher, dass HTML-Element **richtig umgesetzt** wurde. Gehe erste dann weiter zum nächsten Element. Studiere falls nötig die Hilfen unten. ++++Hilfe zu Überschriften| Die Hauptüberschrift ist `GMS an der Kanti Romanshorn`. Dafür verwendet man den `

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

` 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 (`