|
|
| (3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) |
| 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.
| |
| | |
| | |
| {{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/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]
| |
