HTML

HTML Tutorial

HTML - HyperText Markup Language

Welcome to Tizag.com's HTML Tutorial! Here you will learn the basics of HyperText Markup Language (HTML), so that you may design your own web pages like the one you are viewing right now!

HTML is not a programming language, but rather a markup language. If you already know XML, HTML will be a snap for you to learn. We urge you not to attempt to blow through this tutorial in one sitting. Instead, we recommend that you spend 15 minutes to an hour a day practicing HTML and then take a break to let the information settle in. We aren't going anywhere!

Preparation for HTML

If you are new to HTML and haven't read through our Beginner's Tutorial, please take a few minutes to complete that tutorial before moving on.

Creating an HTML document is easy. To begin coding HTML, you need only two things: a simple-text editor, such as Notepad, and the dedication to follow this tutorial! Notepad is the most basic of simple-text editors, and you will probably code a fair amount of HTML with it in your early stages. Notepad++ is another popular favorite among web developers. These innovative text editors are specialized for writing simple code and they utilize color coding to help you write concise code.

Brief HTML Background

HTML hasn't been around for many years. The first web pages began in November 1990, and back then, there were little to no HTML standards to follow. As a result, a group called the World Wide Web Consortium formed to set standards for coding HTML. We will base our teachings around these widely-accepted coding standards.

Web Pages

Here are some important facts about why web pages are so useful!

They are a low-cost and easy way to spread information to a large audience.
The provide yet another medium you can use to market your business!
They serve as a platform to let the world know about you!

Words to Know

Throughout this tutorial, we will be using several terms that are unique to HTML. It is important for you to understand what these words mean, in the context of HTML.

Tag - Used to tag or "mark-up" pieces of text. Once tagged, the text becomes HTML code to be interpreted by a web browser. Tags look like this: <tag>
Element - A complete tag, having an opening <tag> and a closing </tag>.
Attribute - Used to modify the value of the HTML element. Elements will often have multiple attributes.

For now, just understand that a tag a piece of code that acts as a label that a web browser interprets, an element is a complete tag with an opening and closing tag, and an attribute is a property value that customizes or modifies an HTML element.

HTML - Elements

When you land on a website, all the items you see in front of you -- the paragraph texts, the page banners, and the navigation links are all elements of the web page. The term element is a just a name given to any piece of a web page. Many HTML elements are actually invisible to visitors and work quietly behind the scenes to provide web crawlers and search engines useful information about the site.
An element consists of three essential pieces: an opening tag, the content, and a closing tag.

 - opening paragraph tag
Element Content - "Once upon a time..."
 - closing tag

A Complete HTML Element:

<p>Once upon a time...</p>

A single page can contain hundreds or thousands of elements, but when all is said and done, every HTML page should have a bare minimum of four critical elements: the HTML, head, title, and body elements.

HTML - <html> Element...</html>

<html> is the element that begins and ends each and every web page. Its sole purpose is to hold each web element nicely in position and serves the role of book cover; all other HTML elements are encapsulated within the <html> element. The tag also lets web browsers know, "Hey, I'm an HTML web page!", so that the browser knows how to render it. Remember to close your HTML documents with the corresponding </html> tag to signify the end of the HTML document.
If you haven't already, it is time to open up Notepad, Notepad++, or Crimson Editor and have a new, blank document ready to go. Copy the following HTML code into your text editor.

HTML Element Code:

<html>

</html>

Now save your file by selecting - Menu and then Save. Click on the Save as Type drop down box and select the option All Files. When you're asked to name your file, name it - index.html. Double-check that you did everything correctly and then press - Save. Now open your file in a new web browser so that you have the ability to refresh the page and see any new changes.
If you opened up your index.html document, you should be staring at your very first blank (white) web page!

HTML - <head> Element

The <head> is usually the first element contained inside the <html> element. While it is also an element container that encapsulates other HTML elements, these elements are not directly displayed by a web browser. Instead they function behind the scenes, providing more descriptive information about the HTML document, like its page title and other meta data. Other elements used for scripting (JavaScript) and formatting (CSS) are also contained within the <head> element, and we will eventually introduce how to utilize those languages. For now, the head element will continue to lay empty except for the title element, which will be introduced next.
Here's a sample of the initial setup.

HTML Head Element Code:

<html>

  <head>

  </head>

</html>

If you've made the code changes and refreshed the browser page, you will notice that we still have nothing happening on the page. So far, all we've done is add a couple of necessary elements that describe the web page document to the web browser. Content -- the stuff you can see -- will come next!

HTML - <title> Element

The <title> element adds a title to a web page. Web page titles are displayed at the top of any browser window or at the top of browser tabs. They are probably the first thing seen by web surfers as pages are loaded, and web pages you bookmark are saved using the web pages' titles.
A proper title makes a good first impression, and any page caught without a title is considered unprofessional, at best.

HTML Title Element Code:

<html>

  <head>

    <title>My Web Page!</title>

  </head>

</html>

Save the file and refresh the browser. You should see "My Web Page!" in the upper-left bar of your browser window.
Name your webpage as you please. Just keep in mind that the best titles are brief and descriptive.

HTML - <body> Element

The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of a web page is the <body> element. We will be looking at each of these elements in greater detail as the tutorial progresses, but for now, it's only important to understand that the body element is one of the four critical web page elements, and it contains all of the page's viewable content.

HTML Body Element Code:

<html>

  <head>

    <title>My Web Page!</title>

  </head>

  <body>

    <p>Once upon a time...</p>

  </body>

</html>

Go ahead and view your first complete web page.

HTML - Elements Reviewed

To recap quickly: we've laid out a set of four essential elements that are used to create a strong foundation and structure for your web page. The <html> element encapsulates all page content and elements, including two special elements: the <head> and <body> elements. The <head> element is a smaller container for elements that work behind the scenes of web pages, while the <body> element houses content elements such as web forms, text, images, and web video.
From here on out, the examples we provide will assume that you have a firm understanding of these key elements and know to place the majority of your HTML code inside of the <body> element.

HTML - Tags

A web browser reads an HTML document from top to bottom, left to right. Each time the browser finds a tag, the tag is rendered accordingly. Paragraph tags render paragraph text, image tags render images, etc. By adding tags to an HTML document, you are not only coding HTML, but also signaling to the browser, "Hey look, this is paragraph text; now treat it as such!"
Do you recall that HTML elements are comprised of three major parts: the opening tag, the content, and the closing tag? As you will learn, there are infinite combinations of HTML tags/elements, including those used for forms, images, and lists. Everything displayed on an web page requires the use of a tag or two.

HTML Tag Code:

<tag>Content</tag>

<p>This text will be rendered like a paragraph.</p>

Tags should always be written in lowercase letters if you plan on publishing the page online, as this is the web standard for XHTML and Dynamic HTML.

HTML More Tag Code:

<body>Body Tag

<p>Paragraph Tag</p>

<h2>Heading Tag</h2>

<b>Bold Tag</b>

<i>Italic Tag</i>

</body>

HTML - Elements Without Closing Tags

There are a few elements that do not require formal closing tags. In a way, they still have the 3 parts (opening/closing and content), but they are consolidated into one tag. The reason for this is that these tags do not really require any content to be placed within them, but sometimes may require attributes such as source URLs for images.
One prime, easy example of an HTML tag that does not require a closing tag is the line break tag.

HTML Line Break Code:

<br />

To tell the browser we want to place a line break (carriage return) onto the site, it is not necessary to type linebreak. This would require a tremendous amount of effort,and if every line break tag needed all three components as other tags do, life would become redundant real quick. The better solution is to combine the opening and closing tags into a single format and shorten the number of characters needed to render a line break. Other tags, such as image tags and input tags, have also been modified in such a manner.

HTML Code:

<img src="../mypic.jpg" /> -- Image Tag

<br /> -- Line Break Tag

<input type="text" size="12" /> -- Input Field

Display:

--Line Break--

As you can see from the above, the web browser is capable of interpreting the image tag as long as we inform the browser where the image file is located, using the src attribute. Attributes will be discussed in more detail throughout the remainder of the tutorial. For now, it's a good time to start thinking about what type of website you want to make. It is always easier to make content for a topic or to achieve a goal.

HTML - Text

Text is the backbone of any web page. It plays an double role; it provides content for web surfers to enjoy as they skim through articles and articles of information, but it also gives Search Engines and Spiders keywords and meta data. It is because of text on web pages that we have a network of seemingly endless information available at our fingers.
HTML Text is probably the first element most HTML beginners learn to add to any web page, and this is generally achieved through a classic, "Hello, World!" example.

HTML Text Code:

<html>

  <head>

    <title>My Web Page!</title>

  </head>

  <body>

    Hello World!

  </body>

</html>

HTML - Paragraph Text

Any text containing more than a few lines (or sometimes even more) should exist inside of a paragraph tag . This tag is reserved specifically for blocks of text, such as those you would expect to find inside your favorite novel.

HTML Tag Code:

<html>

  <head>

    <title>My Web Page!</title>

  </head>

  <body>

    <p>Avoid losing floppy disks with important school...</p>

    <p>For instance, let's say you had a HUGE school...</p>

  </body>

</html>

HTML Paragraph Text:

Well written HTML documents can gain popularity through Search Engine Optimization and careful coding of your HTML elements.
Precision is important when writing your code. Web spiders are a little forgiving when it comes to malformed HTML elements. For best results, do your best to ensure your code is complete and accurately constructed.

HTML - Headings 1:6

HTML has heading tags which can be used as headers or subheaders. By placing text inside of an <h1> heading tag, for example, the text displays bold and the size of the text increases to a 24pt font size. Heading tags are numbered 1 through 6, and they change size depending on which tag you choose, with 1 being the largest font size at 24pt, and 6 being the smallest font size at 8pt.

HTML Heading Element:

<body>

  <h1>Headings</h1>

  <h2>are</h2>

  <h3>great</h3>

  <h4>for</h4>

  <h5>titles</h5>

  <h6>and subtitles</h6>

</body>

Place these lines into your HTML file and you should see results similar to what you see below.

HTML Heading Tags:

Headings

are

great

for

titles

and subtitles

Notice that each heading has a line break (a blank line) rendered before and after it. This is a built-in attribute associated with the heading tag. Each time you place a heading tag, your web browser automatically places a line break in front of your beginning tag and after your ending tag, just like it does with tags. This is expected behavior, and as a designer you need to take these line breaks into consideration when designing a layout. Later on, CSS code can be used to remove these extra line breaks or manipulate the amount of spacing, if needed.

HTML - Formatting Text Elements w/ Tags

As you begin to place more and more text elements onto your website, you may find yourself wanting to incorporate bold or italic properties ing your text elements. HTML offers a handful of special tags that can be utilized to do just that:

HTML Text Formatting Tags:

<p>An example of <b>Bold Text</b></p>

<p>An example of <em>Emphasized Text</em></p>

<p>An example of <strong>Strong Text</strong></p>

<p>An example of <i>Italic Text</i></p>

<p>An example of <sup>superscripted Text</sup></p>

<p>An example of <sub>subscripted Text</sub></p>

<p>An example of <del>struckthrough Text</del></p>

<p>An example of <code>Computer Code Text</code></p>

HTML Formatting Text:

An example of Bold Text
An example of Emphasized Text
An example of Strong Text
An example of Italic Text
An example of ^{superscripted Text}
An example of _{subscripted Text}
An example of ~~struckthrough Text~~
An example of Computer Code Text

All of these tags add a pinch of flavor to HTML text elements, from paragraphs to lists and text links

HTML - About Formatting Text Elements

Formatting elements such as should be used sparingly, and what we mean by that is that you should only use them to bold or italicize one or two words at a time. If you wish to bold an entire paragraph, the better solution would involve Cascading Style Sheets (CSS) and adjust the element's font-weight property. You may consult how to do that in our CSS Tutorial. Ultimately, the decision is in the hands of the web designer, but generally, it's best to keep the use of these tags quick and sparse.

HTML - Line Breaks

A line break is used in HTML text elements, and it is the equivalent of pressing Enter or Return on your keyboard. In short, a line break ends the line you are currently on and resumes on the next line. Earlier, we mentioned that each paragraph element begins and ends with a line break, which creates an empty space between the start of a paragraph element and the end of a paragraph element.
As we've mentioned, line break elements are a little different from most of the tags we have seen so far because they do not require a closing tag. Instead, their opening and closing tags are combined into a single line break element. Placing within the code is the same as pressing the return key in a word processor. Use the tag within other elements such as paragraphs ().

HTML Format Text:

<p>

Will Mateson<br />

Box 61<br />

Cleveland, Ohio<br />

</p>

Address:

Will Mateson
Box 61
Cleveland, Ohio

We have created an address for a letterhead and used a line break tag inside of a paragraph element to add some line breaks to make this text appear more like an address. Here's another look as we add a signature element to the same letter.

HTML Text Format:

<p>Lovely,<br />

<br />

<br />

Arya place<br />

Director</p>

Closing Letter:

Lovely,

Arya place
Director

HTML - <pre> Preformatting

A web browser interprets your HTML document as being one long line. Sure, you may have tabs and line breaks in Notepad which align your content so it's easier for you to read, but your browser ignores those tabs and line breaks.
We showed you that you can get around this problem by using the tag, but tabs and spacing are quite different from one another and can be absolutely annoying at times. One simpler solution might be to use the <pre> tag, which stands for previously formatted text.
Use the <pre> tag for any special circumstances where you wish to have the text appear exactly as it is typed. Spaces, tabs, and line breaks that exist in your actual code will be preserved with the <pre> tag.

HTML Pre Code:

<pre>

Roses are Red,

     Violets are blue,

I may sound crazy,

     But I love you!

</pre>

HTML Preformatted Text:

Roses are Red,

     Violets are blue,

I may sound crazy,

     But I love you!

HTML - Attributes

Web page customization begins with HTML attributes. Attributes are like blue print schematics informing the browser how to render an HTML element. As an HTML tag is processed, the web browser looks to these attributes as guides for the construction of web elements. Without any attribute values specified, the browser will render the element using the default setting(s) (usually very boring).
HTML attributes are responsible for customizing web elements. As a web surfer, you've probably seen a vast assortment of color schemes, fonts, and styles -- all of which are brought to you by HTML and CSS element attributes.

HTML - Title Attribute

The title attribute titles an HTML element and adds a tiny text pop-up to any HTML element, offering your web viewers a tool-tip mechanism where information can be found or where a better description of an HTML element can be seen.
Much like the tool tips found in word processing programs, this attribute can add spice to any page while offering the user priceless interactivity. As the mouse hovers over the element, a tool tip is displayed, giving the viewer just one extra piece of information.

HTML Title Attribute:

<h2 title="Hello There!">Titled Heading Tag</h2>

Hover your mouse over the display heading and watch the title attribute in action!

HTML Title Attribute:

Titled Heading Tag

The title attribute is one that has not deprecated and should be used often. Many search engines are capable of identifying this attribute inside your HTML elements, granting increased search rankings based on the relevance of the title attribute text.

HTML - Align Attribute

If you wish to change the horizontal alignment of your elements, you may do so using the align attribute. It allows you to align things left, right, or center. By default, most elements are automatically aligned left, unless otherwise specified.

HTML Align Attribute:

<h2 align="center">Centered Heading</h2>

HTML Align Attribute Display:

Centered Heading

HTML Align Attribute Code:

<h2 align="left">Left-aligned heading</h2>

<h2 align="center">Centered Heading</h2>

<h2 align="right">Right-aligned heading</h2>

HTML Align Attribute Display:

Left-aligned heading

Centered heading

Right-aligned heading

HTML attributes, including align, used to be the primary source for the customization of web elements, but they have now lost their market share to Cascading Style Sheets (CSS). Since most HTML attributes are now deprecated, they should ultimately be avoided in professional-level web design. Nonetheless, having an understanding of HTML attributes will prove to be a tremendous aid for anybody looking to move into professional web development using Cascading Style Sheets.
If you would like to get started now with Cascading Style Sheets, please feel free to move along to our CSS Tutorial.

HTML - Font

The tag provides no real functionality by itself, but with the help of a few attributes, this tag is used to change the style, size, and color of HTML text elements. The size, color, and face attributes can be used all at once or individually, providing users with the ability to create dynamic font styles for any HTML element.
Note: The and <basefont> tags are deprecated and should not be used for published work. Instead, use CSS styles to manipulate your font. See our CSS Tutorial for more information.

HTML - Font Size

Set the size of your font with size. The range of accepted values goes from 1 -- the smallest, to 7 -- the largest. The default size of a font is 3.

HTML Font Size Code:

<p>

<font size="5">Here is a size 5 font</font>

</p>

HTML Font Size Attribute:

Here is a size 5 font.

HTML - Font Color

Set the color of your font with color.

HTML Font Color Code:

<font color="#990000">This text is hex color #990000</font>

<br />

<font color="red">This text is red</font>

HTML Font Color Attribute:

This text is hex color #990000
This text is red

HTML - Font Face

Choose a different font face by specifying any font you have installed. Font face is synonymous with font type. As a web designer, be aware that if you specify a custom font type and users viewing the page don't have the exact same font installed, they will not be able to see it. Instead the chosen font will default to Times New Roman. To reduce the risk of running into this situation, you may provide a list of several fonts with the face attribute, such as outlined below.

HTML Font Face Code:

<p>

<font face="Georgia, Arial, Garamond">This paragraph

 has had its font...</font>

</p>

HTML Font Face Attribute:

This paragraph has had its font formatted by the font tag!

In the example above, we have changed the font face (type) of a paragraph element and specified a list of similar fonts to apply to this element in the case that some of our viewers do not have these fonts installed.

HTML Font - Attribute Review

HTML Font Attributes:

Attribute=	"Value"	Description
size=	"Num. Value 1-7"	Size of your text, with 7 being biggest
color=	"rgb,name,or hexidecimal"	Font color
face=	"name of font"	Font type

Beautiful First Letter Style

Customize your fonts to achieve any desired look.

HTML Code:

<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize

 your font to achieve a desired look.</p>

Beauty & Grace:

Customize your font to achieve a desired look.

HTML - Text Links (Anchors)

The World Wide Web got its spidery name from the plentiful connections (links) that link websites together with the click of a button. What most people don't know is that HTML links are actually HTML anchors constructed using anchor tags (<a>).

HTML Text Link:

<a>I am a text link!</a>

HTML Text Link:

I am a text link!

While the example above appears and feels like a text link when viewed through a web browser, the element is incomplete as it is missing a vital attribute that references another web page called a Hypertext Reference (href).

HTML - Hypertext Reference (href)

A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location. In other words, this Hypertext Reference is where users will navigate to if they do click on this link. Use the demonstration below as a reference.

HTML Text Link Code:

<a href="http://www.tizag.com/" target="_blank">Tizag Home</a>

<br />

<a href="http://www.espn.com/" target="_blank">ESPN Home</a>

<br />

<a href="http://www.yahoo.com/" target="_blank">Yahoo Home</a>

HTML Text Links:

ESPN Home
Yahoo Home

The address of a website is called a Uniform Resource Locator (a URL), and it acts like a street address for a website as a user is directed from one site to another. There are different types of URLs, and each has a slightly different look. The examples above link to what are known as Global URLs, since they are external web addresses that do not reside on the Tizag.com domain. Here's a look at the different types of URLs.

HTML Text Link Code:

Global - href="http://www.cnn.com/" Links to other domains outside your website domain.

Local - href="../internal/mypage2.html"   Links to other pages within your website domain.

Internal - href="#anchorname" Links to anchors embedded in the current web page.

HTML - Link Targets

The target attribute defines how each link will open when clicked. Will each one open in a new window, or will each one open in the current browser window? As the web designer, you call the shots as to how a user navigates from page to page, so long as you know how to handle the target attribute.

Link Targets:

Target=	Description
_blank	Opens new page in a new browser window
_self	Loads the new page in the current window
_parent	Loads new page into a parent frame
_top	Loads new page into the current browser window, cancelling all frames

The two most important values are the top two, (target="_blank" and target="_self"). The _self value is generally the default. It loads each new page in the current browser window, while _blank opens up a new web browser window with each click of the text link.
The code below shows how you would link to ESPN.com, a popular sports website. The target attribute is added to allow the browser to open ESPN in a new window, so that the viewer can have a window that remains opened to our website. Here's the example.

HTML Link Target Code:

<a href="http://www.ESPN.com" target="_blank">ESPN.COM</a>

_blank Target:

ESPN.COM

Links are a big part of the user experience for any website. Always try to keep that in mind when working on a site's navigation. A web page that opens a new web browser window each time a user clicks a link is not the greatest way to entice users to stick around.

HTML - Email Links

Creating an email link is simple. If you want people to mail you about your site, a good way to do it is place an email link with a subject line already filled out for them.

HTML Email Link Code:

<a href="mailto:email@tizag.com?subject=Feedback" >Email@tizag.com</a>

Email Links:

Email@xyz.com

In some circumstances, it may be necessary to fill in the body of the email for the user as well.

HTML Email Link Code:

<a href="mailto:email@tizag.com?subject=Feedback&body=Sweet site!">

Email@tizag.com</a>

Complete Email:

Email@xyz.com

HTML - Download Links

Placing files available for download is done in exactly the same fashion as placing text links. However, things become complicated if we want to place image links for download. The best solution for images is to use a thumbnail links, which we will discuss in the next lesson.

HTML Download Link Code:

<a href="http://www.tizag.com/pics/htmlT/blanktext.zip">Text Document</a>

Download a Text Document:

Text Document

HTML - Default Links; Base

Use the <base> tag in the head element to set a default URL for all links on a page to go to. It's always a good idea to set a base tag just in case your links become bugged somewhere down the line. Usually, you should set your base to your home page.

HTML Base Link Code:

<head>

  <base href="http://www.tizag.com/" />

</head>

HTML - Comments

Comments are a great asset to new developers and a great way to place little notes to yourself reminding yourself what pieces of code are doing what. Comments are also great ways to troubleshoot bugs and code errors, as they give you the ability to comment out lines of code one at a time to search for the exact line causing problems.

As a sprouting young web developer, HTML code comments are your friends! A comment is a way to control which lines of code are to be ignored by the web browser and which lines of code to incorporate into your web page. There are three main reasons why you may want your code to be commented out or ignored.

Comment out elements temporarily rather than removing them, especially if they've been left unfinished.
Write notes or reminders to yourself inside your actual HTML documents.
Create notes for other scripting languages like JavaScript which requires them.

Comment Tags:

<!-- Opening Comment Tag
-- > Closing Comment Tag

As you can see, comments are also comprised of an opening and closing tag, (). Like other HTML elements, these tags can span across multiple lines of code, allowing you to comment out large blocks of HTML code. Any HTML elements that are encapsulated inside of the comment tags will be ignored by the web browser. This makes comment tags quite useful for debugging, as they allow the developer to temporarily comment out pieces of an HTML document without having to immediately delete the code from the HTML document.

HTML Comment Code:

<!--Note to self: This is my banner image! Don't forget -->

<img src="http://www.tizag.com/pics/tizagSugar.jpg" height="100" width="400" />

Comment to self:

Placing notes and reminders to yourself is a great way to remember your thoughts and to keep track of elements embedded inside the web page. Also, your code may exist for many, many years, and these notes to yourself are a great way to remember what was going on, since you may not remember five or more years down the road.
All combinations of text placed within the comment tags will be ignored by the web browser. This includes any HTML tags, scripting language(s), etc.

HTML -

As a web designer, you may sometimes have different websites in progress at once, and it might be easy to leave some HTML elements unfinished. In this case, you may comment out an element until it is 100% ready for the site. Below, we have commented out an input form element, since we are not quite ready to receive input from our users.

HTML Code:

<!-- <input type="text" size="12" /> -- Input Field -->

Now when we are ready to show that element, we can simply remove the comment tags, and our browser will readily display the element!

HTML Code:

<input type="text" size="12" />

Input Field:

Comment out elements and bits of code that you may want to recall and use at a later date. Nothing is more frustrating than deleting bits of code only to turn around moments later and realize that you now need to recode them.

HTML - Lists

HTML lists appear in web browsers as bulleted lines of text. There are actually three different types of HTML lists, including unordered lists (bullets), ordered lists (numbers), and definition lists (think: dictionaries). Each list type utilizes its own unique list tag, which we'll demonstrate below.

HTML List Item Code:

<body>

     <ul>

          <li>I am a list item!>

          <li>I am a list item too!>

          <li>I am a list item also!>

     </ul>

</body>

HTML List Items:

I am a list item!
I am a list item too!
I am a list item also!

The actual list tags themselves, such as <ul>, are nothing but container elements for list items (<li>). They work behind the scenes to identify the beginning and ending of an HTML list element.

HTML - Unordered Lists

An unordered list (<ul>) signifies to a web browser that all list items contained inside the <ul> tag should be rendered with a bullet preceding the text. The default bullet type for most web browsers is a full disc (black circle), but this can be adjusted using an HTML attribute called type.

HTML Default Bullet List Code:

<h4 align="center">Shopping List</h4>

<ul>

  <li>Milk</li>

  <li>Toilet Paper</li>

  <li>Cereal</li>

  <li>Bread</li>

</ul>

HTML Default Disc Bullets:

Shopping List

Milk
Toilet Paper
Cereal
Bread

To render a list with a different bullet type, add a type attribute to the unordered list element. Using the same code in the example above, replace the <ul> line from the previous example with any of the lines listed below to change the bullet from disc shape to another shape.

HTML Unordered List Type Code:

<ul type="square">

<ul type="disc">

<ul type="circle">

HTML Unordered List Types:

type="square"	type="disc"	type="circle"
Milk Toilet Paper Cereal Bread	Milk Toilet Paper Cereal Bread	Milk Toilet Paper Cereal Bread

HTML - Ordered Lists

An ordered list is defined using the <ol> tag, and list items placed inside of an ordered list are preceded with numbers instead of bullets.

HTML Numbered/Ordered List:

<h4 align="center">Goals</h4>

<ol>

  <li>Find a Job</li>

  <li>Get Money</li>

  <li>Move Out</li>

</ol>

HTML Numbered List:

Goals

Find a Job
Get Money
Move Out

The numbering of an HTML list can be changed to letters or Roman Numerals by once again adjusting the type attribute.

HTML Code:

<ol type="a">

<ol type="A">

<ol type="i">

<ol type="I">

Ordered List Types:

Lower-Case Letters	Upper-Case Letters	Lower-Case Numerals	Upper-Case Numerals
Find a Job Get Money Move Out	Find a Job Get Money Move Out	Find a Job Get Money Move Out	Find a Job Get Money Move Out

The start attribute allows you to further customize an HTML ordered list by setting a new starting digit for the ordered list element.

HTML Numbered List Start Attribute:

<h4 align="center">Goals</h4>

<ol start="4" >

  <li>Buy Food</li>

  <li>Enroll in College</li>

  <li>Get a Degree</li>

</ol>

HTML Numbered List Start - 4:

Goals

Buy Food
Enroll in College
Get a Degree

HTML - Definition Term Lists

HTML definition lists (<dl>) are list elements that have a unique array of tags and elements; the resulting listings are similar to those you'd see in a dictionary.

<dl> - opening clause that defines the start of the list
<dt> - list item that defines the definition term
<dd> - definition of the list item

These lists displace the word term (<dt>) in such a way that it rests just above the definition element (<dd>) to offer a very unique look. For best, results we suggest bolding the definition terms with the bold tag .

HTML Definition List Code:

<dl>

  <dt><b>Fromage</b></dt>

    <dd>French word for cheese.</dd>

  <dt><b>Voiture</b></dt>

    <dd>French word for car.</dd>

  </dt>

</dl>

HTML Definition List Display:

Fromage
French word for cheese.
Voiture
French word for car.

HTML - Images & Pictures

Images are a staple of any web designer, so it is very important that you understand how to use them properly. In order to place an image onto a website, one needs to know where the image file is located within the file tree of the web server -- the URL (Unified Resource Locator).
Use the <img /> tag to place an image on your webpage. Like the tag, <img /> tag does not require a formal ending tag. Instead, all we need to do to close this tag out with a slash (/) placed just inside the ending bracket (/>).

HTML Image Code:

<img src="http://www.tizag.com/pics/htmlT/sunset.gif" />

HTML Image:

So that you can follow along with us, we've provided a global URL of an image we have stored on Tizag's web server. If you have an active connection to the internet, you should be able to use the URL in the example to render this image on your own web page. If not, you will have to download (right click the image and Save As...on a PC, control-click and Save on a Mac). Once saved to your local computer, point the image src attribute to the recently downloaded image file. It might help to save the image file in the same folder as your web page.

HTML - Image src Attribute

The source attribute (src) is what makes an image tag display an image. An image source is a URL value and should point to the directory location of an image file. Let's take one more look at the code from our first HTML image example.

HTML Image Code:

<img src="http://www.tizag.com/pics/htmlT/sunset.gif" />

An image source value is essentially the URL of a picture file and tells the web browser where the image is located so that it can then display the image correctly.

HTML - Source URLs

Image source URLs can be either local or global, meaning that the picture files you wish to display on your website can be either hosted locally on your machine (local) or hosted elsewhere on some other web site domain (global).

Global: http://www.tizag.com/pics/htmlT/sunset.gif
Local: pics/sunset.gif

Local URLs are relative to the file path of the web page itself. For example, if the picture file is placed inside the same directory as the web page, then the local URL for the image would simply be the name of the image, since it is residing in the same directory as the HTML page.

Local URLs Explained:

Local Src	Location Description
src="sunset.gif"	picture file resides in same directory as .html file
src="pics/sunset.gif"	picture file resides in the pics directory
src="../sunset.gif"	picture resides one folder "up" from the .html file
src="../pics/sunset.gif"	picture file resides in the pics directory, one folder "up" from the .html file.

Pictures must reside on the same web host as your .html file in order for you to use local URLs. A URL cannot contain drive letters such as C:\, since a src URL is a relational interpretation based on the location of the.html file and the location of the picture file. Something like src="C:\www\web\pics\" will not work.
Each URL format has its pros and cons. Using the URL of pictures on other sites poses a problem if the other site happens to change the physical location of the picture file. Copying the file directly to your web server solves this problem. However, as you continue to upload picture files to your system, you may eventually run short on hard drive space. Use your best judgment based upon your situation.

HTML - Image Height and Width Attributes

Height and width are HTML attributes that define an element's height and width properties. These values can either be percentage-based (%) or rely on pixel sizes.

HTML Height and Width Attributes:

<img src="sunset.gif" height="50" width="100" />

HTML Height and Width (Pixels):

Above, we've used hard-coded pixel values for the height and width of the sunset image to ensure that this image will always render 50 pixels high by 100 pixels wide. By hard-coding these values, we are ensuring that the image will only display 50 pixels high by 100 pixels wide, even if the picture file itself happens to be much larger. If the dimensions of the picture are much larger, then we risk some severe skewing as the browser tries to shrink our image into our small box.
Height and width values can also be a percentage. Percentage values are relative to the parent HTML element (usually the body), which means if you have a parent element like a <body> element that is the whole screen (1024x768), then an image with a height and width of 100% will take up that entire body element (1024x768). In our example below, we have placed the image in a table element that is about 400 pixels wide by 200 pixels tall.

HTML Height and Width Code:

<table height='200' width='400'>

  <tr>

    <td>

      <img src="sunset.gif" height="100%" width="100%">

    </td>

  </tr>

</table>

HTML Height and Width (Percentage):

This image is now pixelated, having been rendered to fill the 400x200 table element. The reason we are seeing a low-quality, pixelated rendering of the image is because the actual image file is much smaller than 400x200 and has been stretched by the web browser because we coded it to do so.
Here's a few things to remember when trying to place images on your web page:

Maintain the same height to width ratio. The ratio is critical, and must be maintained to avoid skewing.
Always scale down. -- Larger images will always scale down nicely and continue to look sharp.

If no height or width attribute is specified inside the <img> tag, the browser will use the actual dimensions of the image file to render the image. This can cause problems with the page layout if the picture file is too large, as other HTML elements will be moved further down the page in the event of an over-sized image.
Another concept to keep in mind is that as a browser begins rendering HTML components, it handles them one after another in sequence. Before it can move from one element on to the next, the browser needs to know the size and shape of an element. If this information is provided in the tag, that's one less step required by the browser to render an image element and will result in the page loading faster for your users.

HTML - Alternative Attribute

The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled in their web browser settings. Text-only browsers greatly depend on the alt attribute since they are not capable of displaying pictures.

HTML Alternative Attribute (alt):

<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />

HTML Alternative Text Attribute:

The alt attribute is also an attribute that search engines may look for when displaying images. The text value contained within this attribute must reflect the substance of the image in order to receive "credit" from a search engine.

HTML - Horizontally Align Images

Images can be aligned horizontally to the right or to the left of other elements using the align attribute. Image elements are aligned to the left by default.

align

right
left

HTML Align Attribute Code:

<img src="sunset.gif" align="right">

HTML Image Align: Right:

As you can see, the image's right edge has now been aligned with the right edge of the display box. Since the display box is the parent element, this is the desired behavior for the align attribute. If we take this example a step further, you can achieve some really great designs by embedding aligned images inside of paragraph elements.

HTML Image Align Code:

<p>This is paragraph 1, yes it is...</p>

<p>

<img src="sunset.gif" align="right">

The image will appear along the...isn't it?

</p>

<p>This is the third paragraph that appears...</p>

Image Wrap Around:

This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this image alignment works.
The image will appear along the right-hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, this picture would be perfect. But we aren't talking about that, so it's rather a waste, isn't it?
This is the third paragraph that appears below the paragraph with the image!

HTML Gifs vs. Jpegs vs. PNGs

Gifs are best used for banners, clip art, and buttons. The main reason for this is that .gif files can have transparent backgrounds -- a priceless attribute when it comes to web design. On the down side, .gif files are limited to only 256 colors and any .gif image containing more than a few colors tends to have a larger file size than their .jpeg or .png counterparts. Large picture files are a plague of web design!
Jpegs have an unlimited color wheel and a high compression rate, which downsizes your load times and saves on hard drive space. Although .jpeg (or .jpg) files don't allow for transparent backgrounds, their size/quality ratio is outstanding. It's best to use .jpeg files for photo galleries or artwork. Avoid using .jpeg files for graphical designs, though; stick to using them for thumbnails, backgrounds, and photo galleries.
PNG image files are the best of both worlds. They have a large color wheel, low file size, and allow for transparencies like .gif images do. With a high-compression rate and transparent coloring, they might just be the best format for any web graphics.
When in doubt, try saving an image in multiple formats and decide which is better, keeping file size and quality in mind.

HTML - Image Links

Image links are constructed as you might expect, by embedding an <img> tag inside of an anchor element <a>. Like HTML text links, image links require opening and closing anchor tags, but instead of placing text between these opening and closing tags, the developer needs to place an image tag -- with a valid source attribute value of course.
If you do not know how to use the image tag, please take a minute and review the HTML Image lesson before reading further.

HTML Image Link Code:

<a href="http://www.espn.com" target="_blank">

 <img src="ahman.gif" />

</a>

HTML Image Link:

By default, many browsers add a small border around image links. This default behavior is intended to give web viewers the ability to quickly decipher the difference between ordinary images and image links. Since this default is different from web browser to web browser, it may be best to squelch this ambiguity and set the border attribute of the image tag to 0 or 1.

HTML Image Border Code:

<a href="http://www.espn.com" target="_blank">

  <img src="ahman.gif" border="0" />

</a>

HTML Image Link; No Border:

HTML - Thumbnails

Thumbnails are by far the most common type of image link seen in today's world. To create a thumbnail, one must save a low-quality version of a picture with smaller dimensions. Then, one should link this low-quality picture to its higher-quality counterpart.
Thumbnails are intended to give your audience quick previews of images without them having to wait for the larger, higher-quality image to load. Photo galleries make heavy use of thumbnails, and they will allow you to display multiple pictures on one page with ease.

HTML Thumbnail Code:

<a href="sunset.gif">

  <img src="thmb_sunset.gif" />

</a>

HTML - Tables An HTML table is an element comprised of table rows and columns, much like you'd see when working with an application such as Excel. Tables are container elements, and their sole purpose is to house other HTML elements and arrange them in a tabular fashion -- row by row, column by column.
Tables may seem difficult at first, but after working through this lesson, you'll see that they aren't so horrible. A table element consists of three different HTML tags including the <table> tag, <tr> (table rows), and the <td> (table columns) tags.

HTML Table Code:

<table border="1">

  <tr>

    <td>Row 1 Cell 1</td>

    <td>Row 1 Cell 2</td>

  </tr>

  <tr>

    <td>Row 2 Cell 1</td>

    <td>Row 2 Cell 2</td>

  </tr>

</table>

Basic HTML Table Layout:

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

We've adjusted the formatting of the code by adding additional spaces before some of the table elements, but this has no bearing on the rendering of the element. It simply helps keep track of each tag/element and helps us ensure we don't miss an opening or closing tag which would prevent our table element from rendering correctly. We've also added a border attribute to ensure the table cells/rows are more visible to our readers.
Content elements like HTML lists, images, and even other table elements can be placed inside each table cell. Doing so aligns the elements in a tabular fashion and provides structure.

HTML Table Code:

<table border="1">

  <tr>

    <td width="50%">

      <ul>

        <li>List Item 1</li>

        <li>List Item 2</li>

        <li>List Item 3</li>

      </ul>

    </td>

    <td>

      <ul>

        <li>List Item 4</li>

        <li>List Item 5</li>

        <li>List Item 6</li>

      </ul>

    </td>

  </tr>

  <tr>

    <td>

      <p>Avoid losing floppy disks with important school...</p>

    </td>

    <td>

      <a href="http://www.espn.com" target="_blank" rel="nofollow">

        <img src="http://www.tizag.com/pics/htmlT/ahman.gif" class="linksESPN" />

      </a>

    </td>

  </tr>

</table>

HTML Table 2:

List Item 1 List Item 2 List Item 3	List Item 4 List Item 5 List Item 6
Avoid losing floppy disks with important school...

HTML tables allow the web designer to align page content in a tabular fashion while spanning elements horizontally across the web page, rather than stacking them up one on top of another.

HTML - Table Rows & Table Columns

A table can contain an infinite number of table rows. Each table row is essentially a table element itself, with an opening and closing tag (<tr> </tr>). Table columns are also considered child elements of HTML tables, and like table rows, an HTML table may contain an infinite number of table data cells (<td> <tr>).
Table rows and columns are container elements that house other HTML elements such as text links, images, and lists, as we've seen in previous examples. Below, we've applied a background color to the table example in order to help distinguish the different table elements.

HTML Table Code:

<table border="1">

  <tr title="You are looking at Row 1" bgcolor="silver">

    <td>Row 1 Cell 1</td>

    <td>Row 1 Cell 2</td>

  </tr>

  <tr title="You are looking at Row 2" bgcolor="aqua">

    <td>Row 2 Cell 1</td>

    <td>Row 2 Cell 2</td>

  </tr>

</table>

HTML Table Code Example:

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

HTML - Tables: Spanning Multiple Rows and Cells

Use rowspan to span multiple rows merging together table rows and colspan to span across multiple columns.

HTML Table Rowspan Attribute:

<table border="1">

  <tr>

    <td><b>Column 1</b></td>

    <td><b>Column 2</b></td>

    <td><b>Column 3</b></td>

  </tr>

  <tr>

    <td rowspan="2">Row 1 Cell 1</td>

    <td>Row 1 Cell 2</td>

    <td>Row 1 Cell 3</td>

  </tr>

  <tr>

    <td>Row 2 Cell 2</td>

    <td>Row 2 Cell 3</td>

  </tr>

  <tr>

    <td colspan="3">Row 3 Cell 1</td>

  </tr>

</table>

HTML Colspan and Rowspan Attributes:

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Cell Padding and Spacing

With the cellpadding and cellspacing attributes, you will be able to adjust the spacing between table cells. Setting the cellpadding attribute determines how much space will exist between a table cell border and the elements contained within it, whereas cellspacing determines how much space will exist between each table cell. Color has been added to the table below to emphasize these attributes.

HTML Cellpadding/Cellspacing Code:

<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">

  <tr>

    <td><b>Column 1</b></td>

    <td><b>Column 2</b></td>

  </tr>

  <tr>

    <td>Row 1 Cell 1</td>

    <td>Row 1 Cell 2</td>

  </tr>

  <tr>

    <td>Row 2 Cell 1</td>

    <td>Row 2 Cell 2</td>

  </tr>

</table>

HTML Cellspacing and Padding:

Column 1	Column 2
Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

And now we will change the cellpadding of the table and remove the cellspacing from the previous example. This should clearly demonstrate the difference between cellpadding and cellspacing.

HTML Code:

<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)">

  <tr>

    <td><b>Column 1</b></td>

    <td><b>Column 2</b></td>

  </tr>

  <tr>

    <td>Row 1 Cell 1</td>

    <td>Row 1 Cell 2</td>

  </tr>

  <tr>

    <td>Row 2 Cell 1</td>

    <td>Row 2 Cell 2</td>

  </tr>

</table>

HTML Cell Pads:

Column 1	Column 2
Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

The value you specify for padding and spacing is interpreted by the browser as a pixel value. So a value of 10 is simply 10 pixels wide. Most HTML attributes that use numeric values for their measurements represent a pixel value.

HTML - The bgcolor Attribute

The bgcolor attribute is used to set the background color of an HTML element. Bgcolor is one of those attributes that has become deprecated with the implementation of Cascading Style Sheets. The reason we've included it in this tutorial is because it will give us an opportunity to introduce web colors and also add some life to our HTML web page as we continue to progress through this tutorial. It will serve as a visual aid for you as you are learning the mechanics of building a table.
Without much effort, we can bring that boring white web page to life by adding some color with the bgcolor attribute.

HTML Bgcolor Code:

<body bgcolor="silver">

  <p>This page now has a SILVER background!</p>

</body>

HTML Bgcolor:

This page now has a SILVER background!

HTML - Web Colors

Our example uses the text value, which is one of three different types of color values that can be used with the bgcolor attribute. Below is a table of the 16 basic HTML color values that are available to HTML web designers.

HTML Basic Colors:

Black	Gray	Silver	White
Yellow	Lime	Aqua	Fuchsia
Red	Green	Blue	Purple
Maroon	Olive	Navy	Teal

While the table above illustrates only 16 colors, 16 is surely not the limit to our color wheel. As we mentioned, HTML supports three different types of color values including text values (which we've pretty much covered above), numeric, (RGB) and hexadecimal values. We'll go into more detail regarding these values so just sit tight. This next example offers a sneak peak at what these values may look like.

HTML Code:

<table bgcolor="#ff0000" border="1"><tr>

<td>A red colored table background using hexadecimal values "#FF0000".</td>

</tr></table>

<table bgcolor="rgb(0, 0, 255)" border="1"><tr>

<td>A blue colored table background using numeric, RGB values "rgb(0, 0, 255)".</td>

</tr></table>

<table bgcolor="lime" border="1"><tr>

<td>A lime colored table background using color names.</td>

</tr></table>

Table Bgcolor Values:

A lime colored table background using color names.

A red colored table background using hexadecimal values "#FF0000".

A blue colored table background using numeric, RGB values "rgb(0, 0, 255)".

Hexadecimal and numeric color values (RGB) allow HTML developers to expand the color wheel beyond 16 colors. Way beyond 16, in fact. Nonetheless, there's no need to memorize 256+ unique color combinations; instead, we can use numeric and hexadecimal values and calculate color shades. We'll show you how to use them in our HTML Color Codes page.

HTML - Coloring Fonts, Table Rows, & Table Columns

Here's a few common examples of bgcolor in action.

HTML Bgcolor Code:

<table>

  <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>

  <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>

  <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>

  <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>

  <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>

  <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>

</table>

Alternating Table Row Colors:

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

Check out this "Scoreboard" we made with the use of font color and bgcolor!

HTML Code:

<table bgcolor="#000000">

  <tr><td bgcolor="#009900" align="right">

    <font color="#FFFF00">Green Bay</font></td>

    <td><font color="#FFFFFF">13</font></td></tr>

  <tr><td bgcolor="#0000FF" align="right">

    <font color="#DDDDDD" >New England</font></td>

    <td><font color="#FFFFFF">27</font></td>

  </tr>

</table>

Scoreboard:

Green Bay	13
New England	27

HTML - Color Codes

Let's first review the 16 generic color values we mentioned previously before diving into the other, more complicated HTML coloring systems of numeric and hexadecimal values.

HTML String Color Codes:

Black	Gray	Silver	White
Yellow	Lime	Aqua	Fuchsia
Red	Green	Blue	Purple
Maroon	Olive	Navy	Teal

Any of the string values listed above such as "teal", "black", or "gray" can be passed as a color value to the HTML bgcolor attribute.

HTML Bgcolor Code Values:

bgcolor="purple"

HTML - Colors: Numeric (RGB) Values

We do not recommend that you use RGB for safe web design because there are still a handful of internet browsers that do not support numeric color values. However, these values may pop up from time to time, and it is a good idea to have an understanding of how they work.
Colors shown on a computer monitor or any digital device are constructed using various amounts of red, green, and blue light. By blending together different amounts of each color of light, a computer monitor is able to display millions of different colors depending on the quality of the computer monitor. This concept is precisely what HTML numeric (RGB) values use. They specify the amount of each of the different colors of light to blend together (red, green, and blue light).
In a numeric color value the RGB stands for Red, Green, Blue (as in light) and the format for a RGB value is rgb(RED, GREEN, BLUE), just like the name implies. A numeric color value is essentially a comma-separated list of values ranging from 0 (none of that color) to 255 (fully that color) that are interpreted and then mixed together by the web browser and ultimately passed to the computer monitor for display.

Red, Green, and Blue Values:

bgcolor="rgb(255,0,0)"	Red
bgcolor="rgb(0,255,0)"	Green
bgcolor="rgb(0,0,255)"	Blue
bgcolor="rgb(0,0,0)"	Black
bgcolor="rgb(255,255,255)"	White
bgcolor="rgb(120,120,120)"	Grey
bgcolor="rgb(240,40,120)"	Pink

HTML Coloring System - Hexadecimal

The hexadecimal system is complex and difficult to understand at first. Rest assured that the system becomes much, MUCH easier with practice, and as a blossoming web developer, it is critical that you understand hexadecimals to be capable of using them in your own websites. They are far more reliable, and are more widely compatible with web browsers, and are currently the web standard for coloring HTML elements.

HTML Color: Hexadecimal Code:

<!-- Hexadecimal Color Value -->

bgcolor="#004488"

A hexadecimal is a 6-digit numeric representation of a color, comprised of three different components (the red, the green, and the blue). The first two digits (00) represent a red value, the next two (44) are a green value, and the last (88) are the blue value. These three sets of values combined form the final color shade.

Hexadecimal Formula: 2 digits at a time:

([first_digit]* 16) + ([second_digit]) =  primary color value

Let's apply this formula to an example and see how it works!

HTML Color: Hexadecimal Example Code:

bgcolor="#004488"

We now know that this six digit value is actually three separate values working together to create a single shade. Let's separate each value and perform some calculations based on the formula we have listed above.

00 - represents the Red value.
44 - represents the Green value.
88 - represents the Blue value.

Hexadecimal Formula: Calculated:

<!-- Red Value 00 -->

(0 * 16) + (0) = 0 red value

<!-- Green Value 44 -->

(4 * 16) + (4) = 68 green value

<!-- Blue Value 88 -->

(8* 16) + (8) = 144 blue value

By applying this formula to each value pair, we now have a value that resembles the rgb(0,68,144) values we've seen before.
But now for the curve ball. Since hexadecimal values are limited to six single digits, you may assume that the value #999999 is the largest hexadecimal value that is possible. This is not the case. The hexadecimal system uses letters (A-F) to represent values greater than nine. But why? This is an excellent question.
It's probably easiest to understand by working through the calculation of our supposed maximum hexadecimal value #999999.

Hexadecimal Formula: #999999 Calculated:

<!-- Red Value 99 -->

(9 * 16) + (9) = 153 red value

<!-- Green Value 99 -->

(9 * 16) + (9) = 153 green value

<!-- Blue Value FF -->

(9 * 16) + (9) = 153 blue value

Based on the calculations above, we are seeing a maximum value of rgb(153,153,153). This does not coincide with numeric values that have a maximum value of rgb(255,255,255) and it greatly limits what would be the available color spectrum. Therefore, letters are deployed to represent numbers and this is what makes it possible to extend the color wheel threshold to the max.
The table below identifies how each letter (A-F) corresponds to the hexadecimal numeric equivalent.

Hexadecimal Color Values:

Decimal	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Hexadecimal	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

Taking a look at the next few calculations, you should be able to see that, by using letters, we are able to extend the color wheel giving HTML developers a greater selection of color options for web page designers.

HTML Color: Hexadecimal Example Code:

bgcolor="#AA93FF"

Hexadecimal Formula: Calculated:

<!-- Red Value AA -->

(10 * 16) + (10) = 170 red value

<!-- Green Value 93 -->

(9 * 16) + (3) = 147 green value

<!-- Blue Value FF -->

(15 * 16) + (15) = 255 blue value

HTML Color: Hexadecimal Example #2:

bgcolor="#CC7005"

Hexadecimal Formula: Example #2 Calculated:

<!-- Red Value CC -->

(12 * 16) + (12) = 204 red value

<!-- Green Value 70 -->

(7 * 16) + (0) = 112 green value

<!-- Blue Value 05 -->

(0 * 16) + (5) = 5 blue value

HTML - Color Chart

Below is the hexadecimal representation for an array of HTML background colors. The hexadecimal value that you see displayed in each box represents the value to get the background color of that cell.
If you would like more information about using HTML color, check out our HTML Color Codes lesson.

HTML Color Values:

#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF

#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF

#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF

HTML Color Values Continued:

#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF

#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF

#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

HTML - Background

HTML background is the HTML attribute used to place pictures in the background of HTML elements. Like the bgcolor attribute, background is now deprecated and its use has been replaced by the use of CSS. However, this lesson does cover some important aspects of background elements that do apply to both the deprecated HTML background and the new CSS backgrounds as well.
When we think of an HTML background, we generally have only two options: a solid background color or a background image. The backgrounds of both the background color and image grow or shrink dynamically with the growth and shrinkage of the HTML element they are contained in.

HTML Background Image Code:

<table height="100" width="150"

 background="http://www.tizag.com/pics/htmlT/background.jpg" >

<tr><td>This table has a background image</td></tr>

</table>

Background Image:

This table has a background image

HTML - Background Repeat

In the first example, we specified predetermined height and width attributes that matched the dimensions of the image we used in the background of the table element. Everything looks great. But we will run into problems if we add more content to the table itself and this element's height increases in size. The image begins to repeat itself to fill in the extended regions, which may look awful.

HTML Repeating Background Image:

<table height="200" width="150"

 background="http://www.tizag.com/pics/htmlT/background.jpg" >

<tr><td>This table has a background image</td></tr>

</table>

Repeating Background:

This table has a background image

More often than not, this behavior causes more pain than pleasure, and as web designers, we have two options. We can either live with it (until learning how to squelch it with CSS code) or, use this behavior to our advantage by thinking outside the box.

HTML - Transparent Background Images

In the HTML Images lesson, we mentioned that .gif and .png image types can be saved with transparencies and incorporated into HTML pages. By doing so, we can create HTML elements with a semi-transparent background colors, that can be used to create overlay effects for our web pages.
Transparency can be added to any image via photo editing software, and if you don't currently have such software installed, feel free to download our transparent image from this example via this link: Transparent Backgrounds
Let's now place another background image inside of a table as we did in the previous example, but this time, let's use an image that's a little bit better-suited for a background. This one has a small amount of transparency.

Transparent Background Images:

<table height="163" width="480" background="http://www.tizag.com/files/html/htmltransparentbackground.png" cellspacing="0" cellpadding="0">

  <tr>

    <td>

    </td>

  </tr>

</table>

Transparent Background Example:

As the code suggests, we've created a semi-transparent (.png) file to use as the background of the table. Doing so allows the color from this web page to radiate through the image, tinting it blue.

HTML - Background Repeat Revisited

Now that we are more familiar with transparent HTML backgrounds, we can take our previous example a step further and create a very nice effect called a gradient overlay. To do this, we're going to take advantage of the repeating behavior of HTML background images and create a transparent gradient image file that is the same width as the target image (480 pixels), but only 1 pixel tall.
If you do not wish to create your own transparent gradient then, download ours! - HTML Transparent Background Images

Gradient Overlay Code:

<table height="163" width="480" background="http://www.tizag.com/files/html/htmltransparentbackground.png" cellspacing="0" cellpadding="0">

  <tr>

    <td>

      <table height="163"width="480" background="http://www.tizag.com/files/html/htmltransparentgradient.png">

        <tr>

          <td></td>

        </tr>

      </table>

    </td>

  </tr>

</table>

Gradient Overlay Example:

The gradient image we have provided is 480 pixels wide and only 1 pixel tall. We've done this for two reasons. Although the image is only 1 pixel tall, the web browser continues to repeat this image indefinitely, or for the entire height specified using the height attribute (163 pixels in this case). Additionally, reducing the size of the image to 1 pixel in height drastically reduces the file size and will tremendously improve page performance.

HTML

HTML - Elements

A Complete HTML Element:

HTML - <html> Element...</html>

HTML Element Code:

HTML - <head> Element

HTML Head Element Code:

HTML - <title> Element

HTML Title Element Code:

HTML - <body> Element

HTML Body Element Code:

HTML - Elements Reviewed

HTML - Tags

HTML Tag Code:

HTML More Tag Code:

HTML - Elements Without Closing Tags

HTML Line Break Code:

HTML Code:

Display:

HTML - Text

HTML Text Code:

HTML - Paragraph Text

HTML <p> Tag Code:

HTML Paragraph Text:

HTML - Headings 1:6

HTML Heading Element:

HTML Heading Tags:

Headings

are

great

for

titles

and subtitles

HTML - Formatting Text Elements w/ Tags

HTML Text Formatting Tags:

HTML Formatting Text:

HTML - About Formatting Text Elements

HTML - Line Breaks

HTML Format Text:

Address:

HTML Text Format:

Closing Letter:

HTML - <pre> Preformatting

HTML Pre Code:

HTML Preformatted Text:

HTML - Attributes

HTML - Title Attribute

HTML Title Attribute:

HTML Title Attribute:

Titled Heading Tag

HTML - Align Attribute

HTML Align Attribute:

HTML Align Attribute Display:

Centered Heading

HTML Align Attribute Code:

HTML Align Attribute Display:

Left-aligned heading

Centered heading

Right-aligned heading

HTML - Font

HTML - Font Size

HTML Font Size Code:

HTML Font Size Attribute:

HTML - Font Color

HTML Font Color Code:

HTML Font Color Attribute:

HTML - Font Face

HTML Font Face Code:

HTML Font Face Attribute:

HTML Font - Attribute Review

HTML Font Attributes:

Beautiful First Letter Style

HTML Code:

Beauty & Grace:

HTML - Text Links (Anchors)

HTML Text Link:

HTML Text Link:

HTML - Hypertext Reference (href)

HTML Text Link Code:

HTML Text Links: