Both sides previous revision
Previous revision
Next revision
|
Previous revision
Last revision
Both sides next revision
|
lehrkraefte:snr:informatik:glf22:html-css [2023/05/03 11:06] Olaf Schnürer |
lehrkraefte:snr:informatik:glf22:html-css [2024/01/07 22:33] Olaf Schnürer [HTML-Elemente] |
| ~~NOTOC~~ |
====== Websites erstellen mit HTML und CSS ====== | ====== Websites erstellen mit HTML und CSS ====== |
| |
Zu Beginn: beliebige Webseite inspizieren (HTML-Code, alles Boxen). | 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> | <WRAP center round info> |
| |
<WRAP center round todo> | <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. | * Lege in diesem Untordner ''html-und-css'' einen Unterordner namens ''meine-erste-html-seite'' an. |
| |
| |
<WRAP center round info> | <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> | </WRAP> |
| |
| |
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). | 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> |
| |
| |
* Ergänze deine HTML-Datei um einen Link zu einer weiteren Webseite. | * Ergänze deine HTML-Datei um einen Link zu einer weiteren Webseite. |
* Finder 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. | * 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"! | * 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. | * 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. |
Diesen Dateinamen solltest du auch für die Hauptseite deines Projektes verwenden. | Diesen Dateinamen solltest du auch für die Hauptseite deines Projektes verwenden. |
</WRAP> | </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 ===== | ===== Gestaltung einer Webseite per CSS ===== |
=== Selektion über den Namen eines HTML-Elements === | === 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) '';''! | * 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|}} | {{:lehrkraefte:snr:informatik:glf22:html-css:css-hintergrund-und-box-mit-markierungen.png?nolink&800|}} |
</WRAP> | </WRAP> |
</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 ==== | ==== Vorteil einer separaten CSS-Datei: "Wiederverwertbarkeit" von CSS-Dateien ==== |
</WRAP> | </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 ==== | ==== Link zur Kursseite ==== |
| |