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

Html text and formatting
Html text and formattingHtml text and formatting
Html text and formatting
eShikshak
 

What's hot (20)

CSS ppt
CSS pptCSS ppt
CSS ppt
 
Files in php
Files in phpFiles in php
Files in php
 
Python3 (boto3) for aws
Python3 (boto3) for awsPython3 (boto3) for aws
Python3 (boto3) for aws
 
Web browsers and website publishing
Web browsers and website publishingWeb browsers and website publishing
Web browsers and website publishing
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html table tags
Html table tagsHtml table tags
Html table tags
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Html text and formatting
Html text and formattingHtml text and formatting
Html text and formatting
 
HTML + CSS Examples
HTML + CSS ExamplesHTML + CSS Examples
HTML + CSS Examples
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
 
Html
HtmlHtml
Html
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & video
 
HTML
HTMLHTML
HTML
 
Python-Tuples
Python-TuplesPython-Tuples
Python-Tuples
 
Basic html tags
Basic html tagsBasic html tags
Basic html tags
 
Web page concept final ppt
Web page concept  final pptWeb page concept  final ppt
Web page concept final ppt
 
Html
HtmlHtml
Html
 
Html coding
Html codingHtml coding
Html coding
 

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

Recently uploaded (20)

Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
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
 
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
 
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
 
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
 
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
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
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
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
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
 
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...
 
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
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 

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