CS221
WEB DESIGN AND
PROGRAMMING
LESSON 2: Exploring HTML
Mr. Kenneth Lawas
Intended Learning Outcomes
At the end of this lesson, you will be able to:
• Differentiate webpage, website, and web app.
• Understand and explain the basic structure of HTML
including the elements and formatting of text using
HTML tags
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.
• 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
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.
Lesson 2: Exploring HTML
HTML Structure
<!DOCTYPE html>
<html>
<head>
<title> HTML Introduction </title>
</head>
<body>
<h1> My First Heading </h1>
<p> My First Paragraph </p>
</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
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
<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
<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
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
<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
HTML Tags
<br>
• The <br> tag defines a line break.
• It is used in modifying the spacing in the browser.
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
Text Formatting Tags
Tag Description
<h?>….</h?> Heading (?= 1 for largest to 6 for smallest, example h1)
<b>…</b> Bold text
<i>…</i> Italic text
<u> ... </u> Underline Text
<strike> ... </strike> Strikeout
<sup> ... </sup> Superscript - Smaller text placed below normal text
<sub> ... </sub> Subscript - Smaller text placed below normal text
<small> ... </small> Small - Fineprint size text
<tt> ... </tt> Typewriter Text
<pre> ... </pre> Pre-formatted Text
<blockquote> ... </blockquote> Text Block Quote
<strong> ... </strong> Strong - Shown as Bold in most browsers
<em> ... </em> Emphasis - Shown as Italics in most browsers
<font> ... </font> Font tag obsolete, use CSS instead
Section Divisions Tags
Tag Description
<div> ... </div> Division or section of page content
<span> ... </span> Section of text within other content
<p> ... </p> Paragraph of Text
<br> Line Break
<hr> Basic Horizontal Line
<nobr> ... </nobr> Line Break
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
