HTML und CSS/Dokumentstruktur: Unterschied zwischen den Versionen
(N) |
KKeine Bearbeitungszusammenfassung |
||
| (2 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
'''Unsichtbar, aber nötig:''' Die '''Dokumentstruktur''' eines HTML-Dokument besteht aus drei folgenden Teilen: | '''Unsichtbar, aber nötig:''' Die '''Dokumentstruktur''' eines HTML-Dokument besteht aus drei folgenden Teilen: | ||
# Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version) | # Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version) | ||
# head (unsichtbare Kopfdaten. z.B. Angaben zu Titel, Metadaten oder auch [[CSS|Stylesheet-Angaben]] u.ä.) | # head (unsichtbare Kopfdaten. z.B. Angaben zu Titel, Metadaten oder auch [[../CSS|Stylesheet-Angaben]] u.ä.) | ||
# body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.) | # body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.) | ||
| Zeile 27: | Zeile 27: | ||
Der sichtbarer Dokumentinhalt wird im body notiert. | 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. | |||
<source lang="html5"> | |||
<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></source> | |||
| Zeile 65: | Zeile 103: | ||
<body> | <body> | ||
<!-- Sichtbarer Dokumentinhalt im body --> | <!-- Sichtbarer Dokumentinhalt im body --> | ||
<h1>Überschrift '''<h1>''' | <h1>Überschrift '''</h1>''' | ||
<p>Text innerhalb eines Absatzes '''</p>''' | <p>Text innerhalb eines Absatzes '''</p>''' | ||
'''</body>''' | '''</body>''' | ||
| Zeile 78: | 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] | ||
Aktuelle Version vom 28. März 2024, 17:27 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>
