Abschnitt 1
Die Struktur von Webseiten: HTML
Eine Webseite ist ein Dokument, das von Ihrem Webbrowser dargestellt wird. Die Strukturierung des Dokuments wird mit HTML gemacht. Dies ist eine einfache Art, dem Computer zu sagen, welche Teile zusammengehören und von welchem Typ diese Teile sind. HTML ist dabei eine Abkürzung für
Hyper-Text Mark-up Language
Eine solche HTML-Datei ist eine einfache Textdatei, üblicherweise mit
der Dateierweiterung .html oder .htm. Diese
Datei ist durch sogenannte Tags strukturiert. Diese haben
immer dieselbe Grundstruktur
«<tagname>…</tagname>».
Das Eröffnungstag (<tagname>), das Schliessungstag
(</tagname>) und der Inhalt (…) bilden zusammen ein
Element. HTML-Elemente sind hierarchisch angeordnet, was
bedeutet, dass sie verschachtelt werden können, um eine baumartige
Struktur des Inhalts auf der Webseite zu erstellen. Diese
hierarchische Struktur wird DOM (Document
Object Model) genannt und wird vom Webbrowser
verwendet, um die Webseite darzustellen.
Beispiel
In diesem Beispiel ist das HTML-Element
(<html>… </html>) das
Wurzelelement der Hierarchie und enthält zwei Kindelemente: «head» und
«body». Das head-Element wiederum enthält die Kindelemente namens
«meta» und «title». Das body-Element enthält die Kindelemente namens
«h1», «p», «ul» und «img».
- Überschriften
-
Möchten wir einen Text als Überschrift festlegen, machen wir das in HTML mit der folgenden Syntax:
<h1>Titel</h1>.Mit
<h1>sagen Sie dem Computer, dass nun ein Titel folgt. Dann wird all der Text bis</h1>als Titel interpretiert.Neben
<h1>gibt es auch kleinere Titel<h2>,<h3>, …,<h6>. Versuchen Sie auch diese in Ihr Dokument zu integrieren. - Abschnitt
-
Um in HTML einen Abschnitt zu machen, wird das
<p>-Tag benutzt. Alles, was darin ist, wird als Abschnitt betrachtet. HTML ignoriert Zeilenumbrüche und mehrfache Leerzeichen, um Dokumente konsistent anzuzeigen. Damit Sie Abschnitte verwenden können, ist also das<p>-Tag nötig. - Listen
-
In HTML gibt es zwei Arten von Listen: ungeordnete Listen
<ul>und geordnete Listen<ol>. Innerhalb einer Liste ist jedes Element ein Listeneintrag. Der folgende Code erstellt Ihnen eine Liste.Listing 2. Ungeordnete Liste Ungeordnete Liste im Browser - Bilder
-
Bilder können Sie mit dem
<img>-Tag einfügen. Dazu finden Sie in Listing 3 bzw. Listing 1 ein Beispiel. Alternativ können Sie ein Bild auch im selben Ordner wie Ihre.html-Datei speichern und das Bild dann mit seinem Namen anstelle des Links einbinden.Listing 3. Bild einfügen - Link
-
Links zu anderen Adressen können mit dem
<a>-Tag gesetzt werden.<a href="https://fsf.org">Das ist ein Link zur fsf</a>
Listing 4. Link nach https://fsf.org
Dies sind einige Beispiele für HTML-Tags. Selbstverständlich ist diese Liste alles andere als vollständig. Eine wesentlich ausführlichere Liste finden Sie unter der folgenden Adresse:
Webseite strukturieren
Webseiten sollten immer in sinnvolle Abschnitte unterteilt sein. Mit HTML findet diese Unterteilung mit verschiedenen Tags statt. Welche Tags man wofür einsetzen möchte, liegt dabei beim Benutzer. Sinnvoll ist es, sich eine einfache Struktur zu überlegen und diese, so gut es geht, beizubehalten.
Für diese Unterteilung werden am häufigsten die folgenden Tags verwendet:
<header>- Der Kopfbereich der Seite.
<nav>- Die Navigation, also die Links zu anderen Seiten.
<main>- Der Hauptinhalt der Seite.
<article>- Ein in sich abgeschlossener Beitrag.
<section>- Ein Abschnitt innerhalb eines Beitrags.
<footer>- Der Fussbereich der Seite.
<div>- Ein Bereich ohne besondere Bedeutung. Dieses Tag wird verwendet, wenn keines der anderen Tags passt.
Beispiel
Ein Artikel hat in der Regel einen Titel und besteht aus verschiedenen Abschnitten. Dies kann mit HTML einfach dargestellt werden.
Die logische Struktur kann hier einfach vom Programmierer und auch vom Computer ausgelesen werden. Durch diese Art der Struktur können später dann verschiedene Stile auf die Webseite angewendet werden, was eine schöne und einheitliche Gestaltung ermöglicht, ohne darüber nachdenken zu müssen.
Textelemente hervorheben
Wenn wir eine Webseite erstellen, möchten wir nicht nur die Seite
strukturieren, sondern auch einzelne Elemente hervorheben können. Soll
ein bestimmtes Wort im Text hervorgehoben werden, kann man dies durch
Fettdruck (<b>) oder
Kursivschrift (<i>) erreichen. Es gibt aber
auch noch andere Möglichkeiten, Text hervorzuheben.
Wichtig ist dabei der Unterschied zwischen der Darstellung und
der Bedeutung. Die Tags <b> und
<i> sagen nur, wie etwas aussehen soll. Die
Tags <strong> und <em> sagen
hingegen, dass ein Text wichtig beziehungsweise
betont ist. Dargestellt werden sie standardmässig gleich, aber
ein Vorlesegerät für blinde Menschen kann nur die zweite Variante
richtig interpretieren.
Weitere Möglichkeiten und Informationen finden Sie hier:
Block- und Inline-Elemente
HTML hat im Prinzip zwei unterschiedliche Elementarten. Einerseits
gibt es die Blockelemente (<h1>,
<p>, <div>,
<section>, usw.), andererseits die Inlineelemente
(<b>, <strong>,
<a>, <img>, usw.). Mit diesen
beiden Arten kann man das ganze Design einer Webseite beschreiben.
Dafür gibt es eine ganz einfache Regel. Ein Blockelement nimmt
immer die volle Breite der Webseite ein, und danach kommt ein Umbruch.
Ein Inlineelement hingegen nimmt nur so viel Platz ein, wie es
braucht, und danach geht der Text direkt weiter.
HTML-Attribute
Einige HTML-Elemente sind speziell und brauchen zusätzliche Informationen. Diese Zusatzinformationen nennt man Attribute. Einem Attribut wird dann mit einem Gleichheitszeichen ein Wert zugeordnet.
Beispiel
Ein Link (oder auch anchor-Tag) ist ein Element, das zusätzliche Informationen braucht. Das Element selbst bekommt den Text, der auf der Webseite angezeigt wird, zusätzlich muss man dem Tag aber noch sagen, auf welche Webseite verlinkt werden soll.
<a href="https://fsf.org">Free Software Foundation</a>
In diesem Fall ist href das Attribut und der Wert
"https://fsf.org" gibt an, auf welche Webseite verlinkt
wird.
Weitere Elemente mit Attributen
Auch Bilder brauchen ein Attribut (src), welches angibt,
wo sich das Bild befindet. Hier können auch weitere Attribute wie die
Höhe (height="...") oder die Breite
(width="...") des Bildes angegeben werden.
IDs
IDs sind praktische Attribute, die Sie jedem Element zuweisen können. Wichtig dabei ist, dass IDs beschreibend für das Element sind und eindeutig auf der Webseite vergeben sind.
<section id="very-important-section"> Dies ist ein Abschnitt mit einer ID. </section>
IDs werden verwendet, um spezielle Elemente zu kennzeichnen. Diese können dann individuell gestaltet werden (CSS) oder man kann innerhalb einer Webseite darauf verlinken. Die Webseite scrollt dann direkt zu dem Element, das Sie verlinkt haben.
Um auf ein Element mit einer ID zu verlinken, können Sie den Code von Listing 8 verwenden.
<a href="#very-important-section">Sehr wichtiger Abschnitt</a>
Um auf IDs zu verlinken, stellen Sie einfach das
#-Zeichen vor die ID.
Klassen
Klassen werden später gebraucht, um Elemente zu gestalten (CSS). Im Moment bringen sie uns noch nicht so viel, ausser dass wir ähnliche Elemente gruppieren können. Im Unterschied zu einer ID darf dieselbe Klasse beliebig vielen Elementen zugeordnet werden.
Beispiel
Mit <strong> können Sie ein wichtiges Element
hervorheben. Aber auch <em> hebt wichtige
Elemente hervor. Beiden kann die Klasse «very-important» zugeordnet
werden und somit findet eine Gruppierung statt.
<strong class="very-important">Super wichtig</strong> <em class="very-important">Super wichtig, aber anders</em>
very-important
Beide sind «sehr wichtige» Elemente, werden aber anders dargestellt.
Elemente gestalten
Mit dem <style>-Tag können wir die gruppierten
Elemente gestalten. Damit können wir zusätzliche Styles für Klassen
angeben (internes CSS). Das <style>-Tag wird dabei
in den <head> der Seite geschrieben.
Beispiel
Wir können sehr wichtige Elemente mit roter Schrift zusätzlich hervorheben.
<style>
.very-important {
color: red;
}
</style>
Mehr über die Gestaltung folgt im Abschnitt 2 über CSS.
Übungen
- Kopieren Sie das Beispiel von Listing 1 in die Werkbank und schauen Sie sich das Resultat in der Vorschau an. Es ist schon eingefüllt.
- Fügen Sie zwei weitere Einträge zur Liste hinzu.
- Wechseln Sie die Liste in eine geordnete Liste.
- Setzen Sie die Höhe des Gym-Logos auf 400 Pixel.
Lösungsvorschlag
Betrachten Sie die HTML-Seite von Listing 1.
-
Welches Element ist das Elternelement von
<title>? -
Welche Elemente sind die Kindelemente von
<body>? - Wie viele Listeneinträge hat die Liste und in welchem Element liegen sie?
- Zeichnen Sie den DOM der ganzen Seite als Baum auf.
Lösungsvorschlag
- Das
<head>-Element. -
Die Elemente
<h1>, zwei<p>,<ul>und<img>. -
Die Liste hat zwei Listeneinträge
(
<li>). Beide liegen im<ul>-Element. -
Der DOM der Seite:
-
html
-
head
- meta
- meta
- title
-
body
- h1
- p
- p
-
ul
- li
- li
- img
-
head
-
html
Erstellen Sie eine neue HTML-Datei
my-first-page.html. Diese soll einen Titel, einen
Untertitel und zwei Paragraphen enthalten. Verwenden Sie die Tags
<h1>, <h2> und
<p>.
Sie können den Inhalt der Seite selber wählen. Versuchen Sie die Seite von Grund auf selber zu schreiben und keine Vorlage zu benutzen.
Hinweis
Auf diese Seite kommen Sie in Übung 3.18 zurück. Lassen Sie Ihren Code also stehen.
Lösungsvorschlag
-
Erstellen Sie eine neue HTML-Datei. Diese soll nun einen Link
nach
https://www.gym-muttenz.ch
enthalten. Das heisst, es soll möglich sein, mit einem Klick zur
Webseite des Gymnasiums Muttenz zu gelangen.
Verwenden Sie hierfür das
<a>-Tag. -
Das
<a>-Tag hat neben dem obligatorischen Attributhrefnoch weitere optionale Attribute. Eines davon ist das Attributtitle. Damit lässt sich Text definieren, der erscheint, wenn der Mauszeiger über dem Link schwebt. Nutzen Sie dieses Attribut, um diesen Text auf «Gymnasium» zu setzen.
Lösungsvorschlag
Erstellen Sie eine HTML-Datei mit dem Logo des Gymnasiums Muttenz. Dieses Bild soll ein Link nach https://www.gym-muttenz.ch sein. Das heisst, beim Klicken auf dieses Bild soll man zur Webseite vom Gymnasium Muttenz gelangen.
Lösungsvorschlag
Erstellen Sie eine neue HTML-Datei, die eine sinnvoll strukturierte Webseite über Ihre Schule enthält. Verwenden Sie dabei die folgenden Tags:
<header><nav><main><article><section><footer>
Die Navigation soll dabei mindestens zwei Links enthalten, und der Hauptinhalt soll aus einem Beitrag mit zwei Abschnitten bestehen.
Hinweis: Achten Sie darauf, dass Sie die Tags richtig verschachteln. Die Seite sieht im Browser noch schlicht aus – das ist in Ordnung, denn die Gestaltung folgt erst mit CSS.
Lösungsvorschlag
Bauen Sie die folgenden Elemente in eine Webseite ein:
<b><i><strong><mark><em><sub><sup>
Schreiben Sie zu jedem Element einen kurzen Text, der beschreibt, was das Element bewirkt.
Lösungsvorschlag
Die HTML-Seite von Listing 11 enthält sechs Fehler. Finden Sie die Fehler und korrigieren Sie sie. Der fehlerhafte Code ist in der Werkbank schon eingefüllt.
Hinweis: Sie können Ihre Seite unter validator.w3.org überprüfen lassen. Kopieren Sie den Code dort ins Textfeld.
Lösungsvorschlag
- Das Schliessungstag
</head>fehlt. -
Der Titel wird mit
<h1>anstatt mit</h1>geschlossen. -
Beim ersten
<p>-Tag fehlt das Schliessungstag. -
<strong>und<em>sind falsch verschachtelt: Das innere Element muss zuerst geschlossen werden. -
Beim zweiten
<li>-Tag fehlt das Schliessungstag. -
Der Wert des
src-Attributs steht nicht in Anführungszeichen.
Tabellen haben wir bisher nicht behandelt. Recherchieren Sie unter w3schools: HTML Tables, wie in HTML eine Tabelle erstellt wird, und stellen Sie damit einen Teil Ihres Stundenplans dar.
Die Tabelle soll eine Kopfzeile mit den Wochentagen haben.
Hinweis: Sie brauchen dafür die Tags
<table>, <tr>,
<th> und <td>.
Lösungsvorschlag
- Was passiert, wenn Sie ein Blockelement in ein Inlineelement packen?
- Von welchem Typ ist
<img>? -
Wie können Sie ein Bild zentriert anzeigen, ohne Text daneben?
Hinweis:
<center>
Lösungsvorschlag
- Die Eigenschaften eines Blockelements bleiben erhalten.
<img>ist ein Inlineelement.-
Lösungsvorschlag (center-picture.html) Das
<center>-Tag ist veraltet und sollte eigentlich nicht mehr verwendet werden. In Abschnitt 2, «Mit Bildern umgehen» lernen Sie, wie ein Bild mit CSS zentriert wird.
Entscheiden Sie bei jedem der folgenden Tags, ob es sich um ein Blockelement oder um ein Inlineelement handelt.
<p><a><div><span><ul><h3><strong><section><em><img>
Hinweis: Probieren Sie es im Browser aus, wenn Sie sich nicht sicher sind. Schreiben Sie dazu zwei gleiche Tags hintereinander und schauen Sie, ob ein Umbruch entsteht.
Lösungsvorschlag
- Block
- Inline
- Block
- Inline
- Block
- Block
- Inline
- Block
- Inline
- Inline
Was ist der Unterschied zwischen dem
<div>-Tag und dem
<span>-Tag? Erklären Sie!
Lösungsvorschlag
Ein <div>-Tag liefert ein Block-Element und
ein <span>-Tag ein Inline-Element.
Erstellen Sie eine Webseite über drei Kantone der Schweiz. Jeder
Kanton soll in einem eigenen
<section>-Element mit einer passenden ID
stehen.
Erstellen Sie am Anfang der Seite ein Inhaltsverzeichnis in Form einer Liste. Ein Klick auf einen Eintrag soll direkt zum entsprechenden Kanton führen.
Hinweis: Um auf eine ID zu verlinken, stellen Sie das
#-Zeichen vor die ID
(Listing 8).
Lösungsvorschlag
- Erstellen Sie eine Webseite mit einer Überschrift, zwei Paragraphen und einer Liste mit zwei Einträgen.
-
Geben Sie der Überschrift, einem Paragraphen und einem
Listeneintrag die Klasse
wichtig. -
Ergänzen Sie die Seite im
<head>mit einem<style>-Tag, das alle Elemente der Klassewichtigrot darstellt. - Weshalb wäre eine ID hier die falsche Wahl?
Lösungsvorschlag
Eine ID darf auf einer Webseite nur ein einziges Mal vorkommen. Hier sollen aber drei Elemente gleich dargestellt werden, also brauchen wir eine Klasse.