TECHNOLOGICAL UNIVERSITY OF THE PHILIPPINES

TAGUIG CAMPUS

CHAPTER 1

Prepared by: Patrick Justin L. Ariado

 01
How the Web Works
 How the Web Works
Web

• (originally called the World Wide Web, thus the

“www”)
• One of the ways information can be shared over the
Internet.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 3

 How the Web Works
Internet

• A network of connected computers.

• No company owns the Internet; it is a cooperative
effort governed by a system of standards and rules.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 4

 How the Web Works
Web

• It is unique in that it allows documents to be linked

to one another using hypertext links—thus forming a
huge “web” of connected information.

• The Web uses a protocol called HTTP (HyperText

Transfer Protocol).

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 5

 Web Addresses
URL

• URL, which stands for Uniform Resource Locator.

• Special address of every page and resource on the

web.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 6

 Parts of URL

• A complete URL is generally made up of three

components:
1. Protocol
2. Site Name
3. Absolute path to the document or resource

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 7

 Parts of URL

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 8

 Parts of URL
Protocol

• The first thing the URL does is define the protocol that
will be used for that particular transaction.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 9

 Parts of URL
Site Name

• The next portion of the URL identifies the website by

its domain name.
• In this example, the domain name is example.com.
• The “www.” part at the beginning is the particular
host name at that domain.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 10

 Parts of URL
Absolute path to the document or resource

• This is the absolute path through directories on the

server to the requested HTML document, first.html.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 11

 How the Web Works

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 12

 Responsive Web Design

• A strategy for providing custom layouts to devices

based on the size of the viewport (browser window).
• The trick to responsive web design is serving a single
HTML document to all devices, but applying
different style sheets based on the screen size in
order to provide the most optimized layout for that
device.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 13

 Common Viewports

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 14

 Common Viewports

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 15

 Responsive Web Design

• A strategy for providing custom layouts to devices

based on the size of the viewport (browser window).
• The trick to responsive web design is serving a single
HTML document to all devices, but applying
different style sheets based on the screen size in
order to provide the most optimized layout for that
device.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 16

 Website
Website vs Web Application

• A website is a collection of web pages that are

interconnected and hosted on a web server.
• It is typically used to provide information or content
to visitors in a static or dynamic manner.
• Websites are designed to be viewed and accessed
by users through a web browser.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 17

 Website
Web Application

• A web application, on the other hand, is a software

program accessed through a web browser that
offers more advanced functionality and interactivity
beyond static content delivery.
• It involves dynamic processing and user interaction,
often requiring data input, processing, and output.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 18

 02
HTML/CSS/JAVASCRIPT
 HTML
Hypertext Markup Language

• HTML is the standard markup language for creating

the structure and content of web pages.
• It uses tags to define the elements within a web
page.
• Each tag provides instructions to the web browser
on how to display the content.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 20

 CSS
Cascading Style Sheets

• CSS is a style sheet language used to describe the

presentation and appearance of HTML documents.
• It allows you to control the layout, colors, fonts, and
other visual aspects of your web pages.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 21

 JavaScript

• JavaScript is a programming language that adds

interactivity and dynamic behavior to web pages. It
allows you to manipulate HTML elements, handle
events, and perform calculations.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 22

BASD | Bachelor of Technical-Vocational Teacher Education |
ITEL130-T | IT Elective 1 23
 03
Elements, Tags and Attributes
 Elements

• In HTML, an element represents a structure or a

piece of content within a web page. Elements can
be as simple as a line of text or as complex as a
multimedia component or a form.

• Each element is enclosed by an opening tag

(<tag>) and a closing tag (</tag>).

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 25

 Tags

• Tags are used to define HTML elements.

• They are written inside angle brackets (< and >).
• HTML tags are case-insensitive, meaning you can
write them in uppercase or lowercase.
• However, lowercase is the standard convention.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 26

 Attributes

• Attributes provide extra information about HTML

elements.
• They are placed within the opening tag of an
element and consist of a name and a value.

• The name and value are separated by an equals

sign (=), and the value is enclosed in quotation
marks.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 27

 04
HTML Structure
HTML
Structure
• SAMPLE HTML

BASD | Bachelor of Technical-Vocational Teacher Education |

ITEL130-T | IT Elective 1 29
 Document Type Declaration (DOCTYPE)
HTML Structure

• The first line of an HTML document is the Document

Type Declaration or DOCTYPE.
• It tells the web browser which version of HTML is
being used.
• The DOCTYPE declaration is not an HTML tag, but it
informs the browser about the HTML standard to
interpret the document correctly.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 30

 HTML Tag
HTML Structure

• The HTML tag (<html>) is the root element of an

HTML document.
• It encapsulates all the other elements within the
document.
• It is placed after the DOCTYPE declaration and
serves as the container for the entire HTML content.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 31

 Head Section
HTML Structure

• The head section (<head>) follows the opening

<html> tag.
• It contains metadata and other information about
the document, such as the document title,
character encoding, linked stylesheets, JavaScript
files, and more.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 32

 Body Section
HTML Structure

• The body section (<body>) comes after the head

section.
• It contains the visible content of the web page,
including text, images, links, headings, paragraphs,
and other HTML elements.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 33

 Closing Tags
HTML Structure

• It's important to note that each opening tag in HTML

must have a corresponding closing tag.
• The closing tags are denoted by a forward slash (/)
before the tag name.
• Closing tags indicate where the section or element
ends.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 34

 Closing Tags
HTML Structure

• For example, <head> is opened with <head> and

closed with </head>.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 35

 05
Web Coding Standards
 1. Indentation and Formatting
Web Coding Standards

• Use consistent indentation (usually with 2 or 4

spaces) to enhance code readability.
• Properly format your code with line breaks and
spacing to improve clarity.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 37

 2. HTML Standards
Web Coding Standards

• Use lowercase for HTML tags and attributes to

maintain consistency.
• Close all HTML tags and avoid using self-closing tags
for non-void elements.
• Include relevant attributes, such as alt attributes for
images and labels for form inputs.
• Use semantic HTML tags (e.g., <header>, <nav>,
<main>, <footer>) to convey the meaning and
structure of the content.
BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 38
 3. File Folder Structures
Web Coding Standards

• Organize your files and folders in a logical manner.

• Use meaningful names for files and folders to quickly
identify their purpose.
• Keep related files together and separate different
concerns (e.g., CSS, JavaScript, images).

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 39

 06
Marking Up Documents
 Marking Up Document
Paragraphs

• Paragraphs are the most rudimentary elements of a

text document.
• You indicate a paragraph with the p element by
inserting an opening <p> tag at the beginning of the
paragraph and a closing </p> tag after it

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 41

 Marking Up Documents
Headings

• There are actually six levels of headings, from h1 to

h6.
• When you add headings to content, the browser
uses them to create a document outline for the
page.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 42

 Marking Up Document
Lists

Humans are natural list makers, and HTML provides

elements for marking up three types of lists:
• Unordered Lists
• Ordered List
• Description List

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 43

 Unordered List
Lists

• Collections of items that appear in no particular

order.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 44

 Unordered List
Lists

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 45

 Ordered List
Lists

• Lists in which the sequence of the items is important.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 46

 Ordered List
Lists

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 47

 Description List
Lists

• Lists that consist of name and value pairs, including

but not limited to terms and definitions.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 48

 Description List
Lists

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 49

 Description List
Lists

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 50

 TASK SHEET 1

Create an Unordered List using the data set below.

• Dogs
• Chocolate
• Sports
• Movies
• Beaches

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 51

 TASK SHEET 1

Create an Ordered List using the data set below.

1. Music
2. Books
3. Travel
4. Photography
5. Nature

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 52

 TASK SHEET 1

Create an Description List using the data set below.

• Coffee
• Description: A caffeinated beverage loved by many for its rich flavor and energizing effects.
• Mountains
• Description: Majestic landforms that offer breathtaking views and opportunities for outdoor
activities.
• Coding
• Description: The process of writing instructions for computers to perform specific tasks, a skill
that powers modern technology.
• Yoga
• Description: A practice that combines physical postures, breathing exercises, and meditation to
promote physical and mental well-being.
• Pizza
• Description: A beloved dish that consists of a savory crust topped with cheese, sauce, and
various toppings.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 53

 Long Quotation

• Used to indicate a block of quoted text.

• It is commonly used to present quotations, excerpts,
or citations.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 54

 Long Quotation

• It is recommended that content within blockquote

elements be contained in other elements, such as
paragraphs, headings, or list.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 55

 Long Quotation

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 56

 Long Quotation

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 57

 Preformatted Text

• Used to define preformatted text.

• It preserves spaces, line breaks, and indentation
within its content.
• It is often used for displaying code snippets or text
that requires precise formatting.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 58

 Figures

• used to encapsulate media content, such as

images or videos, along with their captions.
• It allows for a semantic grouping of media and
associated descriptive content.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 59

 Organizing Page Content
Prior to HTML5, there was no way to group larger parts other than
wrapping them in a generic division(div) element .

HTML5 introduced new elements that give semantic meaning to

sections
 Section

• Defines a standalone section of content within an

HTML document.
• It is used to group related content together, often
with its own heading.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 61

 Article

• Represents a self-contained composition in an HTML

document.
• It encapsulates independent content that can be
distributed or syndicated on its own.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 62

 Aside

• Used to mark content that is tangentially related to

the main content.
• It often represents sidebars, pull quotes, or additional
information.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 63

 Navigation

• Used to define a section of navigation links within a

document.
• It typically contains links to different parts of the
website or other related pages.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 64

 Header

• Used to define different levels of headings in HTML.

• They represent the hierarchical structure and
importance of the content.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 65

 Footer

• Defines the footer section of an HTML document or

a specific section.
• It often contains information such as copyright,
contact details, or links to related resources.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 66

 Address

• Used to mark contact information of the author or

owner of an HTML document.
• It can include the name, email, phone number, and
physical address.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 67

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 68
 Inline Elements
Provide semantic meaning to phrases within the chunks to display in
the flow of text by default and do not cause any line breaks.
 Emphasized Text

• Indicate which part of a sentence should be

stressed or emphasized.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 70

 Important Text

• Indicates that a word or phrase as important.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 71

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 72
 Program Code Elements

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 73

 Subscript, Superscript and Highlighted Text

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 74

 Line Breaks

• The br element could be used to break up lines of

addresses or poetry. It is an empty element, which
means it does not have content.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 75

 07
Generic Elements
 Generic Elements

• HTML provides two generic elements that can be

customized to describe your content perfectly.
• The div element indicates a division of content, and
span indicates a word or phrase for which no text-
level element currently exists.
• The generic elements are given meaning and
context with the id and class attributes.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 77

 div Element

• The div element is used to create a logical grouping

of content or elements on the page.
• It indicates that they belong together in some sort of
conceptual unit or should be treated as a unit by
CSS or JavaScript.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 78

 span Element

• A span offers the same benefits as the div element,

except it is used for phrase elements and does not
introduce line breaks.
• Because spans are inline elements, they can only
contain text and other inline elements (in other
words, you cannot put headings, lists, content-
grouping elements, and so on, in a span).

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 79

 id Attribute

• The id attribute is used to assign a unique identifier to

an element in the document.
• In other words, the value of id must be used only
once in the document.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 80

 class Attribute

• The class attribute classifies elements into

conceptual groups; therefore, unlike the id attribute,
multiple elements may share a class name.
• By making elements part of the same class, you can
apply styles to all of the labeled elements at once
with a single style rule or manipulate them all with a
script.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 81

 08
Links
 Anchor Element

• To make a selection of text a link, simply wrap it in

opening and closing <a>...</a> tags and use the
href attribute to provide the URL of the target page.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 83

 href Attribute

• The href (hypertext reference) attribute provides the

address of the page or resource (its URL) to the
browser. The URL must always appear in quotation
marks.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 84

Types of href Attributes
The Anchor Tag has two main types of href attributes
 Absolute URL

• Absolute URLs specify the complete web address of

the target resource, including the protocol (e.g.,
http:// or https://), domain name, and path.

Example:
<a href="https://www.example.com">Visit Example</a>
• When a user clicks on the link, it will take them
directly to the specified URL.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 86

 Relative URL

• Relative URLs specify the path to the target resource

relative to the current web page's location. They are
typically used when linking to resources within the
same website or web application.
Example:
<a href="/about.html">About</a>

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 87

 Relative URL

• The relative URL "/about.html" refers to a file named

"about.html" in the same directory as the current
web page.
• Relative URLs can also include directory paths to
navigate to different folders within the website
structure.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 88

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 89
 09
Images
 img Tag

• Images appear on web pages in two ways:

embedded in the inline content or as background
images.
• In order to be displayed inline, images must be in the
GIF, JPEG, or PNG file format.
• If you have a source image that is in another
popular format, such as TIFF, BMP, or EPS, you’ll need
to convert it to a web format before you can add it
to the page.
BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 91
 img Element

• The img element tells the browser, “Place an image

here.”
• Used to place an image element right in the flow of
the text at the point where you want the image to
appear.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 92

 src and alt Attributes

• The src attribute tells the browser the location of the

image file.
• The alt attribute provides alternative text that
displays if the image is not available.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 93

 width and height Attributes

• The width and height attributes indicate the

dimensions of the image in number of pixels.

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 94

 width and height Attributes

• Be sure that the pixel dimensions

you specify are the actual
dimensions of the image.
• If the pixel values differ from the
actual dimensions of your
image, the browser resizes the
image to match the specified
values

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 95

 10
Tables
 Tables

• HTML tables were created for instances when you

need to add tabular material (data arranged into
rows and columns) to a web page.
• Tables may be used to organize calendars,
schedules, statistics, or other types of information

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 97

 Tables

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 98

 Tables

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 99

 Tables

BASD | Bachelor of Technical-Vocational Teacher Education | ITEL130-T | IT Elective 1 100