Styleguide und Code-Schnipsel
Hilfreiche Code-Schnipsel
Zusätzliche Leerzeile
<p> </p>
Kurzer, nicht interpretierbarer Bindestrich für „IKT ‑ Institut für…“
auch „geschützter Bindestrich“ – leider hält sich der Internetexplorer 8 nicht dran (andere Versionen nicht getestet)
‑
oder
‑
Beispiel:
IKT ‑ Institut für Unterirdische Infrastruktur
Contactpersonen
- Sebastiaan Luimes
Vestigingsmanager
T +31 ‑ (0) 26 ‑ 8 45 45 69
E luimes@ikt-nederland.nl - Jaap Bresser
Project Manager
T +31 ‑ (0) 26 ‑ 8 45 45 60
E bresser@ikt-nederland.nl
Contactpersoon
ing. Sebastiaan Luimes
Vestigingsmanager
T +31 ‑ (0) 26 ‑ 8 45 45 69
E luimes@ikt-nederland.nl
Styleguide
Headline (H2)
Subheadline (H3)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor ist sed diam highlighted text tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Der Quellcode für die Beispiele:
<h2>Headline (ab Kategorie 2 möglich)</h2>
<strong>Fetter Text</strong>
<span class="textmarker">highlighted text</span>
Subheadline (H4)
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
- Punkt 1 in der “Unordered List”
- Noch ein Punkt in der Liste
- Wir können immer mehr Punkte in der Liste einsetzen…
- Hier kommt Punkt 4
- Und am Ende Punkt 5
Der Quellcode für das Beispiel “Unordered List” (UL):
<ul>
<li>Listeneintrag (List Item)</li>
<li>Listeneintrag (List Item)</li>
</ul>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
- Punkt 1 in der “Ordered List”
- Noch ein Punkt in der Liste
- Wir können immer mehr Punkte in
der Liste einsetzen… - Hier kommt Punkt 4
- Und am Ende Punkt 5
Der Quellcode für das Beispiel “Ordered List” (OL):
<ol>
<li>Listeneintrag (List Item)</li>
<li>Listeneintrag (List Item)</li>
</ol>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Dutem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
2009 | 2010 | 2011 | 2012 | 2013 |
---|---|---|---|---|
alpha | beta | delta | gamma | epsilon |
Alpha | Bravo | Charlie | Delta | Echo |
Der Quellcode für das Beispiel “Tabelle” (TABLE):
<table>
<tr> Tabellenzeile (Table Row)
<th>2009</th>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
</tr>
<tr>
<td>alpha</td>
<td>beta</td>
<td>delta</td>
<td>gamma</td>
<td>epsilon</td>
</tr>
<tr>
<td>Alpha</td>
<td>Bravo</td>
<td>Charlie</td>
<td>Delta</td>
<td>Echo</td>
</tr>
</table>
Weitere nützliche HTML-Codes
Deutsche Typografische An- und Abführungen „ “ |
„ “ |
Erzwungener Absatz | <p> </p> |
Bedingte Trennung | ­ |
Geschütztes Leerzeichen | |
Gedankenstrich (Halbgeviert) | – |
Umbruch verhindern mit <nobr></nobr> | <nobr>5,974 · 1024 kg</nobr> |
Icon einfügen* | <i class="fa fa-link fw"></i> |
Icon mit 5 px Abstand einfügen* | <i class="fa fa-link fw" style="margin-right:5px"></i> |
Icon einfügen* | <i class="fa fa-sign-in fw"></i> |
Icon einfügen* | <i class="fa fa-download fw"></i> |
Icon mit 5 px Abstand einfügen* | <i class="fa fa-download fw" style="margin-right:5px"></i> |
Icon einfügen* | <i class="fa fa-external-link fw"></i> |
Icon mit 5 px Abstand einfügen* | <i class="fa fa-external-link fw" style="margin-right:5px"></i> |
Icon mit 5 px Abstand einfügen* | <i class="fa fa-envelope-o fw" style="margin-right:5px"></i> |
In dem Zusammenhang sei auf die entsprechende Liste (externer Link) beim W3 Konsortium verwiesen. Dort werden alle Zeichen codiert aufgelistet. Voraussetzung für die korrekte Darstellung ist allerdings, dass die Zeichen in der verwendeten Schrift auch vorhanden sind. Bei den meisten westeuropäischen Zeichen ist dies in der Regel der Fall.
* Die komplette Liste aller Font Awesome Icons findet sich hier.