SlideShare a Scribd company logo
1 of 17
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

Adjectives ppt
Adjectives pptAdjectives ppt
Adjectives ppt
aelowans
 
INTRODUCTION TO THE F CLEF.pptx
INTRODUCTION TO THE F CLEF.pptxINTRODUCTION TO THE F CLEF.pptx
INTRODUCTION TO THE F CLEF.pptx
MerylLao
 
DECLARATIVE AND INTERROGATIVE SENTENCES
DECLARATIVE AND INTERROGATIVE SENTENCESDECLARATIVE AND INTERROGATIVE SENTENCES
DECLARATIVE AND INTERROGATIVE SENTENCES
Ningsih SM
 
Possessive nouns ppt
Possessive nouns pptPossessive nouns ppt
Possessive nouns ppt
aelowans
 

What's hot (20)

Human voice
Human voiceHuman voice
Human voice
 
Line, Shape, Form, Space, and Texture
Line, Shape, Form, Space, and TextureLine, Shape, Form, Space, and Texture
Line, Shape, Form, Space, and Texture
 
Band parent presentation
Band parent presentationBand parent presentation
Band parent presentation
 
MAPEH 6 - MUSIC PPT Q3 - Timbre.pptx
MAPEH 6 - MUSIC PPT Q3 - Timbre.pptxMAPEH 6 - MUSIC PPT Q3 - Timbre.pptx
MAPEH 6 - MUSIC PPT Q3 - Timbre.pptx
 
String instruments
String instrumentsString instruments
String instruments
 
Colors
ColorsColors
Colors
 
World Music Overview
World Music OverviewWorld Music Overview
World Music Overview
 
ppt music 2 grade
ppt music 2 gradeppt music 2 grade
ppt music 2 grade
 
Landscape and Still Life Drawing
Landscape and Still Life DrawingLandscape and Still Life Drawing
Landscape and Still Life Drawing
 
Rhythm
RhythmRhythm
Rhythm
 
Verb ppt etm rita
Verb ppt etm ritaVerb ppt etm rita
Verb ppt etm rita
 
Adjectives ppt
Adjectives pptAdjectives ppt
Adjectives ppt
 
Hatching
HatchingHatching
Hatching
 
Root words
Root wordsRoot words
Root words
 
Learning to sing
Learning to singLearning to sing
Learning to sing
 
INTRODUCTION TO THE F CLEF.pptx
INTRODUCTION TO THE F CLEF.pptxINTRODUCTION TO THE F CLEF.pptx
INTRODUCTION TO THE F CLEF.pptx
 
Quality of Sound in Music
Quality of Sound in MusicQuality of Sound in Music
Quality of Sound in Music
 
Musical instruments
Musical instrumentsMusical instruments
Musical instruments
 
DECLARATIVE AND INTERROGATIVE SENTENCES
DECLARATIVE AND INTERROGATIVE SENTENCESDECLARATIVE AND INTERROGATIVE SENTENCES
DECLARATIVE AND INTERROGATIVE SENTENCES
 
Possessive nouns ppt
Possessive nouns pptPossessive nouns ppt
Possessive nouns ppt
 

Similar to Html

Web_Devp_HTML_CSS00jfhfghhdf0000000.pptx
Web_Devp_HTML_CSS00jfhfghhdf0000000.pptxWeb_Devp_HTML_CSS00jfhfghhdf0000000.pptx
Web_Devp_HTML_CSS00jfhfghhdf0000000.pptx
gauravpurola
 

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 ppt
Html pptHtml ppt
Html ppt
 
Html Guide
Html GuideHtml Guide
Html Guide
 
IT Unit III.pptx
IT Unit III.pptxIT Unit III.pptx
IT Unit III.pptx
 
Hyper text markup Language
Hyper text markup LanguageHyper text markup Language
Hyper text markup Language
 
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.pptx
html.pptxhtml.pptx
html.pptx
 
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
 

Recently uploaded

Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 

Recently uploaded (20)

Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-IIFood Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
 
Role Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptxRole Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptx
 
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
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural ResourcesEnergy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
 

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