HTML-Kurzanleitung

Zum Debuggen kann man in fast jeden Browser Ctrl-Shift-I eingeben.
Siehe  developer.mozilla.org  developer tools.
validator.nu  zum überprüfen einer html-Datei...
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.

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-de">
  <head>
    <meta charset="utf-8">     <!-- welcher Zeichensatz -->
    <meta http-equiv=”content-language”; content=”de-de”>
    <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" type="text/css" 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>

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>   <!--   ? Rechtschreibprüfung fehlt noch -->
<div class="txt">
  <div class="toc"> 
    <iframe src="../../toc.html"> </iframe> 
  </div>

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

  <footer> 
    <hr id="mm130"> 
    <code>&lt;hr></code> wie horizontale Linie &nbsp; &nbsp;
    <small> © 2020, letzte Änderung am 24.04.22 </small> 
  </footer>

  <nav> 
    <h2 id="uebersicht"> Übersicht </h2>
    
    <ul>
      <li><a href="#doc_rahmen">Aller html-Anfang</a></li>
      …
    </ul>
  </nav>
</div>          

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

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.

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   <div 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. 

div.txt
{ clear; none;            // Haupttext
  width: 880px; 
}
div.toc
{ float: right;           // soll rechts herumfließen
  width: 195px; height: 2000px;
}

<p style="color:#ff0000;"> … </p>   wird verwendet für zusätzliche Eigenschaften,
wie hier die rötliche Schrift.

<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

etc.

button

Quellen

Zum Anfang