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

PDF
Lesson 1: Introduction to HTML
Olivia Moran
 
PPTX
Creating a webpage in html
Shrey Goswami
 
PPTX
HTML
Akash Varaiya
 
PPTX
Html ppt
Ruchi Kumari
 
PPTX
HTML Introduction, HTML History, HTML Uses, HTML benifits
Pro Guide
 
PPTX
Java script
Sadeek Mohammed
 
PDF
JavaScript - Chapter 5 - Operators
WebStackAcademy
 
Lesson 1: Introduction to HTML
Olivia Moran
 
Creating a webpage in html
Shrey Goswami
 
Html ppt
Ruchi Kumari
 
HTML Introduction, HTML History, HTML Uses, HTML benifits
Pro Guide
 
Java script
Sadeek Mohammed
 
JavaScript - Chapter 5 - Operators
WebStackAcademy
 

What's hot (20)

PPT
Html Ppt
Hema Prasanth
 
PDF
A New Way to Look at Setting Goals for Your Business
Ali Mayar
 
PPTX
Introduction to html
veena parihar
 
PPTX
Html Basic Tags
Richa Singh
 
PPTX
Html1
learnt
 
PPTX
HTML Attributes.pptx
Steins18
 
PPTX
HTML Text formatting tags
Himanshu Pathak
 
PPTX
What is html and how it uses/
abhishek9260
 
PDF
CSS Positioning Elements.pdf
Kongu Engineering College, Perundurai, Erode
 
PPTX
How to learn HTML in 10 Days
Manoj kumar Deswal
 
PDF
Html,javascript & css
Predhin Sapru
 
PPT
Eye catching HTML BASICS tips: Learn easily
shabab shihan
 
PPTX
Introduction to Html
Folasade Adedeji
 
PDF
Ashley Liddell - BrightonSEO 2023.pdf
Ashley Liddell
 
PPT
HTML Tags
Pranay Agrawal
 
PPT
Html ppt
Sanmuga Nathan
 
PPTX
Html entities
Denni Domingo
 
PPTX
Web Page Designing
Amit Mali
 
PPTX
Planning and Goal Setting
smarrone
 
Html Ppt
Hema Prasanth
 
A New Way to Look at Setting Goals for Your Business
Ali Mayar
 
Introduction to html
veena parihar
 
Html Basic Tags
Richa Singh
 
Html1
learnt
 
HTML Attributes.pptx
Steins18
 
HTML Text formatting tags
Himanshu Pathak
 
What is html and how it uses/
abhishek9260
 
CSS Positioning Elements.pdf
Kongu Engineering College, Perundurai, Erode
 
How to learn HTML in 10 Days
Manoj kumar Deswal
 
Html,javascript & css
Predhin Sapru
 
Eye catching HTML BASICS tips: Learn easily
shabab shihan
 
Introduction to Html
Folasade Adedeji
 
Ashley Liddell - BrightonSEO 2023.pdf
Ashley Liddell
 
HTML Tags
Pranay Agrawal
 
Html ppt
Sanmuga Nathan
 
Html entities
Denni Domingo
 
Web Page Designing
Amit Mali
 
Planning and Goal Setting
smarrone
 
Ad

Similar to Html (20)

PPTX
Html Workshop
vardanyan99
 
PPTX
Introduction to HTML: Overview and Structure
JM PALEN
 
PPT
Intodcution to Html
Taha Malampatti
 
PPTX
Html Guide
Jspider - Noida
 
PPTX
IT Unit III.pptx
Karthik Rohan
 
PPTX
Hyper text markup Language
Naveeth Babu
 
PPT
Html ppt by Fathima faculty Hasanath college for women bangalore
fathima12
 
PPTX
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
johnmngoya1
 
PPTX
Html 5
DanellaPatrick
 
PDF
Html tutorial
NAGARAJU MAMILLAPALLY
 
PPTX
HTML-BASICS is the programming will.pptx
nombredarl
 
PPTX
HTML_HEADER PART TAGS .pptx
HARIPRIYAV25
 
PPTX
Lec 2 Web.pptxLec 2 Web.pptxLec 2 Web.pptx
pirode9160
 
PDF
Html tutorials by www.dmdiploma.com
ShwetaAggarwal56
 
PPTX
HTML.pptx
Akhilapatil4
 
PPTX
Web development Training in Ambala ! Batra Computer Centre
jatin batra
 
DOCX
Computer application html
PrashantChahal3
 
PPTX
html.pptx
developper2
 
PPT
html
tumetr1
 
Html Workshop
vardanyan99
 
Introduction to HTML: Overview and Structure
JM PALEN
 
Intodcution to Html
Taha Malampatti
 
Html Guide
Jspider - Noida
 
IT Unit III.pptx
Karthik Rohan
 
Hyper text markup Language
Naveeth Babu
 
Html ppt by Fathima faculty Hasanath college for women bangalore
fathima12
 
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
johnmngoya1
 
Html tutorial
NAGARAJU MAMILLAPALLY
 
HTML-BASICS is the programming will.pptx
nombredarl
 
HTML_HEADER PART TAGS .pptx
HARIPRIYAV25
 
Lec 2 Web.pptxLec 2 Web.pptxLec 2 Web.pptx
pirode9160
 
Html tutorials by www.dmdiploma.com
ShwetaAggarwal56
 
HTML.pptx
Akhilapatil4
 
Web development Training in Ambala ! Batra Computer Centre
jatin batra
 
Computer application html
PrashantChahal3
 
html.pptx
developper2
 
html
tumetr1
 
Ad

Recently uploaded (20)

PPTX
PROTIEN ENERGY MALNUTRITION: NURSING MANAGEMENT.pptx
PRADEEP ABOTHU
 
PPTX
An introduction to Dialogue writing.pptx
drsiddhantnagine
 
PPTX
Kanban Cards _ Mass Action in Odoo 18.2 - Odoo Slides
Celine George
 
PPTX
Cleaning Validation Ppt Pharmaceutical validation
Ms. Ashatai Patil
 
PPTX
Artificial-Intelligence-in-Drug-Discovery by R D Jawarkar.pptx
Rahul Jawarkar
 
PDF
Health-The-Ultimate-Treasure (1).pdf/8th class science curiosity /samyans edu...
Sandeep Swamy
 
PPTX
Dakar Framework Education For All- 2000(Act)
santoshmohalik1
 
PPTX
20250924 Navigating the Future: How to tell the difference between an emergen...
McGuinness Institute
 
PDF
The-Invisible-Living-World-Beyond-Our-Naked-Eye chapter 2.pdf/8th science cur...
Sandeep Swamy
 
PPTX
CDH. pptx
AneetaSharma15
 
PPTX
How to Apply for a Job From Odoo 18 Website
Celine George
 
PDF
BÀI TẬP TEST BỔ TRỢ THEO TỪNG CHỦ ĐỀ CỦA TỪNG UNIT KÈM BÀI TẬP NGHE - TIẾNG A...
Nguyen Thanh Tu Collection
 
PPTX
Measures_of_location_-_Averages_and__percentiles_by_DR SURYA K.pptx
Surya Ganesh
 
PPTX
BASICS IN COMPUTER APPLICATIONS - UNIT I
suganthim28
 
PPTX
Sonnet 130_ My Mistress’ Eyes Are Nothing Like the Sun By William Shakespear...
DhatriParmar
 
PPTX
How to Close Subscription in Odoo 18 - Odoo Slides
Celine George
 
PPTX
Care of patients with elImination deviation.pptx
AneetaSharma15
 
PPTX
A Smarter Way to Think About Choosing a College
Cyndy McDonald
 
PPTX
Five Point Someone – Chetan Bhagat | Book Summary & Analysis by Bhupesh Kushwaha
Bhupesh Kushwaha
 
PPTX
CONCEPT OF CHILD CARE. pptx
AneetaSharma15
 
PROTIEN ENERGY MALNUTRITION: NURSING MANAGEMENT.pptx
PRADEEP ABOTHU
 
An introduction to Dialogue writing.pptx
drsiddhantnagine
 
Kanban Cards _ Mass Action in Odoo 18.2 - Odoo Slides
Celine George
 
Cleaning Validation Ppt Pharmaceutical validation
Ms. Ashatai Patil
 
Artificial-Intelligence-in-Drug-Discovery by R D Jawarkar.pptx
Rahul Jawarkar
 
Health-The-Ultimate-Treasure (1).pdf/8th class science curiosity /samyans edu...
Sandeep Swamy
 
Dakar Framework Education For All- 2000(Act)
santoshmohalik1
 
20250924 Navigating the Future: How to tell the difference between an emergen...
McGuinness Institute
 
The-Invisible-Living-World-Beyond-Our-Naked-Eye chapter 2.pdf/8th science cur...
Sandeep Swamy
 
CDH. pptx
AneetaSharma15
 
How to Apply for a Job From Odoo 18 Website
Celine George
 
BÀI TẬP TEST BỔ TRỢ THEO TỪNG CHỦ ĐỀ CỦA TỪNG UNIT KÈM BÀI TẬP NGHE - TIẾNG A...
Nguyen Thanh Tu Collection
 
Measures_of_location_-_Averages_and__percentiles_by_DR SURYA K.pptx
Surya Ganesh
 
BASICS IN COMPUTER APPLICATIONS - UNIT I
suganthim28
 
Sonnet 130_ My Mistress’ Eyes Are Nothing Like the Sun By William Shakespear...
DhatriParmar
 
How to Close Subscription in Odoo 18 - Odoo Slides
Celine George
 
Care of patients with elImination deviation.pptx
AneetaSharma15
 
A Smarter Way to Think About Choosing a College
Cyndy McDonald
 
Five Point Someone – Chetan Bhagat | Book Summary & Analysis by Bhupesh Kushwaha
Bhupesh Kushwaha
 
CONCEPT OF CHILD CARE. pptx
AneetaSharma15
 

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