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

PPTX
Html and css
PPTX
WEB PAGE DESIGN USING HTML
PPTX
Html tags
ODP
CSS Basics
PPTX
Css borders
PPTX
PPTX

What's hot (20)

PPTX
Web Page Designing Using HTML
PPT
Cascading Style Sheets (CSS) help
PDF
PPTX
Html coding
PPT
PPTX
CSS - Text Properties
PDF
Intro to HTML and CSS basics
PPTX
Html ppt
PPT
Cascading Style Sheet
ODP
Introduction to css & its attributes with syntax
PPTX
Introduction to html
PPTX
HTML-(workshop)7557.pptx
PPTX
PPTX
How to learn HTML in 10 Days
PPT
Introduction to JavaScript (1).ppt
PPT
Intro Html
PPT
Html tag
PDF
HTML Body Element
PDF
9- Learn CSS Fundamentals / Pseudo-classes
Web Page Designing Using HTML
Cascading Style Sheets (CSS) help
Html coding
CSS - Text Properties
Intro to HTML and CSS basics
Html ppt
Cascading Style Sheet
Introduction to css & its attributes with syntax
Introduction to html
HTML-(workshop)7557.pptx
How to learn HTML in 10 Days
Introduction to JavaScript (1).ppt
Intro Html
Html tag
HTML Body Element
9- Learn CSS Fundamentals / Pseudo-classes
Ad

Similar to Html (20)

PPTX
Html Workshop
PPTX
Introduction to HTML: Overview and Structure
PPTX
Introduction to Html
PPT
Intodcution to Html
PPTX
Html ppt
PPTX
Html Guide
PPTX
IT Unit III.pptx
PPTX
Hyper text markup Language
PPT
Html ppt by Fathima faculty Hasanath college for women bangalore
PPTX
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
PPTX
PDF
Html tutorial
PPTX
HTML-BASICS is the programming will.pptx
PPTX
HTML_HEADER PART TAGS .pptx
PPTX
Lec 2 Web.pptxLec 2 Web.pptxLec 2 Web.pptx
PDF
Html tutorials by www.dmdiploma.com
PPTX
HTML.pptx
PPTX
Web development Training in Ambala ! Batra Computer Centre
DOCX
Computer application html
Html Workshop
Introduction to HTML: Overview and Structure
Introduction to Html
Intodcution to Html
Html ppt
Html Guide
IT Unit III.pptx
Hyper text markup Language
Html ppt by Fathima faculty Hasanath college for women bangalore
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
Html tutorial
HTML-BASICS is the programming will.pptx
HTML_HEADER PART TAGS .pptx
Lec 2 Web.pptxLec 2 Web.pptxLec 2 Web.pptx
Html tutorials by www.dmdiploma.com
HTML.pptx
Web development Training in Ambala ! Batra Computer Centre
Computer application html
Ad

Recently uploaded (20)

PPTX
Introduction to Building Materials
PDF
Indian roads congress 037 - 2012 Flexible pavement
PPTX
CHAPTER IV. MAN AND BIOSPHERE AND ITS TOTALITY.pptx
PDF
What if we spent less time fighting change, and more time building what’s rig...
PDF
ChatGPT for Dummies - Pam Baker Ccesa007.pdf
PDF
HVAC Specification 2024 according to central public works department
PPTX
Onco Emergencies - Spinal cord compression Superior vena cava syndrome Febr...
PDF
BP 704 T. NOVEL DRUG DELIVERY SYSTEMS (UNIT 1)
PPTX
Unit 4 Computer Architecture Multicore Processor.pptx
PDF
David L Page_DCI Research Study Journey_how Methodology can inform one's prac...
PDF
RTP_AR_KS1_Tutor's Guide_English [FOR REPRODUCTION].pdf
DOC
Soft-furnishing-By-Architect-A.F.M.Mohiuddin-Akhand.doc
PPTX
202450812 BayCHI UCSC-SV 20250812 v17.pptx
PDF
AI-driven educational solutions for real-life interventions in the Philippine...
PPTX
Computer Architecture Input Output Memory.pptx
PDF
Weekly quiz Compilation Jan -July 25.pdf
PDF
Paper A Mock Exam 9_ Attempt review.pdf.
PDF
advance database management system book.pdf
PDF
IGGE1 Understanding the Self1234567891011
PPTX
Chinmaya Tiranga Azadi Quiz (Class 7-8 )
Introduction to Building Materials
Indian roads congress 037 - 2012 Flexible pavement
CHAPTER IV. MAN AND BIOSPHERE AND ITS TOTALITY.pptx
What if we spent less time fighting change, and more time building what’s rig...
ChatGPT for Dummies - Pam Baker Ccesa007.pdf
HVAC Specification 2024 according to central public works department
Onco Emergencies - Spinal cord compression Superior vena cava syndrome Febr...
BP 704 T. NOVEL DRUG DELIVERY SYSTEMS (UNIT 1)
Unit 4 Computer Architecture Multicore Processor.pptx
David L Page_DCI Research Study Journey_how Methodology can inform one's prac...
RTP_AR_KS1_Tutor's Guide_English [FOR REPRODUCTION].pdf
Soft-furnishing-By-Architect-A.F.M.Mohiuddin-Akhand.doc
202450812 BayCHI UCSC-SV 20250812 v17.pptx
AI-driven educational solutions for real-life interventions in the Philippine...
Computer Architecture Input Output Memory.pptx
Weekly quiz Compilation Jan -July 25.pdf
Paper A Mock Exam 9_ Attempt review.pdf.
advance database management system book.pdf
IGGE1 Understanding the Self1234567891011
Chinmaya Tiranga Azadi Quiz (Class 7-8 )

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