×
produktlogotitle

 DOWNLOADSEITE

Seite: fa_index
Diese Seite wurde aktualisiert am 27.10.2025

LOGIN
Benutzer:
Passwort:
 
Geogebra-
   ifwp.net-schulbuch.de
Startseite Webseiten Dokumentbeschreibungssprache Diese Seite wurde aktualisiert am 27.10.2025

 

Strukturieren mit der Dokument-Beschreibungssprache HTML

Lisa und Matteo haben die Aufgabe übernommen, die Einladung zu einem Klassentreffen der Klasse 9b zu organisieren. Sie bereiten eine Einladung auf Papier vor, die sie ausdrucken wollen, um sie dann an alle Schülerinnen und Schüler der Klasse zu verteilen.

 

 

Lia hat erfahren, dass man neuerdings auch Informationen für die Klasse im Schulnetz ablegen kann. Dadurch würde man viel Arbeit und Papier sparen. Als Tipp ist noch gesagt worden, dass man die Seite für das Schulnetz mit einem einfachen Text-Editor erstellen kann. Die Datei muss die Endung .html haben. Dann wird die Seite im Browser dargestellt.

Lia, Lisa und Matteo erstellen mit einem einfachen Texteditor eine Einladungsdatei und speichern die Textdatei mit der Endung .html ab.

Einladung zum Klassentreffen
Mittwoch, 27.08.2025, um 19:00 Uhr im Schulgarten

TOP
1.    Austausch von Bildern von der letzten Klassenfahrt
2.    Vorbereitung der nächsten Klassenfahrt

Die Darstellung im Browser ist für alle enttäuschend. Der Text wird zwar richtig im Browser dargestellt, aber wegen der fehlenden Formatierung ist die Lesbarkeit schlecht.

Es fehlen die grundlegenden Bauelemente einer Webseite: Die HTML-Tags.

Durch die HTML-Tags wird die Struktur und der Inhalt der Webseite beschrieben.

 

HTML-Tag

Ein HTML-Tag ist ein grundlegendes Steuerelement in der Sprache HTML (Hypertext Markup Language), mit dem der Aufbau und die Struktur einer Webseite beschrieben werden.

 

Ein Beispiel für eine Seite mit einer Minimal-Ausstattung von HTML-Tags und die Erklärung der Tags.

<html>
  <head>
    <title>Klassentreffen</title>
  </head>
  <body>
    <h3>Einladung zum Klassentreffen</h3>
    <p>Mittwoch, 27.08.2025, um 19:00 Uhr im Schulgarten</p>

    <p>TOP</p>
    <p>1. Austausch von Bildern von der letzten Klassenfahrt</p>
    <p>2. Vorbereitung der nächsten Klassenfahrt</p>
  </body>
</html>
 

 

  • Zeile 1: Seitenanfang - Dieses Tag liefert die Information an den Browser, dass die Seite in HTML formuliert ist.
  • Zeile 2: Seitenkopf (Anfang) - Inhalt dieses Tags enthält Informationen über das Dokument, die für den Browser und auch für Suchmaschinen wichtigt sind. Diese Informationen werden nicht auf der Webseite angezeigt.
  • Zeile 3: Seitentitel - Der Titel des Dokuments wird nicht auf der Webseite sondern in der Titelleiste des Browsers angezeigt.

 

  • Zeile 4: Seitenkopf (Ende)
  • Zeile 5: Inhalt der Webseite (Anfang) - Dieses Tag ist ein grundlegender Bestandteil einer HTML-Datei und stellt den Hauptinhalt des Dokuments dar. Alles, was in diesem Tag steht, ist für den Benutzer sichtbar einschließlich Texte, Bilder, Videos u.s.w.
  • Zeile 6: Überschrift - Dieses Tag steht für "Heading 3" eine Überschrift auf der Seite. Überschriften sind strukturiert von h1 bis h6, wobei h1 die wichtigste Überschrift ist.
  • Zeilen 7 bis 11: Absatz - Das "p" steht für "Paragraph". Dieses Tag wird verwendet, um Absätze im Dokument zu definieren. Es sorgt dafür, dass der Text strukturiert und lesefreundlich angezeigt wird. Vor und nach einem Absatz wird ein Abstand eingehalten.
  • Zeile 12: Inhalt der Webseite (Ende)
  • Zeile 13: Seitenende

     

Eine Übersicht zu den Tags steht auf der Seite mit der Registerkarte "Sprache".

 

Ein Beispiel für eine HTML-Datei:

Die Datei ist eine reine Textdatei, ohne eine Formatierung. Die Datei wird mit einem Dateinamen mit der Endung .html gespeichert. Dadurch wird sichergestellt, dass die Datei im Browser geöffnet wird.

 

Auftrag 1:

Erstelle einen Ordner "MeineWebseiten" und entwickele ein HTML-Dokument, das du in diesem Ordner abspeicherst. Auf der Webseite sollen Teile eines Computers, die zur Hardware und zur Software gehören, benannt werden.

  • Benutze dazu die oben beschriebenen Tags.
  • Schreibe den HTML-Text mit einem einfachen Texteditor.
  • Speichere die Textdatei mit der Endung .html ab.
  • Ein Doppelklick auf die Datei öffnet den Browser und das Ergebnis wird angezeigt. 

Folgende Inhalte soll die Webseite mindestens enthalten und wie folgt im Browser darstellen:
HTML-Quellcode

HTML-Quellcode ist der in HTML geschriebene Text, der den Aufbau und Inhalt einer Webseite beschreibt.

Merkmale:

  • Er besteht aus HTML-Tags, die Struktur, Formatierung und Verknüpfungen festlegen.

  • Der HTML-Quellcode ist für Menschen lesbar und editierbar, wird aber vom Webbrowser interpretiert, um daraus die fertige Webseite darzustellen.

  • Er kann zusätzlich eingebettete CSS (für Design) und JavaScript (für Interaktivität) enthalten.

 

Impressum
© 2023  Net-Schulbuch.de

10.07  0.1384  8.1.33