Scribd
Upload
9 views39 pages

Unit 1 - Getting Started With HTML

This document serves as an introductory guide to HTML and web development, detailing the structure and purpose of the Internet and World Wide Web. It covers essential concepts such as web browsers, web servers, HTML, CSS, and JavaScript, as well as the web development life cycle and various website design methods. The document aims to equip readers with foundational knowledge for building simple webpages and understanding the web's functionality.

Uploaded by

Mark Anthony Arenas Gioketo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views39 pages

Unit 1 - Getting Started With HTML

This document serves as an introductory guide to HTML and web development, detailing the structure and purpose of the Internet and World Wide Web. It covers essential concepts such as web browsers, web servers, HTML, CSS, and JavaScript, as well as the web development life cycle and various website design methods. The document aims to equip readers with foundational knowledge for building simple webpages and understanding the web's functionality.

Uploaded by

Mark Anthony Arenas Gioketo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 39

Unit 1

GETTING STARTED
WITH HTML
Prepared by: Mark Anthony A. Gioketo
MARK ANTHONY A. GIOKETO
REGISTRAR
Olarte’s School of Science and Technology
2011 - Present

FORMER FACULTY MEMBER


Manuel V. Gallego Foundation Colleges
2nd Sem, AY 2023 - 2024

FORMER FACULTY MEMBER


AMA University
1st Sem, AY 2023 - 2024
MARK ANTHONY A. GIOKETO
MASTER OF SCIENCE IN INFORMATION TECHNOLOGY
Units Earned: 36

BACHELOR OF SCIENCE IN INFORMATION


TECHNOLOGY
Awards:
• Academic Distinction Award (GWA: 1.52)
• University Wide Leadership Award (Gold)
• Campus Wide Leadership Award (Gold)
• Best Capstone Project
• Researcher of the Year

CIVIL SERVICE PROFESSIONAL PASSER

INFORMATION TECHNOLOGY SPECIALIST


LEARNING OBJECTIVES
This chapter examines how to build several simple
webpages. By the time you finish this unit; you will
be able to:

•describe the internet and the World Wide Web;


•know the difference between a web page and a
website;
•identify different categories and purposes of
website;
•demonstrate understanding of the need for a web
server;
•discuss web browsers and identify their purpose;
and
OVERVIEW
EXAMPLE Every day, users around the world browse the
<!DOCTYPE html> internet and visit websites that present a wide
<html>
variety of content using text, images, videos and
<head>
<title>My First Web other types of multimedia. To access Web-based
Page</title> content, users are running a Web browser that is
</head>
used by program users to view World Wide Web
<body>
<h1>Hello, World!</h1> content.
<p>This is a simple HTML
document.</p> Developers use a programming language called
</body>
</html>
the Hypertext Markup Language (HTML) to build
webpages. You can discover that HTML uses
special markup tags to describe content
formatting. This unit focuses on how to use
different HTML tags to execute various activities.
This unit will start with a number of basic HTML
WHAT IS INTERNET?
Many people nowadays have been introduced to
the Internet at school, at home, at work, or in a
local library. The Internet is a vast array of
machines and data networks connecting billions of
computers used by enterprises, states,
educational institutions, organizations and
individuals using modems, telephone lines,
network cables, satellite links, fibre optic
connectivity, and other communications devices
and media.
WHAT IS INTERNET?
The Department of Defense Advanced Research
Projects Agency (ARPA) developed a brief history
of the Internet in the 1960s. ARPANET was the
first name of the Internet, which began with four
nodes on it, and sent its first message in 1969.

The Internet today has millions of nodes on


thousands of networks that connect people
worldwide to share resources and information.
WHAT IS INTERNET?
The Internet Service Provider (ISP) is a company
with a permanent connection to the Internet
backbone. ISPs use high-or medium-speed data
lines to allow individuals and businesses to link to
the backbone for connectivity to the Internet.
There are a number of providers in the country
that you can choose from, but we will focus on the
major players aimed at providing home
broadband Internet services to consumers. These
are the leading providers in the Philippines:
WHAT IS INTERNET?
PLDT. As the biggest telecom company in the
country, PLDT provides both service reliability and
the largest area coverage for their fiber, DSL, or
LTE broadband home or business packages.

Globe. As one of the largest mobile telecom


providers in the country, Globe offers home or
business internet solutions in a variety of plans
suitable for work or leisure.
WHAT IS INTERNET?
Sky Broadband. It is the leading cable TV
provider that also offers broadband cable internet
connection, conveniently bundled with their HD
cable TV subscription.

Eastern Telecom. It offers dedicated Internet


direct service running on leased line technology
and also offers DSL Internet suitable for smaller
offices or for work from home employees.
WHAT IS INTERNET?
Converge ICT. It provides home, SME, or
enterprise broadband Internet based purely on
fiber optic connectivity.
WHAT IS THE WWW?
Most people use the terms Internet and World Wide Web
interchangeably, but the two terms are not synonymous. The Internet
and the Web are two different but related things. The Internet is a
physical infrastructure, whereas the World Wide Web (WWW) is
sometimes called the Web, is a component of the Internet that supports
multimedia and consisting of a series of connected documents. To
support multimedia, the web relies on the Hypertext Transfer Protocol
(HTTP), which is a set of rules for exchanging text, images, sounds,
video, and other multimedia files. The link documents or pages of
information, on the web are known as web pages. A Web Page is a
WHAT IS THE WWW?
A website is a series of linked web pages, including multimedia content,
normally labelled with a common domain name and hosted on at least
one web server. Each website includes a home page, which is the first
document people can see when they can visit the website. The home
page is also used as an index or table of contents for other documents
and files viewed on the web.
WHAT IS THE WWW?
Key Terms:

• URL: Uniform Resource Locator, e.g.,


https://www.google.com.

• HTTP/HTTPS: Protocols for transferring web pages.


HTTPS includes encryption for secure communication.

• ISP: Internet Service Provider, e.g., AT&T, Comcast, or


Vodafone.

• IP Address: Unique identifier for devices on the


Internet, e.g., 192.168.1.1.
TYPES AND PURPOSES OF
WEBSITES
Informational Websites:
Purpose: Provide information on specific topics.
Examples: Wikipedia, government websites, online
dictionaries.

E-commerce Websites:
Purpose: Facilitate online buying and selling.
Examples: Amazon, eBay, Etsy.

Social Networking Websites:


Purpose: Enable communication and interaction among
users.
Examples: Facebook, LinkedIn, Instagram.
TYPES AND PURPOSES OF
WEBSITES
Portfolio Websites:
Purpose: Showcase personal or professional work.
Examples: Personal blogs, freelance portfolios,
photography websites.

Entertainment Websites:
Purpose: Provide content for leisure and recreation.
Examples: YouTube, Netflix, Spotify.

Educational Websites:
Purpose: Offer resources for learning.
Examples: Khan Academy, Coursera, edX.
WEB SITE TYPES
AND PURPOSES

Three general categories of websites and its


characteristics.
TYPE USERS ACCESS APPLICATIONS
Internet Anyone Public Used to share information such as personal
information, product catalogs, course information
with the public
Intranet Employees or Private Used to share information such as forms, manuals,
Members organization schedules with employees or members
Extranet Selected Private Used to share information such as inventory updates,
business product specifications, financial information with
partners business partners and customers
UNDERSTANDING THE NEED FOR A
WEB BROWSER
To build a webpage, you create an HTML file that
specifies the text, images, and formatting of the
page. You create an HTML file on your own system.
You must place HTML files and related files on a web
server before other users can view your web pages.
In other words, you can create HTML files using your
own computer. You can view the contents of the files
in a browser. A Web Browser or simply Browser is a
software application used to locate, retrieve and
display content on the World Wide Web, including
web pages, images, videos and other files.
UNDERSTANDING THE NEED FOR A
WEB BROWSER
Examples of Browsers:

• Google Chrome: Known for speed and extensive


plugin support.
• Mozilla Firefox: Offers robust privacy features.
• Microsoft Edge: Integrated with Windows and
supports modern web standards.
• Safari: Default browser on Apple devices, optimized
for macOS and iOS.
UNDERSTANDING THE NEED FOR A
WEB BROWSER
As a client/server model, the browser is the client that
runs on a computer and contacts the web server to
request for information. The web server sends the
information back to the browser which displays the
results on the computer or other internet enabled
device that supports a browser as shown in the figure
next slide.
UNDERSTANDING THE NEED FOR A
WEB BROWSER
UNDERSTANDING THE NEED FOR A
WEB BROWSER
If you are building a website that you want others to view,
you need a Web server. Web Servers are computers that
deliver (serves up) web pages. Every web server has an IP
address and possibly a domain name. Each site on the web
has a unique name, called a domain name, such as
Google.com, Yahoo.com, and Microsoft.com. If you plan to get
your own web server space, you can purchase you own
domain name specific to your site. Any computer can be
turned into a web server by installing server software and
connecting the machine to the internet. Across the web,
many sites offer web server space free of charge. You can use
such sites to host your webpages, which other users can
view. Unfortunately, the free sites will integrate
WEB-DEVELOPMENT LANGUAGES
YOU CAN USE TO BUILD A WEB
PAGE
Developers use a computer language called the
Hypertext Markup Language to build webpages.
HTML is the basic markup language used to build
web sites and web application that uses special
markup tags to describe the formatting of text. One
HTML tag may define the text for a paragraph;
another may specify the particulars of an image to
appear on the website, and other tags may
regulate the formatting, such as the use of bold or
italic fonts.
WEB-DEVELOPMENT LANGUAGES
YOU CAN USE TO BUILD A WEB
PAGE
Hypertext Markup Language (HTML)

1. Definition: A standard language used to create web


pages.

2. HTML5 Standards:
• Enhanced multimedia support (audio and video tags).
• Semantic elements:
• <header>, <footer>, <section>, <article> for better
document structure.
• Input types:
• email, date, range for better form handling.
WEB-DEVELOPMENT LANGUAGES
YOU CAN USE TO BUILD A WEB
PAGE
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<section>
<p>This is a simple example of an HTML
document.</p>
</section>
</body>
</html>
WEB-DEVELOPMENT LANGUAGES
YOU CAN USE TO BUILD A WEB
PAGE
This unit followed a different turn by eliminating
deprecated tags and attributes. Deprecated tags and
attributes are tags and attributes that are being phased
out and are thus no longer recommended in the current
W3C standard. However, deprecated tags are still found
on many web sites, so it is useful to know their meaning
from a maintenance point of view. In an attempt to
remove deprecated tags, projects use the Cascading Style
Sheet (CSS) to change the style of the web page. CSS
helps you to define styles for different web page
elements. A style is a rule that determines an element’s
aesthetics. You will define CSS in 3 different ways: inline
style, embedded style and external style.
WEB-DEVELOPMENT LANGUAGES
YOU CAN USE TO BUILD A WEB
PAGE
Cascading Style Sheets (CSS)

1. Definition: A stylesheet language used to control the


presentation of web pages.
2. Use in Web Development:
• Defines styles (e.g., colors, fonts, layouts).
• Enables responsive design (adapts to different screen
sizes).
• Separates content (HTML) from presentation (CSS).
WEB-DEVELOPMENT LANGUAGES
YOU CAN USE TO BUILD A WEB
PAGE
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}

h1 {
color: darkblue;
text-align: center;
}

p{
padding: 10px;
}
WEB-DEVELOPMENT LANGUAGES
YOU CAN USE TO BUILD A WEB
PAGE
Using JavaScript, developers can change the
content of the HTML element, modify CSS styles,
change attributes, and more. JavaScript is a
programming language in which developers specify
the instructions that the browser must perform in
order to perform specific tasks.
TOOLS NEEDED FOR CREATING
WEB PAGES
You can create web pages using HTML with a simple text
editor, such as Microsoft Notepad which is readily available in
all devices running Windows Operating Systems. A Text Editor
is a type of computer program that edits plain text.

You can also create a web page using a Source Code Editor,
which is a program designed specifically for editing source
code of computer programs by programmers. Sublime Text
and Notepad++ are some of the top source code editors
available for web development.
TOOLS NEEDED FOR CREATING
WEB PAGES
You can create web pages using WYSIWYG editor such as
Adobe Dreamweaver, Amaya, or CoffeeCup HTML Editor. A
WYSIWYG editor is a program that provides a graphical user
interface that allows a developer to preview the web page
during its development.
OTHER TOOLS NEEDED FOR
CREATING WEB PAGES
1. Text Editors:
• Notepad++: Lightweight and beginner-friendly.
• Sublime Text: Offers advanced editing features like
multiple cursors.
• Visual Studio Code: Free, extensible, and widely used by
developers.

2. Integrated Development Environments (IDEs):


• Adobe Dreamweaver: Drag-and-drop interface for
design and coding.
• WebStorm: Comprehensive support for JavaScript and
front-end frameworks.
OTHER TOOLS NEEDED FOR
CREATING WEB PAGES
3. Online Tools:
• CodePen: Allows live HTML/CSS/JavaScript editing and
sharing.
• JSFiddle: Collaborative code-sharing platform.
WEB DEVELOPMENT
LIFE CYCLE
The Web development life cycle is a process that
can be used for developing web pages at any level
of complexity. The web development life cycle
includes the following phases: planning, analysis,
design and development, testing, and
implementation and maintenance.

Phase 1: Website planning, which is the first phase


of the web development life cycle , involves
identifying the goals or purpose of the web site.
The first step in the website planning phase is to
answer the question “What is the purpose of this
WEB DEVELOPMENT
LIFE CYCLE
Phase 2: During the analysis phase, you make decisions
about the website content and functionality. To help
define the appropriate website content and functionality,
you should first identify the tasks that users need to
perform.

Phase 3: After determining the purpose of the website


and defining the content and functionality, you need to
consider the website’s design. Some key considerations
in designing a website are defining how to organize web
page content, selecting appropriate web structure,
determining how to use multimedia, addressing
WEB DEVELOPMENT
LIFE CYCLE
Phase 4: Web site should be tested at a various
stage of the wed design and development process.
Testing should be comprehensive and include a
review of web page content, functionality, and
usability.

Phase 5: Once website testing is complete and any


required changes have been made, the website can
be implemented. Implementation of a website
involves the actual publishing of the web pages to a
web server.
WEBSITE DESIGN METHODS AND
STRUCTURES
1. Methods:

• Static Design:
Example: A personal blog with fixed content.

• Dynamic Design:
Example: An online store with real-time product
updates.

• Responsive Design:
Example: A portfolio site that adjusts layout for mobile
devices.
WEBSITE DESIGN METHODS AND
STRUCTURES
2. Website Structures:

• Hierarchical Structure:
Example: Corporate websites with categories and
subcategories.

• Linear Structure:
Example: Online training courses with sequential
lessons.

• Webbed Structure:
Example: News websites with interconnected articles.
THANK
YOU

You might also like