left
bergnernet.de
space
right
Home arrow HTML-Code-Schnippsel
Donnerstag, 21 Februar 2019
HTML-Code-Schnippsel

HTML-Code-Schnippsel

<strong> </strong>fett formatiert
<i> </i>kursiv formatiert
<font color="#FF0000">Text-Farbe als Hex-Wert (siehe Anleitung)
Farbtabelle
<font style="font-family:'Verdana, Arial, serif;">serif</font>Text mit Schriftart, Ersatzschriftart
<hr />horizontale Linie
<br />Zeilenumubruch
<br clear="all" />Zeilenumubruch mit clear-Attribut unterbricht den automatischen Textfluss (bei einer Grafik wird unter der Grafik der Text dargestellt
<img src="" width="" height="" align="left" alt="" title="" hspace="10">Grafikdarstellung mit Breiten- und Höhenangabe in Pixeln, linker Ausrichtung, alternativer Text und Titel, Seitenabstand zum Text 10px
<a href="http://www.link.de" target="_blank" title="Zum Buch">http://www.link.de</a>Hyperlink zur URL auf neuer Seite mit Titel (hint) beim Mausdrüberfahren
<a name="oben"></a>
<a href="#oben">Zum Seitenanfang</a>
Anker für einen seiten-internen Link
Hyperlink zum Anker
<iframe src="script.php" width="600" height="300" name="iframe" frameborder="0"></iframe>iframe - in einer Seite eingebettetes Frame (Fenster) mit Höhen- und Breitenangabe; hier ist ein PHP-Script (externe Datei) eingebettet
<abbr title="zum Beispiel">z. B.</abbr>abbreviation - Abkürzung, gepunktet Unterstrichen, wird bei Mauskontakt angezeigt
<acronym title="World Wide Web">www</acronym>wie abbr
<embed src="mein.pdf#page=5&Zoom=60&pagemode=none&view=FitBH" width="" heigth=""> </embed>PDF-Dokumente in die Webseite einbinden
width, height - Anzeigefläche
page - Seite, die angezeigt werden soll als Zahlenwert
pagemode - Festlegung, was im linken Navigationsbereich sichtbar ist (none, thumbs, bookmarks)
scrollbar - Sichtbarkeit der Bildlaufleisten (0, 1)
toolbar - Sichtbarkeit der Symbolleiste (0, 1)
Zoom - Zoomfaktor als Zahl
search - Öffnet die erweiterte Suche. Als Wert wird der Suchbegriff übergeben
FitBH - Anzeige des Dokuments an die Seitenränder des Adobe Reader-Fensters anpassen

Absatzformatierungen:

<p align="justify"> </p>Absatz in Blocksatz formatiert
<p style="font-size: 28px;"> </p>

Absatzschriftgröße in 28 Punkt

<p style="line-height:18px;"> </p>Absatz Zeilenhöhe 18 Punkt (14px derzeit en vogue)
<p style="line-height:1.5em;"> </p>Absatz Zeilenhöhe 1,5fach
<p style="first-letter:font-size:1.5em;"> </p>
<p style="font-family: serif;"> </p>

Buchstaben sind serif

<p style="font-family: sans-serif;"> </p>

Buchstaben sind sans-serif

<p style="font-family: cursive;"> </p>

Buchstaben sind cursive

<p style="font-family: fantasy;"> </p>

Buchstaben sind fantasy

<p style="font-family: monospace;"> </p>

Buchstaben sind monospace


Rahmen

<div style="border:  dotted red; margin: 25px; 
  padding: 5px; text-align: left; 
  background-color: rgb(255, 206, 51);">

<div>
rot gepunkteter Rahmen um ein gelbes Textfeld>
<style type="text/css"> 
  p {border:1px solid black; padding:5px;}
</style>
Box um Text mit Rahmenbreite 1 als Strich in Schwarz mit einem Innenabstand von 5 Pixeln (Weitere Möglichkeiten: padding-left; padding-top; padding-right;padding-bottom; margin - Außenabstand; width; height)

Aufzählungen

<ul type="none"> </ul>
  • ohne
<ul type="circle"> </ul>
  • Kreis
<ul type="circle"> </ul>
  • Disc
<ul type="square"> </ul>
  • Quadrat
Hinweis: Aufzählungszeichen werden hier durch CSS überschrieben.

Umlaute & andere Spezifitäten

ZeichenErsetzung
ä&auml;
Ä&Auml;
ö&ouml;
Ö&Ouml;
ü&uuml;
ü&Uuml;
ß&szlig;
<&lt; (lower than)
>&gt; (greater than)

CSS-Formatierungen

<style type="text/css"> </style>Einbindung von CSS
<style type="text/css"> p {font-size: 20px;}</style>Schriftgröße auf 20 Pixel Größe

<style type="text/css"> 
 p { margin:18px 0px; }
 p { font-size: 48px; }
 p { color:red; }
 p { line-height:1.5em; }
 p { color:rgb(255,0,0); }
 p { margin:18px 0px; }
 p { font-size: 62,5%; }  
 p { font-wight:normal;}
 a:visited, a:active, a:hover, a:link {color:#69977b;}
 h3,h4,h5 {font-size:18px; font-wight:bold; font-size:14px;}
 ul {list-style-type:circle;}
</style>

Style-Elemente
<style type="text/css">
 p:first-letter {font-size:1.5em;}
</style>
<p>Erster Buchstabe groß ... </p>
Erster Buchstabe groß mit CSS
p.max {max-width:599px; min-width:150px}
<p class="max">Max-Min</p>
<style type="text/css"> 
  a:hover .gross1 {filter='()';
  width: 400px; height: 300px;}
</style>

<a href="#">
  <img class="gross1" src="" width="200" height="160">
</a>
Bild vergrößern

Hinweis: Diese Zusammenstellung ist sehr unvollständig und dient nur als eigenes Nachschlagewerk häufig benötigter (X)HTML- und CSS-Elemente.