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.
Inhalt
- Grundgerüst
- HTML-Tags
- Block- und Inline-Elemente
- img-Tag – Bilder einfügen
- Links einfügen (a-Tag)
- CSS einbinden
- CSS Eigenschaften
Unsere erste HTML-Datei
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:
HTML-Tags
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>Bilder in Websiten – img-Tag
<img src="../img/enten.jpg" alt="Alternativer Text">| src | engl. source für Quelle – Referenz der Bilddatei |
| alt | 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.
Verweise / Links – der a-Tag
<a href="/meineVerzeichnis/meinbild.jpg" target="_blank">CSS einbinden
CSS einbinden auf selfhtml.org
- direkt im style-Attribut des Tags
- zentral im style-Element des Headers
- externes Stylesheets im Header einbinden
<!doctype html>
<html lang="de">
<head>
<link rel="stylesheet" href="stylesheet.css">
...