Web Page
Designing
Republic Act 8293, section 176
states that: No copyright shall subsist in
any work of the Government of the
Philippines. However, prior approval of the
government agency or office wherein the
work is created shall be necessary for
exploitation of such work for profit. Such
agency or office may, among other things,
impose as a condition the payment of
royalties.
Lesson 1:
Basic Web Page
Creation
What is HTML? Create a Basic Web Page Using Notepad
<!DOCTYPE html>
HTML (Hypertext Markup Language)
<html lang="en">
is the standard markup language
<head>
used for creating web pages. It
<meta charset="UTF-8">
provides the structure of a webpage
<meta name="viewport" content="width=device-width, initial-
by defining various elements such scale=1.0">
as headings, paragraphs, links, <title>My First Web Page</title>
images, and more. HTML is the </head>
foundation of most websites and <body>
works in conjunction with CSS (for <h1>Welcome to My Web Page</h1>
styling) and JavaScript (for <p>This is a basic HTML webpage created using Notepad.</p>
interactivity) to create complete web </body>
experiences. </html>
Identify the HTML Structure in Creating a
Website
A typical HTML document has a defined structure. Below is the key structure:
1. <!DOCTYPE html>: Defines the document type and version of HTML.
2. <html>: The root element that wraps the entire content of the web page.
3. <head>: Contains metadata about the webpage, such as its title, character set, and links to
stylesheets or scripts.
4. <title>: Defines the title of the webpage that appears on the browser tab.
5. <body>: Contains the actual content of the webpage, such as text, images, links, etc.
6. HTML elements:
o <h1> to <h6>: Headings, with <h1> being the largest and <h6> the smallest.
o <p>: Paragraph element for adding text.
o <a>: Hyperlink element for linking to other pages or websites.
o <img>: For adding images.
Lesson 2:
Basic Web
Page
Creation
A Web page is a document for the
World Wide Web that can be
accessed and displayed on a monitor
or smartphone using any web
What does browser. Web pages are made up of
Web Page Hypertext Markup Language (HTML)
and can be created and modified by
mean? using basic application like Notepad
and professional HTML editors.
WYSIWYG
WYSIWYG is the acronym for What You
See Is What You Get. This means that
whatever you will type, insert, draw,
place, rearrange, or whatever you do on
a web page is what the audience will
see. Just like using the Microsoft Word,
WYSIWYG shows and prints whatever
you will type on the screen.
HTML
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
• 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
Quiz Time
1. What does HTML stand for?
a. Hypertext Markup Language
b. Home Tool Markup Language
c. Hyperlinks and Text Markup Language
d. None of the above
2. What is the correct sequence of HTML tags for starting a webpage?
a. HTML, HEAD, BODY
b. HTML, HEAD, TITLE
c. HTML, TITLE, BODY
d. HTML, TITLE, HEAD
3. What does markup tags tell the web browser?
a. How to organize the page
b. How to display the page
c. How to display message box on page
d. None of these
4. Which of the following tags is the start of web pages?
a. <Body>
b. <Title>
c. <HTML>
d. <Form>
5. What section that holds the most of the page's information or
content?
a. HTML
b. BODY
c. TITLE
d. HEAD
6. What web page editors works on a ____ principle.
a. www
b. HTML
c. WYSIWYG
d. Browser
7. Which of the following statements is false?
a. You can make a website without using HTML
b. You can make a website without using PHP
c. You can make a website without using CSS
d. You can make a website without using Javascript
8. Which tag is used to display text in title bar of a web document?
a. Body tag
b. Title Tag
c. Meta Tag
d. Head Tag
9. What is the name of the address of the hypertext documents?
a. URL
b. Server
c. domain name
d. Web address
10. What are shared on the Internet and are called as Web pages?
a. Programs
b. Cables
c. Hypertext documents
d. Non
Thank you!
