article
oder section
könnte man eine bessere Verschachtelung erreichen, so dass klar wird, zu welchem h1-Element das h2-Element gehört.
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).
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.
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.
html-und-css
.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.
(teilweise Wiederholung der ersten Informatik-Lektion)
Install
(4). In der Leiste links klicke auf das oberste Symbol (5) (Explorer).
meine-erste-html-seite
, z. B. über das Menü per File
→ Open Folder
:
index.html
in diesem Folder an: (1) Mausposition wie im folgenden Screenshot, entsprechenden Icon anklicken, (2) index.html
eintippen und Enter
drücken.
index.html
sein (evtl. hineinklicken). Dort !
eingeben und direkt danach Enter
. Nun sollte dein VS Code-Fenster etwa wie folgt aussehen.
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.
<
oder >
eingeben; die Einrückungen und Leerzeichen sind optional, verbessern aber die Lesbarkeit):
Ctrl+s
).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.
Eine HTML-Datei besteht aus vielen HTML-Elementen. Beispielsweise ist die Zeile 10 in unserer Datei ein HTML-Element mit Namen h1
.
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.
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).
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.
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 7body
; der Inhalt dieses HTML-Elements ist der eigentliche Inhalt der Webseite und steht bei uns in den Zeilen 10 bis 22head
; der Inhalt ist der Header der HTML-Dateihtml
mit dem Sprach-Attribut lang=“de-ch”
; start tag in Zeile 2, end tag in Zeile 24meta
(dieses Element hat nur Attribute und keinen Inhalt, weswegen der “end tag” weggelassen wird)
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
).
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).
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.1) Dieser Baum heisst übrigens DOM (= document object model).
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.
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.br
strong
em
del
Bonus:
video
bzw. audio
. Nun können wir die Wörter in HTML = hypertext markup language erlären.
Ein sehr gutes Beispiel für Hypertext ist die Wikipedia. Ihre klassischen linearen Vorgänger sind alphabetisch geordnete Lexika.2)
Der Begriff Hypertext wurde übrigens (meines Wissens) 1965 erstmalig von Ted Nelson verwendet:
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.
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!
meine-erste-html-seite
eine weitere HTML-Datei namens unterseite.html
. Hinweis: Im folgenden, von oben kopierten Screenshot index.html
durch unterseite.html
ersetzen.
!
+Enter
index.html
und einen sinnvoll beschrifteten Link von der Seite index.html
zur neuen Webseite unterseite.html
.
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.
Kommentare in HTML-Dateien werden mit <!--
eingeleitet und enden mit -->
:
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:
html-und-css
einen neuen Unterordner namens erste-schritte-mit-css
an.index.html
und gestaltung.css
.index.html
:index.html
mit Hilfe der CSS-Datei gestaltung.css
gestalten soll, ergänze die rot markierte Zeile.
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!
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.
Run
auf der Seite https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel.
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).
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!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.
2rem
) wie die normale Schriftgrösse.font
gibt es beispielsweise hier: https://www.w3schools.com/css/css_font_shorthand.aspp
-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.
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).
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”).3)
Kommentare in CSS-Dateien werden mit /*
eingeleitet und enden mit */
:
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
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.
article
oder section
könnte man eine bessere Verschachtelung erreichen, so dass klar wird, zu welchem h1-Element das h2-Element gehört.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