HTML und CSS/Dokumentstruktur - Versionsgeschichte

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]