Thema: Typography einsetzen


Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.

1. Code für Headings


<h1>Heading 1
    <small>Sub-heading</small>
</h1>
<h2>Heading 2
    <small>Sub-heading</small>
</h2>
<h3>Heading 3
    <small>Sub-heading</small>
</h3>
<h4>Heading 4
    <small>Sub-heading</small>
</h4>
<h5>Heading 5
    <small>Sub-heading</small>
</h5>
<h6>Heading 6
    <small>Sub-heading</small>
</h6>

1. Ausgabe für Headings

Headings

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading
Heading 6 Sub-heading

2. Code für Paragraphs


<p class='lead'>This is an example of lead body copy.</p>
<p>This is an example of standard paragraph text. This is an example of 
	<a href='#'>link anchor text</a> within body copy.</p>
<p>
    <small>This is an example of small, fine print text.</small>
</p>
<p>
    <strong>This is an example of strong, bold text.</strong>
</p>
<p>
    <em>This is an example of emphasized, italic text.</em>
</p>
<br>
<h4>Alignment Helpers</h4>
<p class='text-left'>Left aligned text.</p>
<p class='text-center'>Center aligned text.</p>
<p class='text-right'>Right aligned text.</p>

2. Ausgabe für Paragraphs

Paragraphs

This is an example of lead body copy.

This is an example of standard paragraph text. This is an example of link anchor text within body copy.

This is an example of small, fine print text.

This is an example of strong, bold text.

This is an example of emphasized, italic text.


Alignment Helpers

Left aligned text.

Center aligned text.

Right aligned text.


3. Code für Emphasis


<p class='text-muted'>This is an example of muted text.</p>
<p class='text-primary'>This is an example of primary text.</p>
<p class='text-success'>This is an example of success text.</p>
<p class='text-info'>This is an example of info text.</p>
<p class='text-warning'>This is an example of warning text.</p>
<p class='text-danger'>This is an example of danger text.</p>

3. Ausgabe für Emphasis

Emphasis Classes

This is an example of muted text.

This is an example of primary text.

This is an example of success text.

This is an example of info text.

This is an example of warning text.

This is an example of danger text.


4. Code für Abbreviations


<div class='panel-body'>
<p>The abbreviation of the word attribute is
    <abbr title='attribute'>attr</abbr>.</p>
<p>
    <abbr title='HyperText Markup Language' class='initialism'>HTML</abbr>
    is an abbreviation for a programming language.</p>
<br>
<h4>Addresses</h4>
<address>
    <strong>Mehdi Bandegani</strong>
    <br>Armgartstraße 24
    <br>D-22087 Hamburg
    <br>
    <abbr title='Phone'>P:</abbr> (040) 42875 - 4627
</address>
<address>
    <strong>Full Name</strong>
    <br>
    <a href='mailto:#'>mehdi.bandegani@haw-hamburg.de</a>
</address>

4. Ausgabe für Abbreviations

Abbreviations

The abbreviation of the word attribute is attr.

HTML is an abbreviation for a programming language.


Addresses

Mehdi Bandegani
Armgartstraße 24
D-22087 Hamburg
P: (040) 42875 - 4627
Full Name
mehdi.bandegani@haw-hamburg.de

5. Code für Blockquotes


<h4>Default Blockquote</h4>
<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<h4>Blockquote with Citation</h4>
<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <small>Someone famous in
        <cite title='Source Title'>Source Title</cite>
    </small>
</blockquote>
<h4>Right Aligned Blockquote</h4>
<blockquote class='pull-right'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

5. Ausgabe für Blockquotes

Blockquotes

Default Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Blockquote with Citation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Right Aligned Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


6. Code für Lists


<h4>Unordered List</h4>
<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>
        <ul>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
    </li>
    <li>List Item</li>
</ul>
<h4>Ordered List</h4>
<ol>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ol>
<h4>Unstyled List</h4>
<ul class='list-unstyled'>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>
<h4>Inline List</h4>
<ul class='list-inline'>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

6. Ausgabe für Lists

Lists

Unordered List

  • List Item
  • List Item
    • List Item
    • List Item
    • List Item
  • List Item

Ordered List

  1. List Item
  2. List Item
  3. List Item

Unstyled List

  • List Item
  • List Item
  • List Item

Inline List

  • List Item
  • List Item
  • List Item

7. Code für Description Lists


<dl>
    <dt>Standard Description List</dt>
    <dd>Description Text</dd>
    <dt>Description List Title</dt>
    <dd>Description List Text</dd>
</dl>
<dl class='dl-horizontal'>
    <dt>Horizontal Description List</dt>
    <dd>Description Text</dd>
    <dt>Description List Title</dt>
    <dd>Description List Text</dd>
</dl>

7. Ausgabe für Lists

Description Lists
Standard Description List
Description Text
Description List Title
Description List Text
Horizontal Description List
Description Text
Description List Title
Description List Text

8. Code für die Code-Darstellung


<p>This is an example of an inline code element within body copy. Wrap inline code within a
    <code><code>...</code></code>tag.</p>
<pre>This is an example of preformatted text.</pre>

8. Ausgabe für Code

Code

This is an example of an inline code element within body copy. Wrap inline code within a <code>...</code>tag.

This is an example of preformatted text.