HTML

  • Du kennst den Aufbau einer Webseite und kannst die Hauptbestandteile beschreiben.
  • Du verstehst den Begriff „Tag“ und weißt, welche Bedeutung Tags in HTML haben.
  • Du kannst erläutern, wofür der Inhalt im <head>-Tag zuständig ist und weißt, dass dieser nicht auf der Webseite sichtbar ist.
  • Du kannst die Funktion des <style>-Tags beschreiben und weißt, wie er zur Gestaltung genutzt wird.
  • Du kannst den Titel einer Webseite erstellen.
  • Du weißt, wofür CSS verwendet wird und in welchem Bereich CSS festgelegt wird.
  • Du wendest dein Wissen an, indem du eine eigene kleine Webseite erstellst.

Theorieteil


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 wurden. Es handelt sich dabei um eine Beschreibungssprache und nicht um eine Programmiersprache. Der Hauptunterschied zwischen beiden liegt in ihrer Funktion und Anwendung.

Eine Programmiersprache dient dazu, Anweisungen zu formulieren, die von einem Computer interpretiert und ausgeführt werden können. Mit ihr lassen sich komplexe Aktionen und Berechnungen durchführen. Programmiersprachen ermöglichen die Entwicklung von Software, Apps und anderen interaktiven Anwendungen. Beispiele sind JavaScript, Python, Java und C++.

Im Gegensatz dazu ist eine Beschreibungssprache wie HTML dafür gedacht, die Struktur, das Layout und die Formatierung von Dokumenten zu definieren. HTML beschreibt, wie Inhalte auf einer Webseite angezeigt werden sollen, indem Markup-Tags genutzt werden, um Text, Bilder, Links und andere Elemente zu kennzeichnen und zu organisieren. Diese Tags geben dem Webbrowser Anweisungen zur Darstellung des Inhalts, führen jedoch keine Berechnungen oder interaktive Aufgaben aus.

HTML nutzt Tags (Markierungen), um die Objekte einer Webseite zu strukturieren und anzuordnen. Dabei geht es darum, den Inhalt klar zu gliedern und semantisch zu kennzeichnen, damit der Webbrowser ihn korrekt anzeigen kann. HTML ermöglicht es Webentwicklern, den visuellen und strukturellen Aufbau einer Webseite zu gestalten, ohne dass dazu komplexe Programmierkenntnisse erforderlich sind.

Zusammengefasst: HTML ist eine Beschreibungssprache, die dazu dient, die Struktur und das Layout von Webseiten zu definieren, während Programmiersprachen genutzt werden, um Aktionen und Berechnungen in Anwendungen auszuführen.



Tags

HTML-Tags im Überblick
Tag Wirkung Erklärung
Tag 1 <b>Fettschrift</b> Fettschrift Fettschrift (bold)
Tag 2 <strong>Wichtiger Text</strong> Wichtiger Text Semantisch hervorgehobener, fetter Text
Tag 3 <i>Kursivschrift</i> Kursivschrift Kursiv (italic)
Tag 4 <em>Betonter Text</em> Betonter Text Semantisch betonter, kursiver Text
Tag 5 <h1> bis <h6>

Überschrift 1

Überschrift 3

Überschriften in verschiedenen Größen
Tag 6 <span>Text</span> Blauer Text Inline-Container für Textformatierungen
Tag 7 <blockquote>Zitat</blockquote>
Dies ist ein Zitat.
Markiert Blockzitate
Tag 8 <img src="logo.png" alt="Logo"> Logo Bild (image)
Tag 9 vor dem <br> Zeilenumbruch vor dem
Zeilenumbruch
Zeilenumbruch (break)
Tag 10 <p>Absatz</p> Absatz normaler Text Absatz (paragraph)
Tag 11 <ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
</ul>
  • Punkt 1
  • Punkt 2
Aufzählungsliste (unordered list)
Tag 12 <a href="https://lehrer-hoefler.de/">Link</a> Link Hyperlink zu einer anderen Webseite (reference)
Tag 13 <div style="text-align:center;">Zentrierter Text</div>
Zentrierter Text
Container (div), zentriert (centered)
Tag 14 <section> Abschnitt </section> Inhaltlicher Abschnitt Definiert logische Abschnitte einer Seite
Tag 15 <article> Artikel </article> Eigenständiger Inhalt Für Blog-Artikel oder andere in sich geschlossene Inhalte
Tag 16 <header> und <footer> Seitenkopf und Fußbereich Kopf- und Fußbereiche einer Seite oder eines Abschnitts
Tag 17 <nav> Navigation </nav> Navigationselement Definiert Navigationslinks zur Steuerung der Seite
Tag 18 <video src="video.mp4"></video> Video-Inhalt Betten ein Video in die Seite ein

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

HTML-Tags können problemlos ineinander verschachteln werden, um komplexe Strukturen und Darstellungen zu erstellen. Dabei sollten Sie sicherstellen, dass jedes öffnende Tag ein passendes schließendes Tag hat.

<div style="color: green;"> <font face="Arial, sans-serif"> <b>Willkommen</b> auf unserer Webseite! </font> </div>

as </div>-Tag steht für das Ende eines HTML-Div-Elements. Ein Div-Element wird oft verwendet, um Abschnitte oder Container in einer Webseite zu erstellen, die dann gestaltet oder formatiert werden können. Das Öffnungs-Tag <div> kennzeichnet den Beginn des Div-Elements, und das Schließungs-Tag </div> kennzeichnet das Ende des Div-Elements.

Das <div>-Tag umschließt den Textabschnitt und ermöglicht es, spezifische Formatierungen oder Stile auf diesen Abschnitt anzuwenden. In diesem Fall wird dem Abschnitt ein grüner Text mit der Schriftart „Arial“ zugewiesen


Praxisteil

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.


Eine eigene Webseite erstellen

Aufgabe:

Erstelle eine Webseite über ein bestimmtes Thema.

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>

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