HTML und CSS/Dokumentstruktur: Unterschied zwischen den Versionen
(+Seitenstrukturierung) Markierung: 2017-Quelltext-Bearbeitung |
(l) Markierung: 2017-Quelltext-Bearbeitung |
||
| Zeile 116: | Zeile 116: | ||
== Weblinks == | == Weblinks == | ||
* Selfhtml: | * Selfhtml: | ||
** [https://wiki.selfhtml.org/wiki/HTML/ | ** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst HTML/Dokumentstruktur und Aufbau] | ||
** [https://wiki.selfhtml.org/wiki/HTML/ | ** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,_Tag_und_Attribut#Guter_HTML-Stil Guter HTML-Stil] | ||
** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/ | ** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung HTML5-Seitenstrukturierung] | ||
Version vom 8. September 2023, 09:18 Uhr
Unsichtbar, aber nötig: Die Dokumentstruktur eines HTML-Dokument besteht aus drei folgenden Teilen:
- Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)
- head (unsichtbare Kopfdaten. z.B. Angaben zu Titel, Metadaten oder auch Stylesheet-Angaben u.ä.)
- body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aussagekräftiger Titel der Seite</title>
</head>
<body>
<!-- Sichtbarer Dokumentinhalt im body -->
<h1>Überschrift</h1>
<p>Text innerhalb eines Absatzes</p>
</body>
</html>
Dieses HTML5-Grundgerüst verwendet den kurzen Doctype <!DOCTYPE html>. Es gibt in älteren Codebeispielen im Netz längere Doctypes, die heute nicht mehr nötig sind.
Innerhalb des heads befinden sich zwei Meta-Tags. Der obere legt die Zeichenkodierung auf utf-8 fest. Damit können auch Umlaute, Sonderzeichen und Emojis (sofern sie vom Browser unterstützt werden, dargestellt werden. Der untere sorgt dafür, dass die Webseite auf mobilen Geräten skaliert werden kann. Das title-Element beinhaltet einen aussagekräftigen Titel der Seite
Der sichtbarer Dokumentinhalt wird im body notiert.
Seitenstrukturierung
Der sichtbare Dokumentinhalt sollte semantisch, d.h. nach seiner Bedeutung, ausgezeichnet werden. So sollten z.B. Überschriften als solche und nicht nur als größerer, fetterer Text gekennzeichnet werden. Dies ermöglicht es Ihnen Barrierefreie Seiten im Internet zu erstellen, die auch von Screeenreadern gelesen werden können.
<body>
<header>
<img src="logo.svg" alt="logo">
<h1>Überschrift</h1>
<nav>
<ul>
<li><a href="#link_1.html">Wiki</a></li>
<li><a href="#link_2.html">Blog</a></li>
<li><a href="#link_3.html">Forum</a></li>
</ul>
</nav>
</header>
<article>
<h2>Unterüberschrift>
<p>Textabsatz</p>
</article>
<aside>
<h3>Sidebar</h3>
<ul>
<li>
<a href="#">Linktext</a>
</li>
</ul>
</aside>
<footer>
<a href="kontakt.html">Kontakt</a>
<p>© 2017 by ZUM-Wiki</p>
</footer>
</body>
</html>
- HTML als Auszeichnungssprache
- meine erste Webseite
- unsichtbar, aber nötig: Dokumentstruktur
- Jetzt kommt Farbe ins Spiel: CSS
- responsives Mehrspaltenlayout
- von der Webseite zum Web-Projekt
Interaktive Übungen
Mit HTML können Sie Webseiten strukturieren. Die Dokumentstruktur legt Kopfdaten und Grundgerüst fest. Diese interaktiven Übungen eignen sich, um die Fachbegriffe zu lernen und zu wiederholen.
Dokument-Struktur
Ordne die HTML-Elemente den Beschreibungen zu.
| enthält den am oberen Bildschirmrand angezeigten Seitentitel | <title> |
| Kopf eines HTML-Dokuments | <head> |
| sichtbarer Teil des Dokuments | <body> |
| Anfang und Ende eines HTML-Dokuments | <html> |
| Angabe eines Zeichensatzes | <meta charset="utf-8"> |
| Angabe einer Dokumenttypdeklaration | <doctype HTML!> |
Elemente bestehen aus einem öffnenden und einem schließenden Tag. Schließe die geöffneten Tags, indem du sie mit der Maus an die passende Stelle schiebst.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aussagekräftiger Titel der Seite </title>
</head>
<body>
<!-- Sichtbarer Dokumentinhalt im body -->
<h1>Überschrift <h1>
<p>Text innerhalb eines Absatzes </p>
</body>
</html>
