HTML Module

Name:
Section:

Prepared by: JCB
Business Name
Module in Hypertext Markup
Language
HTML
HTML
Page 1
Module in Hypertext Mark up Language is a compilation
of all the lessons in basic HTML and exercises intended to help
students understand HTML and develop a good and informative
webpage.

Hope this module will help students discover HTML/
webpage designing easy and interesting.

The Author
PREFACE

HTML
Page 37
- http://www.w3schools.com
- HTML FOR THE WORLD WIDE WEB by Elizabeth
Castro
- Web Application Programming Language By Mar-
melo V. Abante
References
HTML
Page 2
Basic HTML
Writing HTML
You can create an HTML document with any word pro-
cessor or text editor, including the very basic TeachText or simple
Text on the Mac and Notepad or Wordpad for Windows, both of
which come free with the corresponding system softwarene.
HTML Tags
HTML tags are commands written between less than (<)
and greater than (>) signs, also known as angle brackets, that in-
dicate how the browser should display the text.
<EM> cherry tomato </EM>
Saving HTML Document
1. Open a word processor (notepad or wordpad)
2. Type your HTML Tags.
3. A Save As dialogue box will appear, In the file name field,
type the desired filename and add a suffix .html or .htm; and
Example : Index.html
4. In the Save as Type field, select All Files; then
5. Click Save As button.
Opening HTML Document
1. Open a browser (ex. Internet Explorer)
2. Click File > Open File
3. Browse an html file, then
4. Click Open Button.
HTML
Page 3
HTML Basic Structure
- HTML the first and last tags in a document should always
be the html tags. These are the tags that tell a web browser
where the html in your document begins and ends. The abso-
lute most basic of all possible web documents is: <HTML> . .
. . </HTML>
- HEAD the head tags contain all of the documents header
information. <HEAD> . . . . </HEAD>
- TITLE this container is placed within the head structure,
between the title tags you should have the title of your docu-
ment. This will appear at the top of the browsers title bar, and
also appears in the history list. <TITLE> . . . . </TITLE>
- BODY the body comes after the head structure, between the
body tags, you find all of the stuff that gets displayed in the
browser window. Al of the text, the graphics, and links, and so
on these thongs occur between the body tags. <BODY> . . . .
</BODY>
Putting together:
<HTML>
<HEAD>
<TITLE> Document Title </TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
HTML
Page 36

HTML Frames
<html>

<frameset rows="50%,50%">

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

</frameset>

</html>

<html>

<frameset rows="50%,50%">

<frame noresize="noresize" src="frame_a.htm" />
<frame noresize="noresize" src="frame_b.htm" />

</frameset>

</html>

Try it Yourself!
Try it Yourself!
HTML
Page 35

HTML Frames
<html>

<frameset cols="25%,50%,25%">

<noframes>
<body>Your browser does not handle frames!</body>
</noframes>

</frameset>

</html>
<html>

<frameset rows="25%,50%,25%">


</frameset>

</html>
Try it Yourself!
Try it Yourself!
HTML
Page 4
- Headings
Headings are defined with the <h!> to <h6> tags. <h1>
defines the largest heading; <h6> defines the smallest heading.
HTML automatically adds an extra blank line before and
after heading.
- Paragraphs
Paragraphs are defined with the <p> tag.
HTML automatically adds an extra blank line before and
after paragraph.
- Line Breaks
The <br> tag is used when you want to end line, bt dont
want to start a new paragraph. The <br> tag forces a line break
wherever you place it.
It is an empty tag. It has no closing tag.
- Comment Tags
If you want to leave yourself notes in an HTML document,
but dont want those notes to show up in the browser window, you
need to use the comment tag.
<! a comment >

Basic Tags
HTML
Page 5
Sample Code:

<HTML>
<HEAD>
<TITLE> Sample Webpage </TITLE>
</HEAD>
<BODY>
<H1> This is heading 1 </H1>
<P> This is a paragraph </P>
<P> This<br>is a para <br>graph w/ line breaks</P>
<! this is a comment, it will not display in your page>
</BODY>
</HTML>
Try it Yourself!
HTML
Page 34

Note: The frameset column size can also be set in pixels
(cols="200,500"), and one of the columns can be set to use the
remaining space, with an asterisk (cols="25%,*").
Basic Notes - Useful Tips
Tip: 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.
Note: 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!
- HTML Frame Tags

HTML Frames
<frameset cols="25%,75%">
</frameset>
Tag Description
<frameset> Defines a set of frames
<frame /> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers
HTML
Page 33
- HTML Frames
With frames, you can display more than one HTML docu-
ment 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 HTML frameset Element
The frameset element holds one or more frame elements.
Each frame element can hold a separate document.
The frameset element states HOW MANY columns or rows
there will be in the frameset, and HOW MUCH percentage/pixels
of space will occupy each of them.
- The HTML frame Element
The <frame> tag defines one particular window (frame)
within a frameset.
In the example below we have a frameset with two col-
umns.
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 document "frame_a.htm" is put into the first
column, and the document "frame_b.htm" is put into the second
column:
HTML Frames
HTML
Page 6

Text Formatting Tags
Tag Description
<b> Defnes bold text
<big> Defnes big text
<em> Defnes emphasized text
<i> Defnes italic text
<small> Defnes small text
<strong> Defnes strong text
<sub> Defnes subscripted text
<sup> Defnes superscripted text
<strike> Striking out text
<u> Defnes underlined text
<code> Defnes computer code text (Monospaced
font)
<kbd> Defnes keyboard input text (Monospaced
font)
<t> Defnes typewriter text (Monospaced font)
<samp> Defnes sample text (Monospaced font)
<blockquote> Use to set of a secton of your text like
a quotaton by a famous author from the
surrounding text.
<blink> Making text blink
<pre> To use preformated text
HTML
Page 7
Sample Code:

<HTML>
<BODY>
<p> <b> True or False </p>
<blockquote>
1.) <b> HTML </b> stands for <i> Hypertext mark up
language </i>. <br>
2.) 5 <sup> 2 </sup> is equals to <tt> 25 </tt>. <br>
3.) <big> FTP </big> stands for <small> File Transmit
Protocol </small>. <br>
</blockquote>
<blink> <strike> Good Luck! </strike> </blink>
</BODY>
</HTML>
Try it Yourself!
HTML
Page 32
Create an HTML Code displaying the following:
1.

2.
3.
HTML Table Exercises
Apples 44%
Bananas 23%
Oranges 13%
Other 10%
Fresh Fruits
It has long been known that a diet
that includes at least a few serv-
ings of fresh fruit every day will
help keep you healthy, ft and trim.

My tech stock picks
NAME SYMBOL
CUR-
RENT
52WK HI 52WK LO
P/E RA-
TIO
Microsof MSFT 86-3/8
119-
15/16
75-1/2 56.09
Cisco Sys-
tems
CSCO 72-1/8 82 24-13/16 400.69
America
Online
AOL 63 95-13/16 38-15/32 350.00
Qwest
Communi-
catons
Q 44-7/16 66 25-3/4 74.06
HTML
Page 31
- Cell Padding and Spacing
With the cellpadding and cellspacing attributes you will be
able to adjust the white space on your tables. Spacing defines the
width of the border, while padding represents the distance be-
tween cell borders and the content within. Color has been added to
the table to emphasize these attributes.
Sample Code:

HTML Tables
<html>
<body>
<table border=1 cellspacing=10 bgcolor=rgb(0,255,0)>
<tr>
<th> Column 1</th>
<th> Column 2 </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>
</body>
</html>
Try it Yourself!
HTML
Page 8
1. Print paragraph that is a description of a book, include the
title of the book as well as its author. Names and titles should
be underlined, adjectives should be italicized and bolded.
2. Print your name to the screen with every letter being a
different heading size.
3. Print the squares of the numbers 120. Each number should
be on a separate line, next to it the number 2 superscripted, an
equal sign and the result. (Example: 10
2
= 100)
4. Prints 10 names with a line break between each name, The list
should be alphabetized, and to do this place a subscripted
number next to each name based on where it will go in the
alphabetized list. (Example: Alan1). Print first, the
unalphabetized list with a subscript number next to each
name, then the alphabetized list. Both lists should have an
<h1> level heading.
5. Print a long quote. Cite the author of each quote.
6. Print some code in java. (hint: use the <pre> tag)

NOTE: Include comments in every HTML basics exercise

Text Formatting Exercises
HTML
Page 9
Some characters like the < character, have a special mean-
ing in HTML, and therefore cannot be used in the text. To display
a less than sign (<) in HTML, we have to use a character entity.
- Character Entities
Some characters have a special meaning in HTML, like
the less than (<) 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 semico-
lon (;).
To display a less than sign in an HTML document we must
write: < or <
- The Most Common Character Entities
HTML Character Entities
Result Descrip-
tion
Entity
Name
Entity
Number
Non-breaking
space

< Less than < <
> Greater than > >
& Ampersand & &
Quotation
mark
" "
Apostrophe ' '
HTML
Page 30
- Table Tags
- Spanning Multiple Rows and Cells
Use the rowspan, to span multiple rows, and the
colspan to span multiple columns.
HTML Tables
Tag Description
<table> Defines a table.
<th> Defines a table headset.
<tr> Define a table row.
<td> Defines a table cell.
<table border=1>
<tr>
<th> Column 1</th>
<th> Column 2</th>
<th> Column 3</th>
</tr>
<tr><td rowspan=2> Row1
cell1</td>
<td>Row1 cell2</td>
<td>Row1 cell3</td>
</tr>
<tr><td>Row2 cell2 </td> <td>
Row2 Cell3 </td></tr>
<tr><td colspan=3> Row3
cell1 </td> </tr>
</table>

Column1 Column2 Column3
Row1 cell1 Row1 celll2 Row1 celll3
Row2 cell3 Row3 cell1
Row2 cell2
HTML
Page 29
- Headings In a Table
Headings in a table are defined with the <th> tag.
- Empty Cells in a Table
Table cells with no content are not displayed very well in
most browsers.
HTML Tables
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
Here it looks in a browser:
Header 1 Header 2
row 1, cell 1 row 1, cell 2
<table border="1">
<tr>
</tr>
<tr>
<td></td>
</tr>
How it looks in a browser:

row 2, cell 1
HTML
Page 10
- Some Other Commonly Used Character Entities

HTML Character Entities
Result Descrip-
tion
Entity
Name
Entity
Number
Cent ¢ ¢
Pound £ £
Yen ¥ ¥
Section § §
Copyright © ©
Registered
trademark
® ®
x Multiplication × ×
Division ÷ ÷
HTML
Page 11
<font color=red> Sample Text </font>
- Font Attributes

The HTML <font> Tag
Attribute Example Purpose
Size=number Size=2 Defines the font
size.
Size=+number Size=+1 Increases the font
size.
size=-number size=-1 Decreases the font
size.
face=face-name Face=Times Defines the font
name.
color=color-
value
color=#eeff00 Defines the font
color.
color=color-
name
color=red Defines the font
color.
HTML
Page 28
- 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 an contain text,
images, lists, paragraphs, forms, horizontal rules, tables, etc.
- Tables and the Border Attribute
If you do not specify a border attribute the table will
be displayed without any borders.

HTML Tables
<table border="1">
<tr>
</tr>
<tr>
</tr>
</table>
How it looks in a browser:

<table border="1">
<tr>
</tr>
</table>
HTML
Page 27
1. Print two lists with any information you want. One list should
be an ordered list, the other list should be an unordered list.
2. Print a definition list with 5 items .
3. Print ten acronyms and abbreviations of your choosing, each
separated by two lines. Specify the data that the abbreviations
and acronyms represent.
HTML Lists Exercises
HTML
Page 12
1. Print your name in green.
2. Print the numbers 1 - 10, each number being a different color.
3. Prints your name in a Tahoma font.
4. Print a paragraph with 4 - 5 sentences. Each sentence should
be a different font.
5. Print two paragraphs that are both indented using the
command.
HTML Text Exercises
HTML
Page 13
- Image Formats
The Web is accessed every day by millions of Macs, Win-
dows-based PCs, Unix machines and other kinds of computers.
The graphics you use in your Web page must be in a format that
each of these operating systems can recognize. Presently, the two
most widely used formats on the Web are GIF and JPEG.
- GIF Formats
GIF, or Graphics Interchange Format., was devel-
oped by CompuServe for platform independent images on
its online service.
- JPEG/JFIF Format
The JPEG (Joint Photographic Experts Group)
compression scheme (Saved in JFIF format files) is ideal
for photographs and other natural color images. JPEG
compressed images may have millions of colors, and their
file size is determined primarily by their image size, not
their number of colors.
- PNG Format
In late 1996, the World Wide Web Consortium
endorsed the PNG (Portable Network Graphics) format,
which it hopes will allow for faster-loading graphics of var-
ying quality across platforms.
Using Images
HTML
Page 26
- List tags
- Abbreviation and Acronym in HTML
<abbr title=Example>Ex.</abbr>

<acronym title=Internet Protocol>IP</acronym>
Lists in HTML
<dl>
<dt> Coffee </dt>
<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
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
Page 25

- Afor capital letters.
- afor small letters.
- Ifor capital roman numerals.
- ifor small roman numerals.
- 1 for numbers.
Inside a list item you can put paragraphs, line breaks, im-
ages, links and 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 defini-
tion-list definition starts with the <dd> tag.
Lists in HTML
Attribute Example Description
Type=symbol <ol type=A/a/I/
i/1> or
<li type=A/a/I/
i/1>
You may choose
any symbol for
your ordered list.
HTML
Page 14
- The Image 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 it has no closing tag.
- To display an image on a page, you need to use the src
attributes. Src stands for source. The value of the
src attribute is the URL of the image you want to
display on your page.
<img src=url>
- The Alt Attribute
- The alt attribute is used to define an alternate text
for an image.
- The alt attribute tells the reader what he or she is
missing on a page if the browser cant load images.
<img src=boat.gif alt=Big Boat>

Tip

- You may use some programs like Adobe Photoshop or
PhotoScape to improve your images (size, resolution, etc.)
Using Images
HTML
Page 15
- Other Image Attributes
- Line Break Attributes

Using Images
Width=number Width=300 Specifying the
width of an image.
Height=number Height=250 Specifying the
height of an image.
Align=direction Align=left/right Wrapping text
around images.
Hspace=number Hspace=15 Adding space
around an image
horizontally.
Vspace=number Vspace=10 Adding space
around an image
vertically.
<br clear=margin
alignment>
<br clear=left/
right>
Stopping text wrap.
HTML
Page 24
- Unordered Lists
An unordered list is a list of items. The list items are
marked with bullets (typically small black circles). An unordered
list starts the <ul> tag. Each list item starts with the <li> tag.

- 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 item starts with the <li> tag.
Lists in HTML
<ul>
<li> Coffee </li>
<li> Milk </li>
</ul>
browser:
- Coffee
- Milk
Type=bullet type <ul type=disc/
circle/square> or
<li type=disc/
circle/square>
You may choose
any bullet type you
want
<ol>
<li> Coffee </li>
<li> Milk </li>
</ol>
browser:
1. Coffee
2. Milk
HTML
Page 23
1. Display five different images. Skip two lines between each im-
age. Each image should have a title.
2. Display an image that has a width of 200 and a height of 200.
3. Display an image that when clicked will link to a search engine
of your choice (should be opened in a new window)
4. Display an image that when clicked will link to itself and will
display the image in the browser by itself.
5. Create some links to various search engines (google, yahoo )
6. Create links to five different pages on five different websites
that should all open in a new window.
7. Create a page with a link at the top of it that when clicked will
jump all the way to the bottom of the page.
8. Create a page with a link at the bottom of it that when clicked
will jump all the way to the top of the page.
9. Create a page with a link at the top of it that when clicked will
jump all the way to the bottom of the page. At the bottom of
the page there should be a link to jump back to the top of the
page
NOTE: Include the alt attribute in every <img> tag in the HTML
image exercises.
HTML Image and Links Exercises
HTML
Page 16
<hr size=10>

- Horizontal Rule Attributes

Adding Horizontal Rules
Size=number Size=10 Specifying the
rules height in pix-
el
Width=number Width=80% Specifying the
width of the rule in
pixels, or as per-
centage of the doc-
uments width
Align=direction Align=left/right /
center
It refers to the way
a rule should be
aligned on the
page.
Noshade <hr noshade> Used to create a
solid bar, with no
Color=color Color =blue Used to change the
color of the hori-
HTML
Page 17
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 num-
ber, an RGB value, or a color name.
<body bgcolor=#000000>
<body bgcolor=rgb(0, 0, 0)>
<body bgcolor=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.
<body background=clouds.gif>
<body background=http://www.w3schools.com/
clouds.gif>
- If you want to use a background image, you
should keep in mind the ff:
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 page?
Will the background image look good
when it is repeated on page?
Will the background image take
away the focus from the text?
Backgrounds
HTML
Page 22
Sample Code:

Links and Anchors
<html>
<body>
<h1>Table of Contents</h1>
<pre>
Parts of the body:
<a href=#leg>legs</a>
<a href=#shoul>shoulder</a>
<a href=#feet>feet </a>
</pre>
<br><br><br><br><br><br><br><br><br><br> <
a name=leg><h6> legs</h6></a>
Leg a human limb; commonly used to refer to a limb
but technically only the part of the limb between the knee and
ankle.
<br><br><br><br><br><br><br><br><br><br>
<a name= shoul><h6>shoulder</h6></a>
Shoulder-the part of the body between the neck and the
upper arm.
<br><br><br><br><br><br><br><br><br><br>
<a name=feet><h6>feet</h6><a>
Foot the part of the leg of a human being below the
ankle joint.
</body>
</html>
Try it Yourself!
HTML
Page 21
- The name attribute is used to create a named anchor.
The name of the anchor can be any text you care to
use. The line below defines a named anchor:
< a name=tips> Useful Tips Section </a>
- Linking to a specific anchor
Once you have created an anchor you can
define a link so that a users click will bring her
directly to the section of the document that con-
tains the anchor, not just top of that document.
< a href=#tips> Useful Tips </a>

Links and Anchors
HTML
Page 18
- Specifying Margins
<body Leftmargin=1.5>
Note: Internet Explorer Only
- Creating Indents
<spacer type=horizontal size=36>
Note: Netscape Only
- Specifying the space between paragraphs
<spacer type=vertical size=36>
Note: Netscape Only
- Creating blocks of space
<spacer type=block width=100 height=100 Align=left/
right>
Note: Netscape Only
Page Layout
Leftmargin=number Leftmargin=2 Speify the width in
pixels of the space
between the left
border of the win-
dow and the con-
tents of the page.
Topmargin=number Topmargin=3 Specify the height in
pixels of the space
between the top
border of the win-
dow and the content
HTML
Page 19
- Creating Columns
<multicol cols=3 Gutter=24 width=75%> . . . .
</multicol>

Note: Netscape only
- Centering elements on a page
<center> . . . . . </center>
- Controlling Line Breaks
You may have certain phrases in your document that you
dont want separated.
<nobr> . . . . . </nobr>
Page Layout
Cols=number Cols=3 It is the number of
columns desired.
Gutter=number Gutter=24 It is the width of
the space between
the columns, in
pixels or as a per-
centage.
Width=number Width=75% It is the width of
the entire column
set, including the
gutter, in pixels or
as percentage of
window size.
HTML
Page 20
- The Anchor Tag and the Href Attribute
- 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 <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.
<a href=url> Text to be displayed </a>
- The Target Attribute
- With the target attribute, you can define
where where the linked document will be
opened.
- The line below will open the document in a
new browser window.
< a href=http://www.w3schools.com/
target=_blank> Visit W3Schools!</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.
< a name=label> text to be displayed</a>
Links and Anchors

HTML Module

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Module

Încărcat de

Drepturi de autor:

Formate disponibile

Name:

S-ar putea să vă placă și