| 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> | |
| <ul type="circle"> </ul> | |
| <ul type="circle"> </ul> | |
| <ul type="square"> </ul> | |
Hinweis: Aufzählungszeichen werden hier durch CSS überschrieben.
Umlaute & andere Spezifitäten
| Zeichen | Ersetzung |
|---|
ä | ä |
Ä | Ä |
ö | ö |
Ö | Ö |
ü | ü |
ü | Ü |
ß | ß |
< | < (lower than) |
> | > (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.
|
| Last Updated ( Sonntag, 24 Januar 2010 ) |
|
