HTML und CSS/Dokumentstruktur - Versionsgeschichte

Matthias Scharwies: w in vorhergehendes Kapitel integriert

2025-05-12T03:44:19Z

w in vorhergehendes Kapitel integriert

← Nächstältere Version		Version vom 12. Mai 2025, 03:44 Uhr
Zeile 1:		Zeile 1:
	~~'''Unsichtbar, aber nötig:''' Die '''Dokumentstruktur''' eines HTML-Dokument besteht aus drei folgenden Teilen:~~		#redirect [[HTML_und_CSS/HTML_als_Auszeichnungssprache]]
	# ~~Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)~~
	~~# 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.)~~

	~~<source lang="html5">~~
	~~<!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></source>~~

	~~Dieses HTML5-Grundgerüst verwendet den kurzen Doctype <code><!DOCTYPE html></code>. 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.

	~~<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>~~


	~~{{HTML und CSS}}~~

	~~== Interaktive Übungen ==~~
	Mit [[HTML und CSS\|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 ===~~
	~~<div class="zuordnungs-quiz">~~
	~~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!>~~
	\|}
	~~</div>~~

	~~<div class="lueckentext-quiz">~~
	~~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>'''~~

	~~</div>~~





	~~== Weblinks ==~~
	* Selfhtml:
	** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst HTML/Dokumentstruktur und Aufbau]
	** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,_Tag_und_Attribut#Guter_HTML-Stil Guter HTML-Stil]
	** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung HTML5-Seitenstrukturierung]

Christian am 28. März 2024 um 17:27 Uhr

2024-03-28T17:27:17Z

← Nächstältere Version		Version vom 28. März 2024, 17:27 Uhr
Zeile 103:		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>'''

Matthias Scharwies: l

2023-09-08T09:18:23Z

← Nächstältere Version		Version vom 8. September 2023, 09:18 Uhr
Zeile 116:		Zeile 116:
	== Weblinks ==		== Weblinks ==
	* Selfhtml:		* Selfhtml:
	** [https://wiki.selfhtml.org/wiki/HTML/~~Dokumentstruktur_und_Aufbau~~ HTML/Dokumentstruktur und Aufbau]		** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst HTML/Dokumentstruktur und Aufbau]
	** [https://wiki.selfhtml.org/wiki/HTML/~~Regeln~~/Guter_HTML-Stil ~~HTML/Regeln/~~Guter HTML-Stil]		** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,_Tag_und_Attribut#Guter_HTML-Stil Guter HTML-Stil]
	** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/~~HTML5-~~Seitenstrukturierung HTML5-Seitenstrukturierung]		** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung HTML5-Seitenstrukturierung]

Matthias Scharwies: +Seitenstrukturierung

2019-08-11T15:53:38Z

+Seitenstrukturierung

@@ Zeile 1: / Zeile 1: @@
 '''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 [[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.)
@@ Zeile 27: / Zeile 27: @@
 Der sichtbarer Dokumentinhalt wird im body notiert.

Matthias Scharwies: N

2019-08-11T15:10:37Z

Neue Seite

'''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 [[CSS|Stylesheet-Angaben]] u.ä.)
# body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

<source lang="html5">
<!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>

<h1>Überschrift</h1>
<p>Text innerhalb eines Absatzes</p>
</body>
</html></source>

Dieses HTML5-Grundgerüst verwendet den kurzen Doctype <code><!DOCTYPE html></code>. 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.

{{HTML und CSS}}

== Interaktive Übungen ==
Mit [[HTML und CSS|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 ===
<div class="zuordnungs-quiz">
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!>
|}
</div>

<div class="lueckentext-quiz">
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>

<h1>Überschrift '''<h1>'''
<p>Text innerhalb eines Absatzes '''</p>'''
'''</body>'''
'''</html>'''

</div>

== Weblinks ==
* Selfhtml:
** [https://wiki.selfhtml.org/wiki/HTML/Dokumentstruktur_und_Aufbau HTML/Dokumentstruktur und Aufbau]
** [https://wiki.selfhtml.org/wiki/HTML/Regeln/Guter_HTML-Stil HTML/Regeln/Guter HTML-Stil]
** [https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung HTML5-Seitenstrukturierung]