HTML component: elements

On this page I'll explain and show some examples of all the elements you're able to use in a HTML component. The first thing you'll need to do is to choose if you'll use the whole width of the website (not recommended in the most cases) or if you want to use the width of the header as the width of your page (this will give the best result for a regular content page, that's also what I did on this page).

If you want to use the whole width, you can just start rightaway with adding your text and other HTML components. If you want to use the width of the header (1410 pixels) you'll need to put all your code between between this div tag:

 

<div class="container-fluid">Place all your code here</div>

 

The easiest way to work for me is to write all the code in Notepad++ (or Dreamweaver) and to paste it as code in the HTML component.

As you can see, there's a blank space between my title ("HTML component: elements") and the blue header. To create this blank space, I've just used an empty paragraph tag above my title. So my code looks like this:

<div class="container-fluid"> <p>&nbsp;</p> <h1>HTML component: elements</h1> <p>On this page I...</p> </div>

Using text

How to set up titles, subtitles and paragraphs

As you can see, I've just used a title ("Using text"), a subtitle ("How to set up titles, subtitles and paragraphs") and this paragraph. These elements are really easy to set up:

<h3>This is your title</h3> <h5>This is your subtitle</h5> <p>This is your paragraph</p>
Multiple paragraphs

If you're using multiple paragraphs, you'll get this result:

Pargraph 1 starts here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet gravida turpis. Nullam ultrices dignissim feugiat. Etiam lectus ex, vehicula in porta at, lobortis eu sapien. Sed mattis quam quis velit pellentesque, in blandit purus condimentum. Maecenas vestibulum faucibus risus, id laoreet lorem ornare id. Morbi sollicitudin sollicitudin eros, id blandit nunc venenatis fermentum. Vivamus in mattis augue, vitae tincidunt odio.

Pargraph 2 starts here. Suspendisse sit amet diam justo. Suspendisse varius turpis vel tempor bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus convallis urna vel placerat tempus. Etiam fringilla sapien eu justo malesuada, vitae vulputate lectus pellentesque. Integer sodales posuere cursus. Praesent fermentum nunc lorem, et molestie diam commodo ac. Curabitur in dui et risus pretium faucibus nec id mi.

Pargraph 3 starts here. Nunc vestibulum consectetur magna eu mollis. Praesent auctor purus nisi, nec rutrum justo consequat vitae. In auctor suscipit nulla sit amet ullamcorper. Etiam bibendum mattis lacus non facilisis. Proin ligula magna, cursus eget eros a, aliquet porta dolor. Vivamus ornare, magna non feugiat vehicula, enim quam auctor dui, quis porta turpis dui non nulla. Cras vel libero id mi varius molestie eget et elit. Suspendisse potenti.

This is the code I've used for the example above:

<p>Pargraph 1 starts here. Lorem ipsum dolor...</p> <p>Pargraph 2 starts here. Suspendisse sit amet...</p> <p>Pargraph 3 starts here. Nunc vestibulum...</p>
Using 'breaks' instead of multiple paragraphs
<p>This is your first phrase.<br /> Because I have used a break, this phrase will appear on the next line.<br /> Another break, so also this phrase will appear on the next line.</p>
Let's take a look at the result:

This is your first phrase.
Because I have used a break, this phrase will appear on the next line.
Another break, so also this phrase will appear on the next line.

The use of bold, italic and underlined text

Ofcourse you're able to use bold text, italic text and underlined text. Or a combination of different styles.

<b>Bold</b> <i>Italic</i> <u>Underlined</u>
<b><u>Bold and underlined</u></b> <b><i>Bold and italic</i></b> <u><i>Underlined and italic</i></u>
<b><u><i>Bold, underlined and italic</i></u></b>

 

Colored text

You're able to change the color of a whole paragraph or the color of a short part of text in a title or a paragraph.

For example:

<p style="color: #00A3DA;">This piece of code will change the text color of your whole paragraph into the color #00A3DA (blue).</p>

This will give this result:

This piece of code will change the text color of your whole paragraph into the color #00A3DA (blue).

If you want to change the color of a short part of text, you can use a span-tag in your paragraph or title tags.

For example:

<p>This part stays black. <span style="color: #00A3DA;">Only this part is blue.</span></p>

With the beautiful result:

This part stays black. Only this part is blue.

Tables

Explain the use of tables

Hyperlinks

Explain the use of hyperlinks

Images

Explain the use of images

Anchors

Explain the use of anchors

Embedding a YouTube video

Explain how to embed a YouTube video

Iframes

Explain the use of iframes

Anchors

Explain the use of anchors

Javascript

See confluence.