Html Inhalte

© Januar 2022, letzte Änderung am 06.11.23

Übersicht

Überschrift - heading

Überschriften verwende ich normalerweise um an bestimmten Stellen
Texte hervorzuheben.
Nun könnte ich auf die Idee kommen, an der gewünschten Stelle
die Schriftgröße und ggf. den Font zu ändern.
Spätestens wenn ich auf der gesamten Webseite meine,
meine erste Überschrift ist etwas zu groß geraten, wird es aufwändig.

Daher ist der Ansatz, ich definiere einmal global in einer .css Datei
das Aussehen und verwende dann im Dokument diese Definition.

Ich persönlich habe mir angewöhnt die erste Überschrift hier
<h1> html Inhalte formatieren </h1>  
nur einmal am Anfang jeder Web-Seite als Überschrift zu verwenden.
Gemäß meinem .css content style sheet,
habe ich mich für eine zentrierte 24 Punkte Schrift entschieden.

<h1> Überschrift </h1>

Im .css steht entsprechend:
h1 {font-size:24px; margin-bottom:17px; text-align: center; }

Ich habe mir angewöhnt zumindest nach der Hauptüberschrift
eine horizontale Linie zu ziehen, welche allerdings verkürzt ist.
Die horizontalen Linie erstelle ich wie folgt (hier 90 mm dargestellt)  <hr mm130>
mm130  ist dabei hier das Längen-Attribut, welches im .css definiert ist.
.css:  #mm130 { width: 650px;}

Die übrigen Überschriften sind ähnlich aufgebaut.

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 (wikipedia.org LAΤΕΧ).

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

Die Definition der Schriftgrössen für z.B.  <h3>  ergibt sich aus folgenden. 

html { font-family: 'Open Sans', sans-serif; position: relative; }	
h3   { font-size:17px; margin-bottom:12px; margin-top:36px; }

Weitere Details, kann man sich im  Style sheet  selber angucken.
Siehe  formate.css.

Um später die Navigation zu erleichtern,
z.B. ein Inhaltsverzeichnis zu erstellen, von wo man zu jeder Überschrift
springen kann, ist es hilfreich jeder Überschrift ein eindeutiges Label zu geben.
Hier: 

<h2 id="headlines"> Überschrift - heading </h2>  

Möchte ich diese Überschrift anspringen (siehe Verknüpfung),
kann ich innerhalb des selben Dokumentes folgendes schreiben.
<a href="#headlines">Überschrift</a>

Die Überschrift  <h2>  enthält ein Attribut dessen Name  id  ist
und deren Wert ist hier headlines.
 id="headlines"  kann als ein Label oder Sprungziel genutzt werden.

<span id=… >  könnte auch verwendet werden
um andere Eigenschaften wie z.B. Farbe innerhalb von <span zu ändern.

Zum Anfang

Schriftstil vom normalen Text

In formate.css ist auch die Schriftgrösse für einen Paragraphen definiert.
Hier z.B. 12 Pixel Punkte für normalen unformatierten Text.

<p> wie Paragraph oder Text-Absatz
    verwendet man für einen größeren Umbruch.
    Also davor und dahinter ist etwas Platz, wie in formate.css definiert.
</p>

Da ein Text auch sehr lang sein kann, wird er normalerweise
entsprechend der Breite des Browserfensters, umgebrochen.
Ein gezielter Umbruch erfolgt mit   <br>,   wie break.
Im Vergleich zu fast allen anderen Tags, hat  <br>  kein Pendant zum Schließen.

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

Zum Anfang

Ausnahme Tags ohne entsprechende Ende-Tags

Nicht alle Elemente bestehen aus einen  <Start-Tag>  und einem  </End-Tag> .
Daher habe ich versucht die wenigen Ausnahmen hier aufzuführen.

Das sind hoffenlich alle Ausnahmen…

Zum Anfang

Lokale Formatierungen des Textes

<s>  oder  <del>  für durchgestrichenen Text. Bis Html 4.01 war auch  <strike>  möglich.

 <b>  oder  <bold>  wird für fette Schrift verwendet. <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 superior, also hochgestellter Text.

<code>  ist sinnvoll für kurze Code-Fragmente z.B.  Consolen-Schrift mit grauen Hintergrund.

Zur farbliche Hervorhebung innerhalb eines Textes, kann ich folgendes verwenden.
<span style="background-color:yellow;">farbliche Hervorhebung</span>

Eine

farbliche Hervorhebung
mit Umbruch erhalte ich, wenn ich stattdessen
<div style="background-color:yellow;">farbliche Hervorhebung</div> 
verwende.

Mit   <center>   könnte ich einen Text bis Html 4.01 mittig zentrieren.
Ebenso funktionierte es über ein Attribut   <p align="center">,
welches in Html-5 allerdings auch nicht mehr erlaubt ist.

Stattdessen muß es anders gelöst werden, z.B. wie folgt 

<p id="ctr">   	
  Mit &nbsp; <code>&lt;center&gt;</code> &nbsp; könnte ich einen Text…
</p>

In der  .css -Datei steht hierfür folgende Definition.
#ctr { text-align:center;}

Vergleichbar habe ich im .css   id="rh"   definiert,
um diesen Paragraphen rechtbündig zu bekommen.

Beziehungsweise via   id="lh"   den folgenden Paragraphen linksbündig.

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

Einrücken mit  text-ident:

Innerhalb eines Paragraphes kann ich mittels
<div style="text-indent:10px;">Text…</div>
beliebig einrücken

10px Einzug
20px Einzug
30px Einzug
3em Einzug
Statt Pixel ist es besser die Breite des Buchstaben m zu verwenden z.B. 2em

Zum Anfang

Siehe z.B.
vioma.de   html-sonderzeichen
mediaevent.de   sonderzeichen.html - vollständiger aber nicht so übersichtlich
unicode.e-workers.de   Sonderzeichen
w3schools.com   UTF Symbols
w3schools.com   HTML 4 Entity Names
w3schools.com   HTML5 Entity Names by Alphabet - A
webmaster-seo.com   Griechische Buchstaben - Unicode - griechische Sonderzeichen
wolfgang-frank.eu   HTML Sonderzeichensatz

Zum Anfang

Formatierung von Code-Blöcken

Ein paar Zeilen Code werden häufig auf eine besondere Art und Weise dargestellt.
Bei mir ist beispielsweise der Font anders und der Hintergrund Grau.
Der entsprechende Befehl wird mit Parameter aufgerufen. 

<pre class="notranslate"> 
… 
</pre>

In der .css Datei steht entsprechend 

pre { width: 650px;  background-color:#E5E5E5; 
      font-family:"Lucida Console", Monaco, monospace;  font-size:13px; 
      margin-bottom:14px;  margin-top:14px;  padding: 7px;
    }

Das bedeutet außerhalb der grauen Box habe ich eine margin-bottom: 14px
und innerhalb der Box ziehe ich den Text etwas vom Rand,
indem ich padding: 7px; verwende.

Alternativ kann man auch  <code> … </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 der selbe Text. Einmal mit  <code>  und mit  <pre>.

<!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">

versus 

<!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">

Ich hoffe man kann gut erkennen, dass durch die fehlenden Umbrüche
das ganze Zeug unleserlich wird, obwohl es sich bewusst um den gleichen Text handelt.

Ein  <code>-Element habe ich an vielen Stellen mit ein wenig Platz herum
hervorgehoben. Da das hier asymetrisch ist,
verwende ich hier nur ein &nbsp; vor <code>. 

Ein &nbsp;<code>&lt;code&gt;</code>-Element…

Soll vor und hinter Beispiel ein Abstand sein,
habe ich mir dafür eine Klasse definiert, welche wie folgt aussieht. 

code.sp
{ margin-left:  0.4em;  margin-right: 0.4em; /* mehr weißer Abstand */
  padding-left: 0.2em; padding-right: 0.2em; /* mehr grauer Abstand */
}

Im Text schreibe ich dann folgendes 

Soll vor und hinter <code class="sp">Beispiel</code> ein Abstand…

Zum Anfang