SlideShare a Scribd company logo
1 of 15
Lesson 8:
Basic Web Page
Creation
What does Web Page
mean?
Web Page
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 browser.
Web Page
Web pages are made up of Hypertext
Markup Language (HTML) and can be
created and modified by using basic
application like Notepad and
professional HTML editors.
 HTML is Easy to Learn and Use
 HTML is Free
 Online Website Builder - Easy Use of
Drag-And-Drop Interface
WYSIWYG
 What You See Is What You Get
 Whatever you will type, insert, draw,
place, rearrange, or whatever you do on
a web page is what the audience will
see
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
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
Requirements in creating a web
page using the html
1. Editor – using the Notepad (source code)
in text and extension name - .html or .htm.
2. Browser – responsible for reading HTML
instructions and displaying the web page
output. (ex. Internet Explorer, Mozilla
Firefox, Google Chrome)
Creating a Website Using
Notepad
Web pages can be created and modified using
professional HTML editors. However, in learning
HTML, it is better to use a simple text editor like
Notepad.
Follow the steps to create your first web page
with Notepad.
HTML document is divided into two main sections
the head and the body. Each section contains
specific information. The head section contains
information about the documents like title, search
engine or keywords but is not visible to the
reader. The body section contains the information
or content that you want to appear on the web
page.
EmpTech Lesson 8-Basic Web Page Creation.pptx
EmpTech Lesson 8-Basic Web Page Creation.pptx

More Related Content

What's hot

Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersLemi Orhan Ergin
 
Emptech Lesson 14-Research for Content in Social Advocay.pdf
Emptech Lesson 14-Research for Content in Social Advocay.pdfEmptech Lesson 14-Research for Content in Social Advocay.pdf
Emptech Lesson 14-Research for Content in Social Advocay.pdfliera silvan
 
presentation on static website design
presentation on static website designpresentation on static website design
presentation on static website designjyotiyadav1926
 
Empowerment Technologies Lecture 8 (Philippines SHS)
Empowerment Technologies Lecture 8 (Philippines SHS)Empowerment Technologies Lecture 8 (Philippines SHS)
Empowerment Technologies Lecture 8 (Philippines SHS)John Bosco Javellana, MAEd.
 
Web Page Creation
Web Page CreationWeb Page Creation
Web Page CreationRastaman05
 
How to create a Google Site
How to create a Google SiteHow to create a Google Site
How to create a Google SiteFiona Beal
 
Empowerment Technology
Empowerment TechnologyEmpowerment Technology
Empowerment Technologymichaeljericho
 
ONLINE TOOLS FOR CONTENT DEVELOPMENT
ONLINE TOOLS FOR CONTENT DEVELOPMENTONLINE TOOLS FOR CONTENT DEVELOPMENT
ONLINE TOOLS FOR CONTENT DEVELOPMENTpascuabby
 
WEB DESIGNING MODULE
WEB DESIGNING MODULEWEB DESIGNING MODULE
WEB DESIGNING MODULEmar jun
 
Content Management System
Content Management SystemContent Management System
Content Management SystemOmnePresent
 
Online platforms for ict content development
Online platforms for ict content developmentOnline platforms for ict content development
Online platforms for ict content developmentLouie Aquias II
 
Detail History of web 1.0 to 3.0
Detail History of web 1.0 to 3.0Detail History of web 1.0 to 3.0
Detail History of web 1.0 to 3.0Ghazal Hina
 
ONLINE PLATFORMS FOR ICT CONTENT DEVELOPMENT
ONLINE PLATFORMS FOR ICT CONTENT DEVELOPMENTONLINE PLATFORMS FOR ICT CONTENT DEVELOPMENT
ONLINE PLATFORMS FOR ICT CONTENT DEVELOPMENTRianneMaeIda
 

What's hot (20)

Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
 
Emptech Lesson 14-Research for Content in Social Advocay.pdf
Emptech Lesson 14-Research for Content in Social Advocay.pdfEmptech Lesson 14-Research for Content in Social Advocay.pdf
Emptech Lesson 14-Research for Content in Social Advocay.pdf
 
presentation on static website design
presentation on static website designpresentation on static website design
presentation on static website design
 
Module 4 EMPOWERMENT TECHNOLOGY
Module 4 EMPOWERMENT TECHNOLOGYModule 4 EMPOWERMENT TECHNOLOGY
Module 4 EMPOWERMENT TECHNOLOGY
 
Empowerment Technologies Lecture 8 (Philippines SHS)
Empowerment Technologies Lecture 8 (Philippines SHS)Empowerment Technologies Lecture 8 (Philippines SHS)
Empowerment Technologies Lecture 8 (Philippines SHS)
 
Web Page Creation
Web Page CreationWeb Page Creation
Web Page Creation
 
How to create a Google Site
How to create a Google SiteHow to create a Google Site
How to create a Google Site
 
Empowerment Technology
Empowerment TechnologyEmpowerment Technology
Empowerment Technology
 
ONLINE TOOLS FOR CONTENT DEVELOPMENT
ONLINE TOOLS FOR CONTENT DEVELOPMENTONLINE TOOLS FOR CONTENT DEVELOPMENT
ONLINE TOOLS FOR CONTENT DEVELOPMENT
 
WEB DESIGNING MODULE
WEB DESIGNING MODULEWEB DESIGNING MODULE
WEB DESIGNING MODULE
 
Adobe Photoshop Tools
Adobe Photoshop ToolsAdobe Photoshop Tools
Adobe Photoshop Tools
 
Web 1.0
Web 1.0Web 1.0
Web 1.0
 
Content Management System
Content Management SystemContent Management System
Content Management System
 
World Wide Web (WWW)
World Wide Web (WWW)World Wide Web (WWW)
World Wide Web (WWW)
 
Web design intro
Web design introWeb design intro
Web design intro
 
Online platforms for ict content development
Online platforms for ict content developmentOnline platforms for ict content development
Online platforms for ict content development
 
Detail History of web 1.0 to 3.0
Detail History of web 1.0 to 3.0Detail History of web 1.0 to 3.0
Detail History of web 1.0 to 3.0
 
IS100 Week 5
IS100 Week 5IS100 Week 5
IS100 Week 5
 
ONLINE PLATFORMS FOR ICT CONTENT DEVELOPMENT
ONLINE PLATFORMS FOR ICT CONTENT DEVELOPMENTONLINE PLATFORMS FOR ICT CONTENT DEVELOPMENT
ONLINE PLATFORMS FOR ICT CONTENT DEVELOPMENT
 
Online platform
Online platformOnline platform
Online platform
 

Similar to EmpTech Lesson 8-Basic Web Page Creation.pptx

Similar to EmpTech Lesson 8-Basic Web Page Creation.pptx (20)

CreatingWebPages-Part1.ppt
CreatingWebPages-Part1.pptCreatingWebPages-Part1.ppt
CreatingWebPages-Part1.ppt
 
Html Concept
Html ConceptHtml Concept
Html Concept
 
Html basic
Html basicHtml basic
Html basic
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
 
Internet programming notes
Internet programming notesInternet programming notes
Internet programming notes
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptx
 
Html
HtmlHtml
Html
 
Graphics For Web
Graphics For WebGraphics For Web
Graphics For Web
 
Importance of HTML
Importance of HTMLImportance of HTML
Importance of HTML
 
What is html and how it uses/
What is html and how it uses/What is html and how it uses/
What is html and how it uses/
 
Tutorial 08 - Creating Effective Web Pages
Tutorial 08 - Creating Effective Web PagesTutorial 08 - Creating Effective Web Pages
Tutorial 08 - Creating Effective Web Pages
 
Tutorial 08 - Creating Effective Web Pages
Tutorial 08 - Creating Effective Web PagesTutorial 08 - Creating Effective Web Pages
Tutorial 08 - Creating Effective Web Pages
 
Let me design
Let me designLet me design
Let me design
 
Dynamic html (#1)
Dynamic  html (#1)Dynamic  html (#1)
Dynamic html (#1)
 
Module 1
Module 1Module 1
Module 1
 
Html
HtmlHtml
Html
 
What is html ?
What is html ?What is html ?
What is html ?
 
Tutorial 8 - Creating Effective Web Pages
Tutorial 8 - Creating Effective Web PagesTutorial 8 - Creating Effective Web Pages
Tutorial 8 - Creating Effective Web Pages
 

Recently uploaded

POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppCeline George
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionSafetyChain Software
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTiammrhaywood
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxmanuelaromero2013
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentInMediaRes1
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfSumit Tiwari
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting DataJhengPantaleon
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Celine George
 

Recently uploaded (20)

POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
 
Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSDStaff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
 

EmpTech Lesson 8-Basic Web Page Creation.pptx

  • 1. Lesson 8: Basic Web Page Creation
  • 2. What does Web Page mean?
  • 3. Web Page 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 browser.
  • 4. Web Page Web pages are made up of Hypertext Markup Language (HTML) and can be created and modified by using basic application like Notepad and professional HTML editors.
  • 5.  HTML is Easy to Learn and Use  HTML is Free  Online Website Builder - Easy Use of Drag-And-Drop Interface
  • 6. WYSIWYG  What You See Is What You Get  Whatever you will type, insert, draw, place, rearrange, or whatever you do on a web page is what the audience will see
  • 7. 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
  • 8. HTML 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
  • 9. Requirements in creating a web page using the html 1. Editor – using the Notepad (source code) in text and extension name - .html or .htm. 2. Browser – responsible for reading HTML instructions and displaying the web page output. (ex. Internet Explorer, Mozilla Firefox, Google Chrome)
  • 10. Creating a Website Using Notepad Web pages can be created and modified using professional HTML editors. However, in learning HTML, it is better to use a simple text editor like Notepad. Follow the steps to create your first web page with Notepad.
  • 11.
  • 12.
  • 13. HTML document is divided into two main sections the head and the body. Each section contains specific information. The head section contains information about the documents like title, search engine or keywords but is not visible to the reader. The body section contains the information or content that you want to appear on the web page.