Du kennst den eigentlichen Aufbau einer Webseite und kannst ihn beschreiben.
Du hast dich mit den Begriff Tag auseinandergesetzt.
Du kannst erläuterten, wofür im HTML-Kopf der Inhalt im <head>-Tag zuständig ist. Sieht man diesen Inhalt auf der Webseite?
Du kannst die Aufgabe des <style>-Tags beschreiben.
Du kannst den Titel eine Webseite erstellen.
CSS nutzt du wofür? Und in welchen Bereich wird CSS festgelegt? Diese Fragen kannst du beantworten.
Du wendest dein Wissen an und erstellst eine eigene kleine Webseite.

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.

web_grundstruktur Herunterladen

Tags

HTML-Tags im Überblick
	Tag	Wirkung	Erklärung
Tag 1	< b > Fett dargestellt < /b>	Fett dargestellt	Fettschrift (bold)
Tag 2	< u > unterstrichen < /u>	unterstrichen	underline
Tag 3	< i > kursiver Text < /i>	kursiver Text	italic
Tag 4	< font size =“5″ > Schriftgrad < /font>	Schriftgrad	Schriftgröße (font size)
Tag 5	< font color =“red“ > Schriftfarbe < /font>	rot	Schriftfarbe (font color)
Tag 6	< font face =“Comic Sans MS > Schriftart < /font>	Schriftart	font face
Tag 7	< img src=“logo.png“>		Bild (image)
Tag 8	vor dem < br > Zeilenumbruch	vor dem Zeilenumbruch	break (Zeilenumbruch)
Tag 9	Abschnitt 1 normaler Text < p > Abschnitt 2 normaler Text	Abschnitt 1 normaler Text Abschnitt 2 normaler Text	neuer Abschnitt (part)
Tag 10	< ul > < li > Aufzählung 1 < li > Aufzählung 2 < /ul>	Aufzählung 1 Aufzählung 2	Aufzählung (list)
Tag 11	< a href=“https://lehrer-hoefler.de/“ > Link gesetzt < /a>	Link gesetzt	Hyperlink zu einer anderen Webseite (reference)
Tag 12	< div align =“center“ > Textposition < /div>	Textposition	zentriert (center) „right“, „left“

Weitere HTML-Befehle findest du hier oder wenn du im Internet danach suchst.

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.

index Herunterladen

santa_claus Herunterladen

Ö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>

Bewertungsbogen_Webseite Herunterladen

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