Formatting

In this lesson you are going to learn how to format your text. A document with good formatting will attract more viewers to your website.


Italic

Any content inside the <i></i> tags will be italic.


<i>My name is Lilly Robot</i>

Displays

My name is Lilly Robot


Bold

Any content inside the <b></b> tags will be bold.


<b>HTML is fun and creavtive!</b>

Displays

HTML is fun and creative!


Example


<body>
<p>It is important to <i>backup</i> your work regularly.</p>
<p>Keep your <b>password</b> safe and secured from others.</p>
</body>



Displays

It is important to backup your work regularly.

Keep your password safe and secured from others.




Strong

The strong tag is used if you want to make the content important. It is similar to bold but the browser decides on the emphasis of how the content will be displayed.

Any content inside the <strong></strong> tags will be strong.


<strong>Book Holiday!</strong>

Displays

Book Holiday!


Emphasis

The emphasis tag emphasises the content. It is similar to italic but the browser decides on the emphasis of how the content will be displayed.

Any content inside the <em></em> tags will be emphasised.


<em>Cancel Holiday!</em>

Displays

Cancel Holiday!


Example


<body>
<p>I must attend my <strong>HTML</strong> classes next week.</p>
<p>Go to <em>Lilly Robot<em/> website to learn HTML.</p>
</body>



Displays

I must attend my HTML classes next week.

Go to Lilly Robot website to learn HTML.






Subcript

Any content inside the <sub></sub> tags will be subscript. The symbol for carbon dioxide is CO2.


Carbon Dioxcide:CO<sub>2</sub>

Displays

Carbon Dioxcide:CO2


Superscript

Any content inside the <sup></sup> tags will be superscript.


Date: 20<sup>th</sup>June 1910

Displays

Date: 20thJune 1910


Small

Any content inside the <small></small> tags will be small.

<p><small>This text is small</small></p>

Displays

This text is small


Example

<body>
<p>Ten to the Power of two is written as: 10<sup>2</sup></p>
<p><small>The formula for rectangle is lenght x width</small></p>
<p> The symbol for water is: H<sub>2</sub>0</p>
</body>


Displays

Ten to the Power of two is written as: 102

The formula for rectangle is lenght x width

The symbol for water is: H20




Underline

The html tags for underline has been replaced by CSS. Although, you might still come across some websites, written several years ago, showing the old tags.

Any content inside the <u></u> tags will be underlined.


<u>Hypertext Markup Language</u>

Displays

Hypertext Markup Language



The CSS code for underline is: style="text-decoration:underline". The code goes inside the opening tag.


Example

<p style="text-decoration:underline">
Cascading Style Sheet
</p>


Displays

Cascading Style Sheet





Strike Through

Any content inside the <del></del>tags will be striked through.


<del>Delete page 222</del>

Displays

Delete page 222


Insert

Any content inside the <ins></ins> tags will be underlined.


<p>Tape program: <ins>7pm</ins>.</p>

Displays

Tape program: 7pm


Example

<body>
<p>The font size should be <del>22px</del><ins>18px.</ins></p>
</body>


Displays

The font size should be 22px 18px.




Now do the Exercise!