SlideShare a Scribd company logo
1 of 14
Unit 7
Introduction to HTML
What is HMTL?
• Hypertext is the method by which Internet
users navigate the web. The use of hyper
means it is not linear, so users can go
anywhere on the Internet simply by clicking
on the available links.
• Markup is what HTML tags do to the text
inside of them; they mark it as a specific type
of text.
Hypertext
Markup
Language it
has two
components:
Advantages of HTML
1. HTML is Easy to Learn and Use
2. HTML is Free
3. HTML supports almost all browsers around the globe.
4. HTML is one of the friendliest search engines in comparison to all the programming languages
available in the market
5. HTML is very easy to edit as there is no need to have a special interface or platform to edit it.
6. HTML can be easily integrated with multiple languages and does not create any issues in it.
7. HTML is lightweight language. It has a high signal to noise ratio as compared to other forms of
communication. It is also faster to download HTML code, which means it is highly compressive also.
8. HTML is Basic of all Programming Languages.
9. One of the biggest advantages of HTML is that one can see the changes instantly just by saving it
and reload the previous HTML page.
10. HTML is a user-friendly programming language. One does not need to have any prior knowledge
of any language. Understanding simple English is sufficient to work with it.
Basic terms Used in HTML
Tags - An HTML tag is a special word or letter surrounded by angle brackets, < and >. You use tags to create
HTML elements.
Attributes - Attributes define additional characteristics or properties of the element such as width and height
of an image. Attributes are always specified in the start tag (or opening tag) and usually consists of name/value
pairs like name="value" . Attribute values should always be enclosed in quotation marks.
Elements - The <html> element is the root element, and it defines the whole HTML document. It has a start tag
<html> and an end tag </html> . The <body> element defines the document's body.
Two types of element: container element and empty element
HTML Editor
An HTML editor is a software for editing and
creating HTML code that is used for websites or
other web documents.
Examples: WYSIWYG editors and Text editor
Textual
HTML
Editor
These are text-based editors where the
developers can write their codes and compile
them. The code appears in the same manner
we write it, thus it requires basic knowledge of
HTML. Some of these editors also provide
features of making a project, managing all the
files related to the web, etc. Examples of
HTML Text editors include-Notepad++,
VSCode,Sublime Text.
WYSIWYG editor
• What you see is what you get’ is its full
form. WYSIWYG are editors that provide
the preview of the output of the source
code i.e. as it would appear on a
browser. There is a drag and drop
feature available in most of them that
eases the handling. It does not require
any hardcore knowledge of HTML, thus
enabling non-technicals to easily
develop websites. Examples include-
Adobe Dreamweaver, Amaya,
BlueGriffon, etc.
Creating and saving Html document
Step 4 View the HTML Page in Your Browser
Step 3 Save the HTML Page
Step 2 Write Some HTML
Step 1 Open TextEdit
Structure of an HTML document
• HTML: marks the beginning and end of each HTML document.
• Syntax: <HTML></HTML>
• HEAD: specifies the header information about the HTML
document such as title, keywords, etc.
• Syntax:<HEAD></HEAD>
• TITLE: provides a title to a web page.
• Syntax: <TITLE></TITLE>
• BODY: provides content to your web page.
• Syntax: <BODY></BODY>
Recap
How should we
write the HTML
tag?
Ans: <HTML>
Which HTML
element provides
content to your
web page?
Ans: Body
Element
What are the four
major elements
of an HTML
document?
Ans: HTML, HEAD,
TITLE and BODY
Is the <BODY>tag
placed
immediately after
the closing tag
</HEAD>?
Ans: Yes
HW – answer in green notebook
Discuss the two
major components
of HTML.
1
Differentiate
between container
and empty
elements.
2
Explain the terms
‘tag’, ‘attribute’ and
‘element’.
3
Practical
Activity –
Structure of an
HTML
document
Example code:
<HTML>
<HEAD>
<TITLE>SAVE ENVIRONMENT</TITLE>
</HEAD>
<BODY>
Going green is easier than you think. There are little things you can
do every- day to help reduce greenhouse gases and make a less
harmful impact on the environment.
</BODY>
</HTML>
Note: Saves the document with the name ‘First.html’ and then shows
it in the web browser.
Copy both the files and attach it as an assignment in MS Teams.
Thank you

More Related Content

Similar to Grade 7_HTML.pptx

Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 htmlCK Yang
 
introdution-to-html.ppt coding programming
introdution-to-html.ppt coding programmingintrodution-to-html.ppt coding programming
introdution-to-html.ppt coding programmingprogramizconsultancy
 
HTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tagHTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tagssuser6478a8
 
CSE-HTML-PPT.pptx
CSE-HTML-PPT.pptxCSE-HTML-PPT.pptx
CSE-HTML-PPT.pptxAmbika S
 
Web Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusWeb Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusNANDINI SHARMA
 
1 introduction to html
1 introduction to html1 introduction to html
1 introduction to htmlmyrajendra
 
Web engineering notes unit 3
Web engineering notes unit 3Web engineering notes unit 3
Web engineering notes unit 3inshu1890
 
Vskills certified html designer Notes
Vskills certified html designer NotesVskills certified html designer Notes
Vskills certified html designer NotesVskills
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.pptSri Latha
 
HTML is a markup language used by the browser to manipulate text, images, and...
HTML is a markup language used by the browser to manipulate text, images, and...HTML is a markup language used by the browser to manipulate text, images, and...
HTML is a markup language used by the browser to manipulate text, images, and...ssuser6478a8
 
introdution-to-html (1).ppt
introdution-to-html (1).pptintrodution-to-html (1).ppt
introdution-to-html (1).pptF3ZONE1
 
introdution-to-html.ppt NJBJGHGJHGGJGJG
introdution-to-html.ppt  NJBJGHGJHGGJGJGintrodution-to-html.ppt  NJBJGHGJHGGJGJG
introdution-to-html.ppt NJBJGHGJHGGJGJGAMRITHA16
 

Similar to Grade 7_HTML.pptx (20)

Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 html
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Grade 10 COMPUTER
Grade 10 COMPUTERGrade 10 COMPUTER
Grade 10 COMPUTER
 
introdution-to-html.ppt coding programming
introdution-to-html.ppt coding programmingintrodution-to-html.ppt coding programming
introdution-to-html.ppt coding programming
 
HTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tagHTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tag
 
Html
HtmlHtml
Html
 
CSE-HTML-PPT.pptx
CSE-HTML-PPT.pptxCSE-HTML-PPT.pptx
CSE-HTML-PPT.pptx
 
Web Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusWeb Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV Syllabus
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
 
Module 1
Module 1Module 1
Module 1
 
1 introduction to html
1 introduction to html1 introduction to html
1 introduction to html
 
Web engineering notes unit 3
Web engineering notes unit 3Web engineering notes unit 3
Web engineering notes unit 3
 
Vskills certified html designer Notes
Vskills certified html designer NotesVskills certified html designer Notes
Vskills certified html designer Notes
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
summary html.ppt
summary html.pptsummary html.ppt
summary html.ppt
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
HTML is a markup language used by the browser to manipulate text, images, and...
HTML is a markup language used by the browser to manipulate text, images, and...HTML is a markup language used by the browser to manipulate text, images, and...
HTML is a markup language used by the browser to manipulate text, images, and...
 
introdution-to-html (1).ppt
introdution-to-html (1).pptintrodution-to-html (1).ppt
introdution-to-html (1).ppt
 
introdution-to-html.ppt NJBJGHGJHGGJGJG
introdution-to-html.ppt  NJBJGHGJHGGJGJGintrodution-to-html.ppt  NJBJGHGJHGGJGJG
introdution-to-html.ppt NJBJGHGJHGGJGJG
 

Recently uploaded

Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Celine George
 
Science lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonScience lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonJericReyAuditor
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxsocialsciencegdgrohi
 
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
 
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
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
Class 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfClass 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfakmcokerachita
 
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
 
Blooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxBlooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxUnboundStockton
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
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
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaVirag Sontakke
 
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
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 

Recently uploaded (20)

Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
 
Science lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonScience lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lesson
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
 
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
 
9953330565 Low Rate Call Girls In Rohini Delhi NCR
9953330565 Low Rate Call Girls In Rohini  Delhi NCR9953330565 Low Rate Call Girls In Rohini  Delhi NCR
9953330565 Low Rate Call Girls In Rohini Delhi NCR
 
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
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
Class 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfClass 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdf
 
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
 
Blooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxBlooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docx
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
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🔝
 
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
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of India
 
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
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
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 

Grade 7_HTML.pptx

  • 2. What is HMTL? • Hypertext is the method by which Internet users navigate the web. The use of hyper means it is not linear, so users can go anywhere on the Internet simply by clicking on the available links. • Markup is what HTML tags do to the text inside of them; they mark it as a specific type of text. Hypertext Markup Language it has two components:
  • 3. Advantages of HTML 1. HTML is Easy to Learn and Use 2. HTML is Free 3. HTML supports almost all browsers around the globe. 4. HTML is one of the friendliest search engines in comparison to all the programming languages available in the market 5. HTML is very easy to edit as there is no need to have a special interface or platform to edit it. 6. HTML can be easily integrated with multiple languages and does not create any issues in it.
  • 4. 7. HTML is lightweight language. It has a high signal to noise ratio as compared to other forms of communication. It is also faster to download HTML code, which means it is highly compressive also. 8. HTML is Basic of all Programming Languages. 9. One of the biggest advantages of HTML is that one can see the changes instantly just by saving it and reload the previous HTML page. 10. HTML is a user-friendly programming language. One does not need to have any prior knowledge of any language. Understanding simple English is sufficient to work with it.
  • 5. Basic terms Used in HTML Tags - An HTML tag is a special word or letter surrounded by angle brackets, < and >. You use tags to create HTML elements. Attributes - Attributes define additional characteristics or properties of the element such as width and height of an image. Attributes are always specified in the start tag (or opening tag) and usually consists of name/value pairs like name="value" . Attribute values should always be enclosed in quotation marks. Elements - The <html> element is the root element, and it defines the whole HTML document. It has a start tag <html> and an end tag </html> . The <body> element defines the document's body. Two types of element: container element and empty element
  • 6. HTML Editor An HTML editor is a software for editing and creating HTML code that is used for websites or other web documents. Examples: WYSIWYG editors and Text editor
  • 7. Textual HTML Editor These are text-based editors where the developers can write their codes and compile them. The code appears in the same manner we write it, thus it requires basic knowledge of HTML. Some of these editors also provide features of making a project, managing all the files related to the web, etc. Examples of HTML Text editors include-Notepad++, VSCode,Sublime Text.
  • 8. WYSIWYG editor • What you see is what you get’ is its full form. WYSIWYG are editors that provide the preview of the output of the source code i.e. as it would appear on a browser. There is a drag and drop feature available in most of them that eases the handling. It does not require any hardcore knowledge of HTML, thus enabling non-technicals to easily develop websites. Examples include- Adobe Dreamweaver, Amaya, BlueGriffon, etc.
  • 9. Creating and saving Html document Step 4 View the HTML Page in Your Browser Step 3 Save the HTML Page Step 2 Write Some HTML Step 1 Open TextEdit
  • 10. Structure of an HTML document • HTML: marks the beginning and end of each HTML document. • Syntax: <HTML></HTML> • HEAD: specifies the header information about the HTML document such as title, keywords, etc. • Syntax:<HEAD></HEAD> • TITLE: provides a title to a web page. • Syntax: <TITLE></TITLE> • BODY: provides content to your web page. • Syntax: <BODY></BODY>
  • 11. Recap How should we write the HTML tag? Ans: <HTML> Which HTML element provides content to your web page? Ans: Body Element What are the four major elements of an HTML document? Ans: HTML, HEAD, TITLE and BODY Is the <BODY>tag placed immediately after the closing tag </HEAD>? Ans: Yes
  • 12. HW – answer in green notebook Discuss the two major components of HTML. 1 Differentiate between container and empty elements. 2 Explain the terms ‘tag’, ‘attribute’ and ‘element’. 3
  • 13. Practical Activity – Structure of an HTML document Example code: <HTML> <HEAD> <TITLE>SAVE ENVIRONMENT</TITLE> </HEAD> <BODY> Going green is easier than you think. There are little things you can do every- day to help reduce greenhouse gases and make a less harmful impact on the environment. </BODY> </HTML> Note: Saves the document with the name ‘First.html’ and then shows it in the web browser. Copy both the files and attach it as an assignment in MS Teams.