top of page

HTML

HTML ist die Sprache, die das Entstehen des World Wide Webs ermöglichte. HTML-Seiten bestehen z.B. aus folgenden Elementen, die für den aufmerksamen Nutzer sichtbar sind: Logos, beliebige Bilder/Fotos, Absätze mit Texten, Kontaktdaten, Verlinkungen, Videos, Shopinhalte, Menüleisten/Navigation, ...

Die nachfolgenden Übungen befähigen Sie, selbst solche Seiten erstellen zu können.

​

HTML bedeutet Hypertext Markup Language. Ohne HTML würde es das World Wide Web (WWW) in seiner heutigen Form nicht geben. Alle Internetseiten, welche mit einem Browser angezeigt werden können, basieren auf dieser so genannten Text-Auszeichnungssprache. Mit der Text-Auszeichnungssprache HTML und dem HTTP-Protokoll begann der Siegeszug des WWW in den 90er-Jahren. Eine erste Version von HTML wurde 1989 in der Schweiz am CERN entwickelt für den einfachen Austausch von Informationen zwischen den verschiedenen Standorten des Unternehmens. Es dauerte dann allerdings noch einige Jahre, bis die amerikanische Firma Netscape das Internet-Surfen populär machte.
Die geringe Größe, eine hohe Fehlertoleranz und gute Streaming-Eigenschaften solcher in HTML geschriebenen Seiten sorgten für eine schnelle Verbreitung.
Jeder Nutzer eines Internetbrowsers betrachtet heute täglich viele in HTML geschriebene Seiten.

Unterrichtsinhalte

  1. Die Geschichte des Internets

  2. Websitebuilder-Software von wix.com bzw. jimdo.de

  3. HTML-Grundgerüst

  4. HTML-Tags lernen

  5. Erstellen Sie eine HTML-Seite mit Bildern, Informationen und Texten, die Sie von Ihrem Ausflug zur IFA  mitgebracht haben!

    1. Achten Sie darauf, dass keine Copyrights von Dritten verletzt werden!

    2. Größenanpassungen von Fotos sind einfach zu realisieren mit MS-Paint.

    3. Farben von Texten, Positionen der Elemente, Hintergrundbilder usw. werden wir später hinzufügen.

  6. Erstellen Sie eine Startseite mit einem Hyperlink, der Sie auf ihre Messeseite führt!

    1. Die Startseite ist eine zweite HTML-Seite. Sie kann Verweise auf viele andere HTML-Seiten enthalten, z.B. Impressum, Kontakt, Anfahrt, Shop, ...

    2. Von den anderen Seiten soll man wieder zurück zur Startseite kommen, d.h. auch hier ist ein weiterer Link notwendig.

  7. 1-Spalten-Layout: Schritt für Schritt
    Bauen Sie folgende Seite nach:

  8. Wie funktioniert ein 2-Spalten-Layout?

  9. Wie funktionieren HTML-Tabellen?
    Aufgabe: Erstellen Sie einen Stundenplan! Verwenden Sie ...

    1. unterschiedliche Schriftarten für Inhalte und Überschriften

    2. gleiche Breiten der Spalten für die Wochentage

    3. verschiedene Farben für Schriften

    4. identische Hintergrundfarben für die Stunden eines Unterrichtsfachs

    5. Verwendung von Symbolen (Fotos) für Sport-, Musik- und Mathematikunterricht

    6. Weitere Ideen?

  10. Formulare / Newsletter-Bestellung entwerfen und 'stylen' mit CSS

  11. Audio und Video Tag / eigenen Medienplayer vorbereiten / Abspielen eigener Dateien

    1. Auswahl von drei MP3 und 3 MP4-Dateien (kurze Videos) und Ablage in Verzeichnis ./medien

    2. Testen des Audio-Tags / Erstellung einer kleinen Testseite mit Audio-Tag, welches eine der drei ausgewählten MP3-Dateien abspielt.

    3. Testen des Video-Tags / Erstellung einer kleinen Testseite mit Video-Tag, welches eine der drei ausgewählten MP4-Dateien abspielt.

  12. Testen Sie den Einsatz von Webfonts auf ihren Seiten!

Wichtige Links

Andere interessante Entwicklungen:

Testfragen

  1. Notieren Sie bitte die Struktur einer HTML5-Seite mit allen benötigten Tags!

  2. Wie können Sie überprüfen, ob noch Fehler in ihrem Quelltext enthalten sind?

  3. Wie lautet das Tag für die größte Überschrift?

  4. Mit welchem Tag erzwingt man einen Zeilenumbruch, z.B. für die Trennung der Zeilen einer Adresse?

  5. Notieren Sie ein vollständiges Tag für ein Bild mit allen benötigten Eigenschaften!

  6. Notieren Sie einen vollständigen  Link für die Adresse https://www.google.com

  7. ...

© 2018/2019 by Rüdiger Borrmann

© 2018/2019/2020 by Rüdiger Borrmann

bottom of page