Hypertext Markup Language basic code and tags

hypertext (Notre Dame of Dadiangas University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Wilbert Dela Cruz ([email protected])
CS 428/IT 320 – Web Programming

Rules for Successful Site/Web Page Design

 The design of Web page is extremely important and this tutorial gives some useful pointers and „rules‟ to
help you to design your site or web page effectively. Design issues should be on the forefront of you mind
throughout the coding process and little additions to certain codes can make design a lot more uniform.

 When designing sites or web pages you should aim for uniform style. Style in terms of web page is really to
do with colour, font, and images. The idea is that visitors still know they‟re on your site. When they leave
the first page. Also, a particular style can set your site out from others on the same topic.

 Every aspect of your page/site should reflect the goals that led you to create it in the first place. The text
and images should communicate this message and so should the way you fit these elements together.

 Beware of clashing colours. Your background colour and text colour should not be too close to each other
or visitors will not be able to read the text.

 General rule about fonts: only use up to maximum of three in any page or a maximum of four for the whole
site. Otherwise you get a hotch-potch of visual messages and no uniformity.

 Try not to use images you‟ve “collected” off the internet – they are rarely of the same style, size and
technique and make a site look very amateur.

 Make sure a site is well organized and that there is uniformity of implementation. Sounds complicated
but in fact it only refers to the way you show things on your web site. If you use particular graphic to
represent a link or a text hyperlink to get a particular page, use that same style throughout.

 Remember site maintenance is a must. Don‟t code a site, upload it and expect people to keep coming
back. The beauty of the internet is its immediacy – visitors expect up-to-date information and add-ons to
sites and stop coming back if they don‟t get them. This is especially important if you have a site with links to
others. Just because you don‟t maintain your site, doesn‟t mean they aren‟t. A broken link on your site does
not look good and disappoints visitors. Check them regularly and tell people you‟ve checked them.

 And through all coding and designing – have fun. The internet is giving you an opportunity to get
published in a way that has not been possible before.

Downloaded by Wilbert Dela Cruz ([email protected])

Introduction to HTML Programming

Hypertext Markup Language (HTML) – The standard text-formatting language since 1989 for documents in
interconnected computing network known as the World Wide Web. HTML document are text files that contain two
parts: content that is meant to be rendered on a computer screen; and markup or tags, encoded information that
directs the text format on the screen and is generally hidden from the user.

Tags – a command inserted in the document that specifies how the document, or portion of the document, should
be formatted. Tags are used by all format specifications that store documents as text files. It is case-insensitive
which you can type them however you want to – in CAPITAL, small letters or BoTH. Tags are also embedded were
you may put them where you want an effect or action to occur.

Elements – it made up of three parts: a start tag, content, and an edge tag. Most tags possess „closing tags‟ such
as </BODY> which mark the place where the effect of the „opening‟ tag should stop.

Attributes – a language construct that programmers use to add additional information to code elements to
extend their functionalities.

HTML Document Structures

Divided into two major portions

- Head
o Contains information about the document such as its title and “meta” information.
o Head information is not displayed in the browser windows when page is loaded.
o Mainly used for search engines with page descriptions.
o Contents of the Head section are run first by the browser.

- Body
o Contains the actual contents of the document (the part shown in the browser window).

Note: The most important tags in HTML are tags that define headings, paragraphs and line breaks.

Head Tags

The HEAD elements contains information about a document, such as its title, keywords that may be useful to
search engines, and other data that is not content that you want visitors to see. They are therefore not displayed.

The main tags you can use between the <HEAD> and </HEAD> tags are:

<TITLE> ~ </TITLE>
<META> (this tag does NOT require a closing tag)

The <TITLE> ~ </TITLE> tags contain the title of the document. This is not the title that is displayed on the web
page, but one that is put on the top of the browser. For instance if you were put the following between the <TITLE>
~ </TITLE> tags, in Internet Explorer and Netscape Navigator (as well in other browser) you will see the title
displayed at the very top.

<HTML>
<HEAD>
<TITLE> Welcome to HTML Basics! </TITLE>
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>

The <META> tag has two main attributes: NAME=”?” and CONTENT=”?”. Here‟s how they would look for HTML
Basics:
<META NAME="keywords" CONTENT="HTML Programming">

So, putting the whole thing together looks something like this:

<HTML>
<HEAD>
<TITLE> Welcome to HTML Basics! </TITLE>
<META NAME="keywords" CONTENT="HTML Programming">
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>
2

Downloaded by Wilbert Dela Cruz ([email protected])

Body Tags

The BODY of a document is contains the content of the Web page. That content can be enhanced by colouring or
placing an image behind.

The <BODY> tag is where information relating to WHAT is shown on a Web page and the PRESENTATION and
POSITIONING of that material, is stored.

The <BACKGROUND> allows you to use a graphic/image file for the background of the web page. For example,
the graphic used on every page of this site is put into the code like this:

<HTML>
<HEAD>
<TITLE>Welcome to HTML Basics!</TITLE>
<META NAME="keywords" CONTENT="HTML Programming">
</HEAD>
<BODY BACKGROUND="images/back.gif" BGPROPERTIES="fixed">

</BODY>
</HTML>

The BGPROPERTIES attribute tells the browser that you do not want the image to be moved when the visitor
scrolls the page up and down.

The <BGCOLOR> allows you to colour the background instead of putting a tiled image there. It has the benefit of
being a great deal quicker to do, as the browser does not have to download an image to do it.

There are three ways of specifying colour. The following examples show how to create a red background:

1. <BODY BGCOLOR="red">
2. <BODY BGCOLOR="#FF0000">
3. <BODY BGCOLOR=rgb(255,0,0)>

The first uses simple or literal word commands (of which there are about 140 you can use to specify basic colours).

The second uses hexadecimal code to specify a colour. For instance, "#FF0000" is the same as "red". The
advantage to using hexadecimal code is that there are 16,777,216 colours you can use in a browser.

The third uses RGB values (red, green and blue colour combinations), which accomplishes the same results as a
hexadecimal code.

Example of setting a background colours:

<HTML>
<HEAD>
<TITLE> Welcome to HTML Basics! </TITLE>
<META NAME="keywords" CONTENT="HTML Programming">
</HEAD>
<BODY BGCOLOR="red">
</BODY>
</HTML>

Hyperlinks

Hyperlinks are used to navigate around a page, site or from one site to another. They are known as 'anchors' and
use a specific tag: <A attribute>~</A>

The <A> tag means 'anchor'. An anchor is a piece of text or some other object (such as an image) which marks the
beginning and/or the end of a hyperlink. Hyperlinks must be closed using </A>.

The <A> tag is used with two main attributes: HREF="" and NAME="".

Therefore an anchor is set up like this:

<A HREF=" ? ">linkage text</A>

The linkage text in this instance (which can be "click here" or whatever is appropriate) becomes what is clickable
to take you to wherever the link is aimed at. The question mark can either be a URL (Uniform Resource Locator or
web address) both on the same site or another. It could also link a visitor to a graphic, video, sound, etc. file. For
instance, the following code would create a hyperlink which would take you to “www.yahoo.com:”
3

Downloaded by Wilbert Dela Cruz ([email protected])

 <A HREF="http://www.yahoo.com">Click here to go to 'www.yahoo.com'!</A>

Example:

<HTML>
<HEAD>
<TITLE> Welcome to HTML Basics! </TITLE>
<META NAME="keywords" CONTENT="HTML Programming">
</HEAD>
<BODY>
<A HREF="http://www.yahoo.com">Click here to go to www.yahoo.com!</A>
</BODY>
</HTML>

Table

Not only can tables be used to present information in a chart (such as numerical data), they can be used invisibly to
control the structure of your web pages.

The <TABLE> tag is remarkably easy to use, once you've got the hang of it. It begins with the <TABLE> tag, which
has several attributes: ALIGN, WIDTH, BGCOLOR, BACKGROUND, CELLSPACING, CELLPADDING and
BORDER.

<HTML>
<HEAD>
<TITLE> Welcome to HTML Basics! </TITLE>
<META NAME="keywords" CONTENT="HTML Programming">
</HEAD>
<BODY>
<TABLE ALIGN="center" WIDTH=200 BORDER=3 CELLPADDING=1 CELLSPACING=1>
<TR><TD WIDTH=50%>A</TD><TD WIDTH=50%>B</TD></TR>
<TR><TD WIDTH=50%>C</TD><TD WIDTH=50%>D</TD></TR>
<TR><TD WIDTH=50%>E</TD><TD WIDTH=50%>F</TD></TR>
</TABLE>
</BODY>
</HTML>

Text Tags and Line Breaks

When placing text on Web page, you have to remember to „say what you need to say in few words possible‟. It is
well known fact that it is more difficult to read text on a monitor that from paper, and therefore visitors to your site
are less inclined to read through huge amount of text. Once you have done that, it is good to break up text and
emphasize it in different ways.

Basic HTML Tags

Tag Description
<html> Defines an HTML document
<body> Defines the document‟s body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal line
<!--> Defines a comment

Text Formatting Tags

Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic 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

Downloaded by Wilbert Dela Cruz ([email protected])

Computer Output Tags

Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer codes
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text

Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term

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.

Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

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

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.

<!-- This is a comment… -->

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

Basic Notes – Useful Tips

When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have
large computer displays, some have small. The text will be reformatted every time the user resizes his window.
Never try to format the text in your editor by adding empty lines and spaces to the text.

Downloaded by Wilbert Dela Cruz ([email protected])

HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In HTML
a new line counts as one space.

Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But don't use the <br>
tag to create lists. Wait until you have learned about HTML lists.)

You might have noticed that paragraphs can be written without the closing tag </p>. Don't rely on it. The next
version of HTML will not allow you to skip ANY closing tags.

HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph,
and before and after a heading.

Use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.

Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag.
If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a
semicolon (;).

To display a less than sign in an HTML document we must write: &lt; or &#60;

The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is
that not all browsers support the newest entity names, while the support for entity numbers is very good in almost
all browsers.

Note that the entities are case sensitive.

Non-breaking Space

The most common character entity in HTML is the non-breaking space.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To
add spaces to your text, use the &nbsp; character entity.

The Most Common Character Entities:

Result Description Entity Name

Non-breaking space &nbsp;
< Less than &lt;
> Greater than &gt;
& Ampersand &amp;
“ Quotation mark &quot;
„ Apostrophe &apos; does not work in IE

Some Other Commonly Used Character Entities

Result Description Entity Name

¢ Cent &cent;
£ Pound &pound;
¥ Yen &yen;
€ Euro &euro;
§ Section &sect;
© Copyright &copy;
® Registered &reg;
× Multiplication &times;
÷ Division &divide;

The Anchor Tag and the Href Attributes (Hyperlink)

HTML uses the <a> (anchor) 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>

Downloaded by Wilbert Dela Cruz ([email protected])

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.
This anchor defines a link to http://www.yahoo.com:

<a href="http://www.yahoo.com/">Visit Yahoo Web Site!</a>

The line above will look like this in a browser:

Visit Yahoo Web Site!

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:

<a href="http://www.yahoo.com/" target="_blank">Visit Yahoo Web Site!</a>

The Anchor Tag and the Name Attribute

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

Below is the syntax of named anchor:

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

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

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

<a href="http://www.w3schools.com/html_links.asp#tips">Jump to the Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:

<a href="#tips">Jump to the Useful Tips Section</a>

Basic Notes – Useful Tips

Always add a trailing slash to subfolder references. If you link like this:

href="http://www.w3schools.com/html",

you will generate two HTTP requests to the server, because the server will add a slash to the address and create a
new request like this:

href="http://www.w3schools.com/html/"

Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter
within the document is given a named anchor, and links to each of these anchors are put at the top of the
document.

If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error
occurs.

Tag Description
<a> Defines an anchor

Frames

With 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

Downloaded by Wilbert Dela Cruz ([email protected])

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 defines what HTML document to put into each frame

In the example below 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_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>

Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be
set to use the remaining space (cols="25%,*").

Basic Notes - Useful Tips

If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you
can add noresize="noresize" to the <frame> tag.

Add the <noframes> tag for browsers that do not support frames.

Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags. However, if
you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose
the text in <body></body> tags! See how it is done in the first example below.

Frame Tags

Tag Description
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that do not handle frames
<iframe> Defines an inline sub window (frame)

Tables (Continued)

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.

<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>

How it looks in a browser:

Tables and the Borders Attribute

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

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

Downloaded by Wilbert Dela Cruz ([email protected])

 <table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Headings in a Table

<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 2</td>
</tr>
</table>

How it looks in a browser:

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

<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></td>
</tr>
</table>

How it looks in a browser:

Note that the borders around the empty table cell are missing (Mozilla Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:

<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>&nbsp;</td>
</tr>
</table>

How it looks in a browser:

Downloaded by Wilbert Dela Cruz ([email protected])

Basic Notes – Useful Tips

The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to
change in future versions of XHTML.

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines group of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines table body
<tfoot> Defines a table footer

HTML List

HTML supports ordered, unordered and definition lists.

Unordered List

An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:

 Coffee
 Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists

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

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

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:

1. Coffee
2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

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>Coffee</dt>
10

Downloaded by Wilbert Dela Cruz ([email protected])

 <dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Here is how it looks in a browser:

Coffee
Black hot drink
Milk
White cold drink

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.

List Tags

Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description

HTML Forms and Input

HTML Forms are used to select different kinds of user input.

Forms

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag.

<form>
<input>
<input>
</form>

Input

The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly
used input types are explained below.

Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

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

How it looks in a browser:

Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by
default.

11

Downloaded by Wilbert Dela Cruz ([email protected])

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>

How it looks in a browser:

Note that only one option can be chosen.

Checkboxes

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

<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>

How it looks in a browser:

The Form’s Action Attribute and the Submit Button

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. The file defined in the action attribute usually does
something with the received input.

<form name="input" action="html_form_action.asp" method="get">

Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

How it looks in a browser:

If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page
called "html_form_action.asp". That page will show you the received input.
Form Tags
Tag Description
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area (a multi-line text input control)
<label> Defines a label to a control
<fieldset> Defines a field set
<legend> Defines a caption for a fieldset
<select> Defines a selectable list (a drop-down box)
<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a push button
12

Downloaded by Wilbert Dela Cruz ([email protected])

HTML Images

With HTML you can display images in a document.

The Image Tag and the Src Attributes

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only and it 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 on your page.

The syntax of defining an image:

<img src="url">

The URL points to the location where the image is stored. An image named "boat.gif" located in the directory
"images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.

The browser puts the image where the image 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.

The Alt Attribute

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined
text:

<img src="boat.gif" alt="Big Boat">

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The
browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for
each image on a page, to improve the display and usefulness of your document for people who have text-only
browsers.

Basic Notes – Useful Tips

If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time,
so my best advice is: Use images carefully.

Images Tag

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map

HTML Background

A good background can make a website look really great.

Backgrounds

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

BgColor

The bgcolor 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:

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

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

13

Downloaded by Wilbert Dela Cruz ([email protected])

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.

<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">

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

Note: If you want to use a background image, you should keep in mind:

 Will the background image increase the loading time too much?
 Will the background image look good with other images on the page?
 Will the background image look good with the text colors on the page?
 Will the background image look good when it is repeated on the page?
 Will the background image take away the focus from the text?

Basic Notes - Useful Tips

The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML
(HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from its
recommendations.

Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).

HTML Colors

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

Color Values

HTML colors can be defined as 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) and the highest value is 255 (hex #FF).

W3C Standard Colors

W3C has listed 16 color names that will validate with an HTML validator.

The color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
white, and yellow.

Cross-browser Color Names

A collection of nearly 150 color names are supported by all major browsers.

Cross-Browser Color Values

Some years ago, when most computers only supported 256 different colors, a list of 216 Web Safe Colors was
suggested as a Web standard. The reason for this was that the Microsoft and Mac operating system used 40
different "reserved" fixed system colors (about 20 each).

We are not sure how important this is now, since most computers today have the ability to display millions of
different colors, but the choice is left to you.

Reference: http://www.w3schools.com/html

- End -

Prepared by: Mr. Joseph S. Joaquin

Instructor, CS 428/IT 320 – Web Programming

14

Downloaded by Wilbert Dela Cruz ([email protected])