Cape It Unit 2 Notes Mod 2 So 13 HTML PDF

NOTES March 2014
Cape IT UNIT 2 Mod 2 SO 13
Construct web pages Design, code, construct web pages using HTML,
authoring tools, Hyperlinks
Website: http://www.w3schools.com
http://www.html.am/
WEB HTML NOTES
This HTML tutorial contains hundreds of HTML examples.
With our online HTML editor, you can edit the HTML, and click on a button to view the result.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
 The DOCTYPE declaration defines the document type
 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading
 The text between <p> and </p> is displayed as a paragraph
What is HTML?
HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language

 HTML is a markup language
 A markup language is a set of markup tags
 The tags describe document content
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
HTML Tags
HTML markup tags are usually called HTML tags
 HTML tags are keywords (tag names) surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, with a forward slash before the tag name
 Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>
Cape IT UNIT 2 Mod 2 SO 13 – Web Page using HTML www.w3school.com 1

HTML Elements
"HTML tags" and "HTML elements" are often used to describe the same thing.
But strictly speaking, an HTML element is everything between the start tag and the end tag, including
the tags:
HTML Element:
<p>This is a paragraph.</p>
Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read
HTML documents and display them as web pages.
The browser does not display the HTML tags, but uses the tags to determine how the content of the
HTML page is to be presented/displayed to the user:
HTML Page Structure

Below is a visualization of an HTML page structure:
<html>
<body>
<h1>This a heading</h1>
<p>This is another paragraph.</p>
</body>
</html>
Writing HTML Using Notepad or TextEdit

HTML can be edited by using a professional HTML editor like:
 Adobe Dreamweaver
 Microsoft Expression Web
 CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We
believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.

Step 1: Start Notepad
To start Notepad go to:
Start
All Programs
Accessories
Notepad
Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad:
Step 3: Save Your HTML

Select Save as.. in Notepad's file menu.
When you save an HTML file, you can use either the .htm or the .html file extension. There is no
difference, it is entirely up to you.
Save the file in a folder that is easy to remember, like w3schools.
Step 4: Run the HTML in Your Browser

Start your web browser and open your html file from the File, Open menu, or just browse the folder
and double-click your HTML file.
The result should look much like this:

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading</h1>
Try it yourself »
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is another paragraph.</p>
Try it yourself »
HTML Links
HTML links are defined with the <a> tag.
Example
<a href="http://www.w3schools.com">This is a link</a>
Try it yourself »
Note: The link address is specified in the href attribute.
(You will learn about attributes in a later chapter of this tutorial).
HTML Images
HTML images are defined with the <img> tag.
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Try it yourself »
Note: The filename and the size of the image are provided as attributes.
HTML Elements
An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a href="default.htm"> This is a link </a>
<br>
* The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Element Syntax

 An HTML element starts with a start tag / opening tag
 An HTML element ends with an end tag / closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
 Empty elements are closed in the start tag
 Most HTML elements can have attributes
Tip: You will learn about attributes in the next chapter of this tutorial.
Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.
HTML Document Example

<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The example above contains 3 HTML elements.
HTML Example Explained

The <p> element:
The <p> element defines a paragraph in the HTML document.

The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element:
<body>
</body>
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:
<html>
<body>
</body>
</html>
The <html> element defines the whole HTML document.

The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
Don't Forget the End Tag

Some HTML elements might display correctly even if you forget the end tag:
<p>This is a paragraph
The example above works in most browsers, because the closing tag is considered optional.
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the
end tag .
Empty HTML Elements

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the
proper way of closing empty elements in XHTML (and XML).
HTML Tip: Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML
tags.
W3Schools use lowercase tags because the World Wide Web Consortium
(W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.
HTML Attributes
 HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"
Attribute Example
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example

<a href="http://www.w3schools.com">This is a link</a>
Try it yourself »
Always Quote Attribute Values

Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style quotes are also allowed.
Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single
quotes: name='John "ShotGun" Nelson'
HTML Tip: Use Lowercase Attributes

Attribute names and attribute values are case-insensitive.
However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in
their HTML 4 recommendation.
Newer versions of (X)HTML will demand lowercase attributes.
HTML Attributes Reference

A complete list of legal attributes for each HTML element is listed in our: HTML Tag Reference.
Below is a list of some attributes that can be used on any HTML element:
Attribute Description
class Specifies one or more class names for an element (refers to a class in a style sheet)
id Specifies a unique id for an element
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
How to use HTML color codes?

With HTML color codes you can set the color of web site background, color of text, cells in tables and much
more.
Using HTML color codes for web site background color:
<body style="background:#80BFFF">
Using HTML color codes for setting font/text color:
<span style="color:#80BFFF">
Using HTML color codes for table background color:
<table style="background:#80BFFF">
Using HTML color code for link color:
<a style="color:#80BFFF">
http://www.html.am/html-codes/background-code/

HTML Color Codes Theory
So you are wondering "Does this weird combination of letters and numbers have any meaning?" Well the answer
is "Yes" and this is how it goes:)
HTML Codes format:

Each HTML code contains symbol "#" and 6 letters or numbers. These numbers are in hexadecimal numeral
system. For example "FF" in hexadecimal represents number 255 in Decimal.
Meaning of symbols:
The first two symbols in HTML color code represents the intensity of red color. 00 is the least and FF is the most
intense. The third and fourth represents intensity of green and fifth and sixth represents the intensity of blue. So
with combining the intensity of red, green and blue we can mix almost any color that our heart desire;)
Examples:
#FF0000 - With this HTML code we tell browser to show maximum of red and no green and no blue. The result is
of course pure red color:
#00FF00 - This HTML code shows just green and no red and blue. The result is:
#0000FF - This HTML code shows just blue and no red and green. The result is:
#FFFF00 - Combination of red and green color gives us yellow:
#CCEEFF - Take some red a bit more of green and maximum of blue to get color of sky:
http://html-color-codes.info/
Backgrounds for the Whole Page
To set the background properties for the whole page, simply apply the property/properties to the body element.
<html>
<head>
</head>
<body style="background-color:#eeeeee;">
...content goes here...
</body>
http://www.quackit.com/html/codes/html_background_codes.cfm
<html>
<body style="background-color:#c0c0c0;"
Bacvg
<font color="green"><center><h1><font size="15"> SUZI'S FLOWER POT </h1></center>
</font></font size>
<body>
Scrolling Text
This page contains HTML code for creating scrolling text.
You can create scrolling text in HTML using <marquee> tags. You can make your text scroll from right to left. You can make it
scroll left to right. You can make it bounce back and forth. You can make it scroll up or down. You can even make your text zoom
in from the side and stay in the same place.
Usability of Marquees
You should be careful when using marquees in HTML. Many web users dislike websites that contain scrolling text and other
elements, so try to use them tastefully :)
Also note that the <marquee> tag is not part of the official HTML specification. Having said that, it is recognized by most major
browsers.

More Marquee Codes
You can do much more with HTML marquees than is covered on this page. Here's the full list of marquee codes on this website:
 Scrolling Text http://www.html.am/html-codes/marquees/scrolling-text.cfm

 Slide-In Text http://www.html.am/html-codes/marquees/slide-in-image.cfm
 Bouncing Text http://www.html.am/html-codes/marquees/bouncing-text.cfm
 Scrolling Image http://www.html.am/html-codes/marquees/scrolling-image.cfm
 Slide-In Image http://www.html.am/html-codes/marquees/slide-in-image.cfm
 Bouncing Image http://www.html.am/html-codes/marquees/bouncing-image.cfm
http://www.html.am/html-codes/marquees/scrolling-text.cfm
HTML Paragraphs
Paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Try it yourself »
Note: Browsers automatically add an empty line before and after a paragraph.
Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:
Example
<p>This is another paragraph
Try it yourself »
The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce
unexpected results or errors.
Note: Future version of HTML will not allow you to skip end tags.
HTML Line Breaks

Use the <br> tag if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a para<br>graph with line breaks</p>
Try it yourself »
The <br> element is an empty HTML element. It has no end tag.
HTML Output - Useful Tips

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create
different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines
count as one line, and any number of spaces count as one space.
Try it yourself
(The example demonstrates some HTML formatting problems)
Examples from this page

HTML paragraphs
How HTML paragraphs are displayed in a browser.
Line breaks
The use of line breaks in an HTML document.
Poem problems
Some problems with HTML formatting.
More Examples
More paragraphs
The default behaviors of paragraphs.
HTML Tag Reference

W3Schools' tag reference contains additional information about HTML elements and their attributes.
Tag Description
<p> Defines a paragraph
<br> Inserts a single line break
HTML Text Formatting
This text is bold
This text is italic
This is computer output
superscript
This is subscript and
Try it yourself »
HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).
Often <strong> renders as <b>, and <em> renders as <i>.
However, there is a difference in the meaning of these tags:
<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be rendered in a way that the user understands as

"important". Today, all major browsers render strong as bold and em as italics. However, if a browser one
wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!
Try it Yourself - Examples

Text formatting
How to format text in an HTML document.
Preformatted text
How to control the line breaks and spaces with the pre tag.
"Computer output" tags

How different "computer output" tags will be displayed.
Address
How to define contact information for the author/owner of an HTML document.
Abbreviations and acronyms

How to handle abbreviations and acronyms.
Text direction
How to change the text direction.
Quotations
How to handle long and short quotations.
Deleted and inserted text

How to mark deleted and inserted text.
Marked/Highlighted text
How to mark/highlight text.
HTML Text Formatting Tags

Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML "Computer Output" Tags

Tag Description
<code> Defines computer code text

<kbd> Defines keyboard text
<samp> Defines sample computer code
<var> Defines a variable
<pre> Defines preformatted text
HTML Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<q> Defines an inline (short) quotation
<cite> Defines the title of a work
<dfn> Defines a definition term
HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

Note: There is an exclamation point (!) in the opening tag, but not in the closing tag.
Comments are not displayed by the browser, but they can help document your HTML.
With comments you can place notifications and reminders in your HTML:
Example


Try it yourself »
Comments are also great for debugging HTML, because you can comment out HTML lines of code, one
at a time, to search for errors:
Example

Try it yourself »
Software Program Tags

HTML comments tags can also be generated by various HTML software programs.
For example the  tags which are wrapped inside HTML comments by FrontPage.
As a rule, let these tags stay, to help support the software.

Conditional Comments
Only Internet Explorer recognizes conditional comments.
Conditional comments enable you to add a browser specific code that executes only if the browser is IE
but is treated as a comment by other browsers.
You can add conditional comments to your HTML document by using the following syntax:
Example

HTML Hyperlinks (Links)

The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another
document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red
HTML Link Syntax

The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.w3schools.com/">Visit W3Schools</a>
which will display like this: Visit W3Schools
Clicking on this hyperlink will send the user to W3Schools' homepage.
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.
HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
Example
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Try it yourself »
HTML Links - The id Attribute

The id attribute can be used to create a bookmark inside an HTML document.
Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
An anchor with an id inside an HTML document:
<a id="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
Basic Notes - Useful Tips

Note: Always add a trailing slash to subfolder references. If you link like this:
href="http://www.w3schools.com/html", you will generate two requests to the server, the server will
first add a slash to the address, and then create a new request like this:
href="http://www.w3schools.com/html/".
Norwegian Mountain Trip
Try it yourself »

Insert images
How to insert images into an HTML document.
Insert images from different locations

How to insert an image from another folder or another server.
(You can find more examples at the bottom of this page).

HTML Images - The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of
the src attribute is the URL of the image you want to display.
Syntax for defining an image:
<img src="url" alt="some_text">
The URL points to the location where the image is stored. An image named "boat.gif", located in the
"images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag
between two paragraphs, the browser shows the first paragraph, then the image, and then the second
paragraph.
HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<img src="smiley.gif" alt="Smiley face">
The alt attribute provides alternative information for an image if a user for some reason cannot view it
(because of slow connection, an error in the src attribute, or if the user uses a screen reader).
HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
Tip: It is a good practice to specify both the height and width attributes for an image. If these
attributes are set, the space required for the image is reserved when the page is loaded. However,
without these attributes, the browser does not know the size of the image. The effect will be that the
page layout will change during loading (while the images load).

Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading
images takes time, so my best advice is: Use images carefully.
Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from
a web server and inserts it into the page. Therefore, make sure that the images actually stay in the
same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken
link icon is shown if the browser cannot find the image.
HTML Table Example:

Firstname Lastname Points
Jill Smith 50
Eve Jackson 94

John Doe 80
Adam Johnson 67

Basic HTML tables
How to create basic tables in HTML.
A table with borders

How to add borders to a table.
A table with collapsed borders

How to make the borders collapse.
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag. (tr stands for table row)
A row is divided into data cells with the <td> tag. (td stands for table data)
A row can also be divided into headings with the <th> tag. (th stands for table heading)
The <td> elements are the data containers in the table.
The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.
The width of a table can be defined using CSS.
Example
<table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it yourself »
An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:
Example
<table border="1" style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it yourself »
However, the border attribute is on its way out of the HTML standard!
It is better to use CSS.
To add borders with CSS, use the border property:
Example
<style>
table,th,td
{
border:1px solid black;
}
</style>
Try it yourself »
Remember to define borders for both the table and the table cells.
An HTML Table with Collapsed Borders

If you want the borders to collapse into one border, add border-collapse to your CSS:
Example
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>
Try it yourself »
An HTML Table with Cell Padding

Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
th,td
{
padding:15px;
}
Try it yourself »
HTML Table Headings

Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:
Example
<table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it yourself »
To left-align the table headings, use the CSS text-align property:
Example
th
{
text-align:left;
}
Try it yourself »
An HTML Table with Cell Spacing

Cell spacing specifies the space between the cells.
To set the cell spacing for the table, use the CSS border-spacing property:
Example
table
{
border-spacing:5px;
}
Try it yourself »
More Examples
Horizontal/Vertical table headings
How to create horizontal/vertical table headings.
Table with a caption

How to add a caption to a table.
Table cells that span more than one row/column

How to define table cells that span more than one row or one column.
Tags inside a table

How to display elements inside other elements.
HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
The most common HTML lists are ordered and unordered lists:
HTML Lists
An ordered list: An unordered list:
1. The first list item  List item

2. The second list item  List item
3. The third list item  List item
Try-It-Yourself Examples
Unordered list
How to create an unordered list in an HTML document.
Ordered list
How to create an ordered list in an HTML document.
HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
 Coffee
 Milk

HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. Milk
HTML Description Lists

A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each
term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink

Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.
More Examples
Different types of ordered lists
Demonstrates different types of ordered lists.
Different types of unordered lists

Demonstrates different types of unordered lists.
Nested list
Demonstrates how you can nest lists.
Nested list 2
Demonstrates a more complicated nested list.
Description list
Demonstrates a definition list.

HTML List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
Colors are displayed combining RED, GREEN, and BLUE light.
Color Values
CSS colors are defined using a hexadecimal (hex) 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).
Hex values are written as 3 double digit numbers, starting with a # sign.
Color Examples
Color Color HEX Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
Try it yourself »
16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million
different colors to play with (256 x 256 x 256).
Most modern monitors are capable of displaying at least 16384 different colors.
If you look at the color table below, you will see the result of varying the red light from 0 to 255, while
keeping the green and blue light at zero.
To see a full list of color mixes when the red light varies from 0 to 255, click on one of the hex or rgb
values below.
Red Light HEX RGB
#000000 rgb(0,0,0)

#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)
Shades of Gray
Gray colors are displayed using an equal amount of power to all of the light sources. To make it easier
for you to select the right gray color we have compiled a table of gray shades for you:
Gray Shades HEX RGB

#000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)
#585858 rgb(88,88,88)
#606060 rgb(96,96,96)
#686868 rgb(104,104,104)
#707070 rgb(112,112,112)
#787878 rgb(120,120,120)
#808080 rgb(128,128,128)
#888888 rgb(136,136,136)
#909090 rgb(144,144,144)
#989898 rgb(152,152,152)
#A0A0A0 rgb(160,160,160)
#A8A8A8 rgb(168,168,168)
#B0B0B0 rgb(176,176,176)
#B8B8B8 rgb(184,184,184)
#C0C0C0 rgb(192,192,192)
#C8C8C8 rgb(200,200,200)
#D0D0D0 rgb(208,208,208)
#D8D8D8 rgb(216,216,216)
#E0E0E0 rgb(224,224,224)
#E8E8E8 rgb(232,232,232)
#F0F0F0 rgb(240,240,240)
#F8F8F8 rgb(248,248,248)
#FFFFFF rgb(255,255,255)
Web Safe Colors?

Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors"
was suggested as a Web standard, reserving 40 fixed system colors.

This is not important now, since most computers can display millions of different colors, but the choice
is left to you.
The 216 cross-browser color palette was created to ensure that all computers would display the colors
correctly when running a 256 color palette:
000000 000033 000066 000099 0000CC 0000
003300 003333 003366 003399 0033CC 0033
006600 006633 006666 006699 0066CC 0066
009900 009933 009966 009999 0099CC 0099
00CC00 00CC33 00CC66 00CC99 00CCCC 00CC
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFF
330000 330033 330066 330099 3300CC 3300
333300 333333 333366 333399 3333CC 3333
336600 336633 336666 336699 3366CC 3366
339900 339933 339966 339999 3399CC 3399
33CC00 33CC33 33CC66 33CC99 33CCCC 33CC
660000 660033 660066 660099 6600CC 6600
663300 663333 663366 663399 6633CC 6633
666600 666633 666666 666699 6666CC 6666
669900 669933 669966 669999 6699CC 6699
66CC00 66CC33 66CC66 66CC99 66CCCC 66CC
990000 990033 990066 990099 9900CC 9900
993300 993333 993366 993399 9933CC 9933
996600 996633 996666 996699 9966CC 9966
999900 999933 999966 999999 9999CC 9999
99CC00 99CC33 99CC66 99CC99 99CCCC 99CC
CC0000 CC0033 CC0066 CC0099 CC00CC CC00
CC3300 CC3333 CC3366 CC3399 CC33CC CC33
CC6600 CC6633 CC6666 CC6699 CC66CC CC66
CC9900 CC9933 CC9966 CC9999 CC99CC CC99
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCC
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00F

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCC
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFF

Cape It Unit 2 Notes Mod 2 So 13 HTML PDF

Uploaded by

Copyright:

Available Formats

Cape It Unit 2 Notes Mod 2 So 13 HTML PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cape It Unit 2 Notes Mod 2 So 13 HTML PDF

Uploaded by

Copyright:

Available Formats

NOTES March 2014

Cape IT UNIT 2 Mod 2 SO 13

WEB HTML NOTES

This HTML tutorial contains hundreds of HTML examples.

<h1>My First Heading</h1>

<p>My first paragraph.</p>

 HTML stands for Hyper Text Markup Language

Cape IT UNIT 2 Mod 2 SO 13 – Web Page using HTML www.w3school.com 1

HTML Page Structure

Writing HTML Using Notepad or TextEdit

Cape IT UNIT 2 Mod 2 SO 13 – Web Page using HTML www.w3school.com 2

Step 2: Edit Your HTML with Notepad

Step 3: Save Your HTML

Save the file in a folder that is easy to remember, like w3schools.

Step 4: Run the HTML in Your Browser

The result should look much like this:

Cape IT UNIT 2 Mod 2 SO 13 – Web Page using HTML www.w3school.com 3

Note: The link address is specified in the href attribute.

(You will learn about attributes in a later chapter of this tutorial).

Start tag * Element content End tag *

<p> This is a paragraph </p>

<a href="default.htm"> This is a link </a>

HTML Element Syntax

Nested HTML Elements

HTML documents consist of nested HTML elements.

HTML Document Example

The example above contains 3 HTML elements.

HTML Example Explained

<p>This is my first paragraph.</p>

The <p> element defines a paragraph in the HTML document.

The <body> element:

The <html> element:

The <html> element defines the whole HTML document.

Don't Forget the End Tag

Empty HTML Elements

HTML Tip: Use Lowercase Tags

Cape IT UNIT 2 Mod 2 SO 13 – Web Page using HTML www.w3school.com 6

Always Quote Attribute Values

HTML Tip: Use Lowercase Attributes

Newer versions of (X)HTML will demand lowercase attributes.

HTML Attributes Reference

id Specifies a unique id for an element

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a tool tip)

How to use HTML color codes?

Using HTML color codes for web site background color:

Using HTML color codes for setting font/text color:

Using HTML color codes for table background color:

Cape IT UNIT 2 Mod 2 SO 13 – Web Page using HTML www.w3school.com 8

HTML Codes format:

#FFFF00 - Combination of red and green color gives us yellow:

...content goes here...

Cape IT UNIT 2 Mod 2 SO 13 – Web Page using HTML www.w3school.com 9

 Scrolling Text http://www.html.am/html-codes/marquees/scrolling-text.cfm

Don't Forget the End Tag

HTML Line Breaks

The <br> element is an empty HTML element. It has no end tag.

HTML Output - Useful Tips

(The example demonstrates some HTML formatting problems)