Republic of the Philippines

CAVITE STATE UNIVERSITY

Silang Campus
Biga I, Silang, Cavite
 046 513-5706  046 513-3965
✉ cvsusilang@cvsu.edu.ph

DEPARTMENT OF INFORMATION TECHNOLGY

ITEC50 – Web System Technologies

Module 1
Hypertext Mark-up Language

Overview

Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.

Now, HTML is being widely used to format web pages with the help of different tags available in HTML
language.

Objectives

After working on this module, you will be able to:

1. Be familiar with the basic and advanced HTML tags and layouts.
Evolution of a Website
 Web 1.0 or the static web pages that essentially just displayed information, the most basic form of
web pages. A read-only page where users can’t interact with the content.
 Web 2.0 they’re the dynamic web apps where the user has total control of their information.
 Web 3.0, the AI-driven interaction for every user.

What is HTML?

• HTML stands for Hyper Text Markup Language, which is the most widely used language on Web
to develop web pages.
• Is very simple, and logical. It reads from left to right, top to bottom and uses plain text.
• Is NOT a programming language, but a mark-up language that uses <Tags>
• HTML is the standard markup language for creating Web pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

 • HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to render the content of the page

Why to Learn HTML?

HTML is a MUST for students and working professionals to become a great Software Engineer
specially when they are working in Web Development Domain.

Key advantages of learning HTML:

• Create Web site - You can create a website or customize an existing web template if you know
HTML well.
• Become a web designer - If you want to start a career as a professional web designer, HTML
and CSS designing is a must skill.
• Understand web - If you want to optimize your website, to boost its speed and performance, it is
good to know HTML to yield best results.
• Learn other languages - Once you understands the basic of HTML then other related
technologies like JavaScript, Php, or angular are become easier to understand.
History of HTML
 In 1991, Tim Berners-Lee invented HTML 1.0 But it was released on 1993
 In 1995, HTML 2.0 is published. This contains the features of HTML 1.0 plus new features. This
remained the standard markup language for designing and creating websites until 1997.
 HTML 3.2 was developed in 1997. After HTML 2.0 was developed, the next version of HTML was
3.2. With version 3.2 of HTML, HTML tags were further improved.
 In 1999, HTML 4.01 was developed. It extended the support of cascading styling sheets.
 In 2000, XHTML was introduced. XHTML is a stricter, more XML(Extensible markup Language)-
based version of HTML.
 In 2002-2009, XHTML 2.0 was introduced.
 In 2012, HTML5 was officially published. HTML5 is much more tolerant and can handle markup
from all the prior versions. Though HTML5 was published officially in 2012, it has been in
development since 2004.

HTML Tags
 HTML tags are element names surrounded by angle brackets
 HTML tags normally come in pairs like <p> and </p>
 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 inserted before the tag name

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

HTML Page Structure

The <!DOCTYPE> Declaration

 The <!DOCTYPE> declaration represents the document type, and helps browsers to display web
pages correctly.
 It must only appear once, at the top of the page (before any HTML tags).
 The <!DOCTYPE> declaration is not case sensitive.
 The <!DOCTYPE> declaration for HTML5 is:

HTML DOCUMENTS
 All HTML documents must start with a document type declaration: <!DOCTYPE html>.
 The HTML document itself begins with <html> and ends with </html>.
 The visible part of the HTML document is between <body> and </body>.

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

HTML HEADINGS
 HTML headings are defined with the <h1> to <h6> tags.
 <h1> defines the most important heading. <h6> defines the least important heading:

HTML PARAGRAPHS
 HTML paragraphs are defined with the <p> tag:

HTML Links
 HTML links are defined with the <a> tag.
Example:
<a href=https://www.facebook.com> This is a link for facebook</a>
 The link's destination is specified in the href attribute.
 Attributes are used to provide additional information about HTML elements.

HTML Images
 HTML images are defined with the <img> tag.
 The source file (src), alternative text (alt), width, and height are provided as attributes:

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

Note:
The alt attribute provides an alternate text for an image, if the user for some reason cannot view it
(because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
The src attribute specifies the URL (web address) of the image

HTML Lists
 HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list)
tag, followed by <li> tags (list items):

HTML Elements
 An HTML element usually consists of a start tag and an end tag, with the content inserted in
between

Nested HTML Elements

 HTML elements can be nested (elements can contain elements).
 All HTML documents consist of nested HTML elements.

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

Note:
HTML tags should be “nested” in a proper order, meaning that the tag opened most recently is always
the next tag to close.
In general, something that is nested is fully contained within something else of the same kind.
Empty HTML Elements
 HTML elements with no content are called empty elements.
 <br> is an empty element without a closing tag (the <br> tag defines a line break)

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The Style Attribute

 The style attribute is used to specify the styling of an element, like color, font, size etc.

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

HTML Horizontal Rules
 The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.
 The <hr> element is used to separate content (or define a change) in an HTML page:

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022

 Laboratory Activity #1:

Create a Slam Note using notepad and the provided sample format. Use only HMTL tags and
elements.

Criteria 5 4
Contents of page Information is correct; three
pages; hyperlinks to a menu and
additional pages; text is precisely
organized on page; grade level
appropriate, google email
address provided on page
Layout and Design Layout is well-organized; font
size is in relation to the size of
the page; size and quality of
images is appropriate; great
contrast between background
and text; format of each page fits
frame of monitor
Work Ethic You worked very hard on your
project and were always on task.
Understanding of Factual information is accurate.
Topic Indicates a clear understanding
of topic
HTML RUBRIC
Information is mostly correct;
three pages; hyperlinks to a
menu and additional pages;
grade level appropriate;
email address is present
Layout is organized; more than
three fonts sizes; size and quality
of images is appropriate; great
contrast between background
color and text; format of each
page somewhat fits monitor
You worked hard on your project
but sometimes got off task
Factual information is mostly
accurate. Good understanding of
topic
3 2 Score
Information is Information is ambiguous; only
somewhat vague; one one page; No links; text is
or two pages; link s unorganized; inappropriate for
are missing; text grade level; email address missing
somewhat organized;
email address present
Layout is somewhat Layout and design is unorganized;
organized; too many background color is too dark/light;
different font sizes; fonts either too big/small;
images are too
big/small; background
color and text
somewhat contrast;
You worked on your You did not seriously work on your
project but were off project, you frequently were off
task and needed to be task, and did not refocus when
redirected by the redirected by the teacher.
teacher
Factual information is Information is inaccurate. Output
somewhat accurate. is off topic
Fair understanding of
topic

ITEC 50 WEB SYSTEMS TECHNOLOGIES K. GUILARAN SECOND SEMESTER AY 2021-2022