lehrkraefte:snr:informatik:glf22:html-css [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~NOTOC~~
====== Websites erstellen mit HTML und CSS ======

Zu Beginn: Geh auf eine beliebige Webseite und analysiere/inspiziere sie (in vielen Browsern geht das per ''F12'' = ''fn''+''f12'' (alternativ per rechter Maustaste und "Inspect"); dann im Menü auf ''Elements'' (in Edge, soweit ich mich erinnere) oder ''Inspector'' (in Firefox) klicken, um die HTML-Datei zu sehen; links oben im Analysebereich gibt es einen Icon ("Pick an element from the page" o.ä. erscheint, wenn die Maus darüber schwebt); diesen Anklicken und dann die Maus über die Webseite bewegen: Sie besteht aus Boxen! Klickt man eine Box an, so wird der entsprechende Code im HTML-File angezeigt).

<WRAP center round info>
HTML ist die Standard-Sprache zur Beschreibung von Webseiten; genauer wird damit der Inhalt von Webseiten samt gewisser struktureller Zusatzinformationen angegeben (z. B. "dies ist ein Textabschnitt"; "dies ist eine Überschrift"; "dies ist ein Link"; "dies ist eine Liste"). Für die graphische Gestaltung (Schriftarten, Farben, Positionierung) wird die Sprache CSS verwendet. 

<!-- HTML-Dateien sind reine Textdateien, also Folgen von ASCII- oder Unicode-Zeichen.-->

  * HTML steht für //Hypertext Markup Language//, übersetzt etwa //Auszeichnungssprache für Text mit (Hyper-)Links//
  * CSS bedeutet //Cascading Style Sheets//, übersetzt etwa //Gestufte Gestaltungsbögen//

<!-- Was diese Begriffe bedeuten, wird später erklärt.-->

Wenn man im Internet surft, bittet der Web-Browser den gewünschten Web-Server (etwa einen Server der SBB oder der Kanti) um eine HTML-Datei und zeigt diese dem Benutzer nach Erhalt an. Meist wird zusätzlich noch eine CSS-Datei übermittelt, die angibt, wie der Inhalt der HTML-Datei graphisch dargestellt werden soll.
</WRAP>

===== Vorbereitungen =====

<WRAP center round todo>
  * Erstelle in deinem Informatik-Ordner einen Unterordner namens ''html-und-css''.
  * Lege in diesem Untordner ''html-und-css'' einen Unterordner namens ''meine-erste-html-seite'' an.

Wenn du später weitere Websites erstellst (etwa für dein Projekt), lege dafür **jeweils** einen **neuen** Unterordner im Ordner ''html-und-css'' an.
</WRAP>



===== Erste Schritte in HTML =====

==== Aufgabe 1: HTML kennenlernen ====

(teilweise Wiederholung der ersten Informatik-Lektion)

<WRAP center round todo>
  * Öffne Visual Studio Code (und schliesse alle eventuell offenen Dateien).
  * Installiere die Extension/Erweiterung "HTML CSS Support" in Visual Studio Code wie folgt. Klicke (vgl. Screenshot) in der Symbolleiste links auf das Symbol "vier Quadrate" (Nummer 1 links unten im Screenshot). Dann im Suchfeld oben nach "html" suchen (2), auf die Extension "HTML CSS Support" klicken (3) und im Fenster rechts auf ''Install'' (4). In der Leiste links klicke auf das oberste Symbol (5) (Explorer).

{{:lehrkraefte:snr:informatik:glf22:html-css:html-and-css-extension-mit-markierungen.png?nolink&800|}}

  * Öffne den gerade erstellten Ordner ''meine-erste-html-seite'', z. B. über das Menü per ''File'' -> ''Open Folder'':

{{:lehrkraefte:snr:informatik:glf22:html-css:open-folder-mit-markierungen.png?nolink&400|}}

  * Lege eine neue Datei namens ''index.html'' in diesem Folder an: (1) Mausposition wie im folgenden Screenshot, entsprechenden Icon anklicken, (2) ''index.html'' eintippen und ''Enter'' drücken. 

{{:lehrkraefte:snr:informatik:glf22:html-css:erste-html-seite-new-file-mit-markierungen.png?nolink&400|}}

  * Das Grundgerüst einer HTML-Datei bekommt man in VS Code am einfachsten wie folgt: Der Cursor muss im Fenster ''index.html'' sein (evtl. hineinklicken). Dort ''!'' eingeben und direkt danach ''Enter''. Nun sollte dein VS Code-Fenster etwa wie folgt aussehen.

{{:lehrkraefte:snr:informatik:glf22:html-css:html-geruest-mit-markierungen.png?nolink&800|}}

  * In Zeile 2 der HTML-Datei: Ändere die Sprachangabe "en" (englisch) auf "de" oder "de-ch".
  * In Zeile 7: Ändere den Titel der Webpage auf "Meine erste HTML-Seite". Dieser Titel erscheint in der Titelleiste des Browsers bzw. in der Titelleiste des Tabs (= der Registerkarte) und ist etwa relevant für Suchmaschinen.

<WRAP center round info>
Die erste Zeile ''<!DOCTYPE html>'' sagt, dass es sich bei der Datei um eine HTML-Datei in der aktuellen Sprachversion handelt. Der eigentliche HTML-Code befindet sich zwischen den Zeilen 2 und 12 (= grosse rote Klammer von ''<html>'' bis ''</html>''). Dort steht zuerst ein "Head(er)" (= die obere innere rote Klammer von ''<head>'' bis ''</head>'') mit allgemeinen Daten (bspw. Titel der Webseite und gewisse "Meta-Daten", etwa für die sinnvolle Anzeige der Seite auf einem Smartphone). Darunter im "Body" (= die untere innere rote Klammer von ''<body>'' bis ''</body>'') folgt der eigentliche (bisher nicht vorhandene) Inhalt der Webseite.
</WRAP>

  * Ergänze nun den "Body" der HTML-Datei wie folgt durch Abtippen: VS Code hilft durch Syntaxvervollständigung, du musst z. B. kein einziges der Zeichen ''<'' oder ''>'' eingeben; die Einrückungen und Leerzeichen sind optional, verbessern aber die Lesbarkeit):

{{:lehrkraefte:snr:informatik:glf22:html-css:body.png?nolink&800|}}

  * Speichere die Datei (etwa mit ''Ctrl+s'').
  * Öffen deine HTML-Datei ''index.html'' mit einem Browser, z.B. so: Finde die Datei in deinem Datei-Manager und öffne sie durch Anklicken; falls das nicht klappt, Datei mit rechter Maustaste anklicken, dann "Öffnen mit"/"Open with" und Browser, etwa Edge oder Firefox, auswählen.
</WRAP>

==== HTML-Elemente ====

<WRAP center round info>
Eine HTML-Datei besteht aus vielen HTML-Elementen. Beispielsweise ist die Zeile 10 in unserer Datei ein HTML-Element mit Namen ''h1''. 

{{:lehrkraefte:snr:informatik:glf22:html-css:h1-element-mit-anmerkungen.png?nolink&400|}}

Der Name "h1" steht für "Heading of level 1" (Hauptüberschrift) und sagt dem Browser, dass es sich um eine Überschrift handelt.

Das HTML-Element h1 beginnt mit dem "start tag" ''<h1>'' und endet mit dem "end tag" ''</h1>'' (beide Male der Name des HTML-Elements in spitzen Klammern, jedoch beim "end tag" zusätzlich ein Slash ''/'' nach der öffnenden spitzen Klammer).

Der eigentliche Inhalt "Schule" steht zwischen start und end tag.
</WRAP>


<WRAP center round info>
Etwas komplizierter ist das HTML-Element ''a'' für einen Link aufgebaut; die Bezeichnung "a" steht für "anchor" (und ist nicht besonders glücklich gewählt).

{{:lehrkraefte:snr:informatik:glf22:html-css:a-element-mit-markierung.png?nolink&600|}}

Im "start tag" steht hier zusätzlich noch eine "hyper reference" als Attribut (= Zusatzeigenschaft). Der Name dieses Attributs ist ''href'', danach folgt ein Gleichheitszeichen und der Wert des Attributs in Anführungszeichen (hier ist es die Web-Adresse der KSBG).

Auf der Webseite angezeigt wird der Inhalt, beim Anklicken versucht der Browser, die "hyper reference" zu öffnen.
</WRAP>


<WRAP center round info>
In unserer HTML-Datei finden sich neben den gerade erklärten HTML-Elementen "h1" und "a" noch einige weitere:
  * ''p'' für Paragraph (Text-Abschnitt)
  * ''h2'' und ''h3'' für Unterüberschriften (es gibt auch ''h4'', ''h5'' und ''h6'')
  * ''title'' in Zeile 7
  * ''body''; der Inhalt dieses HTML-Elements ist der eigentliche Inhalt der Webseite und steht bei uns in den Zeilen 10 bis 22
  * ''head''; der Inhalt ist der Header der HTML-Datei
  * ''html'' mit dem Sprach-Attribut ''lang="de-ch"''; start tag in Zeile 2, end tag in Zeile 24
  * ''meta'' (dieses Element hat nur Attribute und keinen Inhalt, weswegen der "end tag" weggelassen wird)

<WRAP center round important>
Jede Information in einer HTML-Datei sollte "alleine" in einem HTML-Element enthalten sein: Beispielsweise wäre es schlechter Stil, den Text in Zeile 12 ohne start tag ''<p>'' in Zeile 11 und end tag ''</p>'' in Zeile 13 anzugeben (denn dann wäre dieser Text zusammen mit ''h1'' und anderem in dem HTML-Elemet ''body'').
</WRAP>
</WRAP>

==== Verschachtelung der HTML-Elemente (DOM = document object model) ====

<WRAP center round info>
Alle HTML-Elemente unseres Dokuments sind ineinander verschachtelt. Dies ist im folgenden Screenshot links durch Klammern angedeutet (jede Klammer beginnt oben beim start tag und endet unten beim ent tag). Beachte, dass die verschiedenen Klammern sich nicht schneiden: Liegt ein HTML-Element in einem anderen, so muss es vor diesem beendet werden (korrekte Klammerung).

{{:lehrkraefte:snr:informatik:glf22:html-css:dom-struktur.png?nolink&800|}}

Rechts ist dieselbe Struktur "baumartig" dargestellt (und man nennt so etwas in der Informatik wirklich einen Baum): 
Das HTML-Element "html" enthält die Elemente "head" und "body". Das Element "head" enthält drei "meta"-Elemente und ein "title"-Element.
Das Element "body" enthält diverse "h"-Elemente und zwei "p"-Elemente, wobei ein "p"-Element noch einen Link (= ein "a"-Element) enthält.((Mit Hilfe weiterer HTML-Elemente wie ''article'' oder ''section'' könnte man eine bessere Verschachtelung erreichen, so dass klar wird, zu welchem h1-Element das h2-Element gehört.)) Dieser Baum heisst übrigens DOM (= document object model).
</WRAP>

==== Aufgabe 2: Weitere HTML-Elemente kennenlernen (Listen, Bilder, Hervorhebungen, etc.) ====

<WRAP center round todo>
Hinweis: Wenn du deine HTML-Datei veränderst und dies im Browser sehen willst, musst du sie abspeichern (etwa per ''Ctrl+s'') und im Browser einen "reload" durchführen.

  * Ergänze deine HTML-Datei um einen Link zu einer weiteren Webseite.
  * Finde heraus, wie man einen Link erzeugt, der in einem neuen Tab geöffnet wird. Hinweis: Abschnitt "Example", "How to open a link in a new browser window" auf https://www.w3schools.com/tags/tag_a.asp.
  * Ergänze in deiner HTML-Datei die Liste deiner Lieblingsfächer! Hinweis: Suche im Internet nach "html list w3schools"! 
  * Speichere ein Foto im Verzeichnis ''meine-erste-html-seite'' und finde heraus, wie du dieses Foto auf deiner Wepseite anzeigen kannst. Hinweis: Wie oben im Internat nach "html image w3schools" suchen oder nach ''image'' im HTML-Tutorial [[https://www.w3schools.com/html/default.asp|HTML tutorial von W3 schools]] suchen.
  * Präsentiere dein Foto als Abbildung mit Bildunterschrift (etwa Inhalt und Quelle des Bildes, copyright-Angaben etc.). Hinweis: https://www.w3schools.com/tags/tag_figure.asp
  * Gelingt es dir, ein "anklickbares" Foto auf deiner Webseite anzubringen? Etwa ein Foto eines Zuges, das zur SBB führt? Hinweis: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image
  * Erzeuge einen Link zu einer pdf-Datei (die in deinem Verzeichnis oder sonstwo im Internet liegt).
  * Finde die Bedeutung der folgenden HTML-Elemente heraus und verwende sie in deiner HTML-Datei:
    * ''br''
    * ''strong''
    * ''em''
    * ''del''

Bonus:
  * Ähnlich wie Bilder kannst du Videos oder Audio-Dateien einbetten. Hinweise: Die dazu nötigen HTML-Elemente heissen ''video'' bzw. ''audio''. 
  * Wer eine Tabelle erstellen möchte, gehe auf https://www.w3schools.com/html/html_tables.asp.
</WRAP>

==== Was ist Hypertext? ====

<WRAP center round info>
Nun können wir die Wörter in **HTML = hypertext markup language** erlären.
  * language ist klar, es handelt sich um eine Sprache zur Beschreibung von Webseiten
  * markup language = Auszeichnungssprache: Die Inhalte werden mit Auszeichnungen versehen: Das HTML-Element "h1" zeichnet seinen Inhalt (meist ein Text) als Überschrift aus, "ul" markiert eine ungeordnete Liste etc.
  * hypertext ist eine Sammlung von Text, anderen Dokumenten und Verbindungen zu anderen Dokumenten:
    * Hypertext kann neben Text auch Links enthalten. Im Gegensatz zu klassischen Texten (etwa Zeitungen oder Romanen, die man normalerweise von vorne bis hinten "linear" durchliest) kann man mit Hilfe von Links zu anderen Dokumenten springen; man geht beim Lesen oft assoziativ vor und folgt nur den Links, für die man sich interssiert.  
    * In diesem Sinne ist Hypertext nicht-linear.
    * Hypertext kann neben Text und Links auch Bilder, Videos und Klänge enthalten.

Ein sehr gutes Beispiel für Hypertext ist die Wikipedia. Ihre klassischen linearen Vorgänger sind alphabetisch geordnete Lexika.((auch dort mag man von Eintrag zu Eintrag springen, aber dies ist deutlich weniger komfortabel))

Der Begriff Hypertext wurde übrigens (meines Wissens) 1965 erstmalig von Ted Nelson verwendet:

<WRAP center round box 80%>
Let me introduce the word “hypertext” to mean a body of written or pictorial material interconnected in
such a complex way that it could not conveniently be presented or represented on paper.
</WRAP>
</WRAP>


==== Aufgabe 3: HTML-Datei validieren, d.h. auf syntaktische Korrektheit prüfen ====

<WRAP center round todo 100%>
Prüfe mit Hilfe der folgenden Webpage, ob deine HTML-Datei "grammatikalisch korrekt" ist. Beachte dabei die "Hinweise" auf dem Screenshot.

Solange Fehler vorliegen, korrigiere deine Datei!

[[https://validator.w3.org/]]

{{:lehrkraefte:snr:informatik:glf22:html-css:validate-html.png?nolink&600|}}
</WRAP>

==== Aufgabe 4: Links zwischen eigenen HTML-Dateien ====

<WRAP center round todo 100%>
  * Erstelle in deinem Ordner ''meine-erste-html-seite'' eine weitere HTML-Datei namens ''unterseite.html''. Hinweis: Im folgenden, von oben kopierten Screenshot ''index.html'' durch ''unterseite.html'' ersetzen.

{{:lehrkraefte:snr:informatik:glf22:html-css:erste-html-seite-new-file-mit-markierungen.png?nolink&300|}}

  * Fülle diese HTML-Datei mit dem HTML-Grundgerüst. Hinweis: ''!''+''Enter''
  * Erstelle einen Link "zurück zur Hauptseite" von dieser Seite zur Seite ''index.html'' und einen sinnvoll beschrifteten Link von der Seite ''index.html'' zur neuen Webseite ''unterseite.html''. 
</WRAP>

<WRAP center round info>
Die Hauptseite eines Webauftritts (= einer Website) heisst standardmässig ''index.html''. Dies ist der Grund, dass du deine erste HTML-Seite in Aufgabe 1 so genannt hast.

Diesen Dateinamen solltest du auch für die Hauptseite deines Projektes verwenden.
</WRAP>


<WRAP center round info>
Kommentare in HTML-Dateien werden mit ''%%<!-- %%'' eingeleitet und enden mit ''%% -->%%'':

{{:lehrkraefte:snr:informatik:glf22:html-css:html-kommentar.png?nolink&300|}}
</WRAP>


===== Gestaltung einer Webseite per CSS =====

<WRAP center round info>
Wenn ein Browser eine HTML-Datei anzeigt, verwendet er gewisse Standardeinstellungen, die beispielsweise angeben, wie gross und in welcher Schrift Überschriften bzw. Paragraphen bzw. Listen angezeigt werden sollen.

Diese Einstellungen kann man mit Hilfe einer weiteren, in der Sprache CSS geschriebenen Datei, verändern; beispielsweise könnte man alle Überschriften in roter Schreibschrift auf blauem Hintergrund anzeigen lassen und zusätzlich einen gelb gepunkteter Rahmen darum herum zeichnen o.ä..

Einen ersten Eindruck von CSS kann man mit dem folgenden Link bekommen: Du kannst dir dort **dieselbe** HTML-Datei in vier verschiedenen Gestaltungen (gegeben durch CSS-Dateien) und auch "ohne Gestaltung" (= Standardeinstellungen deines Browsers) anschauen:

https://www.w3schools.com/whatis/demo_css.htm

<hidden Bonus: Wie man auf einer beliebigen Webseite CSS ausschaltet.>
In Firefox geht das sehr einfach: 
  * Wenn das Menü nicht sichtbar ist, ''Alt''-Taste drücken.
  * Menüpunkt "View"/"Ansicht" wählen und dort auf "Page style"/"Seitenstil" per "No style" CSS ausschalten.

In Edge oder Firefox:
  * "F12" drücken (und im Edge-Browser "Web developer tools" erlauben) 
  * oder rechte Maustaste drücken und dann in Firefox "Inspect" wählen, in Edge sollte es etwas ähnliches geben.
Nun ist man im sogenannten Inspektionsmodus, wo man die aktuelle Webseite analysieren kann.

Um nun CSS auszuschalten, dem folgenden "Firefox-Screenshot folgen" (sollte unter Edge ähnlich gehen): (1) auf "Console" klicken, dann (2) per Tastatur rechts von "<nowiki>>></nowiki>" den angegebenen String eingeben und (3) ''Enter'' drücken.

{{:lehrkraefte:snr:informatik:glf22:html-css:remove-css-via-console-mit-markierungen.png?nolink&500|}}

Wenn letzteres nicht funktioniert (was bei mir auf einigen wenigen Webseiten der Fall war), versuche es auf einer anderen Webseite. 

<!--
<code text>
$('style, link[rel="stylesheet"]').remove()
</code>
 Quelle: [[https://stackoverflow.com/questions/44953893/how-to-disable-stylesheets-in-ms-edge-without-plugins]])
Nicht funktioniert hat es bei mir auf DokuWiki.
-->
</hidden> 
</WRAP>

==== Aufgabe 5: CSS Box Model ====

<WRAP center round todo 100%>
  * Lege in deinem Verzeichnis ''html-und-css'' einen neuen Unterordner namens ''erste-schritte-mit-css'' an.
  * Erstelle darin zwei neue Dateien:
    * eine HTML-Datei mit Namen ''index.html'' und 
    * eine CSS-Datei mit Namen ''gestaltung.css''.
  * Kopiere den Code aus der folgenden Ausklappbox in die Datei ''index.html'':

<hidden Inhalt von ''index.html''>
<code html>
<!DOCTYPE html>
<html lang="de-ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS kennenlernen</title>
</head>
<body>
    <h1>Überschrift eins</h1>
    <p>
        Lorem ipsum dolor sit amet, <strong>consectetur adipisici elit</strong>, 
        sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco 
        laboris nisi ut aliquid ex ea commodi consequat. 
    </p>
    <p>
        Quis aute 
        iure reprehenderit in voluptate velit esse cillum dolore eu 
        fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non 
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>        
    <h1>Überschrift zwei</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisici elit, 
        sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco 
        laboris nisi ut aliquid ex ea commodi consequat. 
    </p>
    <p>
        Quis aute 
        iure reprehenderit in voluptate velit esse cillum dolore eu 
        fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non 
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</body>
</html>
</code>
</hidden>

  * Schau dir diese HTML-Datei im Browser an.
  * Dein VS Code-Fenster sollte nun etwa wie der folgende Screenshot aussehen. Damit der Browser später weiss, dass er den Inhalt der HTML-Datei ''index.html'' mit Hilfe der CSS-Datei ''gestaltung.css'' gestalten soll, ergänze die rot markierte Zeile.

{{:lehrkraefte:snr:informatik:glf22:html-css:css-file-verlinken-mit-markierung.png?nolink&800|}}

=== Selektion über den Namen eines HTML-Elements ===

  * Wechsle nun in die Datei ''gestaltung.css'' und trage dort das folgende ein! Beachte die geschweiften Klammern ''{'', ''}'', Doppelpunkte '':'' und Semikola (= Strichpunkte) '';''! **Fehlende Strichpunkte am Zeilenende nach "Eigenschaft-Wert-Paaren (bei vernünftiger Formatierung) sind eine beliebte Fehlerquelle!**

{{:lehrkraefte:snr:informatik:glf22:html-css:css-hintergrund-und-box-mit-markierungen.png?nolink&800|}}

  * Schaue dir das Resultat im Browser an und lies die folgende Info-Box.
<WRAP center round info>
Im Screenshot rot eingerahmt sind die sogenannten Selektoren (= sie wählen/selektieren, was gestaltet werden soll). Hinter dem Selektor folgt in **geschweiften** Klammern eine Liste von Eigenschaften und Werten; Eigenschaft und Wert sind durch einen Doppelpunkt '':'' getrennt, hinter dem Wert muss ein Semikolon '';'' stehen. 

Nach dem Selektor ''body'' in Zeile 1 besagt Zeile 2 unserer Datei, dass die Hintergrundfarbe des "body"-Elements (und aller untergeordneten HTML-Elemente) Aquamarinblau sein soll.

Nach dem Selektor ''h1'' in Zeile 5 werden in den Zeilen 6 bis 8 "h1"-Überschriften gestaltet: Diese Überschriften sollen mit einem Abstand (= ''padding'') von ''1rem'' (die Längeneinheit ''rem'' ist die halbe Höhe eines Buchstabens) von einem Rahmen (= ''border'') umgeben sein, der ''0.1rem'' dick ist, durchgezogen (= ''solid'') ist und die Farbe gelb (= ''yellow'') hat.
Dieser Rahmen hat wiederum eine Umgebung (oder einen Rand = ''margin'') von ''2rem'' zu den Nachbar-Elementen.    

Hinter diesen Eigenschaften (''padding'', ''border'', ''margin'') verbirgt sich das sogenannte CSS Box Model: Jedes HTML-Element wird als Box dargestellt, die man mit CSS gestalten kann, vgl. https://www.w3schools.com/css/css_boxmodel.asp.
</WRAP>

  * Ändere in der CSS-Datei die Hintergrundfarbe, die Rahmenfarbe der h1-Überschriften und spiele mit Rahmendicke etc. herum. Speichere das CSS-File jeweils, bevor du das Resultat im Browser anschaust!
  * Du kannst das CSS Box Model auch auf den Seiten von W3schools ausprobieren, vgl. der folgende Screenshot: Ändere die Werte (rot mit (1) markiert) und (2) drücke dann auf den Button ''Run'' auf der Seite https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel.

{{:lehrkraefte:snr:informatik:glf22:html-css:box-model-w3-schools-mit-anmerkungen.png?nolink&800|}}

<WRAP center round info>
Die dort verwendete Einheit ''px'' steht für Pixel.

Die Eigenschaft ''width'' bezieht sich auf die Breite der zum HTML-Element ''div'' gehörenden Box. Das HTML-Element ''div'' (für "diverses") dient der Markierung gewisser Bereiche einer HTML-Datei, die man mit CSS gestalten möchte.

Beachte, dass wir die im Screenshot blau markierten Zeilen in die CSS-Datei schreiben würden (was als besserer Stil gilt).
</WRAP>

  * Verwende die Eigenschaft ''background-image'', um deine Webseite (oder einen Teil davon) mit einem Hintergrundbild zu versehen. Hinweis: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_background4. Bitte den Inhalt des ''script''-Elements in das CSS-File schreiben!
</WRAP>

 
==== Aufgabe 6: Schriften, Farben und weitere Selektoren in CSS ====

<WRAP center round todo 100%>
  * Ergänze dein CSS-File ''gestaltung.css'' um die im folgenden Screenshot rot markierten Zeilen! Speichere die Datei ab und schaue dir das Resultat im Browser an und versuche zu verstehen, was passiert.

{{:lehrkraefte:snr:informatik:glf22:html-css:css-fonts-und-color-mit-anmerkungen.png?nolink&800|}}

<WRAP center round info>
  * Zeile 6 beispielsweise wählt als Schrift "Courier New" (und falls diese nicht zur Verfügung steht alternativ irgendeine "monospace"-Schrift). Die Schriftgrösse ist doppelt so gross (''2rem'') wie die normale Schriftgrösse.
  * Im Prinzip gibt es sehr viele Schriftarten, die man aber teilweise extra laden muss. Meist standardmässig vorhanden sind die sogenannten "CSS Web safe fonts", https://www.w3schools.com/cssref/css_websafe_fonts.php.
  * Weitere Informationen zur CSS-Eigenschaft ''font'' gibt es beispielsweise hier: https://www.w3schools.com/css/css_font_shorthand.asp
</WRAP>

=== Selektion über "ID" (Attribut "id") ===

  * Stell dir vor, du willst den letzten Absatz (= das letzte ''p''-Element) deiner Webseite besonders hervorheben. Wie im Screenshot mit der (1) rot markiert angedeutet, kannst du diesem Absatz die ''id'' (= identity) ''wichtig'' geben (formal ergänzt du das HTML-Element ''p'' um das Attribut ''id'' mit Wert ''wichtig''). Dann wechselst du in das CSS-File ''gestaltung.css'' und ergänzt die im Screenshot mit (2) markierten Zeilen. 

{{:lehrkraefte:snr:informatik:glf22:html-css:css-id-mit-anmerkung.png?nolink&1200|}}

  * Schau das Resultat im Browser an!

<WRAP center round info>
Wenn man ein HTML-Element mit einer ''id'' belegt (etwa der id ''wichtig'' im Screenshot), sollte kein anderes HTML-Element dieselbe ''id'' haben.

Der Selektor, um ein so benanntes HTML-Element per CSS zu gestalten, ist die gewählte id mit einem **vorangestellten** ''#'', in unserem Fall also ''#wichtig'' (im Screenshot braun markiert).
</WRAP>

=== Selektion über Klassenname (Attribut "class") ===

  * Stell dir nun vor, du willst mehrere HTML-Elemente, etwa die beiden letzten Absätze, genau gleich gestalten. Führe dazu die im folgenden Screenshot mit (1), (2), (3) und (4) angedeuteten Ergänzungen durch. 

{{:lehrkraefte:snr:informatik:glf22:html-css:css-class-mit-anmerkung.png?nolink&1200|}}

  * Schau das Resultat im Browser an und versuche zu verstehen, was passiert. Bewege die Maus auch über die beiden neu gestalteten Absätze.

<WRAP center round info>
Wenn du mehrere HTML-Elemente gleich gestalten willst, kannst du ihnen per Attribut ''class'' denselben Klassennamen zuweisen und alle HTML-Elemente dieser Klasse dann im CSS-File mit einem vorangestellten Punkt selektieren.

Das Selektor-Anhängsel '':hover'' (im Screenshot bei der Nummer (4)) sorgt dafür, dass die angegebene Gestaltung eintritt, wenn die Maus über dem entsprechenden HTML-Element schwebt (= englisch "hover").((Wer genau aufpasst, wird bemerken, dass sich die Hintergrundfarbe des letzten Absatzes nicht ändert, wenn die Maus darüber schwebt. Dies liegt daran, dass die ''id'' "wichtig" bei der Hintergrundfarbe gegen die 'class' "maus-sensitiv" gewinnt. Warum das so ist, wird etwa hier erklärt: https://www.w3schools.com/css/css_specificity.asp))
</WRAP>
</WRAP>

<WRAP center round info>
Kommentare in CSS-Dateien werden mit ''/* '' eingeleitet und enden mit '' */'':

{{:lehrkraefte:snr:informatik:glf22:html-css:css-kommentar.png?nolink&300|}}
</WRAP>


==== Vorteil einer separaten CSS-Datei: "Wiederverwertbarkeit" von CSS-Dateien ====

<WRAP center round info>
Ein Webauftritt (etwa der der KSBG oder der SBB) hat oft eine einheitliche Gestaltung über alle Seiten hinweg.

Dies kann man erreichen, indem man **dieselbe** CSS-Datei in mehreren HTML-Dateien einbindet. Wenn du neben der oben erstellten Seite ''index.html'' noch andere zugehörige HTML-Dateien hast, kannst du in jeder dieser Dateien die Zeile 

{{:lehrkraefte:snr:informatik:glf22:html-css:css-einbinden.png?nolink&800|}}

in den ''head'' schreiben. Dann werden beispielsweise alle ''h1''-Überschriften und alle ''p''-Elemente in all diesen HTML-Dateien gleich gestaltet. Ebenso kannst du die Klasse ''maus-sensitiv'' in allen HTML-Dateien verwenden.
</WRAP>

==== Wer mag: Quiz zu HTML und CSS, Game zu CSS ====

  * HTML Quiz: https://www.w3schools.com/html/html_quiz.asp
  * HTML Exercises: https://www.w3schools.com/html/html_exercises.asp
  * CSS Quiz: https://www.w3schools.com/css/css_quiz.asp
  * CSS Exercises: https://www.w3schools.com/css/css_exercises.asp
  * CSS Diner: https://flukeout.github.io/
==== Link zur Kursseite ====

[[lehrkraefte:snr:informatik:glf22|Zur Kursseite]]