Web Page Designing: (Using HTML)

WEB PAGE
DESIGNING
(using HTML)
MODULE
Information and Communication Technology – WEB PAGE DESIGNING

Prepared by: ANABELLE D. BAYSIC Page 1
Module
STARTING WITH HTML
1e
After reading this module, the students should be able to:

a.) Define HTML
b.) Understand the common internet domains
c.) Determine the requirements in creating a Web page using the
HTML
d.) Identify the elements of the Web page
e.) Know how to save the html file using notepad
In 1990, Tim Berners-Lee invented the HTML. HTML stands for HyperText Markup
Language. This is the Languange used to create and link Web pages together. It is the
“mother tongue” of your website. An HTML document consists of only text – the main
text of the document and special instructions called tags. A Web page is designed by
using tags. Tags are the basic coding units in the HTML system. They are key words
or phrases that are enclosed by angle brackets <>. Tags describe how graphics and
text are to be displayed. They are also used to create links between documents. HTML
is run by a Web browser like Internet Explorer, Mozilla Firefox and Google Chrome.
These are the tools that can be displayed and run HTML documents and their links.

WEB PAGE
HTML Code

DEFINITION OF TERMS
WWW - World Wide Web
HTML - HyperText Markup Language.
URL - Uniform Resource Locator.
Web Page - is the lingua franca of the web. A group of electronic files stored on
computers all over the world containing a vast of information.
Website - a site or location on the world wide web. It may consists of one or more
pages that related to a common theme, such as a person, business, organization, or
any other subject.
Web Browser - is the software that you need in order to find, retrieve, view, and send
information on the internet. Examples are google chrome, mozilla firefox, internet
explorer, and opera mini, etc.
Download - to transfer a file from another system to your own computer system via a
modem over telephone or cable lines.
Upload – to transfer a file from your computer system to another system.
FAQ – Frequently Asked Question
Firewall – software that limits certain kinds of access to a computer from a network or
other outside source.
GIF – Graphical User Interface, consist of 256 colors.
JPEG – Joint Photographic Expert Group, consist of 16.7 million colors.
PNG – Portable Network Graphics
Home Page – is the navigation center for the website.
Modem – Modulator Demodulator, used between a computer and a phone or cable to

transmit signal to and from the internet in a form of computer’s digital to an analog
signal and vice versa.

TCP/IP – Transmission Control Protocol/Internet Protocol
Chat – a form of a real time communication where participants type what they want to
say and repeated on the screen of the other participants.
COMMON INTERNET DOMAINS
DOMAIN WHEN IS IT USED? AN EXAMPLE
.com - Companies that are - General Motors

trying to make money – GM.com
.edu - High school, colleges &
Universities - UST – UST.edu
.gov - Government,or - The White House –

government-related Whitehouse.gov
entities
.org - Special (usually non- - Consortium.org
profit) organizations
.net - Internet service INQ7.net

.xx provider - Philippines - .ph
- Country code - Canada- .ca
- Australia- .au
- France- .fr

REQUIREMENTS IN CREATING A WEB PAGE USING THE HTML
1. Editor – using the Notepad (source code) in text and extension name - .html or .htm.
2. Browser – usually internet explorer as it is designed by microsoft.
3. Program in HTML (syntax)
Syntax:
<Html>
<Head>
<Title></Title>
<Body></Body>
</Html>

ELEMENTS OF A WEB PAGE
BASIC CODES
AND ITS MEANING
OR TAGS
<HTML></html> - a guide to browser
<HEAD> - a larger font size text, usually bold or italic in style, showing
HEADING the different sections of a page
</HEAD> - close tag for the head
<TITLE> - displays the browser’s title bar. It is the name assigned to

the page if you add it to the browser’s list of favorites
</TITLE> - close tag for the title
<BODY> - contains your documents or info.
</BODY> - closing the body tag
<HR> - Inline images that display lines across the page to separate
HORIZONTAL different sections
RULE
- Graphics, icons, bullets, line photos, or pictures that are not
IMAGE part of the HTML file.
- a type of inline image that defines hotspots. These are

IMAGEMAP areas that activate functions when selected.
- The text that makes up the main content of the Web page.
NORMAL TEXT It has many formats. It can be in paragraph form or bulleted
list.
<BG> - The wallpaper of the Web page. It can be a solid color, a

BACKGROUND picture or a graphic, or a default standard with white or
gray background.

ANIMATED - inline images that include motion and animation. These
IMAGES images are more attractive to the user.
LINKS
<BODY>
</BODY> - Text, phrases, or graphics that help the user to navigate
more on the Web page. By clicking the links, the browser
<BR> BREAK goes to a location in a file or to request a file from the
server.
<P>
PARAGRAPH - means break or line space
<pre></pre> - a blank line is inserted between text
<font></font> - preformatted
- text
Title
Links Image/Animated
Heading
Horizontal Rule
Normal Text
Image
Body
Imagemap
Background

STARTING NOTEPAD
Notepad has different parts, namely, the main menu bar, the scroll bars, and the text
are. The main menu bar displays all the commands in the program. The scroll bar is
used to display different portions of the text file in the window. There are two kinds of
scroll bars: the vertical and the horizontal scroll bars. The text area is the place where
you input the text.
TO SAVE THE HTML FILE USING NOTEPAD
1. From the Menu bar, click the File menu and then click Save or Save As. The Save
As dialog box displays and changes the Save-in box to the target folder or drive.
2. Type the filename inside the Filename box below. (Remember to use an .HTML
extension for the file name.)
3. Then click the Save button.

TO DISPLAY THE HTML FILE TO THE BROWSER
1. Click the Start button, then Program.
2. Look for the default browser, then double click.

Modul
2 HTML TAGS
e
a.) Define tags
b.) Apply the rules in using tags
c.) Enumerate the main types of tags
d.) Identify the Tags and their functions
e.) Know the heading tags for formatting texts
f.) Understand the formatting in text tags
g.) Know how to create a list
TAGS are sets of instructions that tell the browsers what layout of text to use, what
graphics to be displayed, and where or what links are needed.
RULES IN USING TAGS
1. Each tag must be enclosed in <brackets>.

2. You can use small or capital letters.
3. Most tags come in pairs: the starting tag and the ending tag.
Example:
<HTML> (starting tag)
</HTML> (ending tag)
4. The browser ignores spaces around the tags. To read the codes easily, it is
advisable to put spaces around the tags.

MAIN TYPES OF TAGS
TAGS MEANING
TYPES
1. <HTML> Lets you set
Document <HEAD> up the basic
Structure <TITLE> BOOK</TITLE> structure of
</HEAD> your Web
<BODY> pages.
BOOK CRAFT
</BODY>
</HTML>
O
U
T
P
U
T
2. <HTML> Lets you

Formatting <HEAD> change the
<TITLE> BOOK</TITLE> appearance
</HEAD> of the text.
<BODY>
<H1>BOOK CRAFT</H1>
<H3>PUBLISHING</H3>
</BODY>
</HTML>

O
U
T
P
U
T
<HTML> Allows
<HEAD> readers to
<TITLE> BOOK</TITLE> choose
</HEAD> highlighted
<BODY> text or an
3. Links
<H1>BOOK CRAFT</H1> image from
<H3>PUBLISHING</H3> your Web
<AHREF=“C:\publication.htm”>journals</A> pages to go
</BODY> to other Web
</HTML> pages.
O
U
T
P
U
T
<HTML> Allows you to

<HEAD> add images
<TITLE> BOOK</TITLE> to your web
4. Image </HEAD> pages
<BODY>
<IMGSRC=“C:\image\Bookcraft.gif”ALIGN=“left ”>
<H1>BOOK CRAFT</H1>
<H3>PUBLISHING</H3>
</BODY>
</HTML>

O
U
T
P
U
T
TAGS AND THEIR FUNCTIONS
COMMAND FUNCTION
The beginning and the end of the

<HTML></HTML>
HTML document.
Used for header information. It is the
<HEAD></HEAD> beginning and the end of the section
of the document.
Indicates the beginning and the end
of the title. The title is not displayed in
<TITLE></TITLE>
the body of the Web page but on the
title bar of the browser.
Indicates the beginning and the end
<BODY></BODY> of the contents of the body of the
Web page.

HEADING TAGS FOR FORMATTING TEXT
<H*> AND </H*>
This indicates the beginning and the end of the heading section. “H” represents the
heading and “*” represents the size. <H1> is the largest and <H6> is the smallest.
Heading separates text and introduces new topics on the Web page. It varies in
sizes. Text formatted with heading appears differently in the Web browsers if different
points are used.
<H1>Heading 1</H1>- 24 point in size

<H3>Heading 3</H3> - 14 point in size
<H5>Heading 5</H5> - 10 point in size
<H6>Heading 6 </H6>- 7 point in size
Syntax Output

FORMATTING TEXT TAGS
The Text formatting feature is a powerful tool for organizing the content of your Web
pages and for easier navigation.
The HTML tags <BR> and <P> are used to format the text. They control the space
between the lines of text and point where lines break on the screen.
COMMAND FUNCTION
<P> - Indicates the beginning of the paragraph and

inserts a blank line before and above the paragraph.
It does not need a closing tag.
<HR>
- Inserts a horizontal line
<BR>
- Breaks a line text and marks the start of a new line.
It does not need a closing tag.
SyntaxOutput

CREATING LIST
THREE BASIC TYPES OF LISTS:
1. Unordered List
2. Ordered List
3. Definition List
UNORDERED LIST ORDERED LIST
• Bullet characters appear in • Sequential numbers appear

place of the number next to the
item
• Works well for listing of items • An ideal format for steps,

equally important and order does rankings, and other sets of
not matter information for which order is
stressed
UNORDERED LIST
TAG NAME FUNCTION SYNTAX

Unordered List - Also known as <UL
tags unnumbered list or TYPE=“disc/square/circle”compact>
bulleted list, formats list items content </UL>
information as bullet
points. This tag creates
an unordered or
bulleted list.
List Item tag - Denotes an item on <LI> list item

the list

To use Unordered List tags
Syntax Output
ORDERED LIST
Ordered List tag Creates an ordered or <OL

numbered list TYPE=“1/A/a/I/”START=“start
value”compact> list item
content </OL>
List Item tag Denotes an item on the <LI> list item content </LI>
list

To use Ordered List tags
Syntax Output
DEFINITION LIST
Definition List tag Denotes a definition list <DL> terms and definition
content </DL>
Definition Term tag Contains a term to be <DT> terms being defined

defined in the definition list content</DT>
Term’s Definition tag Contains a term’s definition <DD> term definition

content </DD>

To use Definition List tags
Syntax
Output

Modul
3
e TEXT FORMATTING

a.) Define text formatting
b.) Enumerate the types of text formatting
c.) Identify the text formatting and their functions
d.) Know the importance of text formatting
Text formatting is a styling or changing the appearance of a text. It includes change in

colors, size, font, and alignment.
TYPES OF TEXT FORMATTING

1. Text-Level Formatting – is a formatting for a text or group of text.
Tag Name Syntax Function

1. Bold face <b> text </b> Contains text in boldface image.
Contains text which you want to be
2. Italics <i> text </i>
italic in format.
3. Strikethrough <s> text </s> Contains the text to be marked
Contains the text to be rendered in
4. Typewriter <tt> text </tt> a fixed-width font or some kind of
typewriter font.
Contains text to be rendered with
5. Underline <u> text </u>
an underline.
<font color=”#” size=”#” Contains the text properties to be
6. Font Tag
face=”font face”> modified.

SyntaxOutput
1. Text-Level Formatting – is a formatting for a text or group of text.

Contains the text to be emphasized. It is
1. Emphasize <em> text </em>
typically rendered in italics.
Contains the text to be rendered as a
2. Superscript <sup> text </sup>
superscript to the text that precedes it.
Contains the text to be rendered as a
3. Subscript <sub> text </sub>
subscript to the text that precedes it.
Contains the text to be strongly
4. Strong <strong> text </strong> emphasized. It is typically rendered in
boldface.
Contains text to be rendered in a font
5. Big <big> text </big>
size bigger than the default size.
Contains text to be rendered in a font
6. Small <small> text </small>
size smaller than the default size.

SyntaxOutput
2. Paragraph Formatting – is a formatting that controls the paragraph.

This tag inserts a line break
1. Line Break <br>
in a document.
<hr align=”center” Places a horizontal line in
2. Horizontal Rule
color=”blue” size=”30”> the page.
Centers all text and other
3. Center <center>paragraph</center> page components it
contains.
This tag is rendered in a
4. Pre-formatted Text <pre>paragraph</pre>
fixed width font.
Defines the sections or
<div align=”left/right/center/ divisions of a document
5. Division Alignment
justify”>paragraph</div> that require special
alignment.
Establishes the hierarchy of
<hn align=”left/right/center/
6. Heading Levels document heading levels
justify”>paragraph</hn>
and is rendered in boldface.
<p align=”left/right/center/
7. Paragraph Denotes a paragraph
justify”>paragraph</p>

Syntax
Output
IMPORTANCE OF TEXT FORMATTING

1. It makes your Web page appealing to the audience.
2. It allows you to emphasize a certain word or text and idea on your Web page.
3. It allows you to sort or organize the content of your Web page.

Modul
4 INSERTING IMAGES IN A WEB PAGE
e
a.) Define file format and images
b.) Analyze the standard format of image tag
c.) Apply the steps in inserting images in a Web page
d.) Know the advantages of adding image in a Web page
e.) Perform the rules for inserting background image
f.) Discuss the steps in creating a marquee
g.) Enumerate the reasons why image, background and marquee are
in important in creating a Web page
File format is the structure of how information is stored in a computer file.

Imagessuch as pictures, graphics, or illustrations often taken from sensible objects and
use to illustrate subject.
STANDARD FORMAT OF IMAGE TAG

The basic format of IMG:
Attribute
<IMG SRC=”luneta.jpg”>
Image Tag Image File

IMG stands for “image”. It tells to the browser that an image will go here on the page.
SRC stands for “source”. It tells the browser where to go to find the image.
The commonly used image file formats are: .gif and .jpeg.
STEPS IN ADDING IMAGES IN WEB PAGE
1. Place the cursor where you want to insert the image.

2. Type <IMG SRC=”ImageName.jpg/gif/png width=”#’ height=”#”>
STEPS IN ALIGNING AN IMAGE TO THE CENTER
1. Type <CENTER> before the image you want to center align.

2. Type </CENTER> after the image you want to center align
Syntax Output

ALIGNING IMAGE
The placement of the image on the page can be controlled by using the Image Align
tag. Here are the different attributes of alignments.
Attribute Function
left or right Alignsto the side and wraps the text above, around, and below it.
top Alignswith the tallest item available.
text top Alignswith the tallest text character available
middle Alignsthe baseline of the current line with the middle of the image.
absmiddle Alignsthe middle of the current line with the middle of the image.
baseline Alignsthe bottom of the image with the baseline of the current
bottom line.
absbottom Aligns the bottom of the image with the bottom of the current line.
ADDING BORDER TO THE IMAGE
You set the <IMG> tags BORDER attribute to the width of the border in pixels.
Borders may be set from 0 to 10. If you set it to 0, you will not see any border.
Syntax Output

ADVANTAGES OF ADDING IMAGES IN A WEB PAGE
1. It provides content that is not available via text, such as scanned picture.
2. It adds color, humor and excitement to the Web page.
3. It attracts Netizens to visit your Website.
4. It attracts buyers to purchase your products.
CREATING BACKGROUND
Background is what underneath another object.
1. Image
2. Color

Change in Color
Syntax Output
Image Form
SyntaxOutput
RULES FOR INSERTING BACKGROUND IMAGE

1. The image and the Web page should be saved on the same folder.
2. The syntax and the file location of the picture should be typed correctly.
MARQUEE
Marquee is a small section of the browser window that displays text rolls across the
screen.

Syntax
Output
MARQUEE ATTRIBUTES
Marquee Tag Attribute

1. Direction “left”, “right”, “up”, or “down”
2. Bgcolor “color” or “hexadecimal value”
3. Scrolldelay “number”
4. Height “number”
5. Behavior “scroll”, “slide”, “alternate”
6. Width “number”
7. Loop “number” or “infinite”

Syntax
Output

Reasons why image,background and marquee are important in
creating a Web page
1. It grabs and keeps the attention of the viewer.

2. It creates an overall impact to the design of your Web page.
3. It adds more meaning to your content.

Modul
5 CREATING A HYPERLINK
e
a.) Define hyperlink
b.) Apply the steps in changing the color of a hyperlink text.
c.) Know the syntax increating a hyperlink on the Web page.
d.) Perform the steps in removing the underline of the hyperlink text.
e.) Discuss how to link image on the Web page.
f.) Enumerate the advantages and disadvantages of Hyperlink on the
Web page.
A hyperlink or link is a word, group of words, or image that you can click on to jump to
another document. It is used to connect Web pages of different Web sites or Web
servers anywhere in the world. The World Wide Web is composed of millions of linked
Web pages. Hotspots are used to create a link. A hotspot is an area of a text or an
image that notifies the visitor that there is a link on the text or image.
Syntax Output

Syntax Output

CHANGING THE COLOR OF THE HYPERLINK TEXT
There are different colors used in a link to indicate that it is a normal, visited, or an
active link.
Attribute Function
Link color is the color without a mouse over it or before visited.
Link
The default color is usually blue.
Visited link controls the color of a link that has been clicked or
Vlink
visited. The default color is usually green or red.
Active link controls the color of a link on which a mouse has been
Alink
pressed but not clicked. The default color is usually green or red.
Syntax
Output

REMOVING THE UNDERLINE OF THE HYPERLINK TEXT
Syntax
Output
IMAGE LINK
The image link is used as the linking tool in connecting to another Web page or Web
site.
Syntax
Output

ADVANTAGES OF HYPERLINK ON THE WEB PAGE
1. It connects Web pages or Web sites which content are related to each other.
2. It identifies the rank of the Web site basically for business Web sites.
3. Without hyperlink there is no WWW because World Wide Web is a connection of
interlinked hypertext document.
DISADVANTAGES OF HYPERLINK ON THE WEB PAGE

1. Some hyperlinks are dangerous because it hides malicious content.
2. Some hyperlinks are also use for cybercrime. Once you click the hyperlink, it
contained malwares/viruses and it can hack your email account.
3. Some hyperlinks are destructive. Once you click it, the virus will automatically
installed on your computer and attacked your softwares.

Modul
6 ADDING FORMS ON THE WEB PAGE
e
a.) Define Web forms
b.) Apply the steps in creating a form tag.
c.) Know the uses of two special buttons in form tag.
d.) Enumerate the Web form elements.
e.) Perform the steps in creating a password tag.
f.) Discuss the steps in creating check boxes.
g.) Determine the steps in adding radio buttons.
h.) State the purpose of html Web forms.
Adding Web forms to your Web pages, allows you to communicate through your Web
site. Web form allows the user to enter information and provides predefined choices
from which the user can select. It is made up of spaces where you can enter text
information. A Web form is instantly submitted and most of the time they are also
immediately responded to. Most forms include fields: text boxes or pull-down menus
that allow user to input. The label explains what information is needed by an adjacent
field.
CREATING FORM TAG
Creating form is easy. It can also appear anywhere on a Web page. The form tag has
two attributes, ACTION and METHOD. They define how a particular form will behave,
determine where the information entered by the user will go, and how it will be sent
there.
Attribute Syntax Function
Describes what URL the information will
be sent to. It tells the address where
you will send this paper form. If an
<Form Action=”url”></Form>
ACTION is committed, the URL of the
page containing the form is used by
Form Tag
default.
<Form Sends the form entry results as a
Method=”post”></Form> document
Submits the results as a part of the URL
<Form Method=”get”></Form>
header instead.
TWO SPECIAL BUTTONS
1. Submit button – gathers all information entered in the form when it is clicked.
2. Reset Button– clears the form and returns all the settings to their original default
values.
Syntax Output

WEB FORM ELEMENTS
It is where all fields within a
form are specified. There is
1. Input Text no need to put a closing
<input type=”text” value=”text”>
Tag INPUT tag.
text is the default, with SIZE

used to specify size of the
box that is created or how
2. Text <input text name=”Full Name” many characters wide the
Attribute size=”40”> text area will be. The
default size is 20 characters.

allows you to produce a box
that can contain several
lines of text. The TEXT
AREA tag requires a unique
name, specified with
<textarea row=”#” cols=”#” text NAME=. You can specify
3. Text Area
here! </textarea> the size of you text box by
using the ROWS and COLS
attributes. You have to put
a closing tag for TEXT
AREA.
to create a list field in which

4. Select <Select>
some choices are hidden.
<option> text 1 </option>
<option> text 2 </option> The method to be used in
5. Option <option> text 3 </option> order to limit your user’s
</Select> choices.
Syntax Output

CREATING A PASSWORD TAG
Several Web sites would require the user to input a password to be able to access any
of the Web pages.
The MAXLENGTH attribute specifies the maximum number of characters a user may
enter into the field. If a MAXLENGTH is used, which is longer than the size of the text
field, then the text field will scroll to allow the user to enter more data. If MAXLENGTH
is not included in the code, the user may type any amount of text. But in most
PASSWORD fields, you will notice that there is limitation on the number of characters
that you can type.
Syntax

Output

CREATING CHECK BOXES
Check boxes allow users to make multiple selections from a list. They display an array
of choices that are all visible at once, and from which users may select any, all, or none.
Syntax
Output

ADDING RADIO BUTTONS
To create a set of options that a user can see all at once, and from which a user can
make only one selection, you can use radio buttons.
RADIO buttons are small white circles, each shown next to the label. They are similar to
check boxes. In a RADIO button, the user is only allowed to make a single choice from
the list by clicking a circle.
Syntax Output
PURPOSE OF HTML WEB FORMS
1. It allows the users to communicate with you through your Web site.
2. It helps you to monitor who visited your Web site and get feedback from them.
3. It is used to promote some advertisements, announcements, or events.

Modul
7 FORMATTING TABLES
e
a.) Define table
b.) Enumerate the table and border attributes.
c.) Determine the proper way of coding the table elements.
d.) Apply the spanning table column and row.
e.) Perform the cell padding and cell space adjusting.
f.) Dicuss working with width and height.
g.) Set the border color and background color for table row.
A table is useful to summarize data from a database search or a set of choices. With
HTML tables, it’s not just text that can be placed inside but as well as pictures, links,
and even video and sounds.
TABLE ATTRIBUTES

Table Tag <table></table> Creates a basic table
Table Row tag <tr></tr> Contains several cells
Table Data tag <td></td> Creates individual cells
To display a border for table, use the BORDER attribute.

BORDER=0 <table border=”0”></table> Borders are invisible
BORDER=1 <table border=”1”></table> Borders are visible
BORDER=N If you increase the value
<table border=”2”></table>
greater than 1, it will

make the border thicker.
PROPER WAY OF CODING THE TABLE ELEMENTS:
<table>
<tr>
<td></td>
</tr>
</table>
Syntax
Output
SPANNING TABLE COLUMN AND ROW

A table heading oftentimes occupy more space than the rest. Spanning columns and
rows enables you to create interesting grids and to manage areas of space within a
table more completely.
Attribute Function
COLSPAN To span a column
ROWSPAN To span a row
Syntax
Output
USING CELLPADDING

Cellpadding sets the amount of space (both horizontal and vertical) between the cell
wall and the contents. The default value of Cellpadding is 1. The text inside the box will
look much better if you move it away from the border lines. It will look less crowded.
Syntax
Output
ADJUSTING CELL SPACE

Cellspacing allows you to increase or decrease the amount of space between the cells
of the tables.
Syntax
Output
WORKING WITH WIDTH AND HEIGHT

Table width and height allows you to control the width and height of the table.
Syntax
Output
SETTING BORDER COLOR AND BACKGROUND COLOR FOR TABLE
ROW

These attributes sets the colors of the borders and the background for a table row.
Syntax
Output
Modul
8
e
CREATING FRAMES

a.) Define frames
b.) Enumerate the attributes of frame tag.
c.) Apply the steps in setting frameset column.
d.) Know how to specify rows
e.) Perform the attributes in formatting frames.
Frames divide the browser window into parts, each of which appears as a separate
HTML document. Frames work very much like Tables. They are used to divide the
screen into two or more Web pages, and simultaneously display their contents in a
single browser window. Frames are used to assist in the navigation of many pages
over a large number of topics.

Marks frameset contents
Frameset <frameset></frameset>
and describes their layout.
ATTRIBUTES OF A FRAME TAG

Defines number and sizes
Rows Frameset rows=”50%,*” of horizontal frames to
create
Defines number and sizes
Cols Frameset cols=”70%,*”
of vertical frames to create
Turns border between
Frameborder Frame border=”1”
frames on and off
The Frameset tag tells the browser to get more files to be placed on the page. The
browser places all the files on one page.
Syntax

Output
SETTING FRAMESET COLUMN
The value of this attribute defines the column width of each column (horizontal) within
the frameset. Each column width must be defined in terms of pixels (fixed), percentage
of browser window (variables), or as a relative value of space remaining (variable) using
the “*” symbol.

Specifies a frame source
Frame tag <Frame>
file and name
Noframe tag <Noframes></Noframes> Defines alternate page

content for browsers
without frames
Below are the attributes of a Frame tag.
Attribute Function
Defines location and filename for frame
SRC
contents.
Defines frame name for reference by
NAME
hyperlinks.
Syntax
Output

SPECIFYING ROWS
The frameset row attributes specifies the row height of each row (vertical) within the
frameset. It is measured in terms of pixels (fixed) percentage of the area of the browser
window (variable), or as a relative value of space remaining (variable) using the “*”
symbol.
SYNTAX OUTPUT
Syntax Output

FORMATTING FRAME
Below are the attributes of the Frameset tag.
Attribute Function
Determines frames with or without
Frameborder borders: 0 or No – off borders, 1 or Yes
enables border.
Specifies the space between frames in
Border
the latest browsers.
Framespacing Specifies the space between frames in

the older browsers.
Customizes color of lines separating
Border Color
frames.
Below are the attributes of the Frame tag.
Attribute Function
Specifies space between frame contents
Marginheight
and top and bottom borders.
Specifies space between frame contents
Marginwidth
and left and right borders.
Stops users from changing a frame’s
Noresize
dimensions.
Controls the appearance of the frames:
Scrolling “YES” includes scrollbars and “NO”
prevents the scroll bar to appear.
Syntax

OUTPUT
DepEd - Manila

MANILA SCIENCE HIGH SCHOOL
Taft Ave., cor. P. Faura St., Ermita, Manila
Module 1- Starting with HTML

Pre-assessment
A.
B.
C.
D.
Practical Exercise
Module Test


Web Page Designing: (Using HTML)

Uploaded by

Document Information

Original Description:

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

Web Page Designing: (Using HTML)

Uploaded by

Copyright:

Available Formats

WEB PAGE

Information and Communication Technology – WEB PAGE DESIGNING

After reading this module, the students should be able to:

Information and Communication Technology – WEB PAGE DESIGNING

Information and Communication Technology – WEB PAGE DESIGNING

HTML - HyperText Markup Language.

URL - Uniform Resource Locator.

Upload – to transfer a file from your computer system to another system.

FAQ – Frequently Asked Question

GIF – Graphical User Interface, consist of 256 colors.

JPEG – Joint Photographic Expert Group, consist of 16.7 million colors.

PNG – Portable Network Graphics

Home Page – is the navigation center for the website.

Modem – Modulator Demodulator, used between a computer and a phone or cable to

Information and Communication Technology – WEB PAGE DESIGNING

COMMON INTERNET DOMAINS

DOMAIN WHEN IS IT USED? AN EXAMPLE

.com - Companies that are - General Motors

.gov - Government,or - The White House –

.net - Internet service INQ7.net

Information and Communication Technology – WEB PAGE DESIGNING

2. Browser – usually internet explorer as it is designed by microsoft.

3. Program in HTML (syntax)

Information and Communication Technology – WEB PAGE DESIGNING

</HEAD> - close tag for the head

<TITLE> - displays the browser’s title bar. It is the name assigned to

- a type of inline image that defines hotspots. These are

<BG> - The wallpaper of the Web page. It can be a solid color, a

Information and Communication Technology – WEB PAGE DESIGNING

<pre></pre> - a blank line is inserted between text

Information and Communication Technology – WEB PAGE DESIGNING

TO SAVE THE HTML FILE USING NOTEPAD

Information and Communication Technology – WEB PAGE DESIGNING

Information and Communication Technology – WEB PAGE DESIGNING

RULES IN USING TAGS

1. Each tag must be enclosed in <brackets>.

Information and Communication Technology – WEB PAGE DESIGNING

2. <HTML> Lets you

Information and Communication Technology – WEB PAGE DESIGNING

<HTML> Allows you to

Information and Communication Technology – WEB PAGE DESIGNING

TAGS AND THEIR FUNCTIONS

The beginning and the end of the

Information and Communication Technology – WEB PAGE DESIGNING

<H*> AND </H*>

<H1>Heading 1</H1>- 24 point in size

Information and Communication Technology – WEB PAGE DESIGNING

<P> - Indicates the beginning of the paragraph and

- Inserts a horizontal line

Information and Communication Technology – WEB PAGE DESIGNING

UNORDERED LIST ORDERED LIST

• Bullet characters appear in • Sequential numbers appear

• Works well for listing of items • An ideal format for steps,

TAG NAME FUNCTION SYNTAX

List Item tag - Denotes an item on <LI> list item

Information and Communication Technology – WEB PAGE DESIGNING

TAG NAME FUNCTION SYNTAX

Ordered List tag Creates an ordered or <OL

Information and Communication Technology – WEB PAGE DESIGNING

TAG NAME FUNCTION SYNTAX

Definition Term tag Contains a term to be <DT> terms being defined

Term’s Definition tag Contains a term’s definition <DD> term definition

<H> AND </H>