HTML Tutorial

A Beginners Guide to HTML Markup

HTML stands for hypertext markup language. This code enables a browser to render a web page that a user can read, click on hyperlinks, see images and video, and allows visitor interaction through polls, forums, blog posts and more.

This tutorial is simply a primer for people totally unfamiliar with html. For more information see this advanced html tutorial.

Lets begin with the the document type. A document type defines the rules that must be followed to create html that can be validated to ensure the html doesn't contain errors.

Here are a few common document types you will encounter.

XHTML strict

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

XHTML transitional

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

HTML 4.01 transitional


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>

So, without a declaration type here is a basic html page structured with only a title.

<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>

HTML pages should be saved using either a html or htm extension depending on the preference of the web server that hosts your site. For now, you could save this file as test.html or test.htm

Since our goal is to be able to check our work as we go we need to declare the document type in order to validate the page to ferret out our mistakes. So the above will be changed to:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>

This will allow us to declare the document type and the syntax for the html we want to produce so we can check our errors as the page is created.

Note that each of the tags above has an opening tag ( <title> ) and a closing tag ( </title> ). Not all tags require an opening and a closing tag.

An example of this would be the tag for a line break. A line break simply indicates where to render a blank line.

Never use a line break in the middle of a sentence since font size, display resolution, and browser rendering will never produce the same results. Here is an example of the proper and improper use of a line break in XHTML.

Improper
This is a the first sentence in the <br/> paragraph. This is the second sentence.
Output
This is the first sentence in the
paragraph. This is the second sentence.

Better
This is a the first sentence in the paragraph.<br/>This is the second sentence.
Output
This is the first sentence in the paragraph.
This is the second sentence.

Best
This is the first sentence in the paragraph.
<br/>
This is the second sentence.
Output
This is the first sentence in the paragraph.
This is the second sentence.

The second and third example produce the same results but the third example is much easier to read.

HTML formatting basics
To create a basic web page that looks professional we need to be able to:

• Add headings
• Add paragraphs
• Format the page
• Include emphasis to the content
• Format hyperlinks
• Use lists

Format the Page
A paragraph is an element that is useful for rendering text. A paragraph can be formatted using CSS. The paragraph uses an opening and closing tag.

<p>
Some text for our paragraph
</p>

Output

Some text for our paragraph

<p style="color:#FF0033;padding-left:10px;font-weight:bold">
Some text for our paragraph
</p>

Output

Some text for our paragraph

As you can see the unformatted paragraph looks a lot different than the formatted version. CSS is used to style the paragraph, in this instance, to render the text a red color, indent the text 10 pixels, and add emphasis to the text by making it bold.

Using CSS in the manor displayed above is not the best way to go either. None of the code is reusable and it adds code weight to every page you build for your website. Instead of using inline CSS we can create classes and id's and store our CSS in a file that can be linked to each html file we build. Here is an example of how to do that.

Step 1
Create a file called style.css and place this code in it.

.red_indented {
        color: #FF0033;
        padding-left: 10px;
        font-weight: bold
}

Step 2
Modify the paragraph tag to reference this new CSS class we called red_indented

<p class="red_indented">
Some text for our paragraph
</p>

Step 3
Add a link to our new style sheet in the html file.

<link rel="stylesheet" type="text/css" href="style.css"/>

So, here is what our html file looks like so far.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
     <p class="red_indented">
     Some text for our paragraph
     </p>
</body>
</html>

Now lets add more text to the paragraph and float an image to the right of the text. To do this we need an image that is appropriately sized for our page. The size of the image can be controlled using html but a large image that is rendered smaller still takes a long time to load since the weight, or number of bytes, required to load the image is not reduced when changing the rendering size using html or CSS.

To save space I will show you the entire html file along with the CSS file to allow us to display an image floated on the right side of a paragraph of text. Here is the html file:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
     <p class="red_indented">
<img src="http://www.domain.com/images/imagefile.jpg" width="250" height="200" 
alt="Description of Image" class="image_float_right" />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi 
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
 quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil 
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
     </p>
</body>
</html>

And here is the CSS file:

.red_indented {
        color: #FF0033;
        padding-left: 10px;
        font-weight: bold
}

.image_float_right {
        float: right;
        padding: 6px
}

Note that the image tag requires a lot of information:
• src : location of the file
• width : width of the image in pixels
• height : height of the image in pixels
• alt : alternative text (description of picture)
• class : CSS used to style the display of the image

Creating Page Sections or Divisions
Many of the older web pages on the Internet still use tables to position or align elements of the page. This works well with all browsers but really should only be used to display simple tabular data that requires several rows of numbers or text not for alignment of the entire web page.

Newer web pages use divisions or sections that are defined using <div> </div>
There are still some issues with browser rendering compatibility (Internet Explorer) but div's provide excellent control of page formatting with minimum code.

To create a division with a background color and a width of 500 pixels for our paragraph of text and image we can add the following to our html file (We will also add a heading for our paragraph) :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="top_left">
<h2>Our Paragraph Heading</h2>
<p class="red_indented">
<img src="http://www.domain.com/images/imagefile.jpg" width="250" height="200" 
alt="Description of Image" class="image_float_right" />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi 
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
 quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil 
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
     </p>
</div>
</body>
</html>

Then add the CSS to our style.css file:

.red_indented {
        color: #FF0033;
        padding-left: 10px;
        font-weight: bold
}

.image_float_right {
        float: right;
        padding: 6px
}

#top_left {
        width:500px;
        background-color: #E1E1E1;
        padding: 3px
}

The fact that I used an id rather than a class for the div means that the div is unique on this page. Classes can be reused multiple times on the same web page where as an id is only used once. The # sign denotes an id where as the . (period) denotes a class in a CSS file.

Hyperlinks
A hyperlink is the key to navigation on the web. Except for manually typing an address in the browser address bar or entering a search phrase in Google or another search engine, navigation happens on the Internet by clicking hyperlinks.

To create a basic hyperlink you need to understand the components of the code. The simplest hyperlink only requires the destination address and anchor text. The destination address is where you go when clicking the hyperlink and the anchor text is the text that is clickable, usually blue and underlined.

Here is the code to create a hyper link to the Google search engine:

<a href="http://www.google.com/">Google</a>

Lists
There are three types of lists used in HTML. They are :
• Bullet lists
• Ordered or Numbered Lists
• Definition Lists (user defined lists)

Here are some examples to create each type:

Bullet Lists (Unordered Lists)
<ul>
      <li>Important Point #1</li>
      <li>Important Point #2</li>
      <li>Important Point #3</li>
</ul>

Output

Important Point #1
Important Point #2
Important Point #3

Ordered Lists (Numbered Lists)
<ol>
      <li>Important Point #1</li>
      <li>Important Point #2</li>
      <li>Important Point #3</li>
</ol>

Output

Important Point #1
Important Point #2
Important Point #3

Definition Lists (User Defined Lists)

<dl>
    <dt>Health</dt>
    <dd>The definition of health</dd>
    <dt>Welfare</dt>
    <dd>The definition of welfare</dd>
</dl>

Health: The definition of health
Welfare: The definition of welfare

Here is the complete html and CSS file including addition of a hyperlink and an unordered list.
test.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="top_left">
<h2>Our Paragraph Heading</h2>
<p class="red_indented">
<img src="http://www.domain.com/images/imagefile.jpg" width="250" height="200" 
alt="Description of Image" class="image_float_right" />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi 
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
 quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil 
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<br/><br/>
<a href="http://www.google.com/">Google</a>
     </p>
<ul>
      <li>Important Point #1</li>
      <li>Important Point #2</li>
      <li>Important Point #3</li>
</ul>
</div>
</body>
</html>

style.css

.red_indented {
        color: #FF0033;
        padding-left: 10px;
        font-weight: bold
}

.image_float_right {
        float: right;
        padding: 6px
}

#top_left {
        width:500px;
        background-color: #E1E1E1;
        padding: 3px
}

A nice little program that can automatically fix markup errors is HTML Tidy. It is effective in correcting markup and is available for a wide range of operating systems.

Bookmark/Search this post with: