HTML-Kurzanleitung

Zum Debuggen kann man in fast jeden Browser Ctrl-Shift-I eingeben.
Siehe  developer.mozilla.org  developer tools.

Mit Ctrl-R liest man die Seite neu ein,
Mit Ctrl-Shift-R wird der Browser Cache
für die gerade offene Seite komplett gelöscht.

Über  validator.nu  oder über  validator.w3.org
kann man eine Seite überprüfen ob sie W3C - World Wide Web Consortium
konform ist.

Diese Kurzbeschreibung richtet sich nicht an welche, die HTML-Lernen möchten,
sondern dient mir als Nachlagewerk.

Aufbau einer Webseite

Wer ein Dokument zum ersten Mal erstellt, wird wahrscheinlich verschiedene
Formatierungen an der Stelle einsetzen, wo es angebracht erscheint.
Das allerdings bei vielen Seiten homogen durchzuhalten, ist fast unmöglich.
Daher haben alle modernen Textsatzsysteme
mindestens eine Aufteilung wie folgt.

Idealerweise sollte eine Web-Seite ebenso aufgebaut werden.

Siehe  selfhtml.org
Bei mir sieht das z.B. wie folgt aus.

Zum Anfang

Aller Anfang & Ende eines html-Dokuments

Der sog. Header eines HTML-Dokuments
enthält nur wenige zwingende Elemente
oder Tags wie   <html>, <head>, <body>   und wahrscheinlich   <!doctype>.
Alles übrige ist genau genommen optional.
Ich habe mich daher auf das Nötigste beschränkt.
Die Darstellung, also das Einrücken, die Umbrüche, sind dem Browser,
der HTML interpretiert, egal. 

<!doctype html>                <!-- Kommentar: dies ist html 5 -->
<html lang="de">               <!-- siehe w3.org -->
<head>
  <meta charset="utf-8">       <!-- welcher Zeichensatz -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="test-html Seite">
  <title> html Kurz-Zusammenfassung bzgl. Rahmen einer Webseite </title>
  <link rel="stylesheet" href="../../formate.css">

  <style>                      <!-- für spezielle Seiten, sonst weg -->
  </style>
</head>

<body>
  Hier kommt der Inhalt hinein…
</body>
</html>

Zum Anfang

Beschreibung um <head>

SEO Meta Tags

Um besser gefunden und optimal thematisch zugeordnet werden zu können,
ist es sinnvoll SEO - search engine optimisation Tags zu verwenden.

Zum Anfang

Semantische Struktur der Seite innerhalb <body>

Innerhalb der  <body>  Elemente  </body>  befindet sich der Text der Webseite,
welcher sowohl thematisch alsauch optisch gegliedert ist.

Anbei ein gekürztes Beispiel dieser Seite. 

<body class="txt">              <!--   ? Rechtschreibprüfung fehlt noch -->
<div class="toc"><iframe src="../../toc.html"> </iframe></div>

<header> <h1 id="anfang"> HTML-Kurzanleitung</h1> </header>

<footer>
  <hr>
  <p>
    <code>&lt;hr&gt;</code> wie horizontale Linie &nbsp; &nbsp;
    <small> © 2020, letzte Änderung am 24.04.22 </small>
  </p>
</footer>

<nav>
  <h2 id="uebersicht"> Übersicht </h2>

  <ul>
    <li><a href="#doc_rahmen">Aller html-Anfang</a></li>
    …
  </ul>
</nav>


<main>
<!-- ******************************************************* -->
<article> <h2 id="doc_rahmen"> Aller Anfang & Ende eines html-Dokuments </h2>
<p>… </p>
</article>

<!-- .............................. --> 
<article> <h3>Beschreibung </h3>
<p>… </p>
</article>

</main>
</body>

Für die thematische oder semantische Gliederung stehen in HTML-5
folgende Tags zur Verfügung. Sie haben keinen Einfluß auf das Aussehen,
aber Einfluß auf die Bewertung der Inhalte per Computer/Suchmaschine.

Alle diese oben genannten Elemente sind ausschließlich dafür gedacht,
Programmen die Einordnung des Textes zu erleichtern.
Sie helfen aber nicht dem Leser, da er diese Elemente nicht sieht.
Da ich keine Anspruch auf eine professionelle Seite habe,
habe ich weitgehend diese Elemente weg gelassen.

Es bleibt in der Minimalfassung

<body class="txt">              <!--   ? Rechtschreibprüfung fehlt noch -->
<div class="toc"><iframe src="../../toc.html"> </iframe></div>

<h1 id="anfang"> HTML-Kurzanleitung</h1>

<hr>
<p>
    <code>&lt;hr&gt;</code> wie horizontale Linie &nbsp; &nbsp;
    <small> © 2020, letzte Änderung am 24.04.22 </small>
</p>

<h2 id="uebersicht"> Übersicht </h2>

<ul>
  <li><a href="#doc_rahmen">Aller html-Anfang</a></li>
  …
</ul>


<!-- ******************************************************* -->
<h2 id="doc_rahmen"> Aller Anfang & Ende eines html-Dokuments </h2>
<p>… </p>
<p>
  Zum <a href="#anfang">Anfang</a>
</p>

<!-- .............................. --> 
<h3>Beschreibung </h3>
<p>… </p>


</main>
</body>
</html>

Zum Anfang

Optische Struktur der Seite

Vermieden werden sollte auf jeden Fall eine optische Gliederung in Blöcke
mit  <table>,  da es dafür nicht entwickelt wurde. Siehe auf der Seite   Tabellen.

Besser ist es, Text-Blöcke in sogenannten Boxen, je nach zur Verfügung stehender Auflösung,
zu verschieben. Dafür wird das   <div>-Element   benötigt.
Das Einbetten weiterer Webseiten mit   <iframe>   beschreibe ich ebenso unter   Boxen,
da das vergleichbar ist.

Überschriften wie z.B.  <h1>, <h2>, <h…>   finden sich unter Inhalte > Überschriften.
Ebenso Absätze, welche mit   <p>   erstellt werden.

Die Darstellung spezieller Zeichen, ohne als HTML-Code ausgeführt zu werden,
beschreibe unter  Sonderzeichen.

Aufzählungen  sind ebenso ausgelagert. z.B. mit den Tags   <ul>  oder   <ol>  und  <li>.

Zum Anfang

Die wichtigsten Attribute

Um bestimmte oben genannte Tags weiter zu detailieren, kann ich über folgende Elemente,
weitere Attribute übergeben.

Die erste Überschrift dieser Seite sieht wie folgt aus.   <h2 id="htmlcss"> Aufbau einer Webseite </h2>
<id="htmlcss">   ist hier ein beliebiges Label und wird hier zur eindeutigen Identifikation verwendet.
Mit folgenden Befehl   <a href="#htmlcss">1. Überschrift</a>   kann ich dann dort hin springen.
Was dann wie folgt aussieht   1. Überschrift.   Weitere Details, siehe   Verknüpfungen.
Wichtig ist  <id="">  sollte nur einmal vorkommen,
damit es eindeutig ist. (habe ich teilweise aus Bequemlichkeit ignoriert).

Wenn ich ein Tag weiter ausdifferenzieren möchte,
kann ich das über folgendes Attribut gewährleisten.
<class="className1 className2 …">
Im obigen Beispiel ist mein Haupt-Text   <body class="txt">
über .css mit einer Breite von 880 Pixel definiert
und das Inhaltsvezeichnis ist darin ein rechtsbündiger Block von 195 Pixel,
siehe  <div class="toc">.
Im Style-Sheet .css steht entsprechend folgendes. 

.txt                      /* kann z.B. bei body oder div angewendet werden */
{ clear; none;            // Haupttext
  width: 880px; 
}
div.toc                   /* hat nur Wirkung bei div */
{ float: right;           // soll rechts herumfließen
  width: 195px; height: 2000px;
}

<p style="color:#ff0000;"> … </p> wird hier verwendet,
für zusätzliche Eigenschaften des Absatzes, z.B. die rötliche Schrift.
Besser ist es jedoch im .css   .grey { color: #999999;} zu definieren.

Und dann im Text <p class="grey"> Und dann im… </p> zu verwenden.

Soll nur ein Teil des Textes grau werden, kann <span> verwendet werden.
Siehe auch Lokale Formatierungen des Textes.

<q dir="rtl"> … </q>   Hier wird theoretisch von  rechts nach links  geschrieben.

<data=""> wird eigentlich nur für bessere Maschinenlebarkeit benötigt.
Siehe   selfhtml.org.

Zum Anfang

Quellen

Zum Anfang