SlideShare a Scribd company logo
1 of 29
BASICWEBPROGRAMMING
(JAVASCRIPT)
S1E2: INTRODUCTION TO WEBPAGE
AND HTML
MR. IAN PAOLO V. IGNACIO
COMPUTER 7 TEACHER
S1E2: INTRODUCTION TO WEBPAGE AND HTML
OPENING
PRAYER
Father God, thank you for this
wonderful day.
Thank you for your love and
guidance.
Bless and protect our family,
teachers,
and classmates. Guide us with
our lessons for today.
May we grow, learn, and have
fun in our class.
In Jesus’ name we pray,
Amen.
WEBPAGE
S1E2: INTRODUCTION TO WEBPAGE AND HTML
WEB PAGE
The World Wide Web or Web,
consists or world wide collection of
electronic documents. These
electronic documents are called
web pages.
S1E2: INTRODUCTION TO WEBPAGE AND HTML
WEB PAGE
Electronic document that may contain text,
images, sounds, videos and hyperlinks.
Hyperlinks, also known as hypertext are
built-in connections on another related web
pages
S1E2: INTRODUCTION TO WEBPAGE AND HTML
WEB PAGE
Collection of related web pages that can
be accessed is called website.
The home page is similar to a book cover
or a table of contents for the site.
S1E2: INTRODUCTION TO WEBPAGE AND HTML
HTML
S1E2: INTRODUCTION TO WEBPAGE AND HTML
HTML
HTML is the primary language used to create
web pages. It stands for HyperText Markup
Language.
Hypertext provides commands that will allow
you to create links between web pages.
S1E2: INTRODUCTION TO WEBPAGE AND HTML
HTML
Mark-up is the process of inserting
formatting instructions to the document.
The mark-up process comes from the
days when book and magazine publishing
people made special marks on authors’
manuscripts to tell typesetters how to
format the text.
S1E2: INTRODUCTION TO WEBPAGE AND HTML
HTML tag
<command>
S1E2: INTRODUCTION TO WEBPAGE AND HTML
Most HTML tags come in pairs –
an opening tag and a closing tag.
Closing tag is similar to the opening tag
with the exception of the forward slash
added inside the angle brackets
</command>
<command>
S1E2: INTRODUCTION TO WEBPAGE AND HTML
Opening tag
Closing tag
</command>
Attributes
S1E2: INTRODUCTION TO WEBPAGE AND HTML
Are modifiers that are placed inside the
opening tag of an HTML command.
<palign=“center”>Your text here </p>
types of HTML commands or tags
S1E2: INTRODUCTION TO WEBPAGE AND HTML
Does not have an end tag or
command.
Requires and end tag and usually
comes in pairs.
Empty tag
Container Tag
HTML Basic Document Structure
S1E2: INTRODUCTION TO WEBPAGE AND HTML
<html>
<head>
<title> Title of the page </title>
</head>
<body>
Content
</body>
</html>
<html>
S1E2: INTRODUCTION TO WEBPAGE AND HTML
Used to indicate that the
text enclosed in this tag
is in HTML format and
that it can be viewed
using the browser.
…</html>
HTML Basic Document Structure
S1E2: INTRODUCTION TO WEBPAGE AND HTML
<html>
<head>
<title> Title of the page </title>
</head>
<body>
Content
</body>
</html>
<head>
S1E2: INTRODUCTION TO WEBPAGE AND HTML
Used to define the
header area. The content
of the header area is not
displayed within the
page of the browser
…</head>
HTML Basic Document Structure
S1E2: INTRODUCTION TO WEBPAGE AND HTML
<html>
<head>
<title> Title of the page </title>
</head>
<body>
Content
</body>
</html>
<title>
S1E2: INTRODUCTION TO WEBPAGE AND HTML
Placed inside the
<head>…</head>. The
information placed
inside this tag will be
displayed in the title bar
or browser window.
…</title>
HTML Basic Document Structure
S1E2: INTRODUCTION TO WEBPAGE AND HTML
<html>
<head>
<title> Title of the page </title>
</head>
<body>
Content
</body>
</html>
S1E2: INTRODUCTION TO WEBPAGE AND HTML
<body>
S1E2: INTRODUCTION TO WEBPAGE AND HTML
Used to indicate that
the text enclosed
inside this tag will be
displayed on the
browser page.
…</body>
HTML Basic Document Structure
S1E2: INTRODUCTION TO WEBPAGE AND HTML
<html>
<head>
<title> Title of the page </title>
</head>
<body>
Content
</body>
</html>
S1E2: INTRODUCTION TO WEBPAGE AND HTML
S1E2: INTRODUCTION TO WEBPAGE AND HTML
S1E2: INTRODUCTION TO WEBPAGE AND HTML
ASSESSMENT#2
Web Programming (JavaScript)
Page 10
BASICWEBPROGRAMMING (JAVASCRIPT)
CLOSING
PRAYER
Father God, thank you for
another day of learning.
Thank you for the lessons we
received
and for the teacher who
guided us.
Teach us to use our talents
and gifts in helping others.
In Jesus’ name we pray,
Amen.

More Related Content

Similar to Introduction to Webpage creation and HTML

Basics tags for HTML
Basics tags for HTMLBasics tags for HTML
Basics tags for HTML
vidyamittal
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
chowders
 

Similar to Introduction to Webpage creation and HTML (20)

46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world
 
HTML (Hyper Text Markup Language) Project
HTML (Hyper Text Markup Language) Project HTML (Hyper Text Markup Language) Project
HTML (Hyper Text Markup Language) Project
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Basics tags for HTML
Basics tags for HTMLBasics tags for HTML
Basics tags for HTML
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Html bangla
Html banglaHtml bangla
Html bangla
 
Bangla HTML Tutorial
Bangla HTML TutorialBangla HTML Tutorial
Bangla HTML Tutorial
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
HTML web design_ an introduction to design
HTML web design_ an introduction to designHTML web design_ an introduction to design
HTML web design_ an introduction to design
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
Html
HtmlHtml
Html
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
Unit 2.3
Unit 2.3Unit 2.3
Unit 2.3
 
PRESENTATION WORK ON COMPUTER APPLICATION IN PHARMACY.pdf
PRESENTATION WORK ON COMPUTER APPLICATION IN PHARMACY.pdfPRESENTATION WORK ON COMPUTER APPLICATION IN PHARMACY.pdf
PRESENTATION WORK ON COMPUTER APPLICATION IN PHARMACY.pdf
 

More from ElijahSantos4

More from ElijahSantos4 (13)

LESSON POWERPOINT, LEARN HOW TO DO POWERPOINT LESSON 2
LESSON POWERPOINT, LEARN HOW TO DO POWERPOINT LESSON 2LESSON POWERPOINT, LEARN HOW TO DO POWERPOINT LESSON 2
LESSON POWERPOINT, LEARN HOW TO DO POWERPOINT LESSON 2
 
LP4E-U06L01 Presentation - POWERPOINT PRESENTATION
LP4E-U06L01 Presentation -  POWERPOINT PRESENTATIONLP4E-U06L01 Presentation -  POWERPOINT PRESENTATION
LP4E-U06L01 Presentation - POWERPOINT PRESENTATION
 
LESSON FOR POWERPOINT - LESSON NUMBER 1 - HOW TO DO POWERPOINT
LESSON FOR POWERPOINT - LESSON NUMBER 1 - HOW TO DO POWERPOINTLESSON FOR POWERPOINT - LESSON NUMBER 1 - HOW TO DO POWERPOINT
LESSON FOR POWERPOINT - LESSON NUMBER 1 - HOW TO DO POWERPOINT
 
JAVASCRIPT LESSON 20 - LEARNJAVASCRIPT - ARRAYS
JAVASCRIPT LESSON 20 - LEARNJAVASCRIPT - ARRAYSJAVASCRIPT LESSON 20 - LEARNJAVASCRIPT - ARRAYS
JAVASCRIPT LESSON 20 - LEARNJAVASCRIPT - ARRAYS
 
CHARACTERISTICS OF COMPUTER LEARNING FOR ELEMNTARY
CHARACTERISTICS OF COMPUTER LEARNING FOR ELEMNTARYCHARACTERISTICS OF COMPUTER LEARNING FOR ELEMNTARY
CHARACTERISTICS OF COMPUTER LEARNING FOR ELEMNTARY
 
SONGWRITING LESSON - HOW TO WRITE A SONG
SONGWRITING LESSON - HOW TO WRITE A SONGSONGWRITING LESSON - HOW TO WRITE A SONG
SONGWRITING LESSON - HOW TO WRITE A SONG
 
FORMS OF MUSIC- LNA - LOCAL MUSIC TYPES AND FORMS
FORMS OF MUSIC- LNA - LOCAL MUSIC TYPES AND FORMSFORMS OF MUSIC- LNA - LOCAL MUSIC TYPES AND FORMS
FORMS OF MUSIC- LNA - LOCAL MUSIC TYPES AND FORMS
 
Drug Abuse Education - PPT about drugs and solution
Drug Abuse Education - PPT about drugs and solutionDrug Abuse Education - PPT about drugs and solution
Drug Abuse Education - PPT about drugs and solution
 
DC-CH01Intro.pptx
DC-CH01Intro.pptxDC-CH01Intro.pptx
DC-CH01Intro.pptx
 
FACT OR BLUFF.pptx
FACT OR BLUFF.pptxFACT OR BLUFF.pptx
FACT OR BLUFF.pptx
 
Pyhton dictionary.pdf
Pyhton dictionary.pdfPyhton dictionary.pdf
Pyhton dictionary.pdf
 
Python-CH01L04-Presentation.pptx
Python-CH01L04-Presentation.pptxPython-CH01L04-Presentation.pptx
Python-CH01L04-Presentation.pptx
 
May-30-2021-a.m.-worship.pptx
May-30-2021-a.m.-worship.pptxMay-30-2021-a.m.-worship.pptx
May-30-2021-a.m.-worship.pptx
 

Recently uploaded

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
AnaAcapella
 

Recently uploaded (20)

SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 

Introduction to Webpage creation and HTML

  • 1. BASICWEBPROGRAMMING (JAVASCRIPT) S1E2: INTRODUCTION TO WEBPAGE AND HTML MR. IAN PAOLO V. IGNACIO COMPUTER 7 TEACHER
  • 2. S1E2: INTRODUCTION TO WEBPAGE AND HTML OPENING PRAYER Father God, thank you for this wonderful day. Thank you for your love and guidance. Bless and protect our family, teachers, and classmates. Guide us with our lessons for today. May we grow, learn, and have fun in our class. In Jesus’ name we pray, Amen.
  • 3. WEBPAGE S1E2: INTRODUCTION TO WEBPAGE AND HTML
  • 4. WEB PAGE The World Wide Web or Web, consists or world wide collection of electronic documents. These electronic documents are called web pages. S1E2: INTRODUCTION TO WEBPAGE AND HTML
  • 5.
  • 6.
  • 7. WEB PAGE Electronic document that may contain text, images, sounds, videos and hyperlinks. Hyperlinks, also known as hypertext are built-in connections on another related web pages S1E2: INTRODUCTION TO WEBPAGE AND HTML
  • 8. WEB PAGE Collection of related web pages that can be accessed is called website. The home page is similar to a book cover or a table of contents for the site. S1E2: INTRODUCTION TO WEBPAGE AND HTML
  • 9. HTML S1E2: INTRODUCTION TO WEBPAGE AND HTML
  • 10. HTML HTML is the primary language used to create web pages. It stands for HyperText Markup Language. Hypertext provides commands that will allow you to create links between web pages. S1E2: INTRODUCTION TO WEBPAGE AND HTML
  • 11. HTML Mark-up is the process of inserting formatting instructions to the document. The mark-up process comes from the days when book and magazine publishing people made special marks on authors’ manuscripts to tell typesetters how to format the text. S1E2: INTRODUCTION TO WEBPAGE AND HTML
  • 12. HTML tag <command> S1E2: INTRODUCTION TO WEBPAGE AND HTML Most HTML tags come in pairs – an opening tag and a closing tag. Closing tag is similar to the opening tag with the exception of the forward slash added inside the angle brackets </command>
  • 13. <command> S1E2: INTRODUCTION TO WEBPAGE AND HTML Opening tag Closing tag </command>
  • 14. Attributes S1E2: INTRODUCTION TO WEBPAGE AND HTML Are modifiers that are placed inside the opening tag of an HTML command. <palign=“center”>Your text here </p>
  • 15. types of HTML commands or tags S1E2: INTRODUCTION TO WEBPAGE AND HTML Does not have an end tag or command. Requires and end tag and usually comes in pairs. Empty tag Container Tag
  • 16. HTML Basic Document Structure S1E2: INTRODUCTION TO WEBPAGE AND HTML <html> <head> <title> Title of the page </title> </head> <body> Content </body> </html>
  • 17. <html> S1E2: INTRODUCTION TO WEBPAGE AND HTML Used to indicate that the text enclosed in this tag is in HTML format and that it can be viewed using the browser. …</html>
  • 18. HTML Basic Document Structure S1E2: INTRODUCTION TO WEBPAGE AND HTML <html> <head> <title> Title of the page </title> </head> <body> Content </body> </html>
  • 19. <head> S1E2: INTRODUCTION TO WEBPAGE AND HTML Used to define the header area. The content of the header area is not displayed within the page of the browser …</head>
  • 20. HTML Basic Document Structure S1E2: INTRODUCTION TO WEBPAGE AND HTML <html> <head> <title> Title of the page </title> </head> <body> Content </body> </html>
  • 21. <title> S1E2: INTRODUCTION TO WEBPAGE AND HTML Placed inside the <head>…</head>. The information placed inside this tag will be displayed in the title bar or browser window. …</title>
  • 22. HTML Basic Document Structure S1E2: INTRODUCTION TO WEBPAGE AND HTML <html> <head> <title> Title of the page </title> </head> <body> Content </body> </html>
  • 23. S1E2: INTRODUCTION TO WEBPAGE AND HTML
  • 24. <body> S1E2: INTRODUCTION TO WEBPAGE AND HTML Used to indicate that the text enclosed inside this tag will be displayed on the browser page. …</body>
  • 25. HTML Basic Document Structure S1E2: INTRODUCTION TO WEBPAGE AND HTML <html> <head> <title> Title of the page </title> </head> <body> Content </body> </html>
  • 26. S1E2: INTRODUCTION TO WEBPAGE AND HTML
  • 27. S1E2: INTRODUCTION TO WEBPAGE AND HTML
  • 28. S1E2: INTRODUCTION TO WEBPAGE AND HTML ASSESSMENT#2 Web Programming (JavaScript) Page 10
  • 29. BASICWEBPROGRAMMING (JAVASCRIPT) CLOSING PRAYER Father God, thank you for another day of learning. Thank you for the lessons we received and for the teacher who guided us. Teach us to use our talents and gifts in helping others. In Jesus’ name we pray, Amen.