h1. Überschrift Zusatztext zur Überschrift
h2. Überschrift Zusatztext zur Überschrift
h3. Überschrift Zusatztext zur Überschrift
h4. Überschrift Zusatztext zur Überschrift
h5. Überschrift Zusatztext zur Überschrift
h6. Überschrift Zusatztext zur Überschrift
Führender Text Beispiel
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.
Visuelle Betonung von Text Beispiel
Fein
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.
Fett
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.
Kursiv
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.
Textausrichtung Beispiel
linksbündig
mittig
rechtsbündig
ausgerichtet
Abkürzungen Beispiel
Standard Abkürzung
Hier folgt eine Abkürzung attr
Abkürzung am Satzanfang
HTML5 für responsives Webdesign.
Darstellung von Adressen im Inhalt Beispiel
Musterfirma
Musterstrasse 8
12345 Musterstadt
T: (123) 456-7890
Herr Max Mustermann
max.mustermann@musterfirma.com
Darstellung von Blockzitaten Beispiel
Standard Blockzitat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Optionen Blockzitat
Quellenangabe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alternative Darstellungsform
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Listendarstellung Beispiel
Unsortiert
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Sortiert
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Ohne Style
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
In einer Linie
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Beschreibungen Beispiel
Vertikale Ausrichtung
- Malesuada porta
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec id elit non mi porta gravida at eget metus.
- Euismod
- Donec id elit non mi porta gravida at eget metus.
- Fusce dapibus
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Horizontale Ausrichtung
- Malesuada porta
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec id elit non mi porta gravida at eget metus.
- Euismod
- Donec id elit non mi porta gravida at eget metus.
- Fusce dapibus
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Darstellung von Code Beispiel
Codedarstellung im Textfluss
Mit diesem Tag <html>
beginnt eine HTML Seite
Aufforderungshinweise für Benutzer
Zum Wechsel in ein anderes Verzeichnis tippen Sie cd gefolgt vom Namen des Verzeichnisses, indem Sie wechseln wollen.
Standardform zur Darstellung von Codezeilen
<p>Hier das Beispiel</p>
Darstellungen von Tabellen Beispiel
Standard
# |
Vorname |
Nachname |
Benutzername |
1 |
Max |
Mustermann |
@mmu |
2 |
Albert |
Dreistein |
@adr |
3 |
Klara |
Schein |
@ksch |
Gestreift
# |
Vorname |
Nachname |
Benutzername |
1 |
Max |
Mustermann |
@mmu |
2 |
Albert |
Dreistein |
@adr |
3 |
Klara |
Schein |
@ksch |
Rahmen
# |
Vorname |
Nachname |
Benutzername |
1 |
Max |
Mustermann |
@mmu |
2 |
Albert |
Dreistein |
@adr |
3 |
Klara |
Schein |
@ksch |
Hover-Effekt der Zeilen
# |
Vorname |
Nachname |
Benutzername |
1 |
Max |
Mustermann |
@mmu |
2 |
Albert |
Dreistein |
@adr |
3 |
Klara |
Schein |
@ksch |
Verwendung kontextualer CSS Klassen
# |
Vorname |
Nachname |
Benutzername |
1 |
Max |
Mustermann |
@mmu |
2 |
Albert |
Dreistein |
@adr |
3 |
Klara |
Schein |
@ksch |
3 |
Adelheid |
Zong |
@azo |
3 |
Kim |
Simsala |
@ksi |
Responsive Tabellen
# |
Vorname |
Nachname |
Benutzername |
1 |
Max |
Mustermann |
@mmu |
2 |
Albert |
Dreistein |
@adr |
3 |
Klara |
Schein |
@ksch |
3 |
Adelheid |
Zong |
@azo |
3 |
Kim |
Simsala |
@ksi |
Responsive Bildformen Beispiel
Helferklassen Beispiel
Kontextfarben
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Kontexthintergründe
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.