Klasse Digital

Suche
Close this search box.

Einführung in HTML

Verfasst am: 07.03.2023

1. Der Grundaufbau einer HTML Seite

Jede HTML Seite besteht mindestens aus den folgenden Tags:

HTML tag Beschreibung
< !DOCTYPE html > Legt den Typ des Dokuments auf HTML fest
< html > Start der HTML-Definition
< head > Beinhaltet Metadaten des Dokuments, wie z.B. Titel der Website
< body > Umfasst den Inhalt, der im Browser angezeigt wird
				
					<!DOCTYPE html>
<html>
    <head>
         <!-- Hier ist Platz für Metadaten, wie Titel oder Zeichensatz -->
    </head>
    <body>
         <!-- Hier werden alle Websiteinhalte platziert -->
    </body>
</html>
				
			

Tags, die im Header genutzt werden, sind die folgenden:

HTML tag Beschreibung
< title > Titel des Dokuments, der in der Titelleiste des Browsers angezeigt wird
< link > Erzeugt einen Link zwischen dem aktuellen und einem weiteren Dokument, z.B. einer CSS-Datei
< meta > Informationen, die nicht im Browserfenster angezeigt werden, wie z.B. der Zeichensatz (charset)
< style > Globale CSS-Stile, die innerhalb des Dokuments gelten

2. Weitere, wichtige Tags

HTML tag Beschreibung
< header > =Kopfzeile einer Website
< footer > =Fußzeile einer Website
< nav > =Haupt-Navigation mit Links zu anderen Seiten der Webseite
< div > =Frei definierbares Blockelement
< h1 bis h6 > =Headlines (Überschriften). Je kleiner die Zahl, desto größer die Überschrift
< p > =Paragraph (Absatz).
< hr > =Horizontal Row (horizontale Linie zur Abtrennung von Inhalten).
< table > Definition einer Tabelle
< th > =Table Headline (Tabellenüberschrift). Definiert die Kopfzelle einer Tabelle.
< tr > =Table Row (Tabellenzeile).
< td > =Table Data (Zelle). Definiert den Inhalt einer Zelle.
< ol > =Ordered List (Nummerierte Liste).
< ul > =Unordered List (Liste mit Aufzählungspunkten).
< li > =List Item (Listeneintrag). Definiert den Eintrag einer Liste.
< img > =Image (Definition eines Bildes).
< a > =Anchor (Hyperlink). Erzeugt einen Link auf die Verweisseite.
< div > =Division (Bereich). Definiert Abschnitte eines Dokuments.

Klicke auf die Symbole, um herauszufinden, welches Tag für welchen Baustein der Website verantwortlich ist.

3. Wissen prüfen

Beantworte die folgenden Fragen.

Schaue dir den folgenden Code an und finde die fünf Fehler. Markiere die entsprechende Stelle.

4. Dokumente zum Download