Html Inhalte

© Januar 2022, letzte Änderung am 06.04.26

Ü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 auf der gesamten Webseite,
meine erste Überschrift etwas zu groß geraten ist, wird es aufwändig.

Daher ist der Ansatz wie folgt. 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.
Alle weiteren Überschriften liegen darunter
Z.B. <h2 id="headlines">Überschrift - heading</h2>
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 erstellte ich anfangs 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;}
Mittlerweile habe ich die horizontale Linienlänge bereits im inkludiert.
.css:  hr { width: 70% }

Die übrigen Überschriften sind ähnlich aufgebaut.

H2 20 Punkte Überschrift

H3 17 Punkte Überschrift

H4 14 Punkte Überschrift

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.
Es wird aber eher verwendet, um andere Eigenschaften wie z.B. Farbe innerhalb von <span>…</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 Browser-Fensters,
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 folgendes Schreibe: 

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

Es fällt auf, dass die Zeile hinter  div  am linken Rand klebt, obwohl in .css steht  
p {margin-left: 5px; }  

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 class="ctr">   	
  Mit &nbsp; <code>&lt;center&gt;</code> &nbsp; könnte ich einen Text bis Html…
</p>

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

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

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

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

Einrücken mit  text-ident:

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

10px Einzug
20px Einzug
30px Einzug
3em Einzug
Statt Pixel ist es besser die Breite des Buchstaben m zu verwenden z.B. 2em
Hier klebt es wieder am linken Rand.

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

Wenn meine Box zu klein ist, kann ich den Inhalt auch verschieblich gestalten.
Der Code könnte wie folgt aussehen. 

<pre class="scroll"> 

Dies ist nun eine besonders lange Textpassage, welche den Rahmen der Box sprengt und daher verschieblich sein sollte. <br> 

Um mit den verschieblichen Balken nicht den Text zu überdecken, schreibe ich in die letzte Zeile vor den </pre>- Argument ein <br> 

&nbsp;   

</pre>

code

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 ein Beispiel-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 habe ich an vielen Stellen…

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 sein, …

Zum Anfang

Quellen

a-coding-project.de   HTML: Schriftgröße, Schriftfarbe, Schriftart, fett, kursiv
mozilla.org   Applying styles and colors

Zum Anfang