article
oder section
könnte man eine bessere Verschachtelung erreichen, so dass klar wird, zu welchem h1-Element das h2-Element gehört.html
.html
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
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>
im Screenshot). 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; wenn du zum Beispiel “h1” oder “p” oder “a” eintippst, “erledigt” VS Code den Rest; 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 den gewünschten 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; es könnte hier aber auch eine pdf-Datei oder ein Bild o. ä. stehen).
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
für noch weniger wichtige Überschriften)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 dem h1
-Element und anderen HTML-Elementen in dem HTML-Element 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 zugehörigen “end 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 Webseite anzeigen kannst. Hinweis: Wie oben im Internat nach “html image w3schools” suchen oder nach image
im HTML-Tutorial HTML tutorial von W3 schools suchen.Bonus:
video
bzw. audio
. Nun können wir die Wörter in HTML = hypertext markup language erlären.
Ein gutes Beispiel für Hypertext ist 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.
meine-erste-html-seite
eine weitere HTML-Datei namens unterseite.html
. !
+Enter
verwenden. index.html
und einen sinnvoll beschrifteten Link von der Seite index.html
zur neuen Webseite unterseite.html
: Solche Links erstellt man mit dem HTML-Element a
. Als href
gibt man einfach den Namen der HTML-Datei an (falls diese sich im selben Verzeichnis befindet).
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 -->
:
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!