ict internet and html

Information and Communication Technology Laboratory Exercise No. 1

Dr. Solomon U. Molina College 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



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.



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.



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



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>



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++.



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.



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.



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

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