Aufgabe 1a)
Beschäftige dich mit dem grundlegenden Aufbau einer HTML-Webseite. Nutze das Arbeitsblatt.
HTML (HyperText Markup Language) ist die Standardsprache für Dokumente, die für die Anzeige in einem Webbrowser entwickelt wurde. HTML ist eine Textbeschreibungssprache zur Erstellung von Webseiten und keine Programmiersprache. Sie ist eine Beschreibungssprache. Mithilfe von Zeichen und Abkürzungen werden die einzelnen Objekte einer Webseite angeordnet. Die Objekte werden dabei mit sogenannten „Tags“ (Markierungen) auf der Webseite dargestellt und plaziert.
Aufgabe 1b)
Lege auf deinem Arbeitslaufwerk einen Ordner an. Nenne ihn beispielweb_vorname_nachname. Lade nun die Datei index und die Datei santa_claus herunter und speichere die Dateien im gerade angelegten Ordner ab.
Öffnen nun die Webseite index.html in dem HTML-Editor Notepad++ (Rechtsklick auf die Datei → „Öffnen mit“) und suche Tags aus der obenstehenden Tabelle
Verändere oder lösche einen Tag deiner Wahl, speichere die HTML-Datei, öffne diese Datei mit einem Browser und beobachte die Wirkung!
Verändere nun auch andere Teile der Seite, z.B. den Text an einer bestimmten Stelle.
Cascaded Style Sheets (CSS) werden verwendet, um das Layout einer Webseite zu formatieren.
Mit CSS kannst du die Farbe, die Schriftart, die Textgröße, den Abstand zwischen den Elementen, die Positionierung und Anordnung von Elementen steuern, welche Hintergrundbilder oder Hintergrundfarben verwendet werden sollen und vieles mehr!
Um die Informationen (Inhalte wie Text, Überschriften, Abbildungen usw.) vom Layout einer Webseite zu trennen wird Cascaded Style Sheets (CSS) genutzt. CSS wird dann weitgehend unabhängig umgesetzt. Dies ist das gleiche Prinzip wie bei einer Tageszeitung. Die hat jeden Tag andere Informationen, das Erscheinungsbild ist jedoch gleich.
CSS Beispiele:
h1 {color: yellow;}body {background-color: grey;}
Es besteht auch die Möglichkeit über eine bestimmte ID (Identifikation) CSS-Elemente zu erstellen:
<style>
#meintext{font-family:courier;
Font-Size:20px;
color:blue;}
</style>
Die Formatierung mittels IDs wird durch „#“ eingeleitet. Diese IDs können dann im HTML-Text innerhalb normaler Tags genutzt werden:
<p id= "meintext">Hier steht mein Text,
der mit CSS gestaltet wurde.</p>
Hier steht mein Text, der mit CSS gestaltet wurde.
Erstelle nun in der index.html drei CSS-Layouts und wende sie innerhalb des <body></body> an.
Aufgabe 2
Eine eigene Webseite erstellen
Aufgabe:
Erstelle eine Webseite über deine/ über eure Projektarbeit. Die Webseite wird ausschließlich im Unterricht erstellt und eine Webseite pro Schüler bzw. pro Schülerin.
Grundgerüst einer HTML-Webseite:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Titel der Seite</title>
<style type="text/css">
body {background-color: grey;}
</style>
</head>
<body>
<font>Hallo Welt!</font>
</body>
</html>

Diese Webseite und die Inhalte sind lizenziert unter einer Creative Commons Namensnennung – Nicht-kommerziell – Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.