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.

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>                <!-- Kommentar: dies ist html 5 -->
<html lang="de-de">
  <head>
    <meta charset="utf-8">
    <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 um zu gucken,
      wie sich die Befehle verhalten">
    <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>

Beschreibung

Zum Anfang

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 HTML-5
folgende Tags zur Verfügung.

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 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 "content"-Seite unter Tabellen

Besser ist es, Text-Blöcke in sogenannten Boxen,
je nach zur Verfügung stehender Auflösung, zu verschieben.

Zum Anfang

HyperLinks oder Verknüpfungen sind das Herz von elektronischen Dokumenten.
Sie ersetzen die Verweise, welche in Papier ungern verwendet wurden,
weil das dann händisches Blättern und suchen erfordert.
Z.B.  Siehe Abbildung 2.1.4 auf Seite 12

Verknüpfungen fangen bei HTML mit  <a>  wie Anchor an.
Innerhalb des Verweises, macht es Sinn meist drei Schlüsselwörter zu nutzen.

Die drei wichtigsten Atribute für eine Verknüpfung

href="URL"   wird genutzt um das Ziel anzugeben.
Das Ziel kann relativ (innerhalb der Seite sinnvoll)
oder absolut (z.B außerhalb der eigenen Web-Seite) angegeben werden.
Es ist auch möglich auf der Zielseite zu eine bestimmte Stelle zu gehen.

title="Hover"   wird genutzt, um eine Kurz-Beschreibung
darzustellen, wenn man mit den Mauszeiger drüber geht.

target="… "   wird genutzt um die Reaktion beim Anklicken zu beschreiben.

Vier mögliche Reaktionen beim Klicken auf Verknüpfungen

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

"_blank"  öffnet Adresse im neuen Fenster (_blank page),
bestehender Tab bleibt erhalten (sinnvoll für externe Verknüpfungen)
Beispiel einer externen Verknüpfung:
Die  bankOfScotland.de - Bank of Scotland  ist nicht die  rbs.co.uk - Royal Bank of Scotland.

Der entsprechende Code sieht wie folgt aus: 

Die 
&nbsp;<a  href="https://www.bankofscotland.de/"  title="bank_of_scotland" 
target="_blank">bankOfScotland.de</a> - Bank of Scotland&nbsp; 
ist nicht die 
&nbsp;<a  href="https://www.rbs.co.uk/"  title="royal bank_of_scotland"
target="_blank">rbs.co.uk</a> - Royal Bank of Scotland.

"_self"  öffnet im selben Rahmen.
Dies ist z.B. hilfreich, wenn man sich innerhalb der eigenen Web-Seite bewegt.
Hier ist eine Verknüpfung zur  Übersicht  dieser Seite
und zur   Übersicht  wo es um den Inhalt der Webseite geht.

Der entsprechende Code sieht wie folgt aus: 

Hier ist eine Verknüpfung zur 
&nbsp;<a  href="#uebersicht"  title="Üebersicht an Themen" 
target="_self">Übersicht</a>&nbsp; dieser Seite <br> und zur
&nbsp;<a  href="./content.html#topics"  title="Üebersicht an Themen"> 
Übersicht</a>&nbsp; wo es um den Inhalt der Webseite geht.

Man sieht, das bei der zweiten internen Verknüpfung  _self  fehlt.
Das stellt kein Problem dar, da es die Default-Einstellung ist.
Im zweiten Beispiel wird eine andere Seite und dann
ein bestimmter Abschnitt ausgewählt.

Das Ziel ist vorher markiert worden.
Hier innerhalb einer Überschrift mit  <h2 id="topics">Übersicht</h2>.
Möchte man innerhalb eines Textes eine Marke setzen,
kann man folgendes machen.  <span id="topics"></span>

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

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 …
Sorry nocheinmal mit richtiger Verknüpfung   Irfan View Logo   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; }

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

Besser ist es die Bild-Ausrichtung über Klassen-Attribute zu 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>

Bild-Atribute

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 (Bild-Adresse) 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>

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

Quellen:

Zum Anfang