Basic HTML Part 2

To continue the overview of basic HTML this entry will look at formatting and style tags for text and copy. The following HTML tags allow you to emulate the formatting and style of a word processor for text and copy displayed on the web.

Three common text style are Bold, Italic and Underline. Using your text editor open the index.html file you created for the previous post.

First, make any instance of the acronym “HTML” bold by adding the bold tag as follows.

<b></b>

Next, make the term “Hyper Text Markup Language” italic by adding the italic tag.

<i></i>

Finally, you can draw attention to a word, phrase or paragraph by utilizing the underline tag.

<u></u>

Save your work and then open the file in your web browser to see the results.

bold_italic_underline

Some additional formatting tags are:

Emphasis

Strong

Strike through

Big text

Small text

Short quotation

Subscript

Superscript

Copy the following and paste into your text editor.

<h3>Some additional tags:</h3>

<em>Emphasis</em> - &lt;em&gt;
<strong>Strong</strong> - &lt;strong&gt;
<strike>Strike through</strike> - &lt;strike&gt;
<big>Big Text</big> - &lt;big&gt;
<small>Small text</small> - &lt;small&gt;
<q>Short Quotation</q> - &lt;q&gt;
<sub>Subscript</sub>  - &lt;sub&gt;
<sup>Superscript</sup> - &lt;sup&gt;

Save your work and refresh the document in you web browser.

additionaltags

Note the formatting for each of the tags, but also note that the list is displayed “inline” like paragraph text. The copy should be displayed as a list and that’s where ordered and unordered list tags can come in handy.

An ordered list will display items vertically and assign numbers to them. An unordered list will display items vertically as a bulleted list.

Lists are generated using two tags together. First are the ordered or unordered list tags, <ol> for ordered lists and <ul> for unordered list. Then, each item in the list is assigned a “List Item” tag or <li> The <li> tags are “nested with in the <ol> or <ul> tags. In HTML a list without content will appear like this:

<ol>
<li></li>
<li></li>
<li></li>
</ol>

Or

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Repeat the <li> tag as needed for more list items. Lets use the format sample tags to create a list. This list has no particular hierarchy so an unordered list is appropriate. First create the opening and closing <ul> tags. Then add the list item tags. A quick way to do this would be to copy/paste the opening <li> tag then copy/paste the closing </li> tag.

<ul>
<li><em>Emphasis</em> - &lt;em&gt;</li>
<li><strong>Strong</strong> - &lt;strong&gt;</li>
<li><strike>Strike through</strike> - &lt;strike&gt;</li>
<li><big>Big Text</big> - &lt;big&gt;</li>
<li><small>Small text</small> - &lt;small&gt;</li>
<li><q>Short Quotation</q> - &lt;q&gt;</li>
<li><sub>Subscript</sub>  - &lt;sub&gt;</li>
<li><sup>Superscript</sup> - &lt;sup&gt;</li>
</ul>

Please note the opening and closing <li> tags go around the entire list item including it’s formatting tags.

Save your work and refresh your web browser to see the results.

unorderedlist

As a quick side note the “less than <” and “greater than >” symbols define the opening and closing of a given tag in HTML. So, some special treatment is needed to make them render as text on the screen so the following combination of keyboard characters will be interpreted as text. < = “less than <” and > = “greater than >”.

The above side note provides a good opportunity to explore the <blockquote> tag for paragraph text. Blockquote will indent text to indicate that the text is different from normal paragraph copy. Copy/paste the text into your text editor and add the <blockquote> tags.

<blockquote></blockquote>

Save your work and view it in your browser.

blockquoteonscreen

For part three of the Basic HTML series we will look at the proper use of tables for the web. The last part of the series, Basic HTML Part 4, will explore images and hyperlinks.

So stay tuned and, always close your tags!