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

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
 
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...M56BOOKSTORE PRODUCT/SERVICE
 
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
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
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
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
_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
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application ) Sakshi Ghasle
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxRoyAbrique
 
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
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 
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
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docxPoojaSen20
 
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
 

Recently uploaded (20)

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
 
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
 
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
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.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
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
_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
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application )
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
 
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
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
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
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 
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
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docx
 
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
 

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.