HTML(HyperText Markup Language) ist keine Programmiersprache, sondern eine Auszeichnungssprache und wurde von Tim Bernes-Lee 1990 entwickelt. Eine Auszeichnungssprache hat die Aufgabe, logische Bestandteile eines textorientierten Dokuments zu beschreiben. Das ursprüngliche HTML enthielt nur 18 Elemente. Einige davon, wie h1-h6, p, a, ol, ul und li benutzen wir noch heute.
HTML(HyperText Markup Language) ist keine Programmiersprache, sondern eine Auszeichnungssprache und wurde von Tim Bernes-Lee 1990 entwickelt. Eine Auszeichnungssprache hat die Aufgabe, logische Bestandteile eines textorientierten Dokuments zu beschreiben. Das ursprüngliche HTML enthielt nur 18 Elemente. Einige davon, wie h1-h6, p, a, ol, ul und li benutzen wir noch heute.
Die zentrale HTML-Datei in jedem Verzeichnis heißt immer index.html. Diese Datei wird von Webserver automatisch aufgerufen. Die Datei hat folgendes Grundgerüst:
Es gibt zwei unterschiedliche Arten von HTML-ELementen. Normale Tags bestehen aus zwei Tags, dem Start-Tag <h1> und dem End-Tag </h1>.
<h1>
<em>HTML</em> - die Sprache im Web
</h1>
Inhaltslehren Elementen, wie <br />, <img /> und <hr />, bestehen nur aus einem Tag.
<h1>Vor dem Tor</h1>
<p>
<img src="...Park_an_der_Ilm.jpg" alt="Park an der Ilm" />
Vom Eise befreit sind Strom und Bäche<br />
Durch des Frühlings holden, belebenden Blick,<br />
...
</p>
Block- und Inline Elemente
Bei den zweiteiligen HTML-Tags unterscheidet man zwischen Block- und Inline Elementen. Ein Block-Element füllt unabhängig von seiner Länge den gesamten Raum (Zeile) aus. Sie stehen als einzelner Block auf einer Zeile. Block-Elemente können Nachfahren des Body-Elements oder eines anderen Block-Elements sein. Typische Block-Elemente sind: h1 … h6, p
Inline-Elemente erzeugen keinen eigenen Absatz im Textfluss. Sie können normalen Text und andere Inline-Elemente, aber keine Block-Elemente enthalten. Typische Inline-Elemente sind: a, br, b, i, img, … Liste der Inline-Elemente auf webkompetenz.wikidot.com
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block- und Inline-Elemente</title>
</head>
<body>
<div style="background-color:red; color:white; width:500px">Dies ist mein Block-Element (DIV)</div>
<span style="background-color:blue; color:white; width:500px">Ich bin eine Inline-Element (SPAN)</span>
</body>
</html>
engl. alternative für Alternativtext – Textliche Beschreibung des Bildes. Wird angezeigt, wenn das Bild nicht geladen werden kann bzw. von Screen Readern vorgelesen.
height
Höhe des Bildes
width
Breite des Bildes
title
wird als Tooltip beim Mousehover angezeigt
Nur inhaltliche Bilder werden ins HTML Markup eingefügt. Design-Elemente sollten über CSS eingebunden werden.