MODULE 1: INTRODUCTION TO for secure collaboration, information

sharing, or transactions.
WEB DEVELOPMENT
Types of Websites

PERSONAL WEBSITES
WEB PAGE
- An online platform created by individuals
- A Web Page is a document commonly
to showcase their skills, portfolio, interests,
written in HTML (hypertext markup
or personal brand.
language) that is accessible through the
internet or other network using a web - Built using website builders like
browser. WordPress, Wix, or through custom coding.

Examples: login page, sign up page, about PHOTO SHARING WEBSITES

page, contact page, privacy policy, etc. - These are online platforms that allow users
WEBSITE to upload, organize, and share their photos
with others.
- A Website is a collection of related web
pages, including multimedia content, typically - It enable users to showcase their
identified with a common domain name, and photography skills, memories, or artistic
published on at least one web server. creations with a wider audience.

Examples: Amazon.com, Facebook.com, WRITERS OR AUTHORS WEBSITES

Youtube.com. - An online platform created by writers to
showcase their work, connect with their
audience, and promote their books, articles,
Category and Purpose
or written content.
INTERNET WEBSITE
- Examples of elements commonly found on
- These websites are publicly available, writers' websites: Author Biography, Book
accessible or anyone can visit on the Pages, Mailing Lists or Newsletters.
internet.
COMMUNITY BUILDING WEBSITES
- Its purpose is to provide information,
- These are online platforms designed to
services, or resources to the general public
facilitate connections, interactions, and
or a specific target audience.
engagements among a group of individuals
INTRANET WEBSITE sharing common interests, goals, or
activities.
- It is a private network accessible only to
authorized users within an organization, - They offer a lot of features such as
facilitating internal communication, profile, forums/groups, events and content
collaboration, and resource sharing. sharing, messaging and moderation.

- They are not accessible to the public and BLOGGING WEBSITES

often require login credentials for access.
- An online platform where individuals or
EXTRANET WEBSITE groups create and publish content in the
form of articles, stories, opinions, or
- Controlled extensions of intranets allowing
informational posts.
limited access to specific external users
(such as partners, clients, or stakeholders) - It enable users, known as bloggers, to
share their thoughts, expertise,
experiences, or creative works with a wide these computers to communicate with other
audience. computers as long as they are both
connected to the Internet. Information can
travel via the internet via a variety of
languages called Protocols.

DIRECTORY WEBSITES

- These sites serve as comprehensive WHAT IS THE WORLD WIDE WEB?

databases or indexes, allowing users to
- The World Wide Web or simply Web is a
search, browse, and find relevant
way of accessing information over the
information about specific topics.
internet. It is an information-sharing a
GOVERNMENT WEBSITES model built on top of the internet and uses

- Official online platforms for agencies to the HTTP language to transmit data.

provide information, services, and resources - Web services, which use HTTP allow
to the public. They offer access to forms, applications to communicate in order to
regulations, statistics, and updates on exchange business logic and use the web to
various government departments. share information.

Example: WEB BROWSERS

Official Gazette, Bureau of Internal - A Web Browser or simply Browser is a

Revenue (BIR), Commission on Elections software application used to locate, retrieve
(COMELEC) and display content on the World Wide Web,

SCHOOL OR UNIVERSITY WEBSITES including web pages, images, videos and

other files.
- An online platform designed primarily to
provide information to visitors about a - As a client/server model, the browser is
specific topic, industry, product, service, or the client that runs on a computer and

area of interest. These websites aim to contacts the web server to request for

educate, inform, and guide users by offering information.

valuable content, resources, or details Popular Web Browsers: Google Chrome,

related to the website's subject matter. Mozilla Firefox, Safari Browser, Opera
Browse, Microsoft Edge, Maxthon Browser

INTERNET AND WORLD WIDE WEB

(WWW) UNIFORM RESOURCE LOCATOR

INTERNET AND WORLD WIDE WEB - A Uniform Resource Locator (URL) or

Many people use the terms Internet and sometimes termed as Web Address, is

World Wide Web interchangeably, but in reference to a web resource that specifies

fact, the two terms are not synonymous. The its location on a computer network or the

Internet and the Web are two separate but internet.

related things. EX Url: https://www.facebook.com/friends

WHAT IS THE INTERNET? DOMAIN EXTENSIONS

- The Internet is a vast global network .com – Commercial Site

connecting millions of computers. It allows
.gov – Government Site presentation of a document written in a
markup language like HTML.
.edu – Educational Institution Site
- It is like a design tool for web pages. It's
.net – Network Site
used to describe how HTML elements should
.org – Organizational Site look on a webpage, such as colors, fonts,

.biz – Business Site layout, and more.

.mil – Military Site

WEB SERVERS

- Web Servers are computers that delivers HOW CAN WE APPLY CSS TO A WEB

(serves up) web pages. Each server has a PAGE?

unique address (IP address) and sometimes a + Inline CSS

name (domain). Any computer can be turned
+ Internal CSS
into a web server by installing special
software (like Apache or Nginx) and + External CSS
connecting it to the internet.
+ CSS Frameworks

INTERNET SERVICE PROVIDERS

INLINE CSS
- An Internet Service Provider (ISP) is a
- Inline CSS is used for applying style to a
company that provides customers with
particular HTML Tag.
internet access. Data may be transmitted
using several technologies like DSL, cable - The style attribute is used to style a
modem, wireless, fiber optics or other particular HTML Tag.
dedicated high speed interconnects. - Least recommended styling method
EXAMPLE: PLDT Inc. (Philippine Long because of the difficulty it brings in
Distance Telephone Company), Converge ICT managing larger websites.
Solutions and Globe Telecom - It's more suitable for quick testing or
making temporary style changes.

WEB DEVELOPMENT LANGUAGES

Hypertext Markup Language INTERNAL CSS

- Hypertext Markup Language (HTML) is - Internal CSS code is put in the <head>
the standard markup language for creating section of a particular web page.
web pages and web applications. - Classes and IDs can be used to refer to
- It is like the blueprint of a web page. It the CSS code.
uses special codes called tags to define - Style will be effective for the whole web
different parts, like headings, paragraphs, page.
links, and images.
- Internal CSS is put in between <style>
Cascading Style Sheets </style> tags.
- Cascading Style Sheets (CSS) is a style
sheet language used for describing the
EXTERNAL CSS
- External CSS is the most convenient way are some of the top source code editors
to add CSS to a website. available for web development.

- Only a single CSS file will be edited and

all web pages will be updated.

- Provides smaller web page sizes and

cleaner structure.

CSS FRAMEWORK

- A CSS Framework is a pre-prepared

software framework that is meant to allow
for easier, more standards-compliant web
design using the Cascading Style Sheets
Language.

W3.CSS

- W3.CSS is a free modern CSS framework

with built-in responsiveness.

- Smaller and faster than any other CSS

Frameworks.

- Speeds up and simplifies web development

by providing ready-to-use styles and
components.

TOOLS NEEDED FOR CREATING WEB

PAGES

TEXT / SOURCE CODE EDITOR

- A Text Editor is a type of computer

program that edits plain text. Microsoft
Notepad is readily available in all devices
running Windows Operating Systems.

- A Source Code Editor is a text editor

program designed specifically for editing
source code of computer programs by
programmers. Sublime Text and Notepad++
 - Start and end tags are also called opening
and closing tags.

- The element content is everything

inserted between the start and end tags.

- Some HTML tags have empty content (ex.

<br /> or <hr />.

- Empty tags are closed in the start tag

(ex. <br />).

MODULE 2: CREATING YOUR FIRST BASIC HTML TAGS

WEB PAGE

Web Page Structure

HTML Tags

- <!DOCTYPE html> declaration specifies

the version of HTML used (HTML5 in our
case).
HTML Tags - <html> and </html> elements are the root
- HTML tags are keywords (tag names) elements of an HTML page. They indicate
surrounded by angle brackets like <html>. the start and the end of the HTML
document. These tags are written after the
- Normally come in pairs like <body> and
<!DOCTYPE html> declaration.
</body>.

- 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, - <head> and </head> elements contain all
with a forward slash (/) before the tag information about the html document. They
name. are written inside the <html> and </html>
tags.
- <title> and </title> elements specify the
title of the document. They are written
inside the <head> and the </head> tags.

- <body> and </body> elements contain all

the visible content within the web page.
They are written after the <head> and
</head> tags inside the <html> and </html>
tags.

COMMON DECLARATIONS ADDITIONAL HTML TAGS

+ HTML 5 <br /> TAG

<!DOCTYPE html> - To direct the browser to move the content

to the start of a new line, we must use the
<br/> or the line-break tag.
+ HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD <p> and </p> TAGS

HTML 4.01 Transitional//EN“
"http://www.w3.org/TR/html4/loose.dtd"> - The <p> and </p> or paragraph tags define a
paragraph in HTML.

- By using the paragraph tag pair, the

+ XHTML 1.0 browser places the start of each paragraph
<!DOCTYPE html PUBLIC "-//W3C//DTD on a new line and separates each paragraph
XHTML 1.0 Transitional//EN“ with a space.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-transitional.dtd">
heading TAG

- The heading tag defines a heading for a

specific section in a web page.
WRITING AND SAVING AN HTML FILE - The size of the heading can be adjusted by
- Open a Text Editor (Notepad) or Source using the different heading tags, <h1> to
Code Editor (Sublime Text) program. <h6>. <h1> will provide the largest heading
size and <h6> will provide the smallest
- Save the file as .html. (File – save as –
heading size.
select HTML).

- Write your HTML codes.

<b> and </b> TAGS
- Double click on the saved file, and it will be
opened in your default browser. - The <b> and </b> or bold tags are used to
display specific text using a bold font.
- When the browser encounters a <b> tag,
the browser will start its use of a bold font
to display the page text. When the browser
later encounters the </b> tag, it will turn off
bolding.

<i> and </i> TAGS

- <i> and </i> or italic tags are used to display

specific text using an italic font.

<hr /> TAG

- <hr/> or the horizontal rule tag is used to

insert a horizontal line in the web page.