HTML und CSS/Dokumentstruktur: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
(+Seitenstrukturierung)
Markierung: 2017-Quelltext-Bearbeitung
(l)
Markierung: 2017-Quelltext-Bearbeitung
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]

Version vom 8. September 2023, 09:18 Uhr

Unsichtbar, aber nötig: Die Dokumentstruktur eines HTML-Dokument besteht aus drei folgenden Teilen:

  1. Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)
  2. head (unsichtbare Kopfdaten. z.B. Angaben zu Titel, Metadaten oder auch Stylesheet-Angaben u.ä.)
  3. 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>



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>



Weblinks