top home

HTML-Intro

1. Was ist eine Webseite?

Eine Ansammlung von Dateien auf einem Web-Server

2. Was ist HTML?

HyperText Markup Laguage

Die Struktur einer Webseite; human-readable Text, der von einem Web-Browser interpretiert wird

HTML: Struktur, Gerüst
CSS: Gestaltung, Einrichtung

Öffne eine Beliebige Seite und drücke Option + ⌘ + U (Mac) oder Srg + U (Windows)

2. Grundstruktur eines HTML-Dokuments


<!DOCTYPE html>
    <html lang="de">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HTML Einführung</title>
        </head>    
    <body>
    </body>
</html>

Eine Abfolge von Container

<!DOCTYPE html>: Deklariert den Dokumenttyp und die Version.

<html lang="de">: Äußeres mit Spracheinstellung

Der <head>-Bereich enthält wichtige (Meta-)Informationen über die Seite, wie Titel, Zeichensatz und externe Dateien (z. B. CSS).

3. HTML-Elemente

Der <body>-Bereich enthält den eigentlichen Inhalt der Webseite. Dieser Inhalt wird meisten über HTML-Elemente strukturiert

Ein HTML-Element besteht aus einem öffnenden Tag, einem Inhalt und einem schließenden Tag.


<p>Dies ist ein Absatz.</p>

Einige Tags versehen Inhalte mit einem default-Styling, andere nicht.

Tags können Attribute enthalten: <a href="/unterseite"/>Dies ist ein Link</p>

Einige Tags sind selbstschließend und benötigen keinen schließenden Tag: <img src="image.png"/>

Nicht alle Tags haben Inhalt: <br>

Die Inhalte eines HTML-Dokuments werden von oben nach unten und von links nach rechts angezeigt. Es gibt sogenannte block-Elemente, die 100% der Seitenbreite annehmen. Sogenannte inline-Elemente sind genau so breit wie ihr Inhalt und können deshalb horizontal nebeneinander stehen, wenn genug Platz ist.

4. Häufige HTML-Elemente

Tag Darstellung Display Selbst-
schließend
<i></i> kursiv inline
<b></b> bold inline
<s></s> durchgetrichen inline
<mark></mark> markiert inline
<sub></sub> tiefgestellt inline
<h1></h1>

große Überschrift

 inline
<h2></h2>

kleinere Überschrift

 block
<br> Zeilen
umbruch 		block
<img src=""> ?? inline ja
<a href=""></a > Link inline
<hr>
block ja 
<ol>
    <li></li>
    <li></li>
<ol>
  1. Punkt
  2. Punkt
 block 
<ul>
    <li></li>
    <li></li>
<ul>
  • Punkt
  • Punkt
 block
<button></button> inline
<input type="range"></input> block
<textarea></textarea> block 
<select>
    <optgroup>
        <option></option>
        <option></option>
    <optgroup>
</select>
block 
<summary>
    <details></details>
</summary>
Sichbarer Text
Ausgeklappter text
 		block

Übung 1: HTML Poetry

Wähle einen Text oder Textausschnitt aus einem Material aus. Der Text sollte nicht zu lang sein. Illustriere den Text mittels HTML-Elementen aus der Liste oben oder dieser Liste. Wenn du fertig bist, schau ihn dir in unterschiedlichen Browsern an! Erstelle hier einen Ordner mit deinem Namen und lade dort den Ordner mit deinem Experiment hoch :)

Tipps

  • Fehlende schließende Tags
  • Falsch verschachtelte Elemente (Hier hilft sauberes Einrücken!)
  • Fehlende Anführungszeichen bei Attributen

Hier kannst du deinen HTML-Code überprüfen!

Ressourcen