INTRODUCTION TO WEB PAGE

Prepared by:
YAU’MEE HAYATI HJ MHD YUSOF
NUR HAZWANI MOHAMAD ROSELI
UiTM TERENGGANU
 Course Description

Office Software Applications is an advanced course

emphasizing knowledge, application and hands-on
experience on current office technology.

Emphasis is also placed on the use of other

productivity software for the design and creation of
simple databases, web pages, Gantt chart and
desktop publishing activities.
 Course Outcomes

At the end of this course, the student will be able to:

CO1 Describe the role of office technology

in improving office productivity. (LO2,
C4, P1, A2).

CO2 Use and apply ICT effectively to lead to

a good work habits.(LO2, C4, P1, A2).
Sneak Peek….
Video 1 : What is HTML ???
 Syllabus Content
Lecture & Hands-on 2.2 Developing a website

2.2.1 Exploring web site structure

2.1 Developing a web page
2.2.2 Creating a hypertext link
2.2.3 Specifying a folder path
2.1.1 Exploring the history of the WWW
2.2.4 Linking to locations within documents
2.1.2 Creating an HTML document
2.2.5 Linking with linked images and
2.1.3 Working with block-level elements
image maps
2.1.4 Marking a list
2.2.6 Linking to resources on the Internet
2.1.5 Exploring other block-level elements
2.2.7 Using the link element
2.1.6 Working with inline elements
2.2.8 Working with metadata
2.1.7 Using element attributes
2.1.8 Working with empty elements
2.3 Working with web tables
2.1.9 Working with character sets and
special characters 2.3.1 Introducing web tables
2.3.2 Spanning rows and columns
2.3.3 Creating a table caption
2.3.4 Marking row groups
2.3.5 Marking column groups
2.3.6 Adding a table summary
2.3.7 Formatting tables with HTML attributes
 Exploring the history of the WWW
• HTML was invented by Tim Berners-Lee.
• It happen while he was in CERN, the European
Laboratory for Particle Physics in Geneva.
• Hypertext as implemented by the CERN group
involves jumping from one document to
another on computers scattered all over the
world.
 Definition of HTML
• Hypertext Markup Language is a markup
language that lets people create onscreen
documents for the Internet that can easily be
linked by words and pictures to other
documents.
• HTML documents are plain text (also known
as ASCII, pronounced AS-KEY) files that can be
created using any text editor (e.g. Notepad).
 Terminology and Definitions

a worldwide system of computer

Internet networks

Also called the Web :an information

system on the Internet which allows
WWW documents to be connected to other
documents by hypertext links, enabling
the user to search for information by
Web moving from one document to another.
Program that allows you to view Web
Browser pages

The first page that a Web site displays

Homepage which contain link for another web page
either inside the web site or outside the
web site.
 Terminology and Definitions

Downloading The process of a computer receiving

information

Uniform Resource Locator for identifying

URL the Unique address for a Web page

Built-in connection to another related Web

Hyperlink page

(link)
How internet works
Who is Siti Nurhaliza ?
Lets google…

Ooo..Siti Nurhaliza is
the famous
INTERNET SERVICE Malaysian
PROVIDER singer…now I know..
 How Web browser works
Step 2.
Web browser looks up
the home page setting

Microsof
t Firefo
Internet x Netscap
Explorer e Step 3.
The Web browser
Step 1. communicates with
Click the Web browser the access
program name provider’s server to
retrieve the IP
address. The IP
Oper Safar
i address is sent to
a
your computer.

Google
Chrome

Step 4.
The home page displays in the
Web browser
 How hyperlink works?

• What is a hyperlink (link)?

⮚ Built-in connection to another
related Web page

Different Web page
at same Web site
XXX
Click here
----------------------------------
----------------------------------
----------------------------------
----------------------------------
----------------------------------
----------------------------------
----------
How hyperlink works?
XXX
Click here
Web page at a
----------------------------------
---------------------------------- different Web site
----------------------------------
----------------------------------
----------------------------------
----------------------------------
----------------------------------
--------------
Item found elsewhere YYY
on same Web page
Click here
----------------------------------
----------------------------------
----------------------------------
----------------------------------
----------------------------------
----------------------------------
------------------
From HTML to Web Page
 HTML Structure
contains
information
about the
designate what will
document that is
appear in the title bar at
not generally
the top of the browser.
displayed with
the document.

contains the
<> </>
body of the text,
Beginning and
and is where you
Ending Tags
place the
document
material to be
displayed.

Tips : You can use notepad or Microsoft Word to write down HTML code.
Save file as . htm or html.
 Creating Heading
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the largest heading. <h6> defines the
smallest heading.
• H1 headings should be used as main headings,
followed by H2 headings, and less important H3
headings, and so on.

Tips : Double click button to clear the screen

HTML code Result
 Formatting Web Page

• To make a paragraph, start

typing the text you want to
appear on your web page.
• If you want to start a new
line in a certain place within
Tipsa :paragraph
Double click button to clear the screen
HTML code Result
 Changing the Way Text Looks

• To make a word or several

words bold <B> </B> or an
underlined word like <U>
</U> or italic word like <I>
</I>

Tips : Double click button to clear the screen

HTML code Result
 Attributes
• Telling Tags What To Do
– how or where they are to display the stuff that is
between them http://www.w3schools.com/tags/ref_colornames.asp

use
The any combination
attribute
style that
of can
text be or
add <FONT SIZE="+6" COLOR="red"
change the size <FONT
<FONTFACE="arial">practice</FONT>
COLOR="#FF0000">practice
all attributes
used
the FACE thein theoffont
withattribute
FONT text FACE="arial">practice</FONT>
<FONT SIZE="+3">practice</FONT>
</FONT>
tag
tag is COLOR

Tips : Double click button to clear the screen

HTML code Result
 Using List in Web Page
• HTML supports unnumbered, numbered and
definition lists.
Unnumbered Lists start with an opening list <UL> (for
unnumbered list) tag. Enter the <LI> (list
<DL> item) tag followed by the individual item;
<DT> NCSA and include:
My hobbies no closing tag is needed. End the
<DD> NCSA, theA definition
National list (coded
Center for as <DL>) usually
Definition Lists <UL> consists of alternating alist
<OL> entire list with a closing </UL> tag.
definition term
Supercomputing
<LI>ReadingApplications,
<LI> Reading is located
on the campus (coded
of the as <DT>) of
University and a definition (coded
<LI>Swimming
<LI> Swimming
as <DD>).
(also called Web
an browsers
ordered generally
list, from format
which the
Illinois
Numbered <DT> at Urbana-Champaign.
<LI>Traveling
<LI> Traveling
Lists Cornell the definition on a new line.
</UL>Theory
</OL> Center
tag name derives) is identical to an
<DD> CTC is located on the campus
unnumbered of it uses <OL>
list, except
Cornell University in Ithaca, New York.
</DL> instead of <UL>

HTML code Result

Tips : Double click button to clear the screen
 Using List in Web Page
• Nested list : The <DT> and <DD> entries can
contain multiple paragraphs, each containing
a nested list, in a single list item.
<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
<LI> Maine
</UL>
<LI> Michigan
<LI> Indiana
</UL>

Tips : Double click button to clear the screen

HTML code Result
 Making Line
• A Line across The Page
– It means "horizontal reference“ <HR>
– using the WIDTH attribute in the <HR> tag
• This is what it does:

• Increase or decrease the percentage to get

the length you want.
<HR WIDTH="50%">
Tips : Double click button to clear the screen
HTML code Result
 Insert Picture

• The IMG means "image" and SRC means "source".

• SRC is an attribute of IMG, it tells the browser
where to find the graphic in your repository.
• The item in the quotation marks is the file name of
your graphic. <IMG SRC="graphicfilename.gif">

• For instance if you keep your HTML document in a folder

called "my pages", keep your pictures in that folder too
otherwise they won't show up on your web page because
the browser will not be able to find them.
 Insert Background
• BACKGROUND is an attribute which goes in the
beginning <BODY> tag.
• If all you want is to change the color of the web page
use the BGCOLOR attribute in the BODY tag: <BODY
BGCOLOR="#00FFFF">
• To add a textured background on your web page you
will need background wallpaper which is actually a
graphic repeated over and over until the screen is
filled. <BODY BACKGROUND="graphicname.jpg">
 Insert Alignment
Alignment Text
• To align your text to center, use the following
tag: <center>
Attributes Alignment
<H3 ALIGN="right"> your text </H3>
<P ALIGN="right">practice, practice,
practice</P>
Tips : Double click button to clear the screen
HTML code Result
 Insert Alignment with graphic
Aligning Text With Graphics
Example:
• <IMG ALIGN="left" SRC="pups.jpg"> <I> See
how the textSee how the
here is text here isdown
going going down
thethe picture?
The align attribute makes this possible.
picture?<BR>The align attribute makes this
possible.</I>

Tips : Double click button to clear the screen

HTML code Result
 Insert Alignment,graphic with
ATTRIBUTE
Aligning Text With Graphics
<IMG ALIGN="left" SRC="pups.jpg"> <P>&nbsp;</P> <I> See
how far down the text here starts?<BR>The space in the P tags
make it happen. <BR CLEAR="all"> See how this line of text
starts below the picture? The CLEAR attribute did it. </I>

See how the text here is going down the picture?

The align attribute makes this possible.

Tips : Double click button to clear the screen

HTML code Result
 Insert Links
• Links, this is what the web is all about and it's simple to
do by using the anchor tags: <A> </A>
• HREF It means "Hypertext Reference". This attribute tells
the browser where to find the link. A link on the same
website would look like this: <A
HREF="filename.html">here goes text or image to be
clicked </A>
• Insert graphic within : <A HREF="filename.html"> <IMG
SRC="graphicname.jpg"> </A>

Tips : Double click button to clear the screen HTML code Result
 Insert Links
• Linking To Another Site
– To link to another website you have to type in the entire
URL (internet address).
<A HREF="http://www.webpages.ipfox.com">click
here</A>
• Sending Email
For visitors to be able to send you email from your site, do
the same thing but instead of the web address, put your
email address after mailto: <A HREF="mailto:web@get-
2.com">here goes stuff to be clicked</A>
Tips : Double click button to clear the screen
HTML code Result
 Making Tables
• Tables can be used as page layouts
• It helps to better control the placement of
things on web page : <TABLE> </TABLE>
• It means "Table Row“ : <TR> </TR>
• It means "Table Data“ : <TD> </TD>

Tips : Double click button to clear the screen

HTML code Result
 Making Tables
• Aligning Data
– By default everything in the cell will be to the left. You can center it or
move it to the right by using the ALIGN attribute in the <TD> tag:

<TD ALIGN="right"> parrot </TD>

– There is also the VALIGN attribute. It makes stuff in the cell line up at
the top or the bottom but there has to be enough space in the cell for
it to work. This can be done by using the HEIGHT attribute in the <TD>
tag:
<TD VALIGN="top" HEIGHT="50">kingfisher</TD>

Tips : Double click button to clear the screen

HTML code Result
 Making Tables
Putting Color In Cells
• cells be a different color by using the BGCOLOR
attribute:
<TD BGCOLOR="#87CEFA">eagle</TD>

Tips : Double click button to clear the screen

HTML code Result
 Frames

• Frame allow authors to present documents in multiple

views either it is an independent windows or sub
windows.
• Multiple views frame allow web developer to display
information visible, either it can be scrolled or
replaced.
• For example, within the same window :-
1. One frame might display a static banner
2. Second frame contain a navigation menu
3. Third frame is the main document that can be
changed by navigating in the second frame.
 All about Frames
• Frame Names
– To make the linked page go into a frame other than the one which contains
the link, you need to name your frames like this: <FRAME NAME="A"
SRC="main.html">
• Making the link
– To make the link, go to the page which contains the link and in the anchor
tags add the TARGET attribute like this: <A HREF="practicepage.html"
TARGET="A">your link</A>
• Breaking Out of Frames
– To break out of frames completely, put TARGET="_top" in the anchor tags like
this: <A HREF="index.html" TARGET="_top">
• No Borders
– To get rid of borders just put the BORDER attribute in the FRAMESET tags like
so: <FRAMESET ROWS="35%,65%" BORDER="0">
 Insert Frames
<HTML> <HTML>
title.html
<HEAD> <HEAD>
<TITLE>Frames</TITLE> <TITLE>Frames</TITLE>

side.html
</HEAD> </HEAD> main.html
<FRAMESET ROWS="25%,75%"> <FRAMESET COLS="25%,75%">
main.html <FRAME SRC="title.html">
<FRAME SRC="title.html">
<FRAME SRC="main.html"> <FRAME SRC="main.html">
</FRAMESET> </FRAMESET>
</HTML> </HTML>
<HTML>
<HEAD> title.html
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET ROWS="25%,75%">
side.html

<FRAMESET COLS="100%">
<FRAME SRC="title.html">
main.html
<FRAMESET COLS="25%,75%">
<FRAME SRC="sidebar.html"> Tips : Click on the image
<FRAME SRC="main2.html"> to see the source code
</FRAMESET>
</HTML>
Glossary
Recap
 QuizQuizzes

Click the Quiz button to edit this quiz

 References
Textbook
Bunin, R. B. (2011). New Perspectives on: Microsoft Office Project 2010: Introductory. Course
Technology: CENGAGE Learning.
Carey, P. (2010). New Perspectives on: HTML, XHTML and Dynamic HTML. 4th edition. Course
Technology : CENGAGE Learning.
Shelly, G. B, Cashman, T. J. &Vermaat, M. E. (2000). Discovering Computers 2010: Concept for a
Connected World.
Gruman, G. (2007). InDesign CS3 for Dummies. Wiley Publication Inc.
Supplementary References
Kelvy, S. & Terry W. (2005). InDesign CS/CS2 Killer Tips.New Riders.
Kvern, O. M. & David B. (2008). Real World Adobe InDesign CS3.Pearson Education.
O’Leary, Timothy J. & Linda I. O’Leary (2011). Computing Essentials Complete 2011. Boston:
McGraw Hill.
Powell, T. A. (2010). HTML & CSS: The Complete Reference. McGraw-Hill.
Sklar, J. (2009). Principles of Web Design. Course Technology CENGAGE Learning.
 References
Internet
Video: 1 : https://www.youtube.com/watch?v=mzPxo7Y6JyA