Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:snr:informatik:glf22:html-css [2023/05/08 18:22]
Olaf Schnürer [Aufgabe 5: CSS Box Model]
+++ lehrkraefte:snr:informatik:glf22:html-css [2024/01/07 22:35] (current)
Olaf Schnürer [HTML-Elemente]
@@ Line 1: / Line 1: @@
+~~NOTOC~~
 ====== Websites erstellen mit HTML und CSS ======
@@ Line 19: / Line 20: @@
 <WRAP center round todo>
-  * Erstelle in deinem Informatik-Ordner einen UnterOrdner namens ''html-und-css''.
+  * 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.
@@ Line 55: / Line 56: @@
 <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 sinnvollle 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.
+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>
@@ Line 87: / Line 88: @@
 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>
@@ Line 101: / Line 104: @@
 <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.
+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>
@@ Line 190: / Line 193: @@
 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 =====
@@ Line 286: / Line 297: @@
 === 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) '';''! **Insbesondere die Strichpunkte (am Zeilenende bei vernünftiger Formatierung) sind eine beliebte Fehlerquelle!**
+  * 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|}}
@@ Line 360: / Line 371: @@
 </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 ====
@@ Line 373: / Line 391: @@
 </WRAP>
-==== Link zur Seite für die Projektphase ====
+==== Wer mag: Quiz zu HTML und CSS, Game zu CSS ====
-[[lehrkraefte:snr:informatik:glf22:html-css:projekt|Zur Projektphase]]
+  * 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 ====