IT221

WEB DESIGN AND

PROGRAMMING
LESSON 2: Exploring HTML
Intended Learning Outcomes
At the end of this lesson, you will be able to:
• Differentiate webpage, website, and web app.
• Define and explain the structure of an HTML
document
• Create a basic HTML document with appropriate tags
• Use basic HTML tags to format a webpage

Lesson 2: Exploring HTML

EVOLUTION
OF THE WEB
Web 1.0
❖Only allowed us to
search for
information and
read it.
❖The interaction
between the user
and the web is very
limited.

Lesson 2: Exploring HTML

Web 2.0
❖It allowed the users
to interact with the
web page
❖There is a dynamic
content.

Lesson 2: Exploring HTML

Features of Web 2.0
Folksonomy

• allows the users to

categorize and classify
information (Tagging).
Popular social networking
sites use tags and freely
chosen keywords to
activate the feature.

Lesson 2: Exploring HTML

Features of Web 2.0
Rich User Experience

• web content is responsive

to user’s input. In social
networking sites, when
logged on, your account is
used to modify what you
see in the social media
platform.

Lesson 2: Exploring HTML

Features of Web 2.0
User Participation

•Users can place a

content of their own
by means of
comments, reviews,
and evaluation.

Lesson 2: Exploring HTML

Features of Web 2.0
Long Tail

•are services that are

offered on demand
rather than on a one-
time purchase.
Examples are file-based
pricing and time-based
pricing.

Lesson 2: Exploring HTML

Features of Web 2.0
Software as a Service

•is a feature that

allows you to rent
a software rather
than installing it
in your computer.
Lesson 2: Exploring HTML
Features of Web 2.0
Mass Participation

•diverse
information
sharing through
universal web
access.
Lesson 2: Exploring HTML
Web 3.0
❖Is a movement led by
the World Wide Web
Consortium (W3C).
❖It is alike Web 2.0 but
it is used to cater
individual user.
❖It allows data to be
shared and reused
across application,
enterprise, and
community
boundaries.

Lesson 2: Exploring HTML

 Limitations of Web 3.0
Compatibility – HTML files and current web browsers could not support
Web 3.0
Security – since the server saves the user’s preference, the user’s security
will be questioned.
Vastness – the World Wide Web already contains billions of web pages
Vagueness – The vagueness of words will be questioned due to it being
imprecise
Logic – since machines uses logic, there are certain limitations for a
computer to be able to predict what the user is referring to at a given time

Lesson 2: Exploring HTML

WHAT IS WEB?
The term "web" in the context of technology
and the internet generally refers to the World
Wide Web (WWW), which is a system of
interconnected documents and resources
that are linked together and accessible via
the internet.
Lesson 2: Exploring HTML
TWO TYPES OF WEB

WEBSITE WEB APP

Lesson 2: Exploring HTML

TWO TYPES OF WEB

WEBSITE
A collection of static web page that is primarily
informational. Its main purpose is to provide content
and information to visitors.

Lesson 2: Exploring HTML

TWO TYPES OF WEB

WEB APP
A collection interactive web pages that was
designed for user engagement and functionality. It
offers dynamic, interactive features and allows
users to perform specific tasks or transactions.

Lesson 2: Exploring HTML

HOW TO CREATE
A WEB PAGE?
3 language that is
used in creating a
Web Page

HTML

CSS

JAVASCRIPT
 • HTML stands for Hypertext Markup
Language, and it is the most widely
used language to write/ create Web
Pages.
• Hypertext refers to the way in which
Web pages (HTML documents) are
HTML linked together through series of
Hyperlinks.
• Markup Language which means you
use HTML to simply "mark-up" a text
document with tags that tell a Web
browser how to structure it to
display.

Lesson 2: Exploring HTML

 HISTORY OF HTML

https://youtu.be/ok-plXXHlWw
HTML Editors
An HTML editor is a piece of software for creating and editing HTML code. It
can be a stand-alone software dedicated to code writing and editing or a
part of an IDE (Integrated Development Environment).

The most common features in a good HTML editor are:

• Syntax highlighting
• Auto-completion
• Error detection
• Search and replace
• FTP integration
• Code folding
Lesson 2: Exploring HTML
 Free HTML Editors
Notepad++ Sublime Text Visual Studio Code
A freemium editor, meaning users can
open-source HTML editor developed for An open-source, free HTML editor from
use Sublime for free but will have to buy
Windows-based computers. Microsoft built on Github’s Electron.
a license to enjoy full features..

Lesson 2: Exploring HTML

SCRIPTING HTML
LANGUAGE
HTML ELEMENTS
HTML documents are made up by HTML elements.
An HTML element is defined by a start tag, some
content, and an end tag:

Lesson 2: Exploring HTML

HTML ELEMENTS

• HTML tags normally come in pairs.

• 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 slash before the
tag name.
Note: One-sided element tag is for element without content.
<element/>

Lesson 2: Exploring HTML

HTML Structure
<!DOCTYPE html>
<html>
<head>
head content
</head>
<body>
body content
</body>
</html>

Lesson 2: Exploring HTML

HTML Tags
<!DOCTYPE html> & <html>
• All HTML documents must start with a type declaration:
<!DOCTYPE html>
DOCTYPE declaration defines the document type to be HTML 5.
• The HTML document itself begins with <html> and ends with
</html>.

Lesson 2: Exploring HTML

HTML Tags
<head>
• The HTML <head> element is a container for the following
elements: <title>, <style>, <meta>, <link>, <script>, and
<base>.
• Metadata typically define the document title, character set,
styles, scripts, and other meta information.

Lesson 2: Exploring HTML

HTML Tags
<title>
• The <title> element is a required HTML element used to assign
a title to an HTML document.
• It is used as the page name of the web page.

Lesson 2: Exploring HTML

Head Elements

Contains metadata, which is content that describes the document or provide information about how the
document should be processed by the browser
HTML Tags
<body>
• The <body> tag defines the document's body.
• The <body> element contains all the visible contents of an
HTML document, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.

Lesson 2: Exploring HTML

HTML Tags
<h1>
• The <h1> tag defines a heading 1.
• The following is the list of heading elements available in HTML.
They are ordered from largest to smallest in size.
<h1>
<h2>
…
<h6>

Lesson 2: Exploring HTML

Sectioning Elements

Sectioning elements are used to mark major topical areas (major topics of your page) of you web page.
HTML Tags
<p>
• The <p> tag defines a paragraph.
• Browsers automatically add a single blank line before and after
each <p> element

Lesson 2: Exploring HTML

HTML Tags
<div>
• The <div> tag defines a division.
• <div>s don’t inherently have a visual representation, but they
are very useful when we want to apply custom styles to our
HTML elements.

Lesson 2: Exploring HTML

HTML Tags
<ol> & <ul>
• Ordered list (<ol>) tag is used to create a list of items in no
order.
• Unordered lists (<ul>) are like unordered lists, except that each
list item is numbered.
• The <li> or list item tag is used to describe an item in a list.

Lesson 2: Exploring HTML

HTML Tags
<br>
• The <br> tag defines a line break.
• It is used in modifying the spacing in the browser.

Lesson 2: Exploring HTML

Sectioning Elements

Grouping elements help organize content into logical blocks or lists within an HTML document.
HTML Tags
<em> & <strong>
• The <em> tag emphasizes text, while the <strong> tag
highlights important text.
• The <em> tag will generally render as italic emphasis.
• The <strong> will generally render as bold emphasis.

Lesson 2: Exploring HTML

Text-Level Elements
Text-Level Elements

Text-level elements are used to format specific sections of text inline with other content.
HTML Comments
A comment is descriptive text or note that is added to
the HTML File but does not appear in the browser
window.

<!--contain comments-->

Lesson 2: Exploring HTML

HTML ATTRIBUTES
HTML attributes provide additional information about
HTML elements.

Lesson 2: Exploring HTML

HTML ATTRIBUTES

• All HTML elements can have attributes.

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

Lesson 2: Exploring HTML

HTML Attributes
Tag Description

size="?" Line Thickness in pixels

width="?" Line Width in pixels

width="??%" Line Width as a percentage

color="#??????" Line color

align="?" Horizontal Alignment: left, center, right (*)

background="url" Background Image

bgcolor="#??????" Background Color
text="#??????" Document Text Color
link="#??????" Link Color
vlink="#??????" Visited Link Color
alink="#??????" Active Link Color
bgproperties="fixed" Background Properties - "Fixed" = non-scrolling watermark
leftmargin="?" Side Margin Size in Pixels (Internet Explorer)
topmargin="?" Top Margin Size in Pixels (Internet Explorer)
Type the code as shown below and save it as sections.html
Question and Answer