1. The Internet and World Wide Web Semester 2, 2016/17
TMX1022 ICT COMPETENCY
The Internet and World Wide Web
Semester 2, 2016/17

2. Unit Learning Outcomes
By the end of this unit, students will be able to:
Define Internet technology and services
Describe the difference between the Internet and World Wide Web
Describe Web development basic steps
Identify Web 2.0 and social media tools relevant to their learning and everyday use
Image source: Google Image

3. The internet

4. The Internet The Internet and the World Wide Web are NOT the same
The Internet is a network
The WWW is a collection of electronic documents
The WWW is a service on the Internet
Image source: Google Image

5. The Internet Short for INTERconnected NETwork
The Internet is a global collection of computer networks i.e. network of networks
Links private, public, academic, government, businesses, organisations networks
Using a variety of wired and wireless technologies, communication devices, lines, and software
The “i” in Internet has to be capital letter – it is a name
Image source: Google Image

6. The Internet
People around the world uses the Internet for many purposes
Access information
Send/post messages
Communicate with friends and family
Anything else you can think of..?
Image source: Discovering Computers 2016

7. History of the internet

8. History of the Internet
1969 ARPANET becomes functional
1984 ARPANET has more than 1,000 individual computers linked as hosts
Today Millions of hosts connect to the Internet
Image source: Discovering Computers 2016

9. History of the Internet
The Internet began as ARPANET in 1969
Developed by U.S. Department of Defense to link scientific and academic researchers across the United States
Goals:
Allow scientists at different physical locations to share information and work on military and scientific projects
Could function even if part of the network was destroyed or disabled by a disaster
Began as 4 computers (nodes) on the network
Today, ARPANET has grown into the Internet with millions of computers on the network

10. History of the Internet
ARPANET in 1969:
4 computers only (in Los Angeles, Santa Barbara, Utah and San Francisco)
Image source: Google Image

11. History of the Internet
The Internet in 2015:
Millions of computers
The latest visualization (map) by The Opte Project (
Legend:
Image source: The Opte Project

12. History of the Internet
The Internet enjoyed rapid growth in the 1990s due to the following reasons:
Development of the World Wide Web (WWW) by Sir Tim Berners-Lee at CERN
Development of MOSAIC, the first graphical web browser at NCSA
Personal computers’ prices were increasingly available and affordable to the public
Online service providers connections to the Internet at lower prices
MOSAIC browser
Image source: Google Image

13. Connecting to the internet

14. Connecting to the Internet
Users can access the Internet using wired or wireless technologies
Broadband Internet service is preferred today because of its fast-data transfer speeds and always-on connection
Wired technology
Wireless technology
Cable Internet service
Digital Subscriber Line
Fiber to the Premises
Wireless Fidelity (Wi-Fi)
Mobile broadband
Fixed wireless
Satellite Internet Service

15. Connecting to the Internet
Image source: Discovering Computers 2016

16. Connecting to the Internet
Wireless Fidelity (Wi-Fi) uses radio signals to provide high speed Internet connections to computers and devices with built-in Wi-Fi connectivity
Many public locations offer wireless networks called Wi-Fi hot spots
Malls, cafes, restaurants, schools, airports, hotels etc.
Image source: Google Image

17. Connecting to the Internet
Smartphones or Internet-capable tablet can be used to create mobile hot spots
Sharing the device’s Internet connection is called tethering
Image source: Discovering Computers 2016

18. Connecting to the Internet
Internet Service Provider (ISP) is a company that provides Internet access and other related services to users (individuals and organisations)
Users need to pay fees according to the plans subscribed
Plans are based on speed, bandwidth and services
ISP in Malaysia:
TM (Streamyx, UniFi)
Celcom
DiGi
Maxis
U Mobile
Jaring (now defunct)
Image source: Google Image

19. Data movements on the internet

20. Data Movements on the Internet
Image source: Discovering Computers 2016

21. Data Movements on the Internet
The Internet backbone are major carriers of network traffic
These carriers are transmission media that carry the heaviest amount of communications activities
Data is transferred from one network to another until it reaches the intended destination
Image source: Google Image

22. Data Movements on the Internet
The Internet uses several protocols to transfer data
Transmission Control Protocol/Internet Protocol (TCP/IP)
The official communication protocol of the Internet
TCP: breaks files and messages into individual units called packets
IP: routes data packets to the correct destination address
Hypertext Transfer Protocol (HTTP)
Set of rules for exchanging files such as text, graphics, images, sounds, videos and other multimedia files on the Web
Web browsers send HTTP requests for webpages and associated files
Web servers returns HTTP responses to web browsers

23. Data Movements on the Internet
The Internet uses several protocols to transfer data
File Transfer Protocol (FTP)
Set of rules that allow files to be exchanged between computers on the Internet
Commonly use by web developers to transfer webpage files from their computers to web servers
Also used to download programs and files from servers to individual computers
Protocols
SMTP (Simple Mail Transfer Protocol) is used to send s
IMAP (Internet Mail Access Protocol) and POP3 (Post Office Protocol) are used to receive s

24. Internet addressing system

25. Internet Addressing System
Each computer or device connected to the Internet is assigned a unique IP address for identification and location definition purposes
IP address stands for Internet Protocol address
It is a sequence of numbers
The Internet uses two IP addressing schemes:
IPv4
IPv6 (the recent version)
The number of computers and devices on the Internet grows rapidly, causing the amount of original IPv4 address to decrease and will one day be exhausted
IPv6 is intended to replace IPv4
Image source: Google Image

26. Internet Addressing System
IP addresses can be lengthy, and numbers may be difficult to be remembered by most people
To support this, the domain name is used
The domain name is a text-based name that corresponds to the IP address
It is part of the Web address that is typed into the Web browser’s address bar
A DNS (domain name system) server translates the domain name to its corresponding IP address
Image source: Google Image

27. Internet Addressing System
Example of IPv4 and IPv6 addresses and the corresponding domain name:
Top-level domain (TLD) identifies the type of organisation associated with the domain
Image source: Discovering Computers 2016

28. Internet Addressing System
The table shows the original TLDs and its intended purposes
New TLDs are being introduced to give flexibility and creativity when purchasing domain names
E.g. .museum, .technology, .biz
Domain name suffix may also include country codes
E.g.
TLD
Intended Purpose
.com
Commercial organizations, businesses and companies
.edu
Educational institutions
.gov
Government agencies
.mil
Military organisations
.net
Network providers or commercial companies
.org
Nonprofit organisations

29. The world wide web

30. The World Wide Web
The World Wide Web (WWW) or Web, is a worldwide collection of electronic documents
Can contain text, graphic, animation, video and audio
Each electronic document on the Web is called a webpage
Static webpage: same contents each time a webpage is viewed
Dynamic webpage: the content of the webpage generates each time a user displays it
A collection of related webpages and associated items is called a website
Websites are stored on web servers, computers that deliver requested webpages to a user’s computer or mobile device
Image source: Google Image

31. The World Wide Web
The World Wide Web was invented by a British computer scientist named Sir Tim Berners-Lee
Sir Tim Berners-Lee was knighted by Queen Elizabeth II in 2004 for his tremendous contributions to the Web
It was invented at the European Organization for Nuclear Research (CERN) laboratory in Geneva, Switzerland
The official “birthday” of the Web is 12 March 1989
Image source: Google Image

32. The World Wide Web
A browser is an application that enables users with an Internet connection to access and view webpages on a computer or mobile device
Many websites can detect if user is accessing the website from a mobile device
Examples of browsers: Google Chrome, Mozilla Firefox, Internet Explorer, Apple Safari
A home page is the first page that a website displays
Image source: Google Image

33. The World Wide Web
Image source: Discovering Computers 2016

34. The World Wide Web
A webpage has a unique address called the Uniform Resource Locator (URL)
URL is also known as web address
The web address identifies the home page of Universiti Malaysia Sarawak
A web address is typed into the browser’s address bar
A web address consists of a protocol, domain name, and sometimes the host name, path to a specific webpage, or file name of the webpage
Image source: Google Image

35. The World Wide Web
Image source: Discovering Computers 2016

36. The World Wide Web There are many categories of websites:
Online social network
Informational
Media sharing & bookmarking sites
News, weather, sports & other mass media
Educational
Shopping & Auctions
Careers & Employment
Business, Governmental & Organizational
Blogs
Wikis
Health & Science
Entertainment
Financial
Travel & Mapping
E-Commerce
Portals

37. Internet services

38. Internet Services
The World Wide Web is one of the many services on the Internet
Other Internet services:
Internet messaging
Online discussions
VoIP
FTP
Chat rooms

39.
is the transmission of messages and files via a computer network
An program allows you to create, send, receive, forward, store, print, and delete messages
Image source: Discovering Computers 2016

40.
Image source: Discovering Computers 2016

41. Instant Messaging
Instant messaging services notify you when one or more of your established contacts are online and then allows you to exchange messages or files or join a private chat room with them
Image source: Discovering Computers 2016

42. Online Discussions
An online discussion is an online area in which users have written discussions about a particular subject
Also known as discussion forum
A thread consists of the original article and all subsequent replies
Image source: Discovering Computers 2016

43. VoIP
Voice over IP (VoIP) enables users to speak to other users via their Internet connection
E.g. Skype
Image source: Discovering Computers 2016

44. FTP
File Transfer Protocol (FTP) is an Internet standard that permits file uploading and downloading to and from other computers on the Internet
Image source: Google Image

45. Chat Rooms
A chat is a real-time typed conversation that takes place on a computer or mobile device with many other online users
A chat room is a website or application that permits users to chat with others who are online at the same time
Image source: Discovering Computers 2016

46. Web development

47. Web Publishing
Web publishing is the creation and maintenance of websites
Maintain the website
Host the website
Create the website
Design the website
Plan the website
Image source: Discovering Computers 2016

48. Markup Language
A markup language is a set of instructions used for creating annotations that are used for formatting documents for display or printing
Examples of markup languages:
Hypertext Markup Language (HTML)
eXtensible Hypertext Markup Language (XHTML)
Standard Generalized Markup Language (SGML)
eXtensible Language (XML)

49. HTML HTML is short for Hypertext Markup Language
HTML is used to describe the content and structure of data and information in a document, for Web browsers to display
HTML tags are instructions that specify how the document should appear when displayed by the Web browser
HTML documents can be created using a text editor
It is the most widely known and used markup language
Image source: Google Image

50. HTML HTML source and display on a web browser
Image source: Google Image

51. HTML Example of a webpage and its corresponding HTML
Image source: Discovering Computers 2016

52. New elements and attributes
HTML
HTML5 is the latest HTML standard, that replaces HTML4 and XHTML
HTML5 is designed to deliver rich contents without requiring the user to install additional plugins
A plugin is a program that extends the capability of a Web browser
HTML5 is capable of working on other platforms such as tablets, smartphones and smart TVs, other than the conventional web browsers
New features of HTML5 include:
Video & audio
Local SQL database
New elements and attributes
Web applications
Full CSS3 support

53. HTML HTML tags are enclosed in angle brackets: <html>
Each tag’s name is called an element
Syntax: <element> content </element>
E.g.: <p> This is a paragraph </p>
HTML tags usually come in pairs: <p> and </p>
The first tag is called the start tag or opening tag
The second tag is called the end tag or closing tag
Some tags contain additional information, called attributes
Syntax: <element attribute=“value”> content </element>
E.g.: <a href=“page10.html”> Page 10 </a>

54. HTML
Some tags do not have contents, so it can be opened and closed in one tag instead of in pairs
Syntax: <element attribute=“value” attribute=“value2” />
E.g.: <img src=“cat.jpg” /> or <hr />
HTML can be written using text editors (e.g. Notepad)
HTML documents must have either .html or .htm extension
Most whitespace is insignificant and ignored in HTML

55. HTML
The structure of a HTML document contains a head section and a body section
Head section contains information that describes the webpage document
Body section contains text and elements that are to be displayed on the browser
Image: Stepp & Miller, 2009

56. HTML

57. HTML
Document Type Definition (DTD) identifies the version of HTML used in the webpage document
It is placed at the top most of the document
Image: Stepp & Miller, 2009

58. HTML The <title> tag describes the title of the webpage
The tag is placed within the head section
The title is displayed in the browser’s title bar and when bookmarking the page
Syntax example: <title> My First Webpage </title>

59. HTML
The <p> tag groups sentences and sections of text together into a paragraph
This tag is placed within the body section
It configures a blank line above and below the paragraph
Example:
Image: Stepp & Miller, 2009

60. HTML
The headings tags <h1>, <h2>, …, <h6> are used to create heading to separate sections in the webpage based on importance
<h1> denotes the most important heading, while <h6> denotes the least important heading
Example:
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

61. HTML
The <br> tag forces a line break in the middle of a block of text or elements and causes the next text/element to display on a new line
This tag is placed within the body section
It should immediately be closed with a back slash /
Example:
Image: Stepp & Miller, 2009

62. HTML
The <hr> tag is used to create a horizontal line to separate sections in the webpage
This tag is placed within the body section
It should immediately be closed with a back slash /
Example:
Image: Stepp & Miller, 2009

63. HTML
The <img> tag is for inserting graphics or images into the page
The src attribute specifies where the graphics or image is located (its URL)
The tag is placed within the body section
Example:
Image: Stepp & Miller, 2009

64. HTML The <ol> tag creates a numbered/lettered list of items
The default is numerals
To contain items in the list, the <li> tag is used
The tag is specified within the body section
Example:
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>

65. HTML The <ul> creates a bulleted list of items
The default type is disc
To contain items in the list, the <li> tag is used
The tag is specified within the body section
Example:
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>

66. HTML
The <dl> tag is used to create a description list (formerly known as definition list)
The <dt> tag is used to contain a term/phrase/sentence
The <dd> tag contains a description of the term/phrase/sentence and indents the text
The tag is specified within the body section
Example:
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>

67. HTML
The <a> tag is used to specify a link or anchor reference to a file or page
The <href> attribute is used to specify the destination of the file or page
It can be either absolute (to another website) or relative (to another page on the same site)
The tag is specified within the body section
Example:
Image: Stepp & Miller, 2009

68. HTML HTML tags that can be used to format text:
Image: Stepp & Miller, 2009

69. HTML
It is important to write valid HTML or XHTML, in order for more consistent browser display
The World Wide Web Consortium (W3C)provides a free markup validation service that can be accessed at
The validator checks markup validity of Web documents written in HTML, XHTML, and other markup languages
Users can validate their Web documents by three ways: by URI, by file upload, or by direct input
Other validators that are available: Unicorn, Markup Validator, Line Checker, CSS Validator, XML Schema Validator, etc.

70. HTML

71. Web 2.0

72. Web 2.0
Web 2.0 refers to websites that provide a means for users to share personal information, allow users to modify website content, and provide applications through a browser
E.g. online social networking sites
Image: Vermaat, Sebok & Freund (2014)

73. Tools relevant to learning and everyday use

74. Tools relevant to learning & everyday use
There are many Web 2.0 and social media tools available for students to use in their learning and everyday tasks.
Some suggested tools are:
Twitter
This microblogging site allows users to post 140-character text messages called “tweets”.
Students and educators can post short, “bite-size” chunks of information related to their academic works.
Hashtags (keywords preceded with the hash ‘#’ sign) can be used to group/track the related tweets.

75. Tools relevant to learning & everyday use
Prezi
Prezi is a free online tool that lets users create, collaborate, present and share interactive presentations with each other.
Students can have the latest versions of their presentations with them anytime, as long as they have Internet connection, as Prezi is a cloud-based application and allows students to present directly from their computing devices.
Prezi has a feature called Prezi Showcase that allows users to share their presentations with the public, or with people in their social networks such as Facebook or Twitter.

76. Tools relevant to learning & everyday use
Google Hangout
Google Hangout allows users to voice or video chat, instant message and share photos with each other.
Students and educators can use Google Hangout to have real-time virtual hangouts together (group video chats) to discuss on academic works, or have study groups.

77. Tools relevant to learning & everyday use
Wikia
Wikia is a free wiki website that users can use to create, modify and share contents on specific subjects or topics.
Students and educators can use Wikia to post content and information on their courses or academic works.
Contents and information on wikis are usually in text, but can include other multimedia elements such as audio, image and video.

78. Tools relevant to learning & everyday use
SoundCloud
SoundCloud is an online tool that allows for recording of podcasts – digital audio files – that can be listened to and shared over the Internet.
Students can use SoundCloud to record their discussions, opinions, or questions then share it online with their friends and/or educators.
Educators can record their lectures, or materials on SoundCloud, and students can then listen to the podcasts on their mobile devices, while on the move e.g. on the bus/train, while exercising, etc., or when they are out of the classroom.

79. Tools relevant to learning & everyday use
YouTube
YouTube is a video hosting and sharing site, and it allows users to upload their own videos to share with others.
Similar to podcasts, students can record their academic works, assignments, projects, etc. and share it online with their friends and/or educators.
Educators can record their lectures, or other academic materials (e.g. answers to students’ questions), coupled with graphical illustrations, and upload the materials to YouTube for students to watch when they are not in the classroom, or on the move.

80. Tools relevant to learning & everyday use
As this tools are cloud-based services, users do not have to worry about having to install special software on their computing devices just to use the tools.
Users only need to create an account, and have an active Internet connection on their devices, and they can use these tools anywhere, anytime on their devices (desktops, laptops, tablets, smartphones etc.).

81. Online resources

82. Types of online resources
The Web is a treasure chest of information and resources (there are billions of Web pages), and this can lead to sense of being overwhelmed if one does not know how or where to look for what they want or need.
There are many types of resources available on the Web, namely text, images, pictures, audio/podcasts, video, articles, journals, documents, maps, blogs, contact details, software, apps, e-Books, other publication types, etc.

83. Types of online resources
As the Web contains a huge amount of information and resources, it is important for the searcher to clearly know what he/she is searching for – the main idea or concept – and from there, work to identify related terms to that main idea or concept.
Related terms can be synonyms or variant words, or alternate spellings.

84. Types of online resources
Once the searcher knows what he/she wants to search for, he/she can use either one of these tools to locate the information or resources needed:
Search engines
Google
Bing
Web directories
The Open Directory Project (
Yahoo! Directory (

85. How to search for online resources
Basic search:
Select a search engine (there are many to choose from e.g. Google, Yahoo!, Bing, etc.).
Type in the search text – the word/group of words (phrase) of what you want to find.
You can search for these items: publications (articles, journals, news, papers, etc.), people/businesses (names, phone numbers, addresses, CVs, etc.), images, videos, audio, maps, blogs
Your search text can be either broad, or specific e.g. “place to eat in Kota Samarahan” (broad) and “seafood restaurant in Kota Samarahan” (specific)
Another example: “programming languages” (broad), “Java” (specific)
The search engine may provide suggestions for alternative search text and corrected spellings

86. How to search for online resources
Basic search (cont’d):
Click/hit the ‘Search’ button, or simply press the ‘Enter’ key on your keyboard.
The results (responses) returned by the search engine are called hits
Hits can be in the form of: links to webpages and documents (.doc, .rtf, .pdf etc.), media (images, videos, audio). Some search engines provide snippets (short text answers of the search result). Example of how snippets look like (highlighted by the red rectangle):
Since there are usually many (can be thousands or even millions of hits), you may feel like you don’t know which one to choose. Because search engines’ results sequence are based on how close the words in your search text to the ones in titles and/or descriptions of the results, it is suggested that you go through the first few results returned (they may contain information that are more relevant to what you are looking for).

87. How to search for online resources
Advanced search
Search engines like Google and Yahoo! also provide another feature called Advanced Search for users to refine their search results.
Users only need to type in the types of filter they want to use, and the search engines will return the results based on the filters specified.
Examples of filter include language, region, last update, site/domain, file type, etc.
Google’s Advanced Search is available at while Yahoo!’s Advanced Search is at

88. How to search for online resources
Other than advanced search feature, users can also use search engine operators to search for more specific results.
Examples of search engine operators:
Filetype
Returns search results that only has the specified filetype e.g. open source filetype:pdf will return PDF files containing the term ‘open source’
“ ”
Returns search results that only has the exact phrase e.g. “open source” will return results that contain the exact phrase ‘open source’

89. How to search for online resources
Other than advanced search feature, users can also use search engine operators to search for more specific results.
Examples of search engine operators: OR
Returns search results that has either word e.g. “open source OR proprietary” will return results that contain either ‘open source’ or ‘proprietary’ –
Returns search results that exclude the word e.g. “open source –software” will return results that contain the word ‘open source’ but do not include the word ‘software’

90. How to search for online resources
Other than advanced search feature, users can also use search engine operators to search for more specific results.
Examples of search engine operators:
Space or +
Returns search results that have the specific words e.g. “open + source + technology” will return results that have all three words, in random order.
For more operators, visit: The Google Guide Advanced Operators Reference

91. Credible/reliable online resources
As the Web contains billions of pages, it is important to ensure that the information or resources obtained are credible and reliable to be used and presented.
To learn more about searching for resources that are credible and reliable, watch these videos:
Credible Websites? by Hartness Library (
Evaluating Sources on the World Wide Web (

92. Credible/reliable online resources
When using the information or resources obtained from the Web, it is important to give credit and cite from where those materials are from.
It can be as simple as a single line stating “This information was obtained from (Web site address)”, OR
Using systematic citation styles such as APA, Harvard, MLA, etc.

93. Storing & managing online resources
Pocket – allows users to save Web pages or articles into reading lists for reading at a later time.
Evernote – allows users to take notes with image, audio and video attachments.
Dropbox and Google Drive – allows users to store files and access the files from anywhere with Internet connection, as well as share the files with their friends.

94. Standards & coordination

95. Standards and Coordination
The Internet is not owned, controlled and/or governed by only one country, organization or private citizen
There are organizations that oversee and standardize what happens on the Internet
The Internet Society
Internet Corporation for Assigned Numbers & Names (ICANN)
Internet Engineering Task Force (IETF)
Internet Architecture Board (IAB)

96. Standards and Coordination
The World Wide Web Consortium (W3C) is a consortium that was founded for the purpose of developing and coordinating Web standards
It was founded by, and now currently lead by Sir Tim Berners-Lee
The consortium is made up of full time staff, member organizations and the public
Image source: Google Image

97. Summary The Internet History of the Internet
Data Movements on the Internet
Connecting to the Internet
Internet Addressing System
The World Wide Web
Internet Services
Web Development
Web 2.0
Tools for learning and everyday use
Online Resources
Standards and Coordination