Websites erstellen mit 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.

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.

• Ö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).

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

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

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

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

• 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):

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

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

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/

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

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

• 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:

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

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

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!

• Schaue dir das Resultat im Browser an und lies die folgende Info-Box.

• Ä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.

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

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

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.

• Schau das Resultat im Browser an!

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.

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