Showing posts with label HTML. Show all posts

HTML Introduction

Introduction to HTML

What is an HTML File?

HTML stands for Hyper Text Markup Language

File extension:	.HTML, .htm
MIME type:	text/HTML
Type code:	TEXT
Uniform Type Identifier:	public.HTML
Developed by:	W3C
Type of format:	markup language
Extended to:	XHTML
Standard(s):	W3C HTML 4.01

An HTML file is a text file containing small markup tags

The markup tags tell the Web browser how to display the page

An HTML file must have an htm or HTML file extension

An HTML file can be created using a simple text editor

What Is Markup Language

A markup language combines text and extra information about the text.

The extra information, for example about the text's structure or presentation, is expressed using markup, which is intermingled with the primary text. The best-known markup language in modern use is HTML (HyperText Markup Language), one of the foundations of the World Wide Web. Historically, markup was (& is) used in the publishing industry in the communication of printed work between authors, editors, and printers.

Creating an HTML document

Creating an HTML document is very easy. To begin coding HTML , need only two things: a simple-text editor and the dedication to follow this tutorial! Notepad is the most basic of simple-text editors and you will probably code a good amount of HTML with it.

HTML is platform independent, you will need to save your HTML files in standard text format, sometimes known as ASCII. The easy way to do this is use a program like notepad.exe in Windows, pico in Linux, and the like.

If you'd prefer to use a word processor like Word or WordPerfect to write HTML code, you can do so, but need to save your files as "Text" or "Text Only. " You will see this option in a drop down box in your "Save As..." screen.

If you use a word processor and forget to save it as Text format, you will see only garbled data when you try to view the page with a web browser.

The Most Common Mistake

The most common mistake for designers is the urge to put the d:\ in links and images . When you are on the web, there is no d:\ to the rest of the world. When you start out, keep all your HTML files and images in one folder, and don't use d:\ at all.

Quick example:

<img> loads an image into a web page. If you have a file called flower.jpg, use the code <img src="flower.jpg"> to load it, not <img src="c:\My Documents\website\flower.jpg">

Frequently Asked Questions

» What is HTML?

HyperText Markup Language:
HTML is a plain text file with commands <markup tags> to tell Web browsers how to display the file. Tim Berners-Lee created HTML while at CERN, (the European Laboratory for Particle Physics) in Geneva.

» My page looks good on one browser, but not on another.

There are slight differences between browsers, such as Netscape Navigator and Microsoft Internet Explorer, in areas such as page margins. The only real answer is to use standard HTML tags whenever possible, and view your pages in multiple browsers to see how they look.

» Does my computer have to run Windows? What about a Mac?

You can do all your training on a non-Windows computer like a Mac. However, some of the examples in our advanced classes require a newer version of Windows, like Windows 98 or Windows 2000.

» How do I know if my HTML is correct?

It's good to validate your HTML. Just because you can see the Web page ok on your browser doesn't mean every browser will show it that way, or even be able to access the Web page. Browsers attempt to "work around" HTML errors, and the differences can be subtle or drastic. That's why the folks at WC3 have worked up the specifications of what works for every browser. Although some may display it a little different, at least you know they can access your page. (The different browser programs have their own set of "whistles and bells" that just won't do the same... especially Microsoft Internet Explorer and Netscape Navigator.)

» After I have edited an HTML file, I cannot view the result in my browser. Why?

Make sure that you have saved the file with a proper name and extension like "c:\mypage.htm". Also make sure that you use the same name when you open the file in your browser.

HTML Elements

HTML documents are text files made up of HTML elements.

HTML elements are defined using HTML tags.

What Is An HTML Element

An HTML element indicates structure in an HTML document and a way of arranging content hierarchically. An HTML element is an SGML element that meets the requirements of one or more of the HTML DTDs (Document Type Definitions ). These elements have properties: both attributes and content, as specified (both allowable and required) according to the appropriate HTML DTD . Elements may represent paragraphs, headings, hypertext links, lists, embedded media, and a variety of other structures.

Syntactically HTML elements are constructed with:

    1) a start tag marking the beginning of an element;
    2) any number of attributes (and their associated values);
    3) some amount of content (characters and other elements)'; and
    4) an end tag.

Many HTML elements include attributes in their start tags. Attributes are defining desired behavior or indicating additional element properties. The end tag is optional for many elements. There are a few elements that are not part of any official DTDs, yet are supported by some browsers and used by some web pages. Such elements may be ignored or displayed improperly on browsers not supporting them.

HTML Tags
Informally, HTML elements are sometimes referred to as "tags", though many prefer the term tag strictly in reference to the semantic structures delimiting the start and end of an element.
	HTML tags are used to mark-up HTML elements
	HTML tags are surrounded by the two characters < and >
	The surrounding characters are called angle brackets
	HTML tags normally come in pairs like <i> and </i>
	The first tag in a pair is the start tag(<i>), the second tag is the end tag(</i>)
	The element content is the text between the start and end tags
	HTML tags are not case sensitive, <b> means the same as <B>

Why do We Use Lowercase Tags?

Start using lowercase tags, if you want to prepare yourself for the next generations of HTML. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML - the next generation HTML - demands lowercase tags.

HTML Basic Tags

HTML Basic

The basic tags include <HTML>, <title>, <meta>, and <body>.

<HTML>

This tag is used to indicate that this is an HTML document.

Most HTML documents should start and end with this tag.

<head>

This tag is used to indicate the header section of the HTML document, which typically includes the <title> and <meta> tags, and is not displayed in the main window of the browser.

<title>

This tag indicates the title of this HTML page. The title is what is displayed on the upper left corner of the browser when you view a web page. For example, right now you can see there "Basic Tags: HTML, head, title, meta, body". That is the title of this page.
The title tag is important when it comes to search engine ranking. Many of the search engines pay special attention to the text in the <title> tag. This is because (logically) that words in the <title> tag indicate what the page content is.

<meta>

The <meta> tag information is not directly displayed when the page is rendered on the browser. Rather, this is used for the author of the HTML page to record information related to this page. Two common attributes are name and content. The <meta> tag used to hold great importance in search engine optimization, with authors carefully drafting what's inside the tag to gain better search engine ranking, but recently its importance has been decreasing steadily.

<body>

The <body> tag includes the HTML body of the document. Everything inside the <body> tag (other than those within the <script> tag) is displayed on the browser inside the main browser window.

The <body> tag may contain several attributes. The most commonly used ones are listed below:

bgcolor: This is the background color of the entire HTML document, and may be specified either by the color name directly or by the six-digit hex code.
alink: The color of the links.
vlink: The color of the visited links.
topmargin: The margin from the top of the browser window.
leftmargin: The margin from the left of the browser window.

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading.

Line Breaks

The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

HTML Formatting

HTML defines a lot of elements for formatting output, like bold or underline text.

<font>

The <font> tag is used to change the format of the text on the web page.

The most important attributes are as follows:

face: The type of font. Common ones include "Time New Roman", "Verdana", and "Helvetica."

size: This indicates the size of the text. This can be absolute (0 .. 6), or relative ("+1", ... or "-1",...)

color: This attribute indicates the color of the text. Either the color name or the six-character color code may be used to specify color.

<font size=2 face="Helvetica" color=red>This illustrates the attributes of the font tag.</font>

Text Formatting Tags
<b>
The <b> tag will bold the text inside the tag.
<i>
The <i> tag will italicize the text inside the tag.
<u>
The <u> tag will underline the text inside the tag.
<center>
The <center> tag causes all the text within the tag to be centered.
<p>
The <p> tag indicates a new paragraph. It is the same as <br><br>. This tag is most often used by itself, without a corresponding closing tag.
<big>
Defines big text
<em>
Defines emphasized text
<small>
Defines small text
<strong>
Defines strong text
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<ins>
Defines inserted text
<del>
Defines deleted text

"Computer Output" Tags
<code>
Defines computer code text
<kbd>
Defines keyboard text
<samp>
Defines sample computer code
<tt>
Defines teletype text
<var>
Defines a variable
<pre>
Defines preformatted text

HTML Entities

HTML Character Entities

Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text.

An entity is a fancy term for a symbol. Several symbols such as copyright, trademark, or foreign cash symbols exist outside of the ones you see on your keyboard. In order to display them. In order to display these characters, you need to know 4 parts.

In HTML we use less than and greater than characters to create tags, so to use them on your web site you will need entities.

A Character Entity has three parts:

Each begins with an ampersand - &

An entity name or a # and an entity number

And finally a semicolon - ;

HTML Links

A link is a connection from one Web resource to another


A link has two ends(anchors) and a direction.
The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).

The Anchor Tag and the Href Attribute

HTML uses the anchor (<a>) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. We can create links that can jump directly into a specific section on a page, using named anchors instead of letting the user scroll around to find what he/she is looking for.

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

To create a named anchor the name attribute is used. The name of the anchor can be any text you care to use.

The line below defines a named anchor:

<a name="main">Main Section</a>

You should notice that a named anchor is not displayed in a special way.

To link directly to the a section, add a # sign and the name of the anchor to the end of a URL, like this:

<a href="http://www.testsworld.com/HTML_links.asp#main"> Jump to the Main Section</a>

A hyperlink to the Main Section from within the file "HTML_links.asp" will look like this:

<a href="#main">Jump to the Main Section</a>

The Target Attribute

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

Below is the syntax of a named anchor:

<a href="http://highprsocialbookmarkings.blogspot.com/" target="_blank">Visit highprsocialbookmarkings!</a>

HTML Frames

With frames, you can display more than one Web page in the same browser window.

Frames allow for multiple ".HTML" documents to be displayed inside one browser window at a time.

Frames - A Generic Frame Page

Most typically frames are used to have a menu in one frame, and content in another frame.

When someone clicks a link on the menu then that web page is opened on the content page.

Here is an example of a basic "index" frameset with a menu on the left and content on the right.

Using frames, You can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

The web developer must keep track of more HTML documents
It is difficult to print the entire page

The Frameset Tag

The <frameset> tag defines how to divide the window into frames
Each frameset defines a set of rows or columns
The values of the rows/columns indicate the amount of screen area each row/column will occupy

The Frame Tag

The <frame> tag defines what HTML document to put into each frame

In the below example we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_x.htm" is put into the first column, and the HTML document "frame_y.htm" is put into the second column:

HTML Tables

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.

Tables

Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and
each row is divided into data cells (with the <td> tag).
The letters td stands for "table data," which is the content of a data cell.
A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1">
    <tr>
         <th>Heading</th>
         <th>Another Heading</th>
    </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 2p</td>
    </tr>
</table>

Tables and the Border Attribute

The table will be displayed without any borders if you do not specify a border attribute . Sometimes this can be useful, but most of the time, you want to show the borders.

To display a table with borders, you will have to use the border attribute:

Spanning Multiple Rows and Cells

Use rowspan to span multiple rows & colspan to span multiple columns.

To display a table with borders, you will have to use the border attribute:

<table border="1">
    <tr>
         <td>column1</td>
         <td>column2</td>
         <td>column3</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>

O/P:

column1	column2	column3
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

You will be able to adjust the white space on your tables with the cellpadding and cellspacing attributes .

Padding represents the distance between cell borders and the content within, while spacing defines the width of the border.

O/P: Table without Cell Padding and Spacing

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

O/P: Table with Cellspacing

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

O/P: Table with Cellpadding

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML Lists

HTML offers authors several mechanisms for specifying lists of information

There are 3 different types of lists.

<ul> - unordered list; bullets
<ol> - ordered list; numbers
<dl> - definition list; dictionary

Unordered Lists

An unordered list is a list of items. With bullets the list items are marked (typically small black circles).

An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.

In three flavors the bullet comes :
squares    <ul type="square">
discs    <ul type="disc">
circles    <ul type="circle">

O/P:

list item1
list item2

O/P:

list item1
list item2

O/P:

list item1
list item2

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An unordered list starts with the <ol> tag.
Each list item starts with the <li> tag.

O/P:

list item1
list item2

Using the start attribute start your ordered list on any number besides 1.

O/P:

list item1
list item2

There are 4 other types of ordered lists. You can replace generic numbers with
Roman numberals or letters,both capital and lower-case.
Use the type attribute to change the numbering.

O/P:

list item1
list item2

O/P:

list item1
list item2

O/P:

list item1
list item2

O/P:

list item1
list item2

Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms.

A definition list starts with the <dl> tag.
Each definition-list term starts with the <dt> tag.
Each definition-list definition starts with the <dd> tag.

<dl>
    <dt>Definition list term1</dt>
    <dd>Definition list definition1</dd>
    <dt>Definition list term1</dt>
    <dd>Definition list definition1</dd>
</dl>

O/P:

Definition list term1: Definition list definition1
Definition list term2: Definition list definition1

HTML Forms

HTML Forms and Input

A form is simply an area that can contain form fields.

Form fields are objects that allow the visitor to enter information - for example text boxes, drop-down menus or radio buttons.

Forms

An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)

A form is defined with the <form> tag.

Form's Action Attribute

This attribute specifies a form processing agent. User agent behavior for a value other than an HTTP URI is undefined.

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. Usually the file defined in the action attribute does something with the received input.

Form's Method Attribute

Method attribute specifies which HTTP method will be used to submit the form data set. Possible (case-insensitive) values are "get" (the default) and "post".

One can specify two different submission methods for a form in HTML. The difference between METHOD="GET" (the default) and METHOD="POST" is primarily defined in terms of form data encoding. The official recommendations say that "GET" should be used if and only if the form processing is idempotent, which typically means a pure query form. Generally it is advisable to do so. There are, however, problems related to long URLs and non-ASCII character repertoires which can make it necessary to use "POST" even for idempotent processing.

get: With the HTTP "get" method, the form data set is appended to the URI specified by the action attribute (with a question-mark ("?") as separator) and this new URI is sent to the processing agent.

post: With the HTTP "post" method, the form data set is included in the body of the form and sent to the processing agent.

enctype

This attribute specifies the content type used to submit the form to the server (when the value of method is "post"). The default value for this attribute is "application/x-www-form-urlencoded". The value "multipart/form-data" should be used in combination with the INPUT element, type="file".

Input

The most used form tag is the <input> tag. The type of input is specified with the type attribute.

Text Fields

Text fields are used when you want the user to type something(letters, numbers, etc.) in a form. In most browsers, by default the width of the text field is 20 characters.

<form>
      First name:
      <input type="text" name="firstname">
      <br>
      Last name:
      <input type="text" name="lastname">
</form>

O/P:

Password Fields

Password fields are a special type of <input /> tag. All that we need to do is change the type attribute from text to password.

O/P:

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

<form>
      <input type="radio" name="sex" value="male"> Male
      <br>
      <input type="radio" name="sex" value="female"> Female
</form>

O/P:

Checkboxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

O/P:

Textarea

A text-area is a multi-line text input control. A user can write text in the text-area. In a text-area you can write an unlimited number of characters.

Rows and columns need to be specified as attributes to the <textarea> tag. Rows are roughly 12pixels high, the same as in word programs and the value of the columns reflects how many characters wide the text area will be.

Another attribute to be aware of is the wrap. Wrap has 3 values.

wrap=
      "off"
      "virtual"
      "physical"

Virtual means that the viewer will see the words wrapping as they type their comments, but when the page is submitted to you, the web host, the document sent will not have wrapping words.

Physical means that the text will appear both to you, the web host, and the viewer including any page breaks and additional spaces that may be inputed. The words come as they are.

Off turns off word wrapping within the text area. One ongoing line.

<form>
      <textarea rows="5" cols="20" wrap="physical" name="comments">
      Enter Comments Here
      </textarea>
</form>

O/P:

Drop Down Lists

With the <select> and <option> tags drop down menues are created.
<select> is the list itself and each <option> is an available choice for the user.

<form>
      <select name="ourSites">
           <option>vyomworld.com</option>
           <option>testsworld.com</option>
           <option>jobsassist.com</option>
           <option>vyomlinks.com</option>
           <option>sourcecodesworld.com</option>
           <option>coolinterview.com</option>
           <option>tasty-food.com</option>
      </select>
</form>

O/P:

Selection List

Selection list is basically just another type of way to get input from the user.
The size attribute selects how many options will be shown at once before needing to scroll, and the selected option tells the browser which choice to select by default.

<form>
      <select multiple name="ourSites" size="4">
           <option>vyomworld.com</option>
           <option>testsworld.com</option>
           <option>jobsassist.com</option>
           <option>vyomlinks.com</option>
           <option>sourcecodesworld.com</option>
           <option>coolinterview.com</option>
           <option>tasty-food.com</option>
      </select>
</form>

O/P:

Submit Button

The submit button will send all input form data to the destination declared in the form action command. If you do not give your submit button a value the button will display Submit Query by default. Placing any other text in the value will display within the button.

<form>
      First name:
      <input type="text" name="firstname">
      <br>
      Last name:
      <input type="text" name="lastname">
      <br>
      <input type="submit" value="Submit Here">
</form>

O/P:

HTML Images

You can display images in a document.

Placing An Image On Your Page

Here's the format for placing an image:

Here's What's Happening

IMG

IMG stands for "image."

It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image tag.

SRC

SRC stands for "source." This again is an attribute, a command inside a command. The value of the src attribute is the URL of the image you want to display on your page. It's telling the browser where to go to find the image. Again, it's best for you to place the images you want to use in the same directory as the page. This way you can call for the image by name alone. If you start to place your images all over the place, you'll have to start adding directories and sub-directories to the SRC attribute. And at this point, that is way too confusing. Just place the image in the same place as the HTML document that will call for it and then call for the image by name alone. You can get fancy later. Right now, let's just get it to work.

image.gif

image.gif is the name of the image. Notice it's following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).

ALT

ALT stands for "alternate text". This tells the browser that if it can't find the image, then just display this text. It also tells anyone who can't view your image what the image is about. For example a disabled user using a screen reader, or dare I mention it, Search Engines.

"some text"

"some text" is where you put the text describing your image.

Image Formats

There are four basic formats you will find on the World Wide Web

.gif

gif This is pronounced "jif" or "gif" (hard "G") depending on whom you speak to. I have always said "jif", like the peanut butter. This is an acronym for Graphics Interchange Format. The format was invented by Compuserve and it's very popular. The reason is that it's a simple format. It's a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television's picture is created much the same way. Browsers can handle this format quite easily.

.png

.png .png Pronounced as 'ping', this stands for Portable Network Graphic. This is ultimately the replacement for .gif, with partial transparency options, but browser support is sometimes disappointing, so try experimenting but don't expect miracles in older browsers! Even some of the newer ones don't like partial transparency.

.jpeg or .jpg

.jpeg or .jpg (pronounced "j-peg") There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format.The format is unique in that it uses compression after it's been created. That's fancy computer talk that means that when the computer is not using a .jpeg image it folds it up and puts it away. For example, if the picture is 10K bytes when displayed, it may be only 4K bytes when stored. Nice trick, huh? It saves on hard drive space, but also tends to require a bit of memory on your part to unfold the image.Someone always writes to me to tell me that .gif images also use compression. Yes, they do, but only when they are first created into that format. After that, no compression. JPEG, on the other hand, uses compression throughout its life to fold up smaller than it really is.

.bmp

.bmp (pronounced "bimp") This is a "bitmap." You will probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A bitmap is an image that a computer produces and places for you. A counter is an example.
Even though Internet Explorer will allow you to place an image as a BMP, I wouldn't. No other browsers will be able to display it. Go with .gif or JPEG.

HTML Background

HTML Backgrounds

Make textures, colors, and pictures as your page background!

Backgrounds

The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.

Bgcolor

This attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name:

The lines above all set the background-color to black.

Background

The background attribute specifies a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.

The URL can be relative (as in the first line above) or absolute (as in the second line above).

HTML Colors

Colors are displayed combining RED, GREEN, and BLUE light sources.

Color Values

Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).

RGB Values

RGB stands for Red, Green, Blue. Each can have a value from 0 (none of that color) to 255 (fully that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies.

We do not recommend that you use RGB for safe web design because non-IE browsers do not support HTML RGB. However, if you plan on learning CSS then you should glance over this topic.

bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue
bgcolor="rgb(0,0,0)" Black

Hexadecimal

Hexadecimals are far more reliable and widely compatible among web browsers and are the standard for colors on the internet.

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).

Hex numbers use 16 digits:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Zero, "0", is the smallest representations of a color. It's almost the total absence of color. F is 15 times the intensity of the color of 0. Combinations of these digits create different shades of a particular color. Double Zero, "00," is equal to zero hue. FF is equal to a pure color.

This color representation is done three times, once for red, once for green, and once for blue, in that order. Put the three, two-digit, codes together and you get a 6-digit hex code. The hex code is just a representation of the red, green, and blue intensity, in that order. The computer creates the three intensities, mashes them together, and you get a single shade of color.

Color Names

Colors can be defined using color names also.

The 16 Basic Colors:

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

HTML Colorvalues

HTML Color Values

Colors are displayed combining RED, GREEN, and BLUE light sources.

Color Values

HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex #00). The highest value is 255 (hex #FF).

HTML Colornames

HTML Color Names

Colors can be defined using color names.

HTML Color Names

The table below provides a list of color names.

HTML Quick List

HTML 4.01 Quick List

HTML Basic Document

<HTML>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</HTML>

Heading Elements

<h1>Largest Heading</h1> <h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a> A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

Unordered list

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Ordered list

<ol>
<li>First item</li>
<li>Next item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Frames

Forms

<form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60" cols="20"></textarea>

</form>

Entities

Other Elements

<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>

Introduction to HTML

What is an HTML File?

What Is Markup Language

Creating an HTML document

The Most Common Mistake

Frequently Asked Questions

HTML Elements

What Is An HTML Element

Why do We Use Lowercase Tags?

HTML Basic

<HTML>

<head>

<title>

<meta>

<body>

Headings

Line Breaks

Comments in HTML

HTML Formatting

<font>

Text Formatting Tags

<b>

<i>

<u>

<center>

<p>

<big>

<em>

<small>

<strong>

<sub>

<sup>

<ins>

<del>

"Computer Output" Tags

<code>

<kbd>

<samp>

<tt>

<var>

<pre>

HTML Character Entities

HTML Links

The Anchor Tag and the Href Attribute

The Anchor Tag and the Name Attribute

The Target Attribute

HTML Frames

Frames - A Generic Frame Page

The Frameset Tag

The Frame Tag

HTML Tables

Tables

Headings in a Table

Tables and the Border Attribute

Spanning Multiple Rows and Cells

Cell Padding and Spacing

HTML Lists

Unordered Lists

Ordered Lists

Definition Lists

HTML Forms and Input

Forms

Form's Action Attribute

Form's Method Attribute

enctype

Input

Text Fields

Password Fields

Radio Buttons

Checkboxes

Textarea

Drop Down Lists

Selection List

Submit Button

HTML Images

Placing An Image On Your Page

Here's What's Happening

Image Formats

HTML Backgrounds

Backgrounds