SlideShare a Scribd company logo
1 of 14
CONTENTS
What is HTML?
Versions of HTML
How Does HTML Works
Basic HTML Document
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>
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

Computer fundamentals-internet p2
Computer fundamentals-internet p2Computer fundamentals-internet p2
Computer fundamentals-internet p2Leo Mark Villar
 
An Introduction to HTML
An Introduction to HTMLAn Introduction to HTML
An Introduction to HTMLcrea8ivemoiz
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptxshilpak0307
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.pptChemOyasan1
 
html complete notes
html complete noteshtml complete notes
html complete notesonactiontv
 
html compete notes basic to advanced
html compete notes basic to advancedhtml compete notes basic to advanced
html compete notes basic to advancedvirtualworld14
 
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdfHSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdfAAFREEN SHAIKH
 
Vskills certified html designer Notes
Vskills certified html designer NotesVskills certified html designer Notes
Vskills certified html designer NotesVskills
 
Basic HTML
Basic HTMLBasic HTML
Basic HTMLSayan De
 

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

Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html
HtmlHtml
Html
 
Computer fundamentals-internet p2
Computer fundamentals-internet p2Computer fundamentals-internet p2
Computer fundamentals-internet p2
 
Introduction to Html
Introduction to HtmlIntroduction to Html
Introduction to Html
 
Html
Html Html
Html
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
An Introduction to HTML
An Introduction to HTMLAn Introduction to HTML
An Introduction to HTML
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptx
 
Html basics
Html basicsHtml basics
Html basics
 
Html presentation
Html presentationHtml presentation
Html presentation
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
html complete notes
html complete noteshtml complete notes
html complete notes
 
html compete notes basic to advanced
html compete notes basic to advancedhtml compete notes basic to advanced
html compete notes basic to advanced
 
How to make Html
How to make HtmlHow to make Html
How to make Html
 
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdfHSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
 
Vskills certified html designer Notes
Vskills certified html designer NotesVskills certified html designer Notes
Vskills certified html designer Notes
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html basics
Html basicsHtml basics
Html basics
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
 
About html
About htmlAbout html
About html
 

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
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
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
 
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
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
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
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
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
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
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
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
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
 
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...RKavithamani
 
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
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
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
 

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
 
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
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
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
 
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
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
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
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
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
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
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
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
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
 
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application )
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
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
 

CSE-HTML-PPT.pptx

  • 1.
  • 2. CONTENTS What is HTML? Versions of HTML How Does HTML Works Basic HTML Document 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. 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.
  • 9. 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.
  • 10. 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">
  • 11. 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.
  • 12. 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