SlideShare a Scribd company logo
1 of 17
Download to read offline
Introduction To HTML
Introduction


HTML stands for Hyper Text Markup Language.



HTML was developed by Tim Berners-Lee.



HTML is maintained by World Wide Web Consortium(W3C).



HTML first introduced in 1991 as HTML tags.



Extended from SGML and extended to XHTML.
Why HTML??? ?
HTML is Hyper Text Markup Language, as Hypertext refers to the
process of linking text to data on the interne while markup means
modification so HTML is a language that is used or that allow user to
organize and improve the appearance of text on internet.
HTML is used to create and design WebPages. Site authors use
HTML to format text as titles and headings, to arrange graphics on a
webpage, to link to different pages within a website, and to link to
different websites.
HTML is easy to learn and use.
HTML VERSIONS
Year

Version

1991

HTML

1995

HTML2.0

1997

HTML3.7

1998

HTML4.0

2008

HTML 5
HOW TO CREATE HTML
DOCUMENT??? ?


Step 1:
Open Notepad,
Start All Programs  Accessories  Notepad

o

Step 2:

Write HTML code in Notepad


Step 3: Save the file with .html or .htm extension.



Step 4: Open the .html file with any of the Web browser.
HTML COMPONENTS


HTML Elements:

An

HTML element is everything from the start tag to the end tag.

<p> This is Paragraph</p>
<p> is opening tag and </p> is closing tag.
*always close the opening tag.


HTML Attribute:
Attributes provide additional information about an element.
<a href="http://www.facebook.com">This is a link</a>
* Attribute values should always be enclosed in quotes.
HTML COMPONENTS


HTML Heading:
Headings are defined with the <h1> to <h6> tags.
<h1> This is a Heading </h1>
*The size of Heading decreases as we do from h1 to h6.



HTML Paragraphs:
HTML documents are divided into paragraphs.

<p>This is paragraph</p>


Formatting Tags:
Tag

Description

<b>

Defines bold text

<i>

Defines italic text

<strong>

Defines stronger text
HTML COMPONENTS



HTML Links:


The HTML <a> tag defines a hyperlink.



A hyperlink (or link) is a word, group of words, or image
that you can click on to jump to another document.
<a href="url">Link text</a>



HTML Image:


In HTML, images are defined with the <img> tag.
<img src="url" alt="some_text">

*src stands for source and url have path of image stored in desktop.
HTML COMPONENTS


HTML Tables:
• Tables are defined with the <table> tag.

*A table is divided into rows (tr) and each
rows are divided into data cells. Data cells
have table data(td), and table border can
be set by using <table border=“1”> tag.
HTML COMPONENTS


HTML List:
List are of two type :

Unorderd List
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Radhe</li>
<li>Krishna</li>
<li>Rajan</li>
</ul>
</body>
</html>
An Unordered List:
•Radhe
•Krishna
•Rajan

Ordered List
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Radhe</li>
<li>Krishna</li>
<li>Rajan</li>
</ol>
</body>
</html>
An Ordered List:
1. Radhe
2. Krishna
3. Rajan
HTML COMPONENTS


HTML Forms:
* HTML forms are used to pass data to the server.

HTML forms can contains elements like Textbox, Radio buttons ,submit buttons
and more… .
Forms are written under <form> tag .
<form>
Elements
</form>
Textbox:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>


First name:
Last name:
HTML COMPONENTS
Password Field:
<form>
Password: <input type="password" name="pwd">
</form>
Password:

Radio Buttons:
<form>
<input type="radio" name=“city" value=“delhi">Male<br>
<input type="radio" name=“city" value=“kolkata">Female
</form>
•Delhi
•Kolkata

Checkboxes:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
I have a Bike
I have a car

Submit Button:
<form>
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Username:

Submit
HTML WITH CSS AND JAVASCRIPT



HTML become more stylish and easy to use after

combination of CSS(Cascading Style Sheet) and
JavaScript.


CSS was introduced along with HTML 4.0 to
provide better style.



JavaScript make HTML more dynamic and user

interactive.
CSS IN HTML


CSS can be added to HTML in three ways:
Inline
 Internal
 External


Inline: It is applied for single occurrence of events.
For inline <style> tag is used.
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

Internal: it is used if one single document has a unique style.
This is written inside <head> tag.
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
External: When one style is applicable to many pages then this style is
used.
<head>
<link rel="stylesheet" type="text/css" href=“filename.css">
</head>
DIFFERENCE BETWEEN HTML AND XML
HTML

XML

It is Client Site Scripting

It is Server site Scripting

All the tags are predefined

User defined tags are available

It cann’t be compiled

It can be compiled

It can display the web pages

It cann’t be displayed

It is not case sensitive

It is case sensitive

•HTML Hyper Text Markup Language
•XML Extensible Markup Language
Thanks… .

More Related Content

What's hot (20)

Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 
Html
HtmlHtml
Html
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Html basics
Html basicsHtml basics
Html basics
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html ppt
Html pptHtml ppt
Html ppt
 
Javascript validating form
Javascript validating formJavascript validating form
Javascript validating form
 
YL Intro html
YL Intro htmlYL Intro html
YL Intro html
 
Html ppt
Html pptHtml ppt
Html ppt
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
 
HTML
HTMLHTML
HTML
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Html training slide
Html training slideHtml training slide
Html training slide
 
How Browser Works?
How Browser Works?How Browser Works?
How Browser Works?
 
slingmodels
slingmodelsslingmodels
slingmodels
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
Html tables
Html tablesHtml tables
Html tables
 
Html and its tags
Html and its tagsHtml and its tags
Html and its tags
 
jQuery
jQueryjQuery
jQuery
 
Tags in html
Tags in htmlTags in html
Tags in html
 

Similar to Html

Similar to Html (20)

Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Introduction to Html
Introduction to HtmlIntroduction to Html
Introduction to Html
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
 
Html Guide
Html GuideHtml Guide
Html Guide
 
Hyper text markup Language
Hyper text markup LanguageHyper text markup Language
Hyper text markup Language
 
IT Unit III.pptx
IT Unit III.pptxIT Unit III.pptx
IT Unit III.pptx
 
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangaloreHtml ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
 
Html 5
Html 5Html 5
Html 5
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html tutorials by www.dmdiploma.com
Html tutorials by www.dmdiploma.comHtml tutorials by www.dmdiploma.com
Html tutorials by www.dmdiploma.com
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Web development Training in Ambala ! Batra Computer Centre
Web development Training in Ambala ! Batra Computer CentreWeb development Training in Ambala ! Batra Computer Centre
Web development Training in Ambala ! Batra Computer Centre
 
Computer application html
Computer application htmlComputer application html
Computer application html
 
html
htmlhtml
html
 
HTML Basics 1 workshop
HTML Basics 1 workshopHTML Basics 1 workshop
HTML Basics 1 workshop
 
Web_Devp_HTML_CSS00jfhfghhdf0000000.pptx
Web_Devp_HTML_CSS00jfhfghhdf0000000.pptxWeb_Devp_HTML_CSS00jfhfghhdf0000000.pptx
Web_Devp_HTML_CSS00jfhfghhdf0000000.pptx
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2
 
HTML Overview
HTML OverviewHTML Overview
HTML Overview
 

Recently uploaded

M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE
 
How to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 AccountingHow to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 AccountingCeline George
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxKatherine Villaluna
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptxmary850239
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesMohammad Hassany
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17Celine George
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdf
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdfNOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdf
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdfSumit Tiwari
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 

Recently uploaded (20)

M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024
 
How to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 AccountingHow to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 Accounting
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptx
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming Classes
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdf
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdfNOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdf
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdf
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 

Html

  • 2. Introduction  HTML stands for Hyper Text Markup Language.  HTML was developed by Tim Berners-Lee.  HTML is maintained by World Wide Web Consortium(W3C).  HTML first introduced in 1991 as HTML tags.  Extended from SGML and extended to XHTML.
  • 3. Why HTML??? ? HTML is Hyper Text Markup Language, as Hypertext refers to the process of linking text to data on the interne while markup means modification so HTML is a language that is used or that allow user to organize and improve the appearance of text on internet. HTML is used to create and design WebPages. Site authors use HTML to format text as titles and headings, to arrange graphics on a webpage, to link to different pages within a website, and to link to different websites. HTML is easy to learn and use.
  • 5. HOW TO CREATE HTML DOCUMENT??? ?  Step 1: Open Notepad, Start All Programs  Accessories  Notepad o Step 2: Write HTML code in Notepad
  • 6.  Step 3: Save the file with .html or .htm extension.  Step 4: Open the .html file with any of the Web browser.
  • 7. HTML COMPONENTS  HTML Elements: An HTML element is everything from the start tag to the end tag. <p> This is Paragraph</p> <p> is opening tag and </p> is closing tag. *always close the opening tag.  HTML Attribute: Attributes provide additional information about an element. <a href="http://www.facebook.com">This is a link</a> * Attribute values should always be enclosed in quotes.
  • 8. HTML COMPONENTS  HTML Heading: Headings are defined with the <h1> to <h6> tags. <h1> This is a Heading </h1> *The size of Heading decreases as we do from h1 to h6.  HTML Paragraphs: HTML documents are divided into paragraphs. <p>This is paragraph</p>  Formatting Tags: Tag Description <b> Defines bold text <i> Defines italic text <strong> Defines stronger text
  • 9. HTML COMPONENTS  HTML Links:  The HTML <a> tag defines a hyperlink.  A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. <a href="url">Link text</a>  HTML Image:  In HTML, images are defined with the <img> tag. <img src="url" alt="some_text"> *src stands for source and url have path of image stored in desktop.
  • 10. HTML COMPONENTS  HTML Tables: • Tables are defined with the <table> tag. *A table is divided into rows (tr) and each rows are divided into data cells. Data cells have table data(td), and table border can be set by using <table border=“1”> tag.
  • 11. HTML COMPONENTS  HTML List: List are of two type : Unorderd List <html> <body> <h4>An Unordered List:</h4> <ul> <li>Radhe</li> <li>Krishna</li> <li>Rajan</li> </ul> </body> </html> An Unordered List: •Radhe •Krishna •Rajan Ordered List <html> <body> <h4>An Ordered List:</h4> <ol> <li>Radhe</li> <li>Krishna</li> <li>Rajan</li> </ol> </body> </html> An Ordered List: 1. Radhe 2. Krishna 3. Rajan
  • 12. HTML COMPONENTS  HTML Forms: * HTML forms are used to pass data to the server. HTML forms can contains elements like Textbox, Radio buttons ,submit buttons and more… . Forms are written under <form> tag . <form> Elements </form> Textbox: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>  First name: Last name:
  • 13. HTML COMPONENTS Password Field: <form> Password: <input type="password" name="pwd"> </form> Password: Radio Buttons: <form> <input type="radio" name=“city" value=“delhi">Male<br> <input type="radio" name=“city" value=“kolkata">Female </form> •Delhi •Kolkata Checkboxes: <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> I have a Bike I have a car Submit Button: <form> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> Username: Submit
  • 14. HTML WITH CSS AND JAVASCRIPT  HTML become more stylish and easy to use after combination of CSS(Cascading Style Sheet) and JavaScript.  CSS was introduced along with HTML 4.0 to provide better style.  JavaScript make HTML more dynamic and user interactive.
  • 15. CSS IN HTML  CSS can be added to HTML in three ways: Inline  Internal  External  Inline: It is applied for single occurrence of events. For inline <style> tag is used. <p style="color:blue;margin-left:20px;">This is a paragraph.</p> Internal: it is used if one single document has a unique style. This is written inside <head> tag. <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> External: When one style is applicable to many pages then this style is used. <head> <link rel="stylesheet" type="text/css" href=“filename.css"> </head>
  • 16. DIFFERENCE BETWEEN HTML AND XML HTML XML It is Client Site Scripting It is Server site Scripting All the tags are predefined User defined tags are available It cann’t be compiled It can be compiled It can display the web pages It cann’t be displayed It is not case sensitive It is case sensitive •HTML Hyper Text Markup Language •XML Extensible Markup Language