You are on page 1of 30

OFAD 75- Internet Research for Business

INTRODUCTION TO INTERNET NETWORK

OBJECTIVES

After the completion of the chapter, students should be able to:

1. Define Office System and Procedures of internet.

2. Discuss internet network.

3. Assess the importance of network

INSTRUCTIONS
● The pre-test is a set of questions given to you before the learning activities begin in order to
determine your knowledge level of the module content.
● After completing the pre-test, now is the time to begin with the learning activities. Learning activities
include various lessons and activities.
● After the completion of the module, you are given a post-test to answer the same set of questions,
or a set of questions of comparable difficulty. Post-test enables me to see whether the course was
successful in increasing your knowledge of the module content.

PRE-TEST
Instructions:
● Answer the following questions based on your current knowledge.
● You may write your answers in a sheet of paper following this format:

Module #:
PRE-TEST
Subject:
Name: (Last Name, First Name, Middle Initial)

1
OFAD 75- Internet Research for Business

Year & Section:


Question # 1:
Answer # 1:

Open-Ended Questions:

1. What is internet? (Explain your answer in 2 to 3 sentences.)

2. What is network? (Explain your answer in 2 to 3 sentences.)

3. What are the other applications of internet? (Explain your answer in 2 to 3 sentences.)

A network is a collection of computers, servers, mainframes, network devices,


peripherals, or other devices connected to one another to allow the sharing of data.
An excellent example of a network is the Internet, which connects millions of people
all over the world.

I. UNDERSTANDING THE INTERNET

The word Internet evolved from the terms Inter for international and Net for
network. It refers to a global collection of interconnected networks - a network of
networks. Also known as WWW(World Wide Web).

The Internet is accessible to


anyone connected to an Internet Service
Provider (ISP) with a PC, a modem and
a telephone line.

It represents a vast network of


computers that allows information access
and exchange by users from around the
world.
2
OFAD 75- Internet Research for Business

With the Internet, dialogues,


meetings, seminars can be established
with participants from all corners of the
globe.

Recent Internet advancements even


bring commerce and education to the
desktop.

3
OFAD 75- Internet Research for Business

I. OVERVIEW OF INTERNET APPLICATIONS

The Internet brings together the best qualities of


communication systems.

The Internet eliminates long waits for a letter to


reach a friend, eases shopping, banking and other
transactions electronically.

It’s democratic and facilitates global exchange of


ideas, transforming the world into a global village
without geographic boundaries.

In the workplace, wise Internet use results in


productivity and efficiency. Information is transmitted
across management levels easily, while managerial
leverage is enhanced and promoting healthy
interpersonal relationships.

The Internet also found its place in education,


business, medicine and government.

More and more people get themselves


connected. People no longer talk about the local
market but of an even larger virtual market of global
proportion

4
OFAD 75- Internet Research for Business

II. HISTORICAL DEVELOPMENT OF THE INTERNET

The U.S. Department of Defense Advanced


Research Project Agency (ARPANet) originally
developed a system that was not reliant on one or
more central computers.

This enabled them to still be able to transmit


information and data even in the event of loss of one
or more military installations.

The research that ensued led to the eventual


development of TCP/IP and packet switching.
ARPANet was the world’s first decentralized
computer network.

TCP/IP was later adopted as the standard. At about the same time, the Domain
Naming System (DNS) was introduced. This simplified Internet addressing by
associating IP addresses with easy to remember names.

In 1986, the National Science


Foundation funded a research support
system called NFSnet. It linked five (5)
supercomputers at a backbone speed of
56kbps.

This opened the gateway for external


universities to tap into superior processing
power and to share resources.

Between 1984 and 1988, the number


of hosts (servers) connected grew from
1,000 to 60,000, while more and more
countries joined the network.

ARPANet folded up in 1990 and NFSnet took over administering the net. While
many original networks (UUCP, Bitnet, Usenet) closed down with ARPANet, many new
networks joined NFSnet.

This fast growing web of networking eventually became the Internet of the ’90s.
In response to those who wanted to use the Internet for commercial purposes, the
Commercial Internet Exchange (CIX) was born.

5
OFAD 75- Internet Research for Business

III. THE INTERNET EXPLOSION

As of December 2005, the Internet had more than 1 billion users worldwide.
This number is projected to balloon to 1.8 billion by 2010.

There is no question that the number and variety of people logging on is growing
daily. The "virtual community" is increasingly representative of the demographics of the
"real" community, as Internet access becomes more common in businesses, schools,
libraries and homes.

On the Internet, one uses different software programs to accomplish different


tasks. Many commercial Internet programs contain more than one kind of software.

IV. INTERNET ARCHITECTURE

A. Internet Protocol (IP) Addressing


All computers (hosts) connected to the Internet must have their own unique
address or hostname. The Internet Protocol (IP) is the default protocol for routing
data.

What does the number 140 . 186 . 81 . 6 mean?

Treat it in two parts: network 140.186 and host 81.6. The PC with IP number
140.186.81.6 and another with IP number 140.186.2.3 belong to the same
network because they have the same network number.

For PC (140.186.81.6) to be able to communicate with PC (140.185.1.1), a


device called a router is necessary.

B. Domain Naming System

Machines and network protocols use IP addresses in forwarding data from


one location to another. The vast majority uses a more user-friendly naming
scheme called Domain Naming System (DNS). A domain name takes care of
associating a given DNS name say www.rdnus.edu.jp to its IP address say,
182.23.1.3.

The domain/host address in alphanumeric format, like the numeric one, is a


series of words or word abbreviations separated by periods, called dot.

For example, sei.dost.gov.ph is the Internet address for the SEI division of
the Department of Science and Technology (sei.dost) of the Philippines (gov.ph).

Note the last three letters “gov” at the far right of the address. These letters,
called zones, tell what kind of organization owns that IP address.

6
OFAD 75- Internet Research for Business

The three-letter code indicates the type of


organization and the part just before the zone
indicates the specific organization.

If the zone is two-letters long, it is a


geographical name. The two-letter specifies the
country, and the item before it is specific to that
country.

Examples: ca for Canada, us for the


U.S.A., ph for Philippines. Pedro’s computer in
the Directorate for IT Manpower Development,
National Computer Center may be called
pedro.ditman.ncc.gov.ph.

V. BASIC INTERNET SERVICES

The Internet provides several basic services. Some of the more popular ones
are listed below:

Email Compared to ordinary snail mail, e-mail is faster and more


(electronic timely, reaching its destination within an hour at the most.
mail)
Mailing Lists, Provides a means for users to electronically correspond as a
Discussion “group” and are usually associated with a special interest.
Groups
Remote Logins Provides a means for users to logon to an Internet fileserver;
users can engage in friendly chat and use server resources.

Search Engines Provides Internet users with the ability to search for
specific information.

World Wide Web Provides a means for users to access multimedia


information using threaded access called hypertext.

WWW or W3 incorporates into a single GUI. Because of this,


WWW is popularly yet erroneously equated with the Internet.

7
OFAD 75- Internet Research for Business

VI. HARDWARE/SOFTWARE REQUIREMENTS

A computer, a modem or a similar device and a connection are required only when
the user is not connected to a local area network.

Since computers, modem brands, and capabilities change every so often, it is


difficult to set fixed requirements for PCs and modems.

A. Computer

Minimum requirement: 486DX2/66


PC with 8Mb RAM, a hard drive, a color
monitor and card, a mouse and an
appropriate operating system (OS).

B. Modem

A modem is needed for dial-up


connections. If you are connected via a
LAN, in most cases, the company has
direct access to the ISP.

C. Telephone line

Telephone, leased line and cellular


networks are available locally for
connecting to ISPs.

D. Some Software

One has to invest considerably in


needed software and operating systems.
Browsers come free with the OS.

8
OFAD 75- Internet Research for Business

VI.I INTERNET SERVICE PROVIDERS (ISP)

An Internet Service Provider


(ISP) is a company that provides
Internet connection services to the
general public.

Internet service providers in


Manila typically charge anywhere
from P100 for 12 hours of dial-up
access to P1,500 for unlimited
broadband access.

With more and more ISPs


entering the market, prices are
expected to drop further.

Although most ISPs are profit


oriented, there are a large number of
cooperative ISPs and community
networks that support academic
research and development; these
ISPs charge very minimal fees.

A. Levels of Internet Access

Connection to the Internet may be made in a number of ways, below are


some of the most common:

Dedicated a connection used by large organizations such as universities


Leased- and government departments; the fastest form of connection
Line thus, the most expensive.

Direct involves buying a PC server, configuring it, and leasing some fiber
Connection optic cable or similar transmission media; your computer becomes
a node on the network.
Dial-up most common and cheapest form of connection; a user dials into
Connection an ISP every time a connection is needed; the slowest form of
connection nowadays

Broadband a high-speed “always on” connection recommended for small


Connection to medium-sized organizations.

9
OFAD 75- Internet Research for Business

Ways to connect to the Internet:

 Telephone line - for dial-up connections


 Ethernet - physical connection to
the LAN
 Wi-Fi wireless - connecting wirelessly to
access points (hotspots);
your PC has to have its
own wireless adapter or
card to connect
 Bluetooth - more common in cell
phones, PDAs and other
devices to communicate
among them-selves not
normally for internet
connectivity
 A file that takes 1 hour to download via a
56K dial-up connection will take about 26
minutes with an ISDN line, between 2.2
and 26 minutes over DSL connection, and
between 2.2 and 13 minutes over a cable
connection.

IX. WEB BROWSING

A. World Wide Web

The World-Wide Web (WWW or W3) is a set of


software applications or programs that allow both
distribution of and access to information on the Internet.
The Web is not the Internet but a means of distributing
and accessing the information that is on it.

The WWW is the fastest growing Internet service.


What has made the Web so popular is that the Web
makes it easy, integrating into a single GUI software
application the functionality of all the previously
developed Internet protocols.

Using the World Wide Web, one can enter a virtual museum, view paintings,
know more about personalities, listen to music, read historical documents,
research, purchase a plane ticket, or talk with other people across the world.
The possibilities are simply endless. Sir Timothy John Berners-Lee also
known as TimBL,is an English engineer and computer scientist, best known as the
inventor of the World Wide Web.

B. Navigating the Web

The Web supports hypertext, which allows navigation through a web of


10
OFAD 75- Internet Research for Business

information by letting a user follow links of interest. A link may be words, phrases
or objects in the document that can be chosen by a reader, which cause another
document to be retrieved and displayed

1. Hypertext

Documents residing on Web servers


all over the world can be linked together and
the reader navigates between them simply
by clicking on highlighted text.

These documents were created using


Hypertext Markup Language (HTML), and
are often referred to as Web Sites or Home
Pages.

2. Uniform Resource Locator (URL)

A Uniform Resource Locator or URL is the standard way to give the


address of any resource on the Internet that is part of the WWW. It provides
a single, standardized way of describing almost any type of information that
is available in cyberspace. A document’s URL is its address on the Internet.

A sample URL is http://www.howstuffworks.com/computers/internet-


infrastructure.htm

http:/ /www.howstuffworks.com/c omputers/ internet-infrastructure.htm

Transmission Domain or Server Location within the the Web page:


Protocol Name: used to server: specific actual name of
connect to the host folder in the server the HTML file for
server machine or where the Web the Web page
computer where the page is stored.
data is stored

NOTE: Top-level domain names include: .gov (government), .mil (military), .edu or
.ac (educational), .org or .net (organizations), .com or .biz (commercial), and
various domains for countries (.ph, .jp, .sg, .au).

11
OFAD 75- Internet Research for Business

A. Web Browser - About Mozilla Firefox

The Internet has much to offer in terms of information on almost any subject
imaginable and interaction with people and organizations from all over the world.

A Web browser is an application that allows one to see the contents of the
WWW. Examples of which are Netscape Navigator, Mozilla’s Firefox and
Microsoft’s Internet Explorer.

Mozilla is a full-featured integrated Web browser, email client, newsreader


and Web page composer program. Using Mozilla, a user can be exposed to the
richness and diversity of multimedia content and services available on the WWW.

To start Mozilla, click on the Mozilla icon on the panel or launch the
application from the menu system:

Main Menu € Internet € Mozilla Web Browser

By default, the Web browser component of Mozilla will be executed and


displayed.

The Mozilla Web Browser

12
OFAD 75- Internet Research for Business

3. The Navigation Toolbar

The navigation toolbar allows you to access


a Web site by entering its URL in the address box
provided. All you need to enter is the name of the
host i.e. “www.mozilla.org” and Mozilla is smart
enough to figure out that you want to access the
Web server on that host.

The Navigation Toolbar

Also present on the navigation toolbar are the Back, Forward, Reload
and Stop buttons.

□ Back - brings you back to the previous page


□ Forward - brings you to the next Web page that you have already
accessed
□ Reload - forces Mozilla to re-access the Web site and load the
current web page.
□ Stop - halts the loading of a Web page that is currently
proceeding.

4. The Menu Bar


The menu bar has several menu buttons. Clicking on one will open up
a drop-down menu selection where selected operations can be performed.

The Menu Bar

□ File - caters to file level operations: printing, saving


or opening of Web pages
□ Edit - allows you to find strings of text on the
displayed page as well as to edit the configuration to your
personal preferences
□ View - allows you to control the viewing of the various
toolbars as well as the zooming of text and full page
display
□ Bookmarks - enables you to manage your bookmarks and personal
folder. You can add frequently visited sites to the

13
OFAD 75- Internet Research for Business

bookmark and/or personal folder for easy access in the


future

The Bookmark Manager Pop-up Window

The bookmarks can be organized into folders by dragging and dropping


them into the desired folder. New folders can be created by clicking on the New
Folder button at the top.

□ The Window button enables you to navigate and move among the windows
opened in Mozilla.
□ The Help button contains the Mozilla help files arranged in user-friendly Web
page style and format.

5. The Main Display Panel

This is the area where the contents of a Web page are rendered and
displayed. This display area can be made full screen by either selecting:

View > Full Screen


(from the top menu bar)
OR
press the F11 key.

6. Navigation Tab Bar

Browse multiple Web sites within one browser so you don’t open several
Mozilla windows.

File > New > Navigator Tab


or
Ctrl + T
14
OFAD 75- Internet Research for Business

If you open different Web pages using this navigation tab feature, they will
all be displayed under the same window. You can then use the tab bar to select
between each tab screen.

X. FINDING INFORMATION ON THE INTERNET

The Internet is a treasure house of


information. Virtually information on any
topic under the sun (and more!) can be
found on the Internet.

While information is easily


available it may not be so easy to find
the information you want.

To assist us in finding information


more effectively, a search engine or an
Internet portal may be used.

A. Using a Portal

A portal is a Web site that acts as a gateway for providing information as well
as links to other sites providing information about your topic.

15
OFAD 75- Internet Research for Business

Portals are a useful starting place for new Web users who do not know
where and how to go and look for information about a specific topic or subject.
Major ISPs provide portal-
like information services for their
subscribers. The subject areas
covered by these ISP portals are
typically subjects of general
interest like shopping, local and
foreign news, entertainment etc.

Other portals offering


general information as well as
links to other more subject-
specific portals and Web sites Home Page for an
include:

 Yahoo (www.yahoo.com)
 Netscape Network (www.netscape.com)
 Microsoft Network (www.msn.com)
 Angelfire (www.angelfire.lycos.com)

B. Using an Internet Search


Engine

While portals provides a guided and


categorized means to access
categorizinformation, generally are not able to
portals provide information in a timely and
needed iefficient
manner.

An alternative is to utilize a search


engine.

A search engine allows you to search ecific


about sp subjects and will retrieve links
A Search Engine (Google) to Web pages and resources that you need.

16
OFAD 75- Internet Research for Business

The popular search engines available are:

 Google (www.google.com)
 Lycos (www.lycos.com)
 Yahoo (www.yahoo.com)
 Yehey (www.yehey.com)

There are also sites that allow you to search using more than one search engines
e.g.

 Search.com (www.search.com)
 Easysearcher (www.easysearcher.com)

While each search engine will have its


own technology, its utilization to perform a
simple and basic search is essentially the
same irrespective of which search engine is
used.
Type in a few descriptive words, it will
return a list of links to Web pages and
resources which contain all the words in the
query.
Note that common words like “the”, “a”, “how” etc. are usually ignored by
the search engine unless specifically told not to.
Using current search engines is essentially keyword matching. I it is
important to identify appropriate keywords so that your search is more efficient.
The keywords entered should be as specific as possible in order to get
better results.
The following chart explains the process of how we get the results from
search engines.

17
OFAD 75- Internet Research for Business

1. The web server sends the query to


3. The search results the index servers. The content inside the
are returned to the index servers is similar to the index in
user in a fraction of a the back of a book--it tells which pages
second. contain the words that match any
particular query term.

18
OFAD 75- Internet Research for Business

2. The query travels


to the doc servers,
which actually
retrieve the stored
documents.
Snippets are
generated to
describe each
search result.

Copyright © 2003 Google Inc. Used with permission.

IX. E-MAIL

C. Electronic Mail

Most commonly called as e-mail, is the most widely used


Internet service. Email has become one of the most popular
applications on the Internet. It works similarly with the manual
mailbox systems found in most large organizations, where
messages such as memos, letters, agendas, minutes and etc. are
deposited in a mailbox or pigeonhole for later collection.

E-mail, however, is computerized and is therefore faster and


more reliable. An advantage is that messages can be collected and
sent from any computer connected to the Internet.

D. Email Models

There are two main types of Internet email systems: Webmail


and POP3.

 Webmail, the traditional method of accessing e-mail,


makes use of a Web browser to read, compose, send and
manage your mail. E-mails will be stored to a host
computer and users will be able to access it by executing
a mail program on the computer.

 POP3 email makes use of a POP3 email client to


download your email from a server housing your email
mailbox. Users connect and the mail is moved or
downloaded from the PO to the personal computer.

19
OFAD 75- Internet Research for Business

E. E-Mail Address

name_of_user@domain_name_of_computer

To send an e-mail to someone, the user needs the recipient’s


address.
This address is basically a replacement for an address on an
envelope.

Elements:

 Username – the user name of the user’s account (letters,


numerals and some punctuation characters).
Some symbols are not allowed in usernames.
 “AT” sign - @
 Address - Networks are divided into administrative regions
known technically as domains that are then
further divided into sub-domains and smaller
domains. Each component domain within the
address is delimited using a dot ”.”.

To illustrate this, consider this email address: rcopinion@nccweb.ncc.gov.ph

 “rcopinon” – is the name of the person sending or receiving


the message; this is referred to as the username.

 “nccweb.ncc.gov.ph” – in this instance, “ph” is the top-level


domain,
usually referring to the country of
origin. The sub-domain “gov”
indicates the organizational
affiliation of the addressee
(government body).
UDP (User Datagram Protocol) is an alternative communications protocol to Transmission
Control Protocol (TCP) used primarily for establishing low-latency and loss-tolerating
connections between applications on the internet.
A DLL file, short for Dynamic Link Library, is a type of file that contains instructions that
other programs can call upon to do certain things. This way, multiple programs can share
the abilities programmed into a single file, and even do so simultaneously

Part 2

History of Internet

The Internet had its roots during the 1 960's as a project of the United States

20
OFAD 75- Internet Research for Business

government's Department of Defense, to create a non-centralized network. This project


was called ARPANET (Advance d Research Projects Agency Network), created by the
Pentagon's Advanced Rese arch Projects Agency established in 1969 to provide a secure
and survivable communications network for organizations engaged in defense -related
research.
In order to make the network more global a new sophisticated and standard
protocol was needed. They developed I P (Internet Protocol) technology which defined
how electronic messages were packaged, addressed, and sent over the network. The
standard protocol was in vented in 1977 and was called TCP/IP
(Transmission Control Protocol/Internet Protocol). TCP/IP allowed users to link various
branches of other complex networks directly to the ARPANET, which soon came to be
called the Internet.
Researchers and academics in other field s began to make use of the network,
and eventually the National Science Foundation (NSF), which had created a similar and
parallel network, called NSFNet, took over much of the TCP/IP technology from
ARPANET and established a distributed network of networks capable of handling far
greater traffic. In 1985, NSF began a program to establish Internet access across the
United States. They created a backbone called the NSFNET and opened their doors to
all educational facilities, academic researchers, government agencies, and
international research organizations. By the 1990's the Internet experienced explosive
growth. It is estimated that the number of computers connected to the Internet was
doubling every year.
Businesses rapidly realized that, by ma king effective use of the Internet they
could tune their operations and offer ne w and better services to their customers, so
they started spending vast amounts of money to develop and enhance the Internet.
This generated violent competition among the communications carriers and hardware
and software suppliers to meet this demand. The result is that bandwidth (i.e., the
information carrying capacity of communications lines) on the
Internet has increased tremendously and costs have dropped. It is widely
believed that the Internet has played a significant role in the economic success.

HISTORY OF WORLD WIDE WEB

The World Wide Web (WWW) allows computer users to position and view multimedia-
based documents (i.e., documents with text, graphics, animations, audios and/or
videos) on almost any subject. Even though the Internet was developed more than three
decades ago, the introduction of the WWW was a relatively recent event. In 1990, Tim
Berners-Lee of CERN (the European
Laboratory for Particle Physics) developed the World Wide Web and several
communication protocols that form the backbone of the WWW. The Internet and the
World Wide Web will surely be listed among the most significant and profound creations
of humankind. In the past, most computer applications ran on stand-alone computers.
(i.e., computers that were not connected to one another) Today’s applications can be
written to communicate among the world’s hundreds of millions of computers. The
Internet makes our work easier by mixing computing and communications technologies.

21
OFAD 75- Internet Research for Business

It makes information immediately and conveniently accessible worldwide. It makes it


possible for individuals and small businesses to get worldwide contact.
In the last decade, the Internet and World Wide Web have altered the way people
communicate, conduct business and manage their daily lives. They are changing the
nature of the way business is done.

WHAT IS ELECTRONIC BUSINESS?

Electronic business (e-business) is comprised of e-marketing, e-commerce, and e-


operations. Let’s look at brief definitions of them, respectively, to begin this course
with the top summary view.

E-business: The application of Internet technology to streamline all aspects of business


processes.

E-marketing: Building an online presence, showcasing a company, and providing


detailed information. (The majority of small businesses on the Internet today are
actively doing e-marketing.)
E-commerce: Selling products and services online, conducting payment, handling
transaction details, and supporting automated customer inquiries.

E-operations: Streamlining of business processes and steps to enhance business


efficiencies between functional departments of a company. (This also includes
streamlining the supply chain between your company and key suppliers.)

PART 3
HTML INTRODUCTION
What is HTML?

HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language


 HTML is the standard markup language for Web pages
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by <> tags
A Simple HTML Document
Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

22
OFAD 75- Internet Research for Business

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Example Explained

 The <!DOCTYPE html> declaration defines this document to be HTML5


 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph

HTML Tags

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

 HTML tags normally come in pairs like <p> and </p>


 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted before
the tag name

Tip: The start tag is also called the opening tag, and the end tag the closing tag.

HTML Page Structure

Below is a visualization of an HTML page structure:

23
OFAD 75- Internet Research for Business

 HTML Headings

HTML headings are defined with the <h1> to <h6> tags.


<h1> defines the most important heading. <h6> defines the least important heading:

24
OFAD 75- Internet Research for Business

Try this: Output:

 HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Try this: Output:

Web Browsers

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents
and display them.

The browser does not display the HTML tags, but uses them to determine how to display
the document:

25
OFAD 75- Internet Research for Business

HTML Formatting Elements


HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

Text formatting tags


<b></b> Defines bold text
<strong></strong> Defines important text
<i></i> Defines italic text
<em></em> Defines emphasized text
<small></small> Defines smaller text
<sub></sub> Defines subscripted text
<sup></sup> Defines superscript text
<ins></ins> Defines inserted text
<del></del> Defines deleted text
<mark></mark> Defines marked/highlighted text
<tagname align=”direction”> Specifies the alignment according to surrounding
elements

PART 4

 HTML Attributes

 All HTML elements can have attributes

26
OFAD 75- Internet Research for Business

 Attributes provide additional information about an element


 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The style Attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.

 Use the style attribute for styling HTML elements


 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment

Example:

Background color <body style="background-color:powderblue;">


Text Color <p style="color:red">I am a paragraph</p>
Font <p style="font-size:50px;">I am big</p>
Font-family <p style="font-family:courier;">This is a paragraph.</p>
Text-size <p style="font-size:160%;">This is a paragraph.</p>
Alignment <p style="text-align:center;">Centered paragraph.</p>
Border <p style="border:2px solid Violet;">Hello World</p>

 HTML Images

HTML images are defined with the <img> tag.


The source file (src), alternative text (alt), width, and height are provided as attributes:

Try this:

27
OFAD 75- Internet Research for Business

The width and height Attributes

Images in HTML have a set of size attributes, which specifies the width and height of the image:

Example:

<img src="img_girl.jpg" width="500" height="600">

The alt Attribute

The alt attribute specifies an alternative text to be used, when an image cannot be displayed.

The value of the attribute can be read by screen readers. This way, someone "listening" to the
webpage, e.g. a blind person, can "hear" the element.

Example:

<img src="img_girl.jpg" alt="Girl with a jacket">

Body tag and attributes


<body></body> Contain the actual content of the
page
<body bgcolor=”color”></body> Sets the color of the background
<body background=”filename.xxx”></body> Sets the image as a page’s
background
<body text=”color”></body> Specifies the color of normal text
<body link=”color”></body> Specifies the default color of unvisited
link
<body alink=”color”></body> Specifies the color of link on click
<body vlink=”color”></body> Specifies the color of followed link

Style attribute
<tagname style=”property:value;”> Use the style attribute for styling HTML
elements
<tagname style=”background:value;”> Use for background color
<tagname style=”color:value;”> Use for font color
<tagname style=”font-family:value;”> Use for font face
<tagname style=”font-size:value;”> Use for font size
<tagname style=”font-align:value;”> Use for text alignment

POST-TEST

Instructions:

28
OFAD 75- Internet Research for Business

● Answer the following questions based on what you’ve learned from this module.

● Read a case study and analyze it and explained it well.

● write your summary answer in word document.

● Send you work in our Google drive.

●THE FORMAT OFYOUR ANSWERS: INTRODUCTION, CASE STUDY EXERCISES,


PLANNING THE CASE STUDY AND LEESON LEARNED

Activity#2. Basic HTML tags (Text Formatting)

Name: ________________________________________ Score: ___________


Course, Yr. & Sec.: ______________________________ Date: ____________

1. Click Start – My Computer/This PC – Data D: or E: except C:


2. Create a folder (CTRL+SHIFT+N), name the folder as EJQ.
3. Inside SMC folder create another folder name it as OFAD75.
4. Lastly, inside OFAD75 create another folder and name it as your FIRSTNAME_SURNAME.
5. You are going to save all the files under this exercise on that your own folder.
6. Open notepad on your computer and start your 1st activity.
7. The OUTPUT should be:
 Create a personal biography, at least 2 paragraphs with 8 sentences each.
 Use at least 3 or more tags refer to this:

Text formatting tags


<b></b> Defines bold text
<strong></strong> Defines important text
<i></i> Defines italic text
<em></em> Defines emphasized text
<small></small> Defines smaller text
<sub></sub> Defines subscripted text
<sup></sup> Defines superscript text
<ins></ins> Defines inserted text
<del></del> Defines deleted text
<mark></mark> Defines marked/highlighted text

8. Save your work as Activity2_yoursurname.html under your folder.


9. Send your work to our Google drive.

29
OFAD 75- Internet Research for Business

Activity#3. Basic HTML tags (Image and Styles Insertion)

Name: ________________________________________ Score: ___________


Course, Yr. & Sec.: ______________________________ Date: ____________

10. Open a new text editor.


11. Insert any image from the computer. Be sure that the file or image is inside the folder.
12. Size should be 300 by 300.
13. Type this:
LIFE
“You were born with potential
You were born with ideals and dreams
You were born with greatness
were born with wings
You have wings
Learn to use them and fly.”
NOTE: YOU SHOULD USE ALL THE EXAMPLE ATTRIBUTES else DEDUCTION WILL BE GIVEN.

 style attributes
 background-color
 color
 font-family
 font-size
 text-align

14. Save your work as Activity3_yoursurname.html under your folder.


15. Send your work to our Google drive.

30

You might also like