Informatik M25d
🔸

HTML

Die Hypertext Markup Language ist eine sogenannte Auszeichnungssprache. Mit ihr können Dokumente strukturiert werden. Die Struktur wird mittels Verschachtelung von HTML-Elementen erreicht

HTML-Elemente

HTML-Elemente werden durch sogenannte Tags gekennzeichnet. Ein Tag wird durch kleiner/grösser-Klammern gekennzeichnet. Das Element beginnt mit dem öffnenden Tag <element-name>, dann kommt der Inhalt, dann das schliessende Tag </element-name>:

<element-name>Inhalt</element-name>
1

Struktur

Eine HTML-Datei hat eine vorgegebene Struktur. Gewisse Elemente müssen vorhanden sein und einige Verschachtelungen sind nicht erlaubt. Jedes Dokument hat als Grundelement ein html-Element, das alles andere umfasst. Direkt darin ist das head- und das body-Element.

<html>
  <head></head>
  <body></body>
</html>
1
2
3
4

Der Lesbarkeit zu Liebe, werden die inneren Elemente eingerückt.

head-Element

Das head-Element beinhaltet Zusatz-Infos, wie der Titel der Webseite und weitere Metainformationen.

<html>
  <head>
    <title>Meine erste Webseite</title>
  </head>
  <body>
    Hallo Welt
  </body>
</html>
1
2
3
4
5
6
7
8

body-Element

Im body-Element wird der sichtbare Inhalt der Webseite, also Texte, Überschriften, Bilder und alles Andere verpackt.

<html>
  <head>
    <title>Meine erste Webseite</title>
  </head>
  <body>
    <h1>Willkommen</h1>
    <p>Wie geht es so? <strong>Ich freue mich, dass du da bist!</strong></p>
  </body>
</html>
1
2
3
4
5
6
7
8
9

Willkommen

Wie geht es so? Ich freue mich, dass du da bist!

Aufgabe

  1. Erstelle ein neues Verzeichnis mit dem Namen webseite. Hier kommen alle zur Webseite gehörenden Dokumente rein.
  2. Öffne Thonny und aktiviere die Dateiliste (unter View/Ansicht)
  3. Erstelle eine Textdatei mit dem obigen Inhalt und speichere diese im oben-erstellten Verzeichnis als index.html ab
  4. Gehe in den Datei-Explorer/Finder und mache einen Doppelklick auf das soeben erstellte Html-Dokument

Nun kannst du zwischen dem Editor und dem Browser hin- und herwechseln.
Die Programme müssen dabei nicht ständig geschlossen werden!

  • Ändere etwas im Editor und speichere die Datei ab +S
  • Wechsle zum Browser und lade die Seite neu +R

Man kann auch die linke Hälfte des Bildschirms für den Editor verwenden und auf der rechten die Webseite anzeigen.

Text-Struktur

Es gibt sogenannte Block-Elemente, welche den Text strukturieren. Diese Elemente sollten nicht ineinander verschachtelt werden:

p-Element
steht für Paragraph, also Absatz
<p>Wie geht es so?</p>
h1-Element
steht für Heading 1, also die höchste Überschrift
<h1>Willkommen</h1>
h2 bis h6
weitere Überschriften für Unterkapitel bis zum 6. Level, die kleiner dargestellt werden

Daneben gibt es sogenannte Inline-Elemente, die verwendet werden, um Textteile innerhalb eines Block-Elementes zu kennzeichnen:

strong
Starke Hervorhebung (normalerweise fett)
<strong>Ich freue mich, dass du da bist!</strong>
em
emphasis, leichte Hervorhebung (normalerweise kursiv)
<em>Ich freue mich, dass du da bist!</em>

Aufgabe: Text

Passe deine Webseite an:

  • erstelle einige Überschriften
  • füge einige Absätze hinzu

Attribute

Gewisse Elemente benötigen Zusatzinformation. Diese wird mit sogenannte Attributen im öffnenden Tag drin gesetzt. Attribute bestehen aus einem festen Namen und einem variablen Wert:

<element-name attributname="attributwert">Inhalt</element-name>
1

Klickbare Links erzeugt man mit dem anchor-Element. Der Inhalt des Elementes ist klickbar, die zu öffnende URI gibt man mit dem Attribut href an.

<a href="https://www.gymkirchenfeld.ch">Meine Schule</a>
1
Meine Schule

Aufgabe: Links

  • Baue einige Links zu externen Seiten ein
  • erstelle eine zweite Seite kontakt.html und verlinke diese mit index.html
  • Vergiss nicht einen Link zurück zur Startseite einzubauen

Bilder

img-Elemente haben keinen Inhalt – es gibt darum kein schliessendes Tag. Das Bild ist in einer externen Bilddatei und darauf muss natürlich verwiesen werden, sonst findet der Browser die Bilddatei nicht.

<img src="bild1.jpg" />
1

Aufgabe: Bilder

Wir versuchen ein Bild einzubauen. Gehe dabei wie folgt vor:

  • Suche ein Bild und speichere es in deinem Webseiten-Ordner ab
  • füge ein img-Element hinzu. Passe dabei den Wert des src-Attributes an, so dass er dem Dateinamen des abgespeicherten Bildes entspricht

Zusatzaufgabe

Ergänze deine Seite um «richtigen» Inhalt, z.B. über dich, dein Lieblings-Fussballteam oder deine Lieblings-Band, oder über dein Hobby oder sonst irgendetwas.

CSS

Die Webseite soll ja nicht nur einen tollen Inhalt haben, sondern auch grafisch etwas hermachen. Dazu formuliert man «Formatvorlagen», sogenannte Cascading Style Sheet-Regeln.

Eine Regel besteht immer aus zwei Teilen:

  1. Für welche Elemente soll sie gelten?
  2. Wie sollen diese Element gestaltet werden?

Selektor

Mit Hilfe des sogenannte Selektors werden die Elemente ausgewählt, für welche die Regeln gelten sollen. Wir verwenden nur den Element-Selektor (es gibt noch andere).

element-name {
}
1
2

Die obenstehende Regel gilt für alle Elemente vom Typ element-name. Zwischen die geschweiften Klammern kommen nun die Formatierungsbefehle.

Wollen wir also alle Überschriften anpassen, dann schreiben wir den folgenden Selektor:

h1 {
}
1
2

Formatierungsbefehle

Formatierungsbefehle bestehen aus dem Namen der Eigenschaft die man formatieren möchte und einem Wert. Je nachdem was formatiert wird, stehen als Werte Farben, Masse und vordefinierte Werte zur Auswahl:

element-name {
  eigenschaft1: wert;
  eigenschaft2: wert;
  ...;
}
1
2
3
4
5

Beispiel

Die folgenden Regeln legen eine andere Schriftart[1] fest, machen den Hintergrund der Seite schwarz[2], den Text farbig[3] und dekorieren die Überschrift mit einem Rahmen[4]:

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: black;
}

h1 {
  color: yellow;
  border: 1px dotted pink;
}

p {
  color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

mit HTML-Dokument verknüpfen

In den HTML-Dokumenten können wir nun einen Verweis auf die CSS-Datei hinzufügen. So können auch mehrere HTML-Dokumente dieselbe CSS-Datei verwenden:




 




<html>
  <head>
    <title>Meine erste Webseite</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  ...
</html>
1
2
3
4
5
6
7

Aufgabe

  • Erstelle eine Textdatei mit dem obenstehenden CSS-Regeln und speichere sie im Ordner webseite als style.css ab
  • Füge im head-Element deiner HTML-Dokumente einen Link zur CSS-Datei ein (Zeile 4, unterhalb von title)
  • Lade dein HTML-Dokument im Browser neu (+R)
  • Passe Schriftart, Farben und weitere Dinge an, so wie es dir gefällt

Hier findest du weitere Eigenschaften:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften

  1. Die Eigenschaft font-family wird gesetzt. Da je nach System eine Schriftart nicht verfügbar sein könnte, wird eine Liste mit abnehmender Priorität angeben: Arial, Helvetica, sans-serif; ↩︎

  2. Mit der Eigenschaft background-color kann die Hintergrundfarbe eines Elementes gesetzt werden. Es können Namen für Farben eingesetzt oder Farbcodes verwendet werden. ↩︎

  3. Die Eigenschaft color wird verwendet um die Überschrift gelb und den Text grün zu färben. ↩︎

  4. Mit border kann ein Element mit einem Rahmen versehen werden. Dazu müssen drei Eigenschaften aufs Mal angegeben werden: border-width, border-style und border-color ↩︎