THE WEB

The World Wide Web

• The World Wide Web, or Web, consists of a worldwide collection

of electronic documents (Web pages)
• A Web site is a collection of related Web pages and associated
items
• A Web server is a computer that delivers requested Web pages to
your computer
• Web 2.0 refers to Web sites that provide a means for users to
interact

Pages 80 - 81 2
Discovering Computers 2012: Chapter 2
 The World Wide Web
• A home page is the first • Some Web pages are
page that a Web site designed specifically for
displays microbrowsers
• Web pages provide links to
other related Web pages
• Surfing the Web
• Downloading is the process
of receiving information

Pages 82 - 83
3
Discovering Computers 2012: Chapter 2
Figure 2-7
 The World Wide Web
• A Web browser, or browser, allows users to access Web
pages and Web 2.0 programs

Internet
Firefox Opera
Explorer

Google
Safari
Chrome

Page 81 4
Discovering Computers 2012: Chapter 2
5
 The World Wide Web
• A Web page has a unique address called a URL or Web address

Pages 82 – 83
6
Discovering Computers 2012: Chapter 2
Figure 2-8
• Web 1.0 (Read Only Static Web)
The Web
Most read only web. If focused on company’s home pages
Dividing the world wide web into usable directories
It means we is use as information Portal
It started with the simple idea ‘put content together’
Example of Web 1.0
Mp3.com
Home Page
Directories
Page Views
HTML/Portals
Disadvantages:
Read only
Limited users interaction
Lack of Standard
 The Web
Web 2.0 (Read Write interactive web)
1. It is a platform that gives users the possibility (liberty) to
control their data
2. This is about user-generated content and the read-write web
3. People are consuming as well as contributing information
through blogs or sites.
4. Allows the user to interact with the page known as DYNAMIC
PAGE
5. It focused on the ability for people to collaborate and share
information online
via social media, blogging and web-based communities.
 The Web
Example of Web 2.0 are the following:
A. Social Networking – is the use of Internet based social media sites to stay
connected with friends, family or clients.
Example: Facebook, Twitter, Linkedln, Google+, Pinterest, tumblr, Instagram,
Page
B. Blogs – is a discussion or informational website published on the world wide
web consisting of discrete, often informal diary style text entry.
Example: Wordpress, Blogger, Tumbler
C. Wikis – is a hypertext publication collaboratively edited and managed by its
own audience directly using a web browser
Example: Wikpedia, Wikibooks, Wikiversity
 The Web
D. Video Sharing Sites – a website that lets people upload and share
their video
clips with the public at large or to invited guests
Example: Youtube, Facebook, Linkedln, Flickr, Photobucket, Twitter, Metacafe
etc.
Features of Web 2.0
1. Folksonomy – allows users to categorize/arrange information using freely
chosen keywords.
2. Rich User Interface – content is dynamic and is responsive to user’s input.
3. User Participation – the owner of website is not the only one who is able
to put content. Others are able to place a content on their own by means
of comments, review, and evaluation.
4. Long Tail – services are offered on demand rather than on a one-time
purchase.
• Web 3.0 (Read-write intelligent web)
• Suggested name by John Markoff of the new York Times for the third
generation of the web.
• In this generation, all the application on web or mobile will be
upgraded with more features. It applies same principles as Web
2.0: two-way interaction.
• Web 3.0 will be more connected, open, and intelligent, with
semantic web technologies, distributed databases, natural language
processing, machine learning, machine reasoning and autonomous
agents.
• Semantic Web – provides a framework that allows data to be shared
and reuse to deliver web content specifically targeting the user.
• It is a web of data.
• Changing the web into a language that can be read and categorized
by the system rather than human.
• Web 3.0 (Read-write intelligent web)
Types of websites:
a. E-commerce is a website people can directly buy products from you’ve
probably use a
number of eCommerce websites before most big brands and plenty of
smaller ones have one.
b. Business Websites – is any website that’s devoted to representing a specific
business.
c. Portfolio Website – are sites devoted to showing example of past work.
d. Media Website – collects news stories or other reporting.
e. Brochure Website – are simplified form of business websites.
f. Non-profit Website – a nonprofit website is the easiest way for many potential
donor
to make donation and will be the first place many people look to learn more
about a
nonprofit and determine if they want to support it.
g. Educational Website a website that offers online courses and has a primary
goal of
either providing educational materials to visitors or providing information on an
educational Institution to them.
• Web 3.0 (Read-write intelligent web)
Types of websites:
h. Infopreneur Website – creates and sells information products. That
could be in the form of courses, tutorials, videos or ebook.
i. Personal Websites – a website containing the personal information of
individual.
j. Wiki Website or Community form website – is any website where various
users are able to collaborate on content and all make their own tweaks and
changes as they see fit.
k. Informational Website – factual information
l. Entertainment Website – offers an interactive and engaging
environment
m. Advocacy Websites – contain content that describes a cause,
opinion, or idea.
n. Web Portal – is a web site that offers a variety of Internet services from a single,
coventient location.
Content on the web
• Multimedia
• Graphics
• Animation
Audio format:
AA – Audible Audio
AAC – Advanced Audio Coding
AIFF – Audio In
MP3, WAV, WMA, RA and QT
Video
Virtual Reality
Plug-Ins- a program that extends the capability of a browser.
Popular Plugs-In= Acrobat, Flash Player, Quick Time, RealOne
Player
 The World Wide Web
• Information presented on the
Web must be evaluated for
accuracy
• No one oversees the content of
Web pages

15
 The World Wide Web
• Multimedia refers to any application that combines text with:

Page 92 16
Discovering Computers
 The World Wide Web
• A graphic is a digital
representation of nontext
information
• Graphic formats include BMP, GIF,
JPEG, PNG, and TIFF

17
• A thumbnail is a small version of a The World Wide Web
larger graphic

Page 94
18
Discovering Computers 2012: Chapter 2
Figure 2-19
 The World Wide Web

• Animation is the appearance of motion created by displaying

a series of still images in sequence

Page 94 19
Discovering Computers 2012: Chapter 2
 The World Wide Web
• Audio includes music, speech, or any other sound
• Compressed to reduce file size
• You listen to audio on your computer using a player
• Streaming is the process of transferring data in a continuous and
even flow

Pages 94 – 95
20
Figure 2-20
 The World Wide Web
• Video consists of images displayed in motion

Page 96
21
Discovering Computers 2012: Chapter 2
Figure 2-22
 The World Wide Web
• Virtual reality (VR) is the use of computers to simulate a real
or imagined environment that appears as a three-
dimensional space

Pages 96 – 97
22
Discovering Computers 2012: Chapter 2
Figure 2-23
 The World Wide Web
• A plug-in is a program that extends the capability of a Web browser

Page 97
23
Discovering Computers 2012: Chapter 2
Figure 2-24
 The World Wide Web
• Web publishing is the development and maintenance of Web
pages

Analyze
Maintain
Plan a and Create a Deploy a
a Web
Web site design a Web site Web site
site
Web site

Page 98 24
Discovering Computers 2012: Chapter 2
<a href="Home1 Self.html"target=_self">Home1 Self</a>

<a href="PUP1 blank.html"target="_blank">PUP1</a>

a href="Home.html">Home</a>
<

<a href=“PUP.html">PUP</a>
<a href="Home1 Self.html"target=_self">Home1 Self</a>

<a href="https://www.pup.edu.ph"></a>
<a href="PUP1 blank.html"target="_blank">PUP1</a>
HTML, or Hypertext Markup Language, is a markup
language for the web that defines the structure of web
pages.
Hypertext: text (often with embeds such as images, too)
that is organized in order to connect related items
Markup: a style guide for typesetting anything to be
printed in hardcopy or soft copy format
Language: a language that a computer system
understands and uses to interpret commands.
.
 HTML ELEMENT
<p>Polytechnic University of the Philippines</p>

Opening Tag Content Closing Tag

The opening tag: This consists of the name of the element (in this
example, p for paragraph), wrapped in opening and closing angle brackets.
This opening tag marks where the element begins or starts to take effect.

The content: This is the content of the element

The closing tag: This is the same as the opening tag, except that it includes
a forward slash before the element name..
Tags in HTML are not case-sensitive.
For example,
<title>
<TITLE>
<Title> </TiTlE>
Attributes - contain extra information about
the element that won't appear in the content
 <p class=“class-editor note”>PUP </p>

Attribute
An attribute should have:
•A space between it and the element name. (For an
element with more than one attribute, the attributes
should be separated by spaces too.)
•The attribute name, followed by an equal sign.
•An attribute value, wrapped with opening and
closing quote marks.
Nesting elements - Elements can be
placed within other elements.

<p>My cat is <strong>very</strong> grumpy.</p>

Nesting Element
 HTML editor
An HTML editor is a software for editing and creating
HTML code that is used for websites or other web
documents. With text-based HTML editors, the
source code can be edited directly. WYSIWYG editors
show the document to be edited already the way it
displayed in the browser later
Notepad++
Notepad++ is a free, open-source, Windows-only code
editor that supports HTML and many other languages, has
syntax highlighting, code folding, auto-completion, macro
recording, and …

Visual Studio Code

Visual Studio Code is a free and open-source text and
source code editor that runs on Windows, Linux, and
macOS. It offers a rich set of features, such as debugging,
code completion, version
 Atom was a free and open-source text and source code editor for macOS, Linux,
and Windows with support for plug-ins written in JavaScript, and embedded Git
Control. Developed by GitHub, Atom was released on June 25, 2015

Sublime Text is a shareware text and source code editor available for Windows,
macOS, and Linux. It natively supports many programming languages and markup
languages. Users can customize it with themes and expand its functionality with
plugins, typically community-built and maintained under free-software licenses

Adobe Dreamweaver CC is an IDE application that supports

both back-end and front-end development. In addition, the
software provides web design and web development toolkits to
make website creation easier
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
Basic Structure
The <!DOCTYPE> Declaration

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!doctype html>
<html lang="en-US">
<head>
<title>Page Title</title>
<meta name="Author" content="W3docs">
<meta charset="utf-8">></head>
</html
The <meta> element is used to specify the metadata to
provide browsers and search engines with technical
information about the web page.
• HTML Document Structure
• The <h1> to <h6> tags show different levels of headings
in a document, with <h1> being the largest and <h6>
being the smallest.
• <h1> Heading 1 </h1>
• <h2> Heading 2 </h2>
• <h3> Heading 3 </h3>
• <h4> Heading 4 </h4>
• <h5> Heading 5 </h5>
• <h6> Heading 6 </h6
 Text Formatting in HTML

• <i> displays text in italics.

• <b> displays text in bold.
• <strong> displays text in bold. Used to make important emphasis.
• <em> another emphasis tag that displays text in italics.
• <sub> defines subscript text, like the two atoms of oxygen in CO₂.
• <sup> defines a superscript like the power of a number, 10².
• <small> reduces the size of text.
• <del> defines deleted text by striking a line through the text.
• <del> defines deleted text by striking a line through the text.
• <ins> defines inserted text which is usually underlined.
• <blockquote> is used to enclose a section of text quoted from another
source.
• <q> is used for shorter inline quotes.
• <cite> is used for citing the author of a quote.
• <address> is used for showing the author's contact information.
• <abbr> denotes an abbreviation.
• <code> displays code snippets.
• <mark> highlights text.
<p><i> italic text </i></p>
<p><b>bold text </b></p>
<p><strong> strong text </strong></p>
<p><em> strong text </em></p>
<p>_{subscripted text}</p>
<p>^{superscripted text}</p>
<p><small> small text </small></p>
<p><del> deleted text </del></p>
<p><ins> inserted text </ins></p>
<p><blockquote> quoted text </blockquote></p>
<p><q> short quoted text </q></p>
<p><cite> cited text </cite></p>
<p><address> address </address></p>
<p><abbr> inserted text </abbr></p>
<p><code> code snippet </code></p>
<p><mark> marked text </mark></p>