1. Information and Communication Technology Laboratory Exercise No. 1
Dr. Solomon U. Molina College Page 1 of 9 Prepared by: Rodsil Czar P. Sacmar
Introduction
Internet refers to a collection of computers and cables forming a communications network, just like telephones
and cables forming the telephone system. The internet is intended to carry computer data, similar to telephone network
which is intended to carry conversations. The internet carries a various data, including e-mail, videoconferences, and
instant messages. The contents of Web pages are another type of data that is carried over the Internet. In other words,
Internet is a network of all networks where a user at any computer, with permission, can access and get information
from any other computer.
Reasons why people use Internet:
 Communicate with and meet other people
 Access a wealth of information, news and research findings
 Shop for goods and services
 Bank and invest
 Take a class
 Access sources of entertainment and leisure such as online games, music, videos, books and magazines
The Internet (or internet) is a global system of interconnected computer networks that use the standard
Internet protocol suite (often called TCP/IP, although not all applications use TCP) to serve billions of users worldwide. It
is a network of networks that consists of millions of private, public, academic, business, and government networks, of
local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies. The
Internet carries an extensive range of information resources and services, such as the inter-linked hypertext documents
of the World Wide Web (WWW) and the infrastructure to support email.
According to Tim Berners-Lee, a British scientist who developed specifications for HTTP, HTML and URLs, “The
Web is an abstract space of information. On the Net, you find computers – on the Web, you find documents, sounds,
videos, and information. On the Net, the connections are cables between computers; on the Web, connections are
hypertext links.” Therefore, the Internet is a communication system, and the Web is an interlinked collection of
information that flows over the communication system.
What is the World Wide Web and what makes it work?
You can retrieve documents, view images, animation, and video. Listen to sound files, speak and hear voice, and
view programs that run on practically any software in the world, provided your computer has the hardware and
software to do these things.
The World Wide Web (abbreviated as WWW or W3, commonly known as the Web), is a system of interlinked
hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text,
images, videos, and other multimedia, and navigate between them via hyperlinks.
Using concepts from his earlier hypertext systems like ENQUIRE, British engineer, computer scientist and at that
time employee of CERN, Sir Tim Berners-Lee, now Director of the World Wide Web Consortium (W3C), wrote a proposal
in March 1989 for what would eventually become the World Wide Web. At CERN, a European research organization
near Geneva situated on Swiss and French soil, Berners-Lee and Belgian computer scientist Robert Cailliau proposed in
1990 to use hypertext "to link and access information of various kinds as a web of nodes in which the user can browse at
will", and they publicly introduced the project in December of the same year.
In order to use Internet, you must have a web browser installed in your computer to access different web pages
and sites. A web browser is an application software allowing users to access and view web pages. A web page is a page
consisting of HTML documents stored on a web server. In contrast, web sites are collection of connected web pages

2. Information and Communication Technology Laboratory Exercise No. 1
Dr. Solomon U. Molina College Page 2 of 9 Prepared by: Rodsil Czar P. Sacmar
stored on a web server. According to the w3schools website browser statistics, the most popular web browsers
nowadays are the Google Chrome, Mozilla Firefox and Microsoft Internet Explorer. The appearance of a web page or site
vary depends on the versions of the web browsers, the higher the version, the greater it is animated the page and site it
will look. Higher versions usually support animation, virtual reality, and sound and music files.
Hypertext Transfer Protocol (HTTP) and Hypertext Markup Language (HTML) are the two most important
elements of the Web. Both contain “hypertext” in their names. Hypertext is text with hyperlinks. Hypertext is text
displayed on a computer display or other electronic device with references (hyperlinks) to other text that the reader can
immediately access, usually by a mouse click, keypress sequence or by touching the screen. Apart from text, hypertext is
sometimes used to describe tables, images and other presentational content forms with hyperlinks. Hypertext is the
underlying concept defining the structure of the World Wide Web. It enables an easy-to-use and flexible connection and
sharing of information over the Internet.
Many areas of the hypertext become a reality on today’s Web. Every Web page is based on a document that is
stored in a file and identified by a unique address, called URL (Uniform Resource Locator). It is also call as web address.
You can type its URL to the Address bar of a web browser to access any one of these documents. Another way is by
clicking an underlines word or phrase called a hypertext link (or simply a “link” or “hyperlink”) to access related
documents.
In computing, a hyperlink (or link) is a reference to data that the reader can directly follow, or that is followed
automatically. A hyperlink has an anchor, which is the location within a certain type of a document from which the
hyperlink can be followed only from the homepage; the document containing a hyperlink is known as its source code
document. A hyperlink points to a whole document or to a specific element within a document.
Other Internet Services
The Web is only one of the services that the Internet offers. They almost changes our ways in communicating to
others, such ways are emails, discussion of certain topic, and the likes. Many times, communications takes place
completely in writing – without the parties ever meeting each other.
 E-mail, short for electronic mail, is the transmission of messages via a computer network. It is the original
service that the Internet offers. Today, e-mail is said to be the primary source of communications whether for
personal or business purposed.
 File Transfer Protocol (FTP) is an Internet service that allows a user to upload and download files from other
computers on the Internet. Uploading refers to the process of transferring a file to Internet while downloading
refers to the process of obtaining a file from the Internet. The file refers to documents, graphics, and other
objects from a computer server. An FTP server is a computer that allows you to upload/download files. An FTP
site is a collection of files that resides in an FTP server.
 Newsgroups and Message Boards is an online area that allows a group of users to discuss a particular topic. In
order to participate in such discussion, one will send a message to a group then the other group will read and
respond to the message. Usenet is what they called the collection of tens of thousands of newsgroup about
multitude of topics. The topics can include news, recreation, society, business, science and computer.
 Mailing Lists is another online service where e-mail addresses are stored. All e-mail addresses stored in it
receives the message when a user uses this mailing list. In essence, this mailing list is like a distribution list
where usually is used to group certain e-mail addresses.
 Char Rooms are an online and live communication in the Internet. It is a location in the Internet server that
allows users to almost like talking in person. Anyone in the chat room can participate in the conversation
which usually is specific to a particular topic.

3. Information and Communication Technology Laboratory Exercise No. 1
Dr. Solomon U. Molina College Page 3 of 9 Prepared by: Rodsil Czar P. Sacmar
 Instant Messaging is in essence a chat but you can choose certain users that you want to communicate with.
Not like chat rooms that talks about a particular topic. IM allows you to communicate all the topic that you
want. Many users make use of IM for personal intentions.
 Internet Telephony commonly known as Voice over IP (Internet Protocol), allows the user to speak to other
users over the Internet using computers, mobile computer, or mobile devices. You will be in need of a high-
speed Internet connection, Internet telephone service and a microphone or telephone to be able to place a
call.
Types of Web Sites
 Portal are sites that gives and offers you variety of Internet services such as search engine/or subject
directory, news, sports and weather, free web publishing services, reference tools such as yellow pages, stock
quotes and maps, shopping malls and auctions, e-mail and other forms of online communication.
 News web sites obviously provides you newsworthy material including stories and articles relation to current
events, life, money, sports, and the weather. Newspaper, televisions and radios are the once that maintain the
news web sites.
 Informational web sites contain the factual information. Many government agencies provide information such
as tax codes, loans you can mortgage from SSS. Other organizations provide information such as public
transportation schedules and published research findings.
 Business/Marketing web sites that provide you marketing and business contents that promotes and sells
products and services.
 Educational web sites offers you exciting and challenging course in formal and informal teaching and learning.
There exist many education web sites that allows you online training for employees and classes for colleges.
Most instructors use these types of web sites to enhance classroom teaching by publishing course materials,
grades and other related class information.
 Advocacy web sites provide contents that describe a cause, opinion or idea. Its purpose is to convince the
reader of the validity of the cause, opinion or idea. These web sites usually present views of a particular group
or association.
 Blog, short for web log, is a journal format regularly updated that reflect to the interests, opinions, and
personalities of the author and sometimes the sire visitors. These consist of ideas and collection of thoughts in
an informal style of a single individual.
 Personal web sites are a private individual’s site usually not associated in any organization. This is usually
about someone’s interest that may contain their own images, favorite music and videos, and the likes for
some personal reasons. Some intends for job hunting and so they post their resumes. Some simply wants to
share life experiences with the world.
Search Engines
A search engine is a program that finds web sites and pages. It helps the user find particular information about
certain topics or locate particular web pages for which they do not know the exact web address. There are thousands of
search engines available, some are general and can perform searches on any topics but some restricts to certain subjects
like finding people, job hunting, or locating real estate.
A search text box is available where you will enter your topic or subject on it, can be in a simple word or in
phrases that will define the item about which you want information. Search engines responds with results that include
thousands of links to web pages that answers in little or no bearing on your research.

4. Information and Communication Technology Laboratory Exercise No. 1
Dr. Solomon U. Molina College Page 4 of 9 Prepared by: Rodsil Czar P. Sacmar
Laboratory Exercise # 1
HTML Fundamentals
Objectives:
At the end of the exercise, the students are expected to be able to:
 Identify the basic part of an html document.
 Starts a basic html editor.
 Create, save, and edit an html file.
 Open an html file on a web browser.
Materials:
 USB Flash disk
Note: All exercises should be saved in your data disk and must be submitted to your instructor after every laboratory
session.
Figure 1. An example of an HTML Document
Example Explained
 The DOCTYPE declaration defines the document type
 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading
 The text between <p> and </p> is displayed as a paragraph
The <!DOCTYPE html> declaration is the doctype for HTML5.
What is HTML?
HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language
 HTML is a markup language
 A markup language is a set of markup tags
 The tags describe document content
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages

5. Information and Communication Technology Laboratory Exercise No. 1
Dr. Solomon U. Molina College Page 5 of 9 Prepared by: Rodsil Czar P. Sacmar
HTML Tags
HTML markup tags are usually called HTML tags
 HTML tags are keywords (tag names) surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 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, with a forward slash before the tag name
 Start and end tags are also called opening tags and closing tags
HTML Elements
"HTML tags" and "HTML elements" are often used to describe the same thing. But strictly speaking, an HTML
element is everything between the start tag and the end tag, including the tags:
HTML Element:
<p>This is a paragraph.</p>
Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML
documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret
the content of the page:
Figure 2. A web browser (Mozilla Firefox) showing a simple web page content.
Writing your first HTML Using Notepad++
HTML can be edited using different HTML editor, professional HTML editors like Adobe Dreamweaver are usually
preferred by many advance programmers but you can also edit html using Notepad, which are readily available using
your window pc. There are also some third party applications that make editing of HTML much easier. One of these third
party applications is the Notepad++.
Step 1. Start your Notepad++ application. There are several ways for starting your Notepad++ application.
<tagname>content</tagname>
<p>This is a paragraph</p>

6. Information and Communication Technology Laboratory Exercise No. 1
Dr. Solomon U. Molina College Page 6 of 9 Prepared by: Rodsil Czar P. Sacmar
Procedure 1.
To start Notepad++go to Start > All Programs > Notepad++ >Notepad++
Procedure 2. Which is the easiest way to run the application.
Press window + R then type in “notepad++” (without the quotes)
Figure 2. A Notepad++ window.
Note: Make sure that there is Notepad++ installed in your computer before doing this activity.
Step 2. Make sure to have the language set to HTML. This can be done by clicking HTML from the Language menu. The
language refers to the type of programming language that will be used during encoding. For this activity we will be using
HTML, so make sure that every time you create an HTML you should change the language type to HTML.
Figure 3. Selecting a language
Step 3. Type your HTML code into your Notepad++.

7. Information and Communication Technology Laboratory Exercise No. 1
Dr. Solomon U. Molina College Page 7 of 9 Prepared by: Rodsil Czar P. Sacmar
Figure 4. An HTML code sample.
Saving your HTML code
Step 1. Saving your work is also the same as how you might save your work when using Word or other application. So to
save your work in Notepad++, click the File menu > Save or [Ctrl] + S. A pop up window will appear.
Figure 5. A pop up window that will appear after clicking save option in
the file menu. This is on a window 7 environment.
Step 2. Select the drive letter of your flash disk or if you do not have a flash disk select local disk D. To do that you can
click the Computer Icon or click the drop down arrow from the save in drop down menu.
Step 3. Create a new folder using your name. Use underscore instead of a space, example “Rodsil_Czar_P_Sacmar”.
Then click enter. If in case you forgot to change the name of the folder, just simple rename the folder. To do it, right click
on the folder you have just create and choose rename or other option woul be to click the create folder and press the F2
key. Then type in your name and hit the enter key.
Step 4. Open the folder that you have just created.
Step 5. Click the file name text box and type in the name for the file that you will use. For this exercise you will save your
work as MyFirstHtml<yourname>.html. Change the <yourname> with your name starting with a capital letter.
For convinience always save your HTML document with a filename related to the purpose of the page like if the
page will be used for signing up for your website then use “sign_up.html”. Always use and underscore instead of a
space.
Editing a Basic HTML Code
Step 1. Open your HTML editor, for this exercise we will be using Notepad++. Refer to “Writing your first HTML Using
Notepad++ – Step 1” if you forget how to open a Notepad++ application.
Step 2. Select File > Open or [Ctrl] + O and a pop up window will appear. Locate the HTML file that you will be editing
and click the open button. For this exercise we will use the MyFirstHtml<yourname>.html.

8. Information and Communication Technology Laboratory Exercise No. 1
Dr. Solomon U. Molina College Page 8 of 9 Prepared by: Rodsil Czar P. Sacmar
Step 3. Edit the file using the code below. Do not include the numbers at the beginning of each line of code. The
numbers only signify the number of lines your code has.
Figure 6. Updated code for MyFirstHtml<yourname>.html
Step 4. After all your code has been edited, you may now save your work by selecting File > Save or simply pressing
[Ctrl]+S, the same way you save your work at the beginning of this exercise.
Always save your work in between jobs so that if in case there is a power failure you wont have to retype your
work again. For quick save actions use the save shortcut by press [Ctrl] + S.
You can also edit your work and save it to another filename. This is very convenient as to saving an identical work but
with a different filename or you have a template that you will use for your entire html pages so that you will not have to
encode all the same file over and over again.
Step 5. Open again MyFirstHtml<yourname>.html
Step 6. To save your file with a different filename. Select File > Save As, then a pop up window will appear. This window
will be the same window you will see when you save your work for the first time.
Step 7. Click the box for file name.
Step 8. Delete the old file name and replace it with Peter_Pipper<yourname>.html.
Step 9. Click Save.
Step 10. Open the folder where you save your work. This time you will be able to see two file. See image below.
Figure 7. Showing the two new files you have create after the exercise.

9. Information and Communication Technology Laboratory Exercise No. 1
Dr. Solomon U. Molina College Page 9 of 9 Prepared by: Rodsil Czar P. Sacmar
Note: You might have a different icon for your html page as it will be dependent to the default web browser you are
using. If it is Internet explorer then an icon with a letter “e” will be used.
Running an HTML File.
To be able to see how your HTML code will look, you will need a web browser. Each web browser will display differently
depending on the default setting each browser have. For instance each browser might have a different default font style
and font sizes so your html pages will look different for each kind of web browser you will be opening your files later on.
To view/run/open and html page on a web browser, follow the following steps.
There are two ways on how to view/run/open an html page on a web browser.
Procedure 1. [Perhaps the easiest way]
Step 1. Open the folder where you save you html page/file.
Step 2. Select the file that you will view on a web browser.
Step 3. Double-click the file or Right-click then choose open.
Step 4. View your html page on the web browser that opens.
Procedure 2. [Useful if you want to view your page while still editing your work.]
Step 1. Open your file on notepad++ if not yet opened.
Step 2. Select Run menu > Launch in IE (for Internet Explorer)
Select Run menu > Launch in Firefox (for Mozilla Firefox)
Step 3. View your html page on the web browser that opens.
Source:
Computer Quest Book 14
http://en.wikipedia.org/wiki/World_Wide_Web
http://en.wikipedia.org/wiki/Hyperlink
http://en.wikipedia.org/wiki/Hypertext
http://www.w3schools.com/html/default.asp