Dieser Text enthält einen
Link zur KSR.
Übrigens waren Hyperlinks das ursprünglich revolutionäre Merkmal von HTML, und das was es zum *Hypertext* macht: die Möglichkeit, aus einem Text gleich zu einem anderen springen zu können, was in keinem Buch oder anderen linearen Medium möglich ist.
== Bilder ==
Bilder werden mit dem `
{{ :gf_informatik:tigerente.jpeg?nolink&200 |}}
==== Beispiel ====
Der folgende HTML-Ausschnitt
Kanti Romanshorn
Die Kanti Romanshorn ist die Kanti in Romanshorn!
Hier einige wichtigen Infos zur Schule:
- 1969 startet die erste Klasse
- 1988 wird das Hauptgebäude eingeweiht
Link zur Website der KSR.
sieht im Browser wie folgt aus:
Kanti Romanshorn
Die Kanti Romanshorn ist die Kanti in Romanshorn!
Hier einige wichtigen Infos zur Schule:
- 1969 startet die erste Klasse
- 1988 wird das Hauptgebäude eingeweiht
Titel
...
Die Trennung von Formatierung und Inhalten ermöglicht es, dasselbe Format und den gleichen Stil auf viele verschiedene Seiten anzuwenden. Beispielsweise muss eine Zeitungs-Website ihr Format nur einmal definieren (und der Browser es nur einmal herunterladen), und es wird dann auf jeden Artikel angewendet.
==== Selektoren und Formatierungsregeln ====
Jede **CSS-Regel** besteht aus zwei Teilen:
* dem **Selektor** - er bestimmt, für //welche// Elemente die Regel gilt, und
* den **Formatierungsregeln** - diese definieren, wie die gewählten Elemente //aussehen// sollen und ist von Form: `
strong {
background-color: red;
}
Nach einem Reload zeigt unsere Webseite nun `` Elemente mit rotem Hintergrund an.
=== Beispiel 2 ===
Ein etwas ausgereifteres CSS-File könnte wie folgt aussehen:
body {
background-color: lightgrey;
font-family: sans-serif;
}
h3 {
font-size: 5mm;
color: darkgrey;
}
strong {
background-color: red;
padding: 1mm;
border: 1px dashed black;
}
Wird diese in eine HTML-Datei eingebunden, sieht diese wie folgt aus:
Title
Section heading
My first paragraph, it's so strong!
**Klassen** sind **Selektoren**, genau so wie Elemente (h1, h2, strong, ...). Wir können diese also dann im CSS-File stylen:
.container{
property: value;
}
Beachte, dass vor einer Klasse im CSS immer ein Punkt geschrieben werden muss.
Die **Grundeinstellungen** im CSS für ein 4x3-Grid sehen wie folgt aus:
body{
margin: 0; /* damit kein Rand um Grid-Container */
}
.container {
display: grid;
width: 100vw; /* 100% der verfügbaren Breite */
height: 100vh; /* 100% der verfügbaren Höhe */
grid-template-columns: 1fr 2fr 2fr; /* drei Spalten, wobei die 2. und 3. beide doppelt so breit sind wie erste */
grid-template-rows: 60px 1fr 1fr 50px; /* vier Zeilen, erste und letzte haben fix angegebene Höhe, ... */
gap: 10px; /* gap um Elemente des Grids */
}
Nun wollen wir dem Grid ein **Elemente** hinzufügen, wie: header, footer, sidebar oder content.
Machen wir ein Beispiel:
Content
.content{
grid-column: 2 / 3; /* erste Zahl: in welcher Zeile beginnt, zweite Zahl: in welcher aufhört */
grid-row: 2;
}
Mit `grid-column` und `grid-row` kann angegeben werden, über welchen Bereich des Rasters sich das Element erstreckt. Alternativ kann man auch `grid-column-start, grid-column-end, ...` verwenden.
==== Responsive Grid ====
Typischerweise möchte man, dass sich das Grid anpasst, wenn man eine Website auf einem kleineren Bildschirm wie einem Smartphone anschaut. Mit der folgenden **Medienabfrage** kann man angeben, wie sich die Darstellung ändern soll, wenn die Breite des Viewports unter einen gewissen Wert fällt:
@media only screen and (max-width: 500px) {
/* überschreibe hier für alle Selektoren, für die sich etwas ändern soll, die entsprechenden Werte, wie z.B. */
.container{
grid-template-columns: 1fr;
/* ... */
}
}
Falls ein Element in einer gewissen Situation gar nicht mehr angezeigt werden soll, z.B. die Sidebar in der Mobile-View, passe einfach seine `visibiliy` an:
display: none;
Mehr Infos über **Medienabfragen (Media Queries)** wie diejenigen im Beispiel oben findest du zum Beispiel unter:
* https://wiki.selfhtml.org/wiki/CSS/Media_Queries
* https://www.w3schools.com/cssref/css3_pr_mediaquery.php
Die Website responsive zu machen ist ein wenig mühsam, wenn man die Ranges der einzelnen Grid Elemente wie oben beschrieben mit `grid-column` und `grid-row` festlegt, da man dann die CSS-Einträge sämtlicher Grid Elemente anpassen muss. Alternativ kann man mit `grid-template-areas` arbeiten, dann muss man nur Veränderungen im Eintrag für `.container{...}` vornehmen. Dazu muss man den Elementen einen Namen zuweisen und kann dann über die Namen die Zuteilung der Zellen vornehmen:
.container {
...
grid-template-areas:
"h h h"
...
;
...
}
.header{
grid-area: h;
}
==== Links ====
* Sehr gutes Video-Tutorial (englisch): https://www.youtube.com/watch?v=Y9rHsdCxU8Q
* https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid
* https://css-tricks.com/snippets/css/complete-guide-grid/
===== Entwicklungsmodus =====
Beim Programmieren einer Webseite stösst jeder früher oder später auf Probleme - weshalb macht der Browser jetzt nicht, was ich ihm sage? Die schnellste Art, herauszufinden, was der Browser macht, sind die Entwicklungstools. Am einfachsten öffnest du die, indem du den interessierenden Bereich der Webseite anwählst und im Kontextmenü `Untersuchen` (en. `Inspect`) auswählst.
Direkt öffnen die Tools auch via Ctrl+Shift+I (Windows) oder Alt+Cmd+I (Mac).
Neben der Anzeige von HTML und CSS kann auch die Anzeige auf einem Mobiltelefon simuliert werden.