ifwp.net-schulbuch.de

Listen, Bildern und Verweise

Im vorhergehenden Kapitel ist ein minimales HTML-Grundgerüst vorgestellt worden. Um in der Praxis eine Webseite zu erstellen, sollte man dieses Grundgerüst um einige wichtige Elemente ergänzen.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
      Deine neue Seite
    </title>
  </head>
  <body>
    <h1>Willkommen!</h1>
    <p>
      Dies ist eine neue HTML-Datei
    </p>
  </body>
</html>

Die Zeilennummern gehören nicht zum HTML-Code.

Erläuterungen zum HTML-Code.

Zeile 1:

Die DOCTYPE-Deklaration am Anfang des HTML-Dokuments informiert über die Art des Dokuments. Die angegebene Deklaration ist für die Sprachversion HTML5-Dokumente vorgesehen.

Zeilen 2 bis 16:

html ist das Wurzelelement. Es umschließt das ganze Dokument. In Zeile 2 ist die verwendete Sprache lang="de" angegeben.

Zeilen 3 bis 9:

Im head-Element enthaltende Informationen erscheinen nicht auf dem Bildschirm, sondern sie sind zur Auswertung durch Suchmaschinen und Browser gedacht. Als meta-Informationen für den Browser werden der verwendete Zeichensatz angegeben und der Viewport eingestellt. Der Viewport ist der sichtbare Teil des Browserfensters abzüglich Scrollbalken, Adressleiste, Favoritenleiste und Taskleiste. Der Viewport entspricht dem Platz, der zur Anzeige der Webseite zur Verfügung steht.

Zeilen 6 bis 8:

Jedes Dokument muss einen title-Element haben. Der Titel wird in der Kopfzeile des Fensters oder der Registerkarte des Browsers angezeigt.

Zeilen 10 bis 15:

Im body-Element stehen die vom Browser auf dem Bildschirm angezeigten Informationen.

Zeile 11

Das h1-Element stellt eine Überschrift erster Ordnung dar. Es gibt sechs verschiedene Tags für Überschriften: h1 bis h6.

Zeilen 12 bis 14

Ein p-Element definiert einen Abschnitt im Text. Das p steht für Paragraph. Das Element wird verwendet, um Textinhalte logisch und visuell in Abschnitte zu gliedern.

Info: Kommentar

HTML bietet die Möglichkeit, an beliebigen Stellen innerhalb der HTML-Datei Kommentare einzufügen. Die Kommentare werden bei der Präsentation durch den Web-Browser nicht angezeigt. Sie werden benutzt, um die Lesbarkeit des HTML-Text zu erhöhen.

Kommentare werden durch die Zeichenfolge "Spitzeklammer auf - Rufzeichen - Minus - Minus" gekennzeichnet. Sie können einzeilig oder mehrzeilig sein.

Beispiele:

Info: Meta-Tags

Ein meta-Element definiert Metadaten zu einem Dokument. Metadaten sind Informationen über Daten. meta-Elemente stehen immer innerhalb des head-Elements und werden normalerweise verwendet, um Zeichensatz, Seitenbeschreibung, Schlüsselwörter, den Autor des Dokuments und die Einstellungen des Ansichtsfensters anzugeben.

HTML-Editor

Die zwei Werkzeuge (Texteditor und Browser) werden durch ein Werkzeug (HTML-Editor) ersetzt, das beide Funktionen (HTML-Text bearbeiten und HTML-Text darstellen) integriert.

Interaktiver HTML, CSS & JS EDITOR

Info: HTML-Editor

Ein HTML-Editor ist eine Software zum Bearbeiten und Erstellen von HTML-Code, der für Webseiten verwendet wird . Bei textbasierten HTML-Editoren kann der Quellcode direkt bearbeitet werden, hier im linken Fenster. Im rechten Fenster wird das zu bearbeitende Dokument bereits so angezeigt, wie es später im Browser dargestellt wird.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "Projekt1.css">
    <title>
      Deine neue Seite
    </title>
  </head>
  <body>
    <h1>Willkommen!</h1>
    <p>
      Dies ist eine neue HTML-Datei.
    </p>
    <script src = "Projekt1.js">
    </script>
  </body>
</html>

Beschreibung der Reiter:

HTML hier wird der Quelltext erstellt und bearbeitet.

CSS hier werden die CSS-Klassen definiert und die Eigenschaften festgelegt.

JavaScript hier werden interaktive Elemente festgelegt und programmiert.

Bilder hier werden Bilder, die eingebunden werden sollen, abgelegt.

Änderungen in den vier Bereichen kann man mit Hilfe des Button Seite anzeigen im rechten Fenster sichtbar machen.

Hinter dem Menue-Button rechts verbirgt sich ein kleines Menü, mit dem man die Dateien verwalten kann.

Der Menue-Punkt Hilfe enthält eine kurze Bedienungsanleitung zum HTML-Editor.

Darstellung mit dem Browser:

Speicher die html-, css- eventuell auch die js-Datei und alle Bilddateien in einen Ordner.

Ergänze die folgenden Links im head der html-Datei. "Einladung4a" muss durch den aktuellen Dateinamen ersetzt werden.

Doppelklick auf die html-Datei bewirkt die Darstellung mit Hilfe des Browsers.

Die Aufgabe, die im folgenden Abschnitt beschrieben wird, ist das Erstellen einer Webseite, durch die Schülerinnen und Schüler zu einem Klassentreffen eingeladen werden sollen.

Einladung 1

Darstellung im Browser

Quelltext

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Einladung</title>
  </head>
  <body>
    <h1>Einladung zum Klassentreffen</h1>
    <ol>
      <h4>TOP</h4>
      <li>Austausch von Bildern von der letzten Klassenfahrt</li>
      <li>Vorbereitung der nächsten Klassenfahrt</li>
    </ol>
    <!-- BILD einfügen -->
    <img class="image" src="https://ifwp.net-schulbuch.de/../f/b/k2towerb01.jpg" style="width: 20%" />
    <!-- LINK einfügen -->
    <a href="https://www.london.de/sehenswuerdigkeiten/tower-of-london">
      <br />
      Hier klicken für weitere Bilder</a>
  </body>
</html>

Quelltext mit Textstruktur-Elementen, Listen, Bild und Verweis (Beispiel Einladung zum Klassentreffen)

Die Kommentare helfen bei der Erklärung der Sprach-Elemente.

DOWNLOAD Bild von der Towerbridge

Info: Listen erzeugen

Listen

In HTML kannst du Listen mit speziellen Tags erzeugen. 
Es gibt drei Hauptarten von Listen:

---

### 1. **Ungeordnete Liste**

Wird mit <ul> (unordered list) erstellt, 
die Listenelemente stehen in <li> (list item).

```html
<h3>Ungeordnete Liste</h3>
<ul>
  <li>Apfel</li>
  <li>Banane</li>
  <li>Kirsche</li>
</ul>
```

Das ergibt:

* Apfel
* Banane
* Kirsche

---

### 2. **Geordnete Liste (Nummeriert)**

Wird mit `<ol>` (ordered list) erstellt.

```html
<h3>Geordnete Liste</h3>
<ol>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  <li>Dritter Punkt</li>
</ol>
```

Das ergibt:

1. Erster Punkt
2. Zweiter Punkt
3. Dritter Punkt

---

### 3. **Definitionsliste (Begriffe & Beschreibungen)**

Mit <dl> (definition list), <dt> (definition term) 
und <dd> (definition description).

```html
<h3>Definitionsliste</h3>
<dl>
  <dt>HTML</dt>
  <dd>Sprache zur Strukturierung von Webseiten</dd>
  
  <dt>CSS</dt>
  <dd>Sprache zur Gestaltung von Webseiten</dd>
</dl>
```

Das ergibt:

HTML
 Sprache zur Strukturierung von Webseiten
CSS
 Sprache zur Gestaltung von Webseiten

---

In HTML kannst du Listen mit speziellen Tags erzeugen. 
Es gibt drei Hauptarten von Listen:

---

### 1. **Ungeordnete Liste**

Wird mit <ul> (unordered list) erstellt, 
die Listenelemente stehen in <li> (list item).

```html
<h3>Ungeordnete Liste</h3>
<ul>
  <li>Apfel</li>
  <li>Banane</li>
  <li>Kirsche</li>
</ul>
```

Das ergibt:

* Apfel
* Banane
* Kirsche

---

### 2. **Geordnete Liste (Nummeriert)**

Wird mit `<ol>` (ordered list) erstellt.

```html
<h3>Geordnete Liste</h3>
<ol>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  <li>Dritter Punkt</li>
</ol>
```

Das ergibt:

1. Erster Punkt
2. Zweiter Punkt
3. Dritter Punkt

---

### 3. **Definitionsliste (Begriffe & Beschreibungen)**

Mit <dl> (definition list), <dt> (definition term) 
und <dd> (definition description).

```html
<h3>Definitionsliste</h3>
<dl>
  <dt>HTML</dt>
  <dd>Sprache zur Strukturierung von Webseiten</dd>
  
  <dt>CSS</dt>
  <dd>Sprache zur Gestaltung von Webseiten</dd>
</dl>
```

Das ergibt:

HTML
 Sprache zur Strukturierung von Webseiten
CSS
 Sprache zur Gestaltung von Webseiten

---

Info: Bilder einbinden

Bilder

Um in HTML Bilder einzubinden, verwendet man das <img>`-Tag. Dieses Tag ist ein leeres Element (es hat keinen eigenen Inhalt und wird nicht mit einem separaten End-Tag geschlossen).

Die wichtigsten Attribute sind:

* ** src ** – Quelle des Bildes (Dateipfad oder URL)
* ** alt ** – Alternativtext (wird angezeigt, wenn das Bild nicht geladen werden kann)
* ** width ** und ** height ** – zur Angabe der Bildgröße (in Pixeln oder Prozent)
* ** title ** – zeigt einen Tooltip an, wenn man mit der Maus über das Bild fährt

### Beispiel: Bild aus demselben Verzeichnis

```html
<img src="bild.jpg" alt="Beschreibung des Bildes" width="300" height="200">
```

### Beispiel: Bild aus einem Unterordner

```html
<img src="images/logo.png" alt="Logo der Schule">
```

### Beispiel: Bild von einer externen Website

```html
<img src="https://example.com/bilder/natur.jpg" alt="Schöne Natur">
```

👉 Wichtige Hinweise:

* alt ist **Pflicht** für barrierefreies Webdesign.
* Größe besser mit **CSS** steuern (z. B. `style="max-width:100%;"` oder über ein Stylesheet).
* Bilder sollten in einem für das Web optimierten Format vorliegen (z. B. **JPEG**, **PNG**, **WebP**, **SVG**).

Um in HTML Bilder einzubinden, verwendet man das <img>`-Tag. Dieses Tag ist ein leeres Element (es hat keinen eigenen Inhalt und wird nicht mit einem separaten End-Tag geschlossen).

Die wichtigsten Attribute sind:

* ** src ** – Quelle des Bildes (Dateipfad oder URL)
* ** alt ** – Alternativtext (wird angezeigt, wenn das Bild nicht geladen werden kann)
* ** width ** und ** height ** – zur Angabe der Bildgröße (in Pixeln oder Prozent)
* ** title ** – zeigt einen Tooltip an, wenn man mit der Maus über das Bild fährt

### Beispiel: Bild aus demselben Verzeichnis

```html
<img src="bild.jpg" alt="Beschreibung des Bildes" width="300" height="200">
```

### Beispiel: Bild aus einem Unterordner

```html
<img src="images/logo.png" alt="Logo der Schule">
```

### Beispiel: Bild von einer externen Website

```html
<img src="https://example.com/bilder/natur.jpg" alt="Schöne Natur">
```

👉 Wichtige Hinweise:

* alt ist **Pflicht** für barrierefreies Webdesign.
* Größe besser mit **CSS** steuern (z. B. `style="max-width:100%;"` oder über ein Stylesheet).
* Bilder sollten in einem für das Web optimierten Format vorliegen (z. B. **JPEG**, **PNG**, **WebP**, **SVG**).

Info: Links einbinden

Hyperlinks

In HTML kannst du Links mit dem <a>-Tag einbinden. 
Das Attribut `href` gibt die Zieladresse des Links an. 
Hier ein paar Beispiele:

### 1. Externer Link

```html
<a href="https://www.google.com">Zu Google</a>
```

### 2. Link in neuem Tab öffnen

```html
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
    Google in neuem Tab
</a>
```
`rel="noopener noreferrer"` ist eine Sicherheitsmaßnahme, wenn `target="_blank"` verwendet wird.


### 3. Interner Link (z. B. zu einer anderen Seite deiner Website)

```html
<a href="kontakt.html">Kontaktseite</a>
```

### 4. Link zu einer bestimmten Stelle (Anker) auf der Seite

```html
<a href="#abschnitt1">Zum Abschnitt 1 springen</a>

<h2 id="abschnitt1">Abschnitt 1</h2>
```

### 5. E-Mail-Link

```html
<a href="mailto:beispiel@email.de">Schreib mir eine Mail</a>
```

### 6. Telefon-Link

```html
<a href="tel:+49123456789">Ruf mich an</a>
```

In dem a-Element wird zusätzlich der Text angegeben, der auf den Webseite angezeigt wird. Wenn man auf den Text klickt, kommt man zur verbundenen Seite.

Einladung 2

Darstellung im Browser

Quellcode

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Klassentreffen Einladung</title>
  </head>
  <body>
    <div class>
      <h1>Einladung zum Klassentreffen!</h1>
      <p>Hallo liebe Klassenkameraden und Klassenkameradinnen,</p>
      <div>
        <p>Wir laden euch herzlich zu unserem Klassentreffen ein!</p>
        <p><strong>Datum:</strong> 12. November 2024</p>
        <p><strong>Uhrzeit:</strong> 18:00 Uhr</p>
        <p>
          <strong>Ort:</strong> Restaurant "Zum alten Schulhof", Musterstraße 1,
          12345 Musterstadt
        </p>
        <p>
          Lasst uns gemeinsam in Erinnerungen schwelgen, alte Freundschaften
          aufleben lassen und einen unvergesslichen Abend zusammen verbringen!
        </p>
      </div>

      <p>Bitte meldet euch bis zum 1. November 2024 an.</p>
    </div>
  </body>
</html>

Anmerkung:

Das HTML-Projekt ist von ChatGPT erzeugt worden:

Auftrag 1 (Einladung 3)

Überarbeite eine HTML-Seite für eine neue Version der Einladung. Die Einladung soll ein Bild und einen Link enthalten.

Du kannst die HTML-Seiten direkt mit dem HTML-Editor bearbeiten. Wähle eine Einladungsversion, die du überarbeiten möchtest. Speicher die überarbeitete Einladung als Einladung3 in dem lokalen Ordner.

Info: Lösungshinweise

Hinweise zur Lösung der Aufgabe (HTML-Datei)

Ausgangspunkt ist die Einladung2
Bild in HTML-Datei eingefügt.
Hyperlink in HTML-Datei eingefügt.
Text angepasst.
Die Dateien können in dem HTML-Editor geladen, analysiert und verändert werden.

Webseiten, die aus mehreren HTML-Dateien bestehen

Eine Webseite besteht in der Regel nicht nur aus einer HTML-Datei. Meist wird der Inhalt auf mehrere Seiten verteilt. Damit der Benutzer von einer Seite zur andren Seite gelangen kann, werden die Webseiten miteinander verlinkt.

Beispiel: Die Unterrichtsinhalte der verschiedenen Fächer in der Jahrgangsstufe 9 sollen in einer Webseite dargestellt werden. Die Webseite besteht aus mehreren HTML-Daten.

Die HTML-Dateien liegen in einem Verzeichnis. "index.html" ist die Startseite. Durch Links kann man von jeder Seite auf die anderen Seiten gelagen.

Der Navigationsbereich ist als nav-Element definiert. Die Links erscheinen in Listenform mit einer Punktkennzeichnung.

DOWNLOAD Webseiten Unterrichtsinhalte

Auftrag 2 (Webseiten Unterrichtsinhalte)

Lade die zip-Datei herunter und speichere die Datei in einem lokalen Ordner.
Extrahiere alle Dateien.
Ergänze alle Web-Seiten mit Hilfe des HTML-Editors, indem du Unterrichtsinhalte der Fächer formulierst.

Interaktiver HTML, CSS & JS EDITOR

Impressum

LOGIN
Benutzer:
Passwort:

LOGIN
Benutzer:
Passwort: