WEB DESIGNING MODULE

Information and Communication Technology – WEB PAGE DESIGNING
Prepared by: ANABELLE D. BAYSIC Page 1
WEB PAGE
DESIGNING
(using HTML)
MODULE

Module
e
STARTING WITH HTML
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.
1

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
.edu
- Companies that are
trying to make money
- High school, colleges &
Universities
- General Motors
– GM.com
- UST – UST.edu
.gov
.org
- Government,or
government-related
entities
- Special (usually non-
profit) organizations
- The White House –
Whitehouse.gov
- Consortium.org
.net
.xx
- Internet service
provider
- Country code
INQ7.net
- Philippines - .ph
- 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
OR TAGS
AND ITS MEANING
<HTML></html>
<HEAD>
HEADING
</HEAD>
<TITLE>
- a guide to browser
- a larger font size text, usually bold or italic in style, showing
the different sections of a page
- close tag for the head
- 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
- close tag for the title
- contains your documents or info.
- closing the body tag
- Inline images that display lines across the page to separate
different sections
- Graphics, icons, bullets, line photos, or pictures that are not
part of the HTML file.
- a type of inline image that defines hotspots. These are
areas that activate functions when selected.
- The text that makes up the main content of the Web page.
It has many formats. It can be in paragraph form or bulleted
list.
</TITLE>
<BODY>
</BODY>
<HR>
HORIZONTAL
RULE
IMAGE
IMAGEMAP
NORMAL TEXT
<BG>
BACKGROUND
- The wallpaper of the Web page. It can be a solid color, a
picture or a graphic, or a default standard with white or
gray background.

ANIMATED
IMAGES
- inline images that include motion and animation. These
images are more attractive to the user.
- Text, phrases, or graphics that help the user to navigate
more on the Web page. By clicking the links, the browser
goes to a location in a file or to request a file from the
server.
- means break or line space
- a blank line is inserted between text
- preformatted
- text
LINKS
<BODY>
</BODY>
<BR> BREAK
<P>
PARAGRAPH
<pre></pre>
<font></font>
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
e
HTML TAGS
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.
2

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

O
U
T
P
U
T
3. Links
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>BOOK CRAFT</H1>
<H3>PUBLISHING</H3>
<AHREF=“C:publication.htm”>journals</A>
</BODY>
</HTML>
Allows
readers to
choose
highlighted
text or an
image from
your Web
pages to go
to other Web
pages.
O
U
T
P
U
T
4. Image
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMGSRC=“C:imageBookcraft.gif”ALIGN=“left”>
<H1>BOOK CRAFT</H1>
<H3>PUBLISHING</H3>
</BODY>
</HTML>
Allows you to
add images
to your web
pages

O
U
T
P
U
T
TAGS AND THEIR FUNCTIONS
COMMAND FUNCTION
<HTML></HTML>
The beginning and the end of the
HTML document.
<HEAD></HEAD>
Used for header information. It is the
beginning and the end of the section
of the document.
<TITLE></TITLE>
Indicates the beginning and the end
of the title. The title is not displayed in
the body of the Web page but on the
title bar of the browser.
<BODY></BODY>
Indicates the beginning and the end
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.
- Inserts a horizontal line
- Breaks a line text and marks the start of a new line.
It does not need a closing tag.
<HR>
<BR>
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
place of the number next to the
item
• Sequential numbers appear
• An ideal format for steps,
rankings, and other sets of
information for which order is
stressed
• Works well for listing of items
equally important and order does
not matter
UNORDERED LIST
TAG NAME FUNCTION SYNTAX
Unordered List
tags
List Item tag
- Also known as
unnumbered list or
bulleted list, formats
information as bullet
points. This tag creates
an unordered or
bulleted list.
- Denotes an item on
the list
<UL
TYPE=“disc/square/circle”compact>
list items content </UL>
<LI> list item

To use Unordered List tags
Syntax Output
ORDERED LIST
Ordered List tag
List Item tag
Creates an ordered or
numbered list
Denotes an item on the
list
<OL
TYPE=“1/A/a/I/”START=“start
value”compact> list item
content </OL>
<LI> list item content </LI>

To use Ordered List tags
Syntax Output
DEFINITIONLIST
Definition List tag
Definition Term tag
Term’s Definition tag
Denotes a definition list
Contains a term to be
defined in the definition list
Contains a term’s definition
<DL> terms and definition
content </DL>
<DT> terms being defined
content</DT>
<DD> term definition
content </DD>

To use Definition List tags
Syntax
Output

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

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

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

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
e
INSERTING IMAGES IN A WEB PAGE
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
4

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.
STEPSIN 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=”#”>
STEPSIN 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 Aligns to the side and wraps the text above, around, and below it.
top Aligns with the tallest item available.
text top Aligns with the tallest text character available
middle Aligns the baseline of the current line with the middle of the image.
absmiddle Aligns the middle of the current line with the middle of the image.
baseline Aligns the bottom of the image with the baseline of the current
line.bottom
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 marqueeare importantin
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
e
CREATING A HYPERLINK
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
5

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
Link color is the color without a mouse over it or before visited.
The default color is usually blue.
Vlink
Visited link controls the color of a link that has been clicked or
visited. The default color is usually green or red.
Alink
Active link controls the color of a link on which a mouse has been
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
e
ADDING FORMS ON THE WEB PAGE
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.
6

Attribute Syntax Function
Form Tag
<Form Action=”url”></Form>
Describes what URL the information will
be sent to. It tells the address where
you will send this paper form. If an
ACTION is committed, the URL of the
page containing the form is used by
default.
<Form
Method=”post”></Form>
Sends the form entry results as a
document
<Form Method=”get”></Form>
Submits the results as a part of the URL
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
1. Input Text
Tag
<input type=”text” value=”text”>
It is where all fields within a
form are specified. There is
no need to put a closing
INPUT tag.
2. Text
Attribute
<input text name=”Full Name”
size=”40”>
text is the default, with SIZE
used to specify size of the
box that is created or how
many characters wide the
text area will be. The
default size is 20 characters.

3. Text Area
<textarea row=”#” cols=”#” text
here! </textarea>
allows you to produce a box
that can contain several
lines of text. The TEXT
AREA tag requires a unique
name, specified with
NAME=. You can specify
the size of you text box by
using the ROWS and COLS
attributes. You have to put
a closing tag for TEXT
AREA.
4. Select <Select>
<option> text 1 </option>
</Select>
to create a list field in which
some choices are hidden.
5. Option
The method to be used in
order to limit your user’s
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
e
FORMATTING TABLES
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
<table border=”2”></table>
If you increase the value
greater than 1, it will
7

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

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 BORDERCOLOR AND BACKGROUND COLORFOR TABLE
ROW

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

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.
Frameset <frameset></frameset>
Marks frameset contents
and describes their layout.
ATTRIBUTES OF A FRAME TAG
Rows Frameset rows=”50%,*”
Defines number and sizes
of horizontal frames to
create
Cols Frameset cols=”70%,*”
Defines number and sizes
of vertical frames to create
Frameborder Frame border=”1”
Turns border between
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.
Frame tag <Frame>
Specifies a frame source
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
SRC
Defines location and filename for frame
contents.
NAME
Defines frame name for reference by
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
Frameborder
Determines frames with or without
borders: 0 or No – off borders, 1 or Yes
enables border.
Border
Specifies the space between frames in
the latest browsers.
Framespacing Specifies the space between frames in

the older browsers.
Border Color
Customizes color of lines separating
frames.
Below are the attributes of the Frame tag.
Attribute Function
Marginheight
Specifies space between frame contents
and top and bottom borders.
Marginwidth
Specifies space between frame contents
and left and right borders.
Noresize
Stops users from changing a frame’s
dimensions.
Scrolling
Controls the appearance of the frames:
“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 DESIGNING MODULE

More Related Content

What's hot

Viewers also liked

Similar to WEB DESIGNING MODULE

Recently uploaded

WEB DESIGNING MODULE