Grundlagen HTML: Unterschied zwischen den Versionen

Aus FI-Wiki
Die Seite wurde neu angelegt: „'''HTML (HyperText Markup Language)''' ist die '''Grundlage aller Webseiten'''. Mit HTML wird die '''Struktur''' und der '''Inhalt''' einer Webseite beschrieben, z. B. Texte, Überschriften, Bilder oder Links. HTML ist '''keine Programmiersprache''', sondern eine '''Auszeichnungssprache'''. == Aufgabe von HTML == HTML beschreibt: * welche Inhalte eine Webseite hat * wie diese Inhalte strukturiert sind HTML legt '''nicht''' fest: * das Aussehen (→ C…“
 
 
(21 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 3: Zeile 3:


HTML ist '''keine Programmiersprache''', sondern eine '''Auszeichnungssprache'''.
HTML ist '''keine Programmiersprache''', sondern eine '''Auszeichnungssprache'''.
== Historie von HTML ==
'''HTML''' wurde Anfang der 1990er-Jahre von '''Tim Berners-Lee''' am CERN entwickelt. 
Ziel war es, wissenschaftliche Dokumente über das Internet einfach zu verknüpfen und darzustellen.
Die erste HTML-Version erschien '''1991''' und enthielt nur wenige grundlegende Elemente für Texte und Links. 
Mit der zunehmenden Verbreitung des World Wide Web wurde HTML kontinuierlich erweitert.
Wichtige Meilensteine sind:
* '''HTML 4.01''' (1999) – lange Zeit Standard für Webseiten
* '''XHTML''' – strengere, XML-basierte Variante
* '''HTML5''' (seit 2014) – moderner Standard mit Unterstützung für Multimedia, Formulare und semantische Elemente
Heute wird HTML als '''HTML Living Standard''' kontinuierlich weiterentwickelt.


== Aufgabe von HTML ==
== Aufgabe von HTML ==
Zeile 17: Zeile 32:


Beispiel:
Beispiel:
```html
<syntaxhighlight lang="html">
<p>Das ist ein Absatz.</p>
<p>Das ist ein Absatz.</p>
````
</syntaxhighlight>


* <code><p></code> → öffnendes Tag
* <code><nowiki><p></nowiki></code> → öffnendes Tag
* <code></p></code> → schließendes Tag
* <code><nowiki></p></nowiki></code> → schließendes Tag
* Inhalt steht dazwischen
* Inhalt steht dazwischen


Zeile 28: Zeile 43:
Ein einfaches HTML-Dokument hat immer den gleichen Grundaufbau:
Ein einfaches HTML-Dokument hat immer den gleichen Grundaufbau:


```html
<syntaxhighlight lang="html">
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
Zeile 40: Zeile 55:
   </body>
   </body>
</html>
</html>
```
</syntaxhighlight>


== Wichtige HTML-Elemente ==
== Wichtige HTML-Elemente ==
{| class="wikitable" style="width:100%; text-align:center;"
{| class="wikitable" style="width:100%; text-align:center;"
 
! Element !! Bedeutung
| ! Element !! Bedeutung       |  |                    |
|-
| ----------------------------- | - | ------------------- |
| <nowiki><h1> ... </h1> bis <h6> ... </h6></nowiki> || Überschriften
| <code><h1>–<h6></code>       |   | Überschriften       |
|-
| -                             |  |                    |
| <nowiki><p> ... </p></nowiki> || Absatz
| <code><p></code>             |   | Absatz             |
|-
| -                             |  |                    |
| <nowiki><a></nowiki> ... <nowiki></a></nowiki> || Link
| <code><a></code>             |   | Link               |
|-
| -                             |  |                    |
| <nowiki><img></nowiki> || Bild
| <code><img></code>           |   | Bild               |
|-
| -                             |  |                    |
| <nowiki><ul></nowiki>, <nowiki><ol></nowiki> || Listen
| <code><ul>, <ol>, <li></code> |   | Listen             |
|-
| -                             |  |                    |
| <nowiki><div> ... </div></nowiki> || Bereich / Container
| <code><div></code>           |   | Bereich / Container |
|}
| }                             |  |                    |


== Attribute ==
== Attribute ==
Zeile 65: Zeile 79:
Beispiel:
Beispiel:


```html
<syntaxhighlight lang="html">
<a href="https://example.com">Zur Webseite</a>
<a href="https://example.com">Zur Webseite</a>
```
</syntaxhighlight>


* <code>href</code> ist ein Attribut
* <code>href</code> ist ein Attribut
Zeile 80: Zeile 94:
Beispiel:
Beispiel:


```html
<syntaxhighlight lang="html">
<p style="color:red;">Text in Rot</p>
<p style="color:red;">Text in Rot</p>
```
</syntaxhighlight>


== HTML und JavaScript ==
== HTML und JavaScript ==
Zeile 99: Zeile 113:


== Kurzmerksatz ==
== Kurzmerksatz ==
'''HTML beschreibt die Struktur und den Inhalt einer Webseite – nicht das Design und nicht die Logik.'''
'''HTML beschreibt die Struktur und den Inhalt einer Webseite, nicht das Design und nicht die Logik.'''

Aktuelle Version vom 28. Januar 2026, 09:58 Uhr

HTML (HyperText Markup Language) ist die Grundlage aller Webseiten. Mit HTML wird die Struktur und der Inhalt einer Webseite beschrieben, z. B. Texte, Überschriften, Bilder oder Links.

HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache.

Historie von HTML

HTML wurde Anfang der 1990er-Jahre von Tim Berners-Lee am CERN entwickelt. Ziel war es, wissenschaftliche Dokumente über das Internet einfach zu verknüpfen und darzustellen.

Die erste HTML-Version erschien 1991 und enthielt nur wenige grundlegende Elemente für Texte und Links. Mit der zunehmenden Verbreitung des World Wide Web wurde HTML kontinuierlich erweitert.

Wichtige Meilensteine sind:

  • HTML 4.01 (1999) – lange Zeit Standard für Webseiten
  • XHTML – strengere, XML-basierte Variante
  • HTML5 (seit 2014) – moderner Standard mit Unterstützung für Multimedia, Formulare und semantische Elemente

Heute wird HTML als HTML Living Standard kontinuierlich weiterentwickelt.

Aufgabe von HTML

HTML beschreibt:

  • welche Inhalte eine Webseite hat
  • wie diese Inhalte strukturiert sind

HTML legt nicht fest:

  • das Aussehen (→ CSS)
  • das Verhalten (→ JavaScript)

Grundprinzip

HTML besteht aus Elementen, die mit sogenannten Tags beschrieben werden.

Beispiel: 

<p>Das ist ein Absatz.</p>
  • <p> → öffnendes Tag
  • </p> → schließendes Tag
  • Inhalt steht dazwischen

Aufbau eines HTML-Dokuments

Ein einfaches HTML-Dokument hat immer den gleichen Grundaufbau: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Meine erste Webseite</title>
  </head>
  <body>
    <h1>Hallo Welt</h1>
    <p>Das ist meine erste HTML-Seite.</p>
  </body>
</html>

Wichtige HTML-Elemente

Element Bedeutung
<h1> ... </h1> bis <h6> ... </h6> Überschriften
<p> ... </p> Absatz
<a> ... </a> Link
<img> Bild
<ul>, <ol> Listen
<div> ... </div> Bereich / Container

Attribute

HTML-Elemente können Attribute besitzen, die zusätzliche Informationen enthalten.

Beispiel: 

<a href="https://example.com">Zur Webseite</a>
  • href ist ein Attribut
  • es definiert das Link-Ziel

HTML und CSS

HTML und CSS haben unterschiedliche Aufgaben:

  • HTML → Struktur und Inhalt
  • CSS → Aussehen (Farben, Schriftarten, Layout)

Beispiel: 

<p style="color:red;">Text in Rot</p>

HTML und JavaScript

JavaScript wird verwendet, um Webseiten interaktiv zu machen, z. B.:

  • Klickaktionen
  • Formulare prüfen
  • Inhalte dynamisch ändern

Typische Einsatzgebiete

  • Webseiten
  • Webanwendungen
  • E-Mails (HTML-Mail)
  • Benutzeroberflächen in Web-Apps

Kurzmerksatz

HTML beschreibt die Struktur und den Inhalt einer Webseite, nicht das Design und nicht die Logik.

Abgerufen von „https://fi-wiki.de/index.php?title=Grundlagen_HTML&oldid=2331“