When HTML first began, web creators only had two choices. A table layout, or frames. The div element provides a 3rd alternative, since a div can contain any/every other type of html element within its beginning and ending tag.

Example:

• <div align=”right” >
• <a href=”">HOME</a> |
• <a href=”">CONTACT</a> |
• <a href=”">ABOUT</a>
• </div>
• <div align=”left” bgcolor=”white”>
• <h5>Content Articles</h5>
• <p>This paragraph would be your content
• paragraph with all of your readable material.</p>
• </div>

HTML Div Layout:

HOME | CONTACT | ABOUT

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Advanced web developers find div elements to be far easier to work with than tables, adding more content or more links to our previous example might demonstrates why a div is simpler to work with.

Let’s add a “LINKS” page to our menu, and another article of content below the existing content.

Example:

• <div align=”right” >
• <a href=”">HOME</a> |
• <a href=”">CONTACT</a> |
• <a href=”">ABOUT</a> |
• <a href=”">LINKS</a>
• </div>
• <div align=”left” >
• <h5>Content Articles</h5>
• <p>This paragraph would be your content
• paragraph with all of your readable material.</p>
• <h5 >Content Article Number Two</h5>
• <p>Here’s another content article right here.</p>
• </div>

HTML Div Layout II:

HOME | CONTACT | ABOUT | LINKS

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Content Article Number Two

Here’s another content article right here.

Tips

·           Use CSS Positioning with divs and code like a pro!

Bold

Creating bold text can be accomplished through the use of the <b> bold tag.

Example:

• <b>This text is entirely BOLD!</b>

Bold:

This text is entirely BOLD!

Place the bold tag inside other elements to highlight important words and give feeling to your text.

Example:

• <p><b>Don’t</b> touch that!</p>

More Bold:

Don’t touch that!

You may also use it to separate words from their meaning in a dictionary fashion.

Example:

• <p><b>Cardio:</b> Latin word meaning of the heart.</p>

Dictionary:

Cardio: Latin word meaning of the heart.

The idea here is to use the bold tag in quick formatting situations. It is not a good idea to bold entire paragraphs or other elements simply because you want the text to be larger or fatter. Use Cascading Style Sheets for font styles and sizes.

Italic(s)

The italics tags should be used to highlight a key word or phrase. These tags are not intended to to stylize or shape your font face. Rather, use them to emphasize text or words.

Example:

• Italic <i>tag</i>!
• <em>Emphasized</em> Text!
• Create a <blockquote>blockquote</blockquote>!
• Format your <address>addresses</address>!

Italic tag!
Emphasized Text!
Create a blockquote!
Format your addresses!

Each of the above tags is generally interpretted by the browser in a similar way. The two commonly used tags to place italics onto a website are <em> and <i>. They are short and sweet.

Example:

• <b>HTML</b>
• <i>Hyper Text Markup Language</i>

or

• <b>HTML</b>
• <em>Hyper Text Markup Language</em>

HTML
Hyper Text Markup Language

or

HTML
Hyper Text Markup Language

As you can see, the output is the same regardless of what tag we used to emphasize our definitions.

Bold and Italics

Both the <b> and the <i> tags can be placed within other elements to format your texts. They can also be used together to bold and italisize words or phrases. Nothing fancy here, just be sure you open and close the tags in the same order.

Example:

• <p>Phillip M. Rogerson <b><i>MD</i></b></p>

Display:

Phillip M. Rogerson MD

This is brilliant when placing text links directly inside your paragraphs as a reference to the user.

Example:

• <p>Include several external
• links throughout your texts as references to your viewers,
• we will discuss
• <a href=”" target=”_blank” title=”Tizag Links”>
• <b><i>HTML Links</i></b>
• </a>
• in a later lesson.</p>

Format Links:

Include several external links throughout your texts as references to your viewers, we will discuss HTML Links in a later lesson.

As you can see, the code becomes quite complex as you begin to place more and more tags on the board. Be assured that once you learn Cascading Style Sheets the code will become simpler.

<code> element

The <code> tag allows you to specify some of your text as computer code. This simply changes the font face, size, and letter spacing to give the text the feel of being computer code.

Example:

• This text has been formatted to be computer <code>code</code>!

This text has been formatted to be computer code!

Use this tag to separate any computer code you wish to display on your website. It is not always necessary, but the tag exists if you so desire.