HTML-Kurzanleitung

Zum Debuggen kann man in fast jeden Browser Ctrl + shift + i eingeben. Siehe developer.mozilla.org developer tools.
validator.nu

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.

 
<!doctype html>		<!-- html 5 -->
<html lang="de">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="./formate.css">
  <title>html Kurz-Zusammenfassung</title>
  <meta name="description" content="test-html Seite um zu gucken wie sich die Befehle verhalten">
  <style> </style>   <!-- für spezielle Seiten, sonst weg -->
</head>
<body>
Hier kommt der Inhalt hinein…
<hr><small><p>&copy; 2020, letzte Änderung am 09.03.20  </p></small>
</body>
</html>

Dargestellt mit den Befehl <pre class="notranslate"> <!doctype… </pre>. Alternativ kann man auch <code> verwenden. Mehrere Leerzeichen und Zeilenumbrüche werden jedoch anders gehandhabt. Daher macht das eigentlich nur im Text Sinn für kurze Code-Sequenzen.

Anbei das schlechte Ergebnis wenn man <code> statt <pre> verwendet.

<!doctype html> <!-- html 5 --> <html lang="de"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./formate.css"> <title>html Kurz-Zusammenfassung</title> <meta name="description" content="test-html Seite um zu gucken wie sich die Befehle verhalten"> <style> </style> <!-- für spezielle Seiten, sonst weg --> </head> <body> Hier kommt der Inhalt hinein… <hr><small><p>&copy; 2020, letzte Änderung am 09.03.20 </p></small> </body> </html>

Semantische Struktur der Seite

Innerhalb der <body> Elemente befindet sich der Text der Webseite, welcher sowohl thematisch alsauch optisch gegliedert ist. Für die thematische oder semantische Gliederung stehen in HTML5 folgende Tags zur Verfügung.

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.

Anwendung des div-Tags mit den "float" Attribut

Man kann aber über das <div>-Tag einen Block mit bestimmten Eigenschaften definieren.

Besser ist:
<div id="RightBlue">

und dann im .css
#RightBlue p
 {float:right;
   width:200px;
   background-color:#A9D0F5;
   padding:5px;}

Den ersten Block habe ich in hellgün gefärbt mit 10 Pixel Rand. Hier habe ich der Einfacht halber geschrieben:

<div style="clear; padding:15px; background-color:lawngreen;">
  <p> Den ersten Block... </p>
    <div...<p> Zweiter Block... </p> </div>
  <p>Dann habe ich... </p>
</div>

Zweiter Block in Blau

Dann habe ich vor Beginn dieses Textes, innerhalb des ersten <div>-Blockes, einen weiteren Block mit <div> definiert, welcher Linksbündig ist, 110 Pixel breit ist und einen geänderten Zeilenabstand von 30 Pixel hat.

Insgesamt habe ich für den linken Block folgende Parameter eingetragen:
float:left; with:100px; padding:10px; line-height: 30px; background-color:blue; color:white;
Wie man hoffentlich schön sieht, wird der Text ohne Abstand umflossen.
...
...

<div style="float:none;
  background-color:grey;
  width:30px; height:30px;">
    <p>A</p>
</div>

A

B

C

Diese Text-Blöcke enthalten float:none. So entstehen Blöck welcher nicht vom Haupttext umflossen sind. Eine Box weiter rechts ist durchaus möglich.

Es ist kein padding verwendet worden, daher kann man schön sehen wie z.B. der Buchstabe A förmlich am Rand klebt.

float: kann folgende Werte annehmen:

clear: wird primär zum Zurücksetzen, des zu umfließenden Textes, verwendet. Statt clear:none kann man auch clear; mit Semikolon schreiben. Und es kann folgende Werte annehmen:

Für die Dimensionen einer Box benötigt man z.B. height:300px; x width:200px;. Alternativ kann man auch schreiben width:15%;, dann ist es relativ zum Browser-Fenster...
Zeichensatzfarbe stellt man beispielsweise wie folgt ein color:#c0c0c0;. Alternativ geht auch die Kurzschreibweise color:#ccc; oder color:white;.
Und die Hintergrundfarbe wird z.B. durch background-color:#A9D0F5; eingestellt und
die nahezu schwarze Umrandung durch border:3px solid #111; (3 Werte ohne Semikolons dazwischen).

Siehe:
w3schools.com
tutorialspoint.com
w3docs.com

Anwendung der Flexbox

Siehe:
w3docs.com
w3schools.com
css-tricks.com
learnlayout.com
html-seminar.de
html5rocks.com
on-design.de

Überschriften: H1 24 Punkte (eigentlich nur einmal auf der Seite)

H2 20 Punkte

H3 17 Punkte

H4 14 Punkte

Die Folge 12, 14, 17, 20, 24 ergibt sich durch die 4.Wurzel von der vorigen Zahl in Anlehnung an eine Empfehlung von Leslie Lamport (LATEΧ).

Also 14 Punkt = 2(1/4) x 12 Punkt;

Die Definition der Schriftgrössen dieser Seite steht in formate.css.

 
<h1> <span id="ueberschriften"> </span> Überschriften: H1 24 Punkte </h1>

Die erste Überschrift <H1> enthält ein weiteres Tag <span …> mit einem Attribut. Dessen Name ist id und deren Wert ist ueberschriften, wobei id="ueberschriften" ein Label oder Sprungziel ist.

Die wichtigsten Attribute

<html lang="de"> wurde bereits in der Kopfzeile verwendet um die Sprache zu definieren.

<title>html Kurz-Zusammenfassung</title> wurde ebenso in der Kopfzeile verwendet um der Seite einen Namen zu geben. Analog kann man Namen an anderen Stellen vergeben, welche dann angezeigt werden, wenn man mit der Maus über das Tag geht.

<id="ueberschriften"> wird, wie oben beschrieben zur eindeutigen Identifikation verwendet.

<class="className1 className2 …"> wird verwendet zur Verküpfung mit CSS.

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

<dir=""> ....

<data=""> ....

Schriftstile

In formate.css ist auch die Schriftgrösse für einen Paragraphen definiert. Hier z.B. 12 Pixel Punkte für normalen unformatierten Text, welcher, sehr lang sein kann und daher je nach der Breite des Browserfensters, an anderer Stelle umgebrochen wird.
Ein gezielter Umbruch erfolgt mit <br>.
Im Vergleich zu fast allen anderen Tags, hat <br> kein Pendant zum Schließen.
Weitere Tags ohne Ende sind <img …>, <link …>, <meta …>, <input …>, <hr …>, etc.
Einen größeren Umbruch mit Abstand erstellt man mit <p> wie Paragraph oder Text-Absatz. Also davor und dahinter ist etwas Platz, wie in formate.css definiert.

Nicht so elegant und wenn möglich, sollte man es vermeiden aber optisch vergleichbar zu <p> ist <br> <br>.

<strike> lautet der Befehl bis Html 4.01 für durchgestrichenen Text.
<s> oder <del> ist die Alternative zu <strike>
<bold> wird für fette Schrift verwendet.
<strong> strong hat die gleiche Wirkung.
<i> wie italic oder Alternativ
<em> wie emphasis welches vergleichbar ist.
<dfn> hat eine ähnliche Wirkung um z.B. neue Begriffe zu kennzeichnen.
<var> ist auch vergleichbar um Variablen x, y, z hervorzuheben.
<u> wie underline.
<small> für kleine Schrift.
<sub> wie subway, also tiefgestellter Text.
<sup> wie hochgestellter Text.
<code> ist sinnvoll für kurze Code-Fragmente z.B. Consolen-Schrift mit grauen Hintergrund.
<span style="background-color:yellow;">…</span> kann ich für Hervorhebungen verwenden.
Mit <center> konte ich einen Text bis Html 4.01 mittig zentrieren. Ab Html 5.0 soll .css verwendet werden.

Besser ist:
<div id="ctr">
<p>Ebenso funkt...</p>

und dann im .css
#ctr {text-align:center;}

Ebenso funktionierte es bis Html 4.01 über ein Attribut <p align="center">,
welches in Html-5 allerdings auch nicht mehr verwendet werden kann.
Stattdessen muß es anders gelöst werden, wie z.B. im rechten Block beschrieben.

Weitere Möglichkeiten für text-align: sind:

Sonderzeichen

" < ≤ ⁄ & ∖ ≥ >
≠ ¦ ±     © ✔ …

 
&quot; &lt; &le; &frasl; &amp; &Backslash; &ge; &gt;  <br> 
&ne; &brvbar; &plusmn;  &nbsp;  &nbsp;  &copy; &#10004; &hellip;

Kleiner Witz, welchen ich in der Unizeit an der Mauer der Mensa aufgesprüht sah...
∇ = Δ 2

Siehe z.B. vioma.de html-sonderzeichen   oder vollständiger aber nicht so übersichtlich   mediaevent.de sonderzeichen.html.

Verknüpfungen zu URLs oder Bilder

HyperLinks oder Verküpfungen fangen mit <a …> wie Anchor an. Innerhalb des Links macht es Sinn stehts drei Schlüsselwörter zu nuzten.

href="URL"   wird genutzt um das Ziel anzugeben. Das Ziel kann relativ (innerhalb der Seite) oder absolut (außerhalb der Seite) angegeben werden.
title="Hover"   wird genutzt um beim Mauszeiger drauf schieben eine Beschreibung darzustellen.
target="…"   wird genutzt um die Reaktion beim Anklicken zu beschreiben.

Der Parameter für target= kann wie folgt lauten:

"_blank"   öffnet im neuen Fenster oder Tab, bestehender Tab bleibt erhalten (sinnvoll für Verknüpfungen nach ext.)
"_self"   öffnet im selben Rahmen
"_parent"   öffnet im übergeordneten Rahmen
"_top"   öffnet wie goto

Optional wäre z.B. folgendes:

style="text-decoration:none";   Wobei ich grundsätzlich (um es nicht zu vergessen) jeden Parameter mit   ;   abschließen würde.

Hier ist eine Verküpfung gehe zur 1. Überschrift zum Testen. Bzw. eine externe Verknüpfung: bank of scotland

Bzw. der Code dazu sieht wie folgt aus (einmal mit ; und einmal ohne ;).

 
Hier ist eine Verknüpfung <a href="#ueberschriften"; title="Hyperlink Beispiel"; 
target="_self";>gehe zur 1. Überschrift</a> zum Testen.

Bzw. eine externe Verknüpfung: <a href="https://www.bankofscotland.de/" 
title="bank_of_scotland" target="_blank"> bank of scotland </a> 

Bild im Text

Ohne weitere Atribute wird ein Bild wie ein Buchstabe gehandhabt.
D.h. Bei Bildern wird innerhalb einer Verknüpfung , statt der Beschreibung, das Bild via <img … > eingefügt. Also <a … > <img …> </a>.
Es kann ich zum Einen ein (Thumb)-Bild Irfan View Logo sofort im Text darstellen und zum Anderen über eine Verküpfung auf ein unter Umständen anderes Bild oder eine Webseite, etc. verweisen. Siehe z.B. w3schools.com Bilder.

Der Code für das obige Thumb-Bild sieht wie folgt aus:

 
<a href="../windows/panoramastudio/1014-1017.jpg" title="irfan view" 
  target="_blank" style="text-decoration:none">
<img src="../windows/apps/Irfanview_logo.gif" width="22" height="22" 
  alt="Irfan View Logo"> </a>  

.css
img.LH {float:left;
margin: 5px 15px 5px 0px;
display:inline; }
oder
img.CTR {display:block;
margin:10px auto;}
oder
img.RH {float:right;
margin:5px 0 5px 15px; }

Die Bild-Ausrichtung kann man über Klassen-Attribute lösen. z.B. class=”LH”
Die verwendete Klasse ist dann noch im .css zu definieren, siehe rechts...
Siehe andreasviklund.com image alignment using classes.

Also:

 
<a href="…" title="…" target="_blank" style="text-decoration:none">
<img class=”RH” src="…" width="x" height="y" alt="…"> </a>  

Nicht so gut wäre z.B. align="right".

src="Bild-Adresse"   gibt die Adresse an wo das Bild liegt, welches sofort im Text dargestellt wird.
with="25%"   gibt die Breite an, wenn es nicht im Original belassen werden soll. Die Angabe kann absolut oder in Prozent erfolgen.
height="600"   ist entsprechend die Höhe in Pixel, meist nur absolut sinnvoll.
alt="Bild-Beschreibung"   alternaiver Text o.ä., falls Bild fehlt oder Pfad nicht korrekt ist...

Statt über ein Klassen-Attribut class=”CTR” kann man weitere Paramter für ein Bild, zur Not über inline CSS style="…" einfügen.

z.B. folgende Styles:

float:right;   Rechtsbündiges Bild
margin-right: 10px;   Mit einen unsichtbaren rechten Rand von 10 Pixel außerhalb der Box.
margin-left: 10px;   mit linken Rand, damit der umfließende Text, nicht daran klebt.
margin-bottom: 10px;   mit unteren Rand (Werte können auch negativ sein).
margin: 5px;   alle Ränder außerhalb der Box 5px
margin: 1px 2px 3px 4px;   1px top, 2px right, 3px bottom, 4px left
margin:auto   um vorangegangene Regeln zu löschen
text-decoration: none   nur Bild...
width:500px; height:600px;   ist gleichwertig zu width="500" height="600".

Bild mit Unterschrift

INV OP
INV-Verstärker

figure { padding: 10px; float: left;
    border: solid #b0b0b0 1px;
    border-radius: 16px;}

figure img {
    border-radius: 10px 10px 0 0;}

figure figcaption {
    border-radius: 0 0 10px 10px;
    padding: 3px 4px 3px 10px;
    color: #ff0000; font-style: italic;
    background-color: #c0c0c0;}

Seit HTML-5 gibt es das <figure>-Element, welches für ein oder mehrere Bilder verwendet werden kann. Die Bild-Unterschrift selbst wird via <figcaption> angegeben.

Rechts eine mögliche CSS-Einstellung, welche ich hier (auf dieser Seite) nur lokal anwende.
Also in der Kopfzeile zwischen den <style> … </style> Elementen steht der rechts dargestellte Text.

Entnommen habe ich den CSS-Vorschlag aus t3n.de und dann etwas modifiziert, um die Einstellungen prägnanter erkennen zu können.

Damit diese Zeile nicht das Bild umfließt, kann man einen variablen Platzhalter via <div style="clear:both;"> Damit diese Zeile… </div> einfügen. Siehe z.B. elbnetz.com Bilder ausrichten.

Das Element <figure> ist übrigens allgemein zur Abgrenzung verwendbar und nicht nur für Bilder. Weitergehende Tricks findet man z.B. unter selfhtml.org Bilder.

Der Code zum obigen Bild mit Unterschrift sieht wie folgt aus:

 
<figure>
  <a href="../audio/amp/amp01.png" target="_blank" style="text-decoration:none"> 
  <img src="../audio/amp/amp01.png" width="141" height="96" alt="INV OP"> </a> 
  <figcaption> INV-Verstärker </figcaption>
</figure>

numerierte & unnumerierte Listen

Struktur einer unnumerierten Liste

 
<ul>
  <li> …muss nicht erwähnt werden.</li>
  <li> … </li>
</ul>

Bullit List mit <ul> wie unsortierter Liste. Soll mein Bullit anders aussehen, kann ich das entsprechend zuweisen.

numerierte Liste

Eine Numerierte Liste verwendet <ol> wie ordered list statt <ul>.

  1. <ol start="13"> startet meine Numerierung nicht bei 1.
  2. Die Art der Numerierung kann ich analog zu ul wählen.
  3. <li> wird wieder als List-Element (für jeden numerierten Punkt) verwendet. </li>
  4. <ol type="1"> ist die Standardeinstellung (kann weg gelassen werden).
  5. <ol type="I"> steht für große römische Zahlen.
  6. <ol type="i"> steht für kleine römische Zahlen.
  7. <ol type="a"> steht für Numerierung mit Kleinbuchstaben.
  8. <ol type="A"> steht für Numerierung mit Großbuchstaben.

Definitions-Liste

Eine Definitions-Liste mit <dl> wie (defintion list) verwendet statt <li> die Tags <dt> für das Schlüsselwort - Term und <dd> für die Beschreibung - description.

1. Wort
Und zum 1. Schlüsselwort eine längere über mehrere Zeilen lange Beschreibung.
...und eine Ergänzung: Wobei die Darstellung in der CSS-Datei angepasst wurde.
2. Wort
Und die 2. Beschreibung dazu.

Tabellen

Tabellen fangen mit <table> an. Innerhalb <table> können noch weitere Parameter festlegt werden wie z.B. folgende:

border="0" keine sichtbare Umrandung, da Liniendicke = 0.
border="1" bezieht sich auf die inneren Rahmen-Linien.
bordercolor="green"
bgcolor="yellow"
background="/images/test.png"
width="400" oder width="80%" bezogen auf die Breite des Inhaltes.
height="150"
Besser am Tabellenanfang via <colgroup> <col id="name"> </colgroup> Namen mit zuvor in .CSS definierten Breiten nutzen.

CSS-Einstellungen für Tabellen

padding: 5px statt cellpadding="5" für den Abstand zwischen Inhalt und dem Rahmen
margin: 5px statt cellspacing="5" für den Platz um die Tabelle
border: 1px solid silver; Dicke des äußeren Rahmens
border-spacing: 5px; Abstand zwischen den Zellen
border-collapse: separate jede Zelle hat einen eigenen Rahmen -> zum Nachbar zwei
border-collapse: collapse jede Zelle hat einen Rahmen zum Nachbar (statt zwei)
table-layout: fixed
caption oder caption-side für Tabellenüberschriften

Tabellenüberschrift mit <caption>
<th> wurde für Zellen der 1. Spalte und 1. Reihe verwendet.
2. Reihe <tr> wird benutzt je Zeile wie Row <td rowspan="2">
fasst 2 Zeilen zusammen.
3. Reihe <td> wird benutzt je Zelle
4. Reihe <td colspan="2"> fasst 2 Spalten zusammen.

Der Code zur oben genannten Tabelle sieht wie folgt aus. Weitere Informationen sind im .css zu finden.

 
<table border="1">
  <colgroup>
    <col id="mm20">
    <col id="mm60">
    <col id="mm30">
  </colgroup>
  <tr> <th>  <th>    </th> 
       <th>     wurde für Zellen der 1. Spalte     </th>
       <th>     und 1. Reihe verwendet.    </th>
  </tr>
  <tr> <th>           2. Reihe   </th> 
       <td>              <tr> wird benutzt je Zeile wie Row    </td>
       <td rowspan="2">  <td rowspan="2"> fasst 2 Zeilen zusammen.   </td>
  </tr>
  <tr> <th>          3. Reihe   </th> 
       <td>            <td> wird benutzt je Zelle   </td>
  </tr>
  <tr> <th>        4. Reihe   </th>
      <td colspan="2">  <td colspan="2"> fasst 2 Spalten zusammen.   </td> 
  </tr>
</table>  

Siehe www-hera-b.desy.de (alte Kopie von selfhtml.org) Tabellengestaltung.

Einbinden externer Html-Dokumente

Leider sind die folgenden Zeile nicht mehr unter Html 5 erlaubt. Der Hintergrund ist recht einfach. Da auf dieser Seite stehts nur der Main-Anteil nachgeladen wird und der Rest bleibt, kann ein Browser/Suchmaschine nur schwer erkennen, dass es sich um unterschiedliche Seiten handelt.

toc.html steht für "table of content" oder Inhaltsverzeichnis.
main1.html steht für eine beliebige Seite...
space.html steht für eine Seite welche bei zu kleinen Browser-Fenster ausgeblendet wird (ich habe Bilder des Weltraums dargestellt).

<frameset cols="160,900,*" border="1" bordercolor="#ffffff">
  <frame marginheight="5" marginwidth="3" scrolling="auto" name="Navigate" src="toc.html">
  <frame marginheight="20" marginwidth="5" scrolling="auto" name="Main" src="./home/main1.html">
  <frame marginheight="1" marginwidth="1" scrolling="no" name="space" src="./home/space.html">
</frameset>

Also musste eine Alternative gefunden werden, welche unter Html 5 mit möglichst vielen Browsern, ohne Java, unterstützt wird. Ich habe es wie folgt gelöst. Erster Teil steht im formate.css,
zweiter Teil steht z.B. relativ weit vorne auf dieser Html-Seite.

In einen linksbündig platzierten <div>-Block wird also die externe Datei toc.html des Inhalsverzeichnis via <iframe> eingelesen. Durch die unterschiedlich gewählten Abstände klebt der umfließende Text nicht an der Box.

   
#toc p {float:left; background-color:#ffffff; height:600px; width:205px; padding: 5px;}	

<div id="toc">
  <p> <iframe src="../toc.html" height="595"; width="180"; border; name="Navigate"> Sitemap </iframe> 
  </p> 
</div>

etc.

etc.

button

hr wie horizontale Linie