SlideShare a Scribd company logo
1 of 16
www.studymafia.org
SubmittedTo: Submitted By:
www.studymafia.org www.studymafia.org
HTML
CONTENTS
 What is HTML?
 Versions of HTML
 How Does HTML Works
 Basic HTML Document
 Difference between HTML4 and 5
 The Most Used HTML Tags
 Pros
 Cons
 References
WHAT IS HTML?
Telling the browser what to do, and what props to use.
A serises of tags that are integrated into a text document.
Tags are ;
 surrounded with angle brackets like this
 <B> or <I>.
Most tags come in pairs
 exceptions: <P>, <br>, <li> tags …
The first tag turns the action on, and the second turns it off.
HTML (HYPERTEXT MARKUP
LANGUAGE)
 Common features
 Tables
 Frame
 Form
 Image map
 Character Set
 Meta tags
 Images, Hyperlink, etc…
VERSIONS:
YEAR VERSION
1991 HTML
1993 HTML+
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML
2012 HTML 5
2013 XHTML5
HOW DOES HTML WORK?
HTML documents are files that end with a
.html or .htm extension.You can view then using
any web browser (such as Google Chrome,
Safari, or Mozilla Firefox).
The browser reads the HTML file and renders its
content so that internet users can view it.
BASIC HTML DOCUMENT
 In its simplest form, following is an example of an HTML
document −
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....
</p>
</body>
</html>
DIFFERENCE BETWEEN HTML AND
HTML 5
HTML4
1. HTML5 uses new structures
such as drag, drop and much
more.
2.HTML 5 can contain embedded
video and audio without using
flash player.
3.HTML 5 is capable of handling
inaccurate syntax
HTML5
1.HTML 4 uses common
structures like headers ,
footers.
2.HTML 4 cannot embed video or
audio directly and makes use of
flash player for it.
3. HTML 4 cannot handle
inaccurate syntax
DIFFERENCE
HTML4
4. HTML 5 introduced many new
API’s which facilitate flexibility
of web pages.
5. In HTML 5, new tags and new
features like local storage are
enhanced.
HTML5
4. HTML 4 has traditional API’s
which does not include canvas
and content editable API’s.
5. In HTML 4, local storage is not
possible and tags that can
handle only one dimension are
present
THE MOST USED HTMLTAGS
 HTML tags have two main types: block-level and inline tags.
 Block-level elements take up the full available space and always
start a new line in the document. Headings and paragraphs are a
great example of block tags.
 Inline elements only take up as much space as they need and
don’t start a new line on the page.They usually serve to format
the inner contents of block-level elements. Links and
emphasized strings are good examples of inline tags.
BLOCK-LEVELTAGS
The three block level tags every HTML document needs to contain
are <html>, <head>, and <body>.
 The <html></html> tag is the highest level element that
encloses every HTML page.
 The <head></head> tag holds meta information such as the
page’s title and charset.
 Finally, the <body></body> tag encloses all the content that
appears on the page.
INLINETAGS
 Many inline tags are used to format text. For example,
a <strong></strong> tag would render an element in bold,
whereas <em></em> tags would show it in italics.
 Hyperlinks are also inline elements that require <a></a> tags
and href attributes to indicate the link’s destination:
 <a href="https://example.com/">Click me!</a>
 Images are inline elements too.You can add one using <img>
without any closing tag. But you will also need to use
the src attribute to specify the image path, for example:
 <img src="/images/example.jpg" alt="Example image">
PROS OF HTML
•A widely used language with a lot of resources and
a huge community behind.
•Runs natively in every web browser.
•Comes with a flat learning curve.
•Open-source and completely free.
•Clean and consistent markup.
•The official web standards are maintained by the
WorldWide Web Consortium (W3C).
•Easily integrable with backend languages such as
PHP and Node.js.
CONS OF HTML
 Mostly used for static web pages. For dynamic functionality, you
may need to use JavaScript or a backend language such as PHP.
 It does not allow the user to implement logic. As a result, all web
pages need to be created separately, even if they use the same
elements, e.g. headers and footers.
 Some browsers adopt new features slowly.
 Browser behavior is sometimes hard to predict (e.g. older
browsers don’t always render newer tags).
REFERENCES
 www.google.com
 www.wikipedia.com
 www.studymafia.org
THANKS

More Related Content

Similar to CSE-HTML-PPT.pptx (20)

HTML5 New Tags
HTML5 New TagsHTML5 New Tags
HTML5 New Tags
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
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
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 html
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
 
PSK TECHNOLOGIES (1) (1) (1).pdf
PSK TECHNOLOGIES (1) (1) (1).pdfPSK TECHNOLOGIES (1) (1) (1).pdf
PSK TECHNOLOGIES (1) (1) (1).pdf
 
Module 1
Module 1Module 1
Module 1
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Vskills certified html designer Notes
Vskills certified html designer NotesVskills certified html designer Notes
Vskills certified html designer Notes
 

Recently uploaded

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
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for BeginnersSabitha Banu
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17Celine George
 
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxEPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxRaymartEstabillo3
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 
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
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersSabitha Banu
 
MICROBIOLOGY biochemical test detailed.pptx
MICROBIOLOGY biochemical test detailed.pptxMICROBIOLOGY biochemical test detailed.pptx
MICROBIOLOGY biochemical test detailed.pptxabhijeetpadhi001
 
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
 
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
 
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
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxDr.Ibrahim Hassaan
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitolTechU
 
MARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupMARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupJonathanParaisoCruz
 
Roles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceRoles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceSamikshaHamane
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPCeline George
 

Recently uploaded (20)

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
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for Beginners
 
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
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
 
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxEPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
 
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
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
 
MICROBIOLOGY biochemical test detailed.pptx
MICROBIOLOGY biochemical test detailed.pptxMICROBIOLOGY biochemical test detailed.pptx
MICROBIOLOGY biochemical test detailed.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 🔝✔️✔️
 
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
 
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
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptx
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptx
 
MARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupMARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized Group
 
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🔝
 
OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...
 
Roles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceRoles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in Pharmacovigilance
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERP
 

CSE-HTML-PPT.pptx

  • 2. CONTENTS  What is HTML?  Versions of HTML  How Does HTML Works  Basic HTML Document  Difference between HTML4 and 5  The Most Used HTML Tags  Pros  Cons  References
  • 3. WHAT IS HTML? Telling the browser what to do, and what props to use. A serises of tags that are integrated into a text document. Tags are ;  surrounded with angle brackets like this  <B> or <I>. Most tags come in pairs  exceptions: <P>, <br>, <li> tags … The first tag turns the action on, and the second turns it off.
  • 4. HTML (HYPERTEXT MARKUP LANGUAGE)  Common features  Tables  Frame  Form  Image map  Character Set  Meta tags  Images, Hyperlink, etc…
  • 5. VERSIONS: YEAR VERSION 1991 HTML 1993 HTML+ 1995 HTML 2.0 1997 HTML 3.2 1999 HTML 4.01 2000 XHTML 2012 HTML 5 2013 XHTML5
  • 6. HOW DOES HTML WORK? HTML documents are files that end with a .html or .htm extension.You can view then using any web browser (such as Google Chrome, Safari, or Mozilla Firefox). The browser reads the HTML file and renders its content so that internet users can view it.
  • 7. BASIC HTML DOCUMENT  In its simplest form, following is an example of an HTML document − <!DOCTYPE html> <html> <head> <title>This is document title</title> </head> <body> <h1>This is a heading</h1> <p>Document content goes here..... </p> </body> </html>
  • 8. DIFFERENCE BETWEEN HTML AND HTML 5 HTML4 1. HTML5 uses new structures such as drag, drop and much more. 2.HTML 5 can contain embedded video and audio without using flash player. 3.HTML 5 is capable of handling inaccurate syntax HTML5 1.HTML 4 uses common structures like headers , footers. 2.HTML 4 cannot embed video or audio directly and makes use of flash player for it. 3. HTML 4 cannot handle inaccurate syntax
  • 9. DIFFERENCE HTML4 4. HTML 5 introduced many new API’s which facilitate flexibility of web pages. 5. In HTML 5, new tags and new features like local storage are enhanced. HTML5 4. HTML 4 has traditional API’s which does not include canvas and content editable API’s. 5. In HTML 4, local storage is not possible and tags that can handle only one dimension are present
  • 10. THE MOST USED HTMLTAGS  HTML tags have two main types: block-level and inline tags.  Block-level elements take up the full available space and always start a new line in the document. Headings and paragraphs are a great example of block tags.  Inline elements only take up as much space as they need and don’t start a new line on the page.They usually serve to format the inner contents of block-level elements. Links and emphasized strings are good examples of inline tags.
  • 11. BLOCK-LEVELTAGS The three block level tags every HTML document needs to contain are <html>, <head>, and <body>.  The <html></html> tag is the highest level element that encloses every HTML page.  The <head></head> tag holds meta information such as the page’s title and charset.  Finally, the <body></body> tag encloses all the content that appears on the page.
  • 12. INLINETAGS  Many inline tags are used to format text. For example, a <strong></strong> tag would render an element in bold, whereas <em></em> tags would show it in italics.  Hyperlinks are also inline elements that require <a></a> tags and href attributes to indicate the link’s destination:  <a href="https://example.com/">Click me!</a>  Images are inline elements too.You can add one using <img> without any closing tag. But you will also need to use the src attribute to specify the image path, for example:  <img src="/images/example.jpg" alt="Example image">
  • 13. PROS OF HTML •A widely used language with a lot of resources and a huge community behind. •Runs natively in every web browser. •Comes with a flat learning curve. •Open-source and completely free. •Clean and consistent markup. •The official web standards are maintained by the WorldWide Web Consortium (W3C). •Easily integrable with backend languages such as PHP and Node.js.
  • 14. CONS OF HTML  Mostly used for static web pages. For dynamic functionality, you may need to use JavaScript or a backend language such as PHP.  It does not allow the user to implement logic. As a result, all web pages need to be created separately, even if they use the same elements, e.g. headers and footers.  Some browsers adopt new features slowly.  Browser behavior is sometimes hard to predict (e.g. older browsers don’t always render newer tags).

Editor's Notes

  1. 1
  2. HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013