SlideShare a Scribd company logo
Arsh Shahid
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is
a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle
brackets like <html>
HTML tags normally come in pairs like <b> and
</b>
The first tag in a pair is the start tag, the second
tag is the end tag
Start and end tags are also called opening
tags and closing tags
 HTML documents describe web pages
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
 The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and
display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret
the content of the page:
 <html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
 Example Explained
 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading
 The text between <p> and </p> is displayed as a paragraph
HTML can be written and edited using many
different editors like Dreamweaver and Visual
Studio.
However, in this tutorial we use a plain text
editor (like Notepad) to edit HTML. We believe
using a plain text editor is the best way to learn
HTML.
When you save an HTML file, you can use either
the .htm or the .html file extension. There is no
difference, it is entirely up to you.
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Headings Are Important
Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
Search engines use your headings to index the structure and content of your
web pages.
Since users may skim your pages by its headings, it is important to use
headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings,
then the less important H3 headings, and so on.
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Don't Forget the End Tag
Most browsers will display HTML correctly even
if you forget the end tag:
Example
<p>This is a paragraph
<p>This is another paragraph
The example above will work in most browsers, but don't
rely on it. Forgetting the end tag can produce unexpected
results or errors.
Note: Future version of HTML will not allow you to skip
end tags.
HTML Line Breaks
Use the <br /> tag if you want a line break (a new line)
without starting a new paragraph:
Example
<p>This is<br />a para<br />graph with line breaks</p>
The <br /> element is an empty HTML element. It has no
end tag.
<br> or <br />
In XHTML, XML, elements with no end tag (closing tag)
are not allowed.
Even if <br> works in all browsers, writing <br /> instead
works better in XHTML and XML applications.
HTML links are defined with the <a> tag.
Example
<a> href="http://www.w3schools.com">This is a
link</a>
Note: The link address is specified in the href
attribute.
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and
each row is divided into data cells (with the <td>
tag). td stands for "table data," and holds the
content of a data cell. A <td> tag can contain text,
links, images, lists, forms, other tables, etc.
Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How the HTML code above looks in a browser:
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2
Colors are displayed combining RED, GREEN, and BLUE light.
Color Values
HTML colors are defined using a hexadecimal notation (HEX)
for the combination of Red, Green, and Blue color values
(RGB).
16 Million Different Colors
The combination of Red, Green, and Blue values from 0 to 255,
gives more than 16 million different colors (256 x 256 x 256).
If you look at the color table below, you will see
the result of varying the red light from 0 to 255,
while keeping the green and blue light at zero.
Color Names Supported by All Browsers
147 color names are defined in the HTML and
CSS color specification (16 basic color names
plus 130 more).
AliceBlue  #F0F8FF
At My Slied you will find complete
references about tags, colornames,
entities, character-sets, URL
encoding, language codes and more.

More Related Content

What's hot (20)

Html
HtmlHtml
Html
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
HTML Text formatting tags
HTML Text formatting tagsHTML Text formatting tags
HTML Text formatting tags
 
Html ppt
Html pptHtml ppt
Html ppt
 
Presentation on HTML
Presentation on HTMLPresentation on HTML
Presentation on HTML
 
Html example
Html exampleHtml example
Html example
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html basics
Html basicsHtml basics
Html basics
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html1
Html1Html1
Html1
 
CSS
CSSCSS
CSS
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Html basics
Html basicsHtml basics
Html basics
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 

Viewers also liked

Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...
Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...
Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...dezyneecole
 
Html project report12
Html project report12Html project report12
Html project report12varunmaini123
 
Html project on website of mobile store
Html project on website of mobile storeHtml project on website of mobile store
Html project on website of mobile storeMonika Kadam
 

Viewers also liked (7)

Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...
Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...
Chandni Sharma,Project on HTML and CSS, student final year BCA, Dezyne E'cole...
 
Html project report12
Html project report12Html project report12
Html project report12
 
HTML
HTML HTML
HTML
 
Html project on website of mobile store
Html project on website of mobile storeHtml project on website of mobile store
Html project on website of mobile store
 
Complete-Mini-Project-Report
Complete-Mini-Project-ReportComplete-Mini-Project-Report
Complete-Mini-Project-Report
 
Project Report
Project ReportProject Report
Project Report
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 

Similar to Html project (20)

Html introduction
Html introductionHtml introduction
Html introduction
 
Html notes
Html notesHtml notes
Html notes
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Html basics
Html basicsHtml basics
Html basics
 
HTML Presentation
HTML Presentation HTML Presentation
HTML Presentation
 
htmlnotes-180924151434.pdf dafdkzndsvkdvdd
htmlnotes-180924151434.pdf dafdkzndsvkdvddhtmlnotes-180924151434.pdf dafdkzndsvkdvdd
htmlnotes-180924151434.pdf dafdkzndsvkdvdd
 
htmlnotes Which tells about all the basic
htmlnotes Which tells about all the basichtmlnotes Which tells about all the basic
htmlnotes Which tells about all the basic
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html_Day_One (W3Schools)
Html_Day_One (W3Schools)Html_Day_One (W3Schools)
Html_Day_One (W3Schools)
 
Tm 1st quarter - 1st meeting
Tm   1st quarter - 1st meetingTm   1st quarter - 1st meeting
Tm 1st quarter - 1st meeting
 
Html tags
Html tagsHtml tags
Html tags
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Html
HtmlHtml
Html
 
1. HTML
1. HTML1. HTML
1. HTML
 
html.pdf
html.pdfhtml.pdf
html.pdf
 
Html basics NOTE
Html basics NOTEHtml basics NOTE
Html basics NOTE
 
Html 1
Html 1Html 1
Html 1
 
Html 5
Html 5Html 5
Html 5
 

Recently uploaded

IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxAbida Shariff
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...Product School
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsStefano
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityScyllaDB
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaRTTS
 
The architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdfThe architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdfalexjohnson7307
 
In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsExpeed Software
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backElena Simperl
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Product School
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2DianaGray10
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomCzechDreamin
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsPaul Groth
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...CzechDreamin
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCzechDreamin
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka DoktorováCzechDreamin
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...Product School
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfChristopherTHyatt
 

Recently uploaded (20)

IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
The architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdfThe architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdf
 
In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT Professionals
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 

Html project

  • 2. HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages
  • 3. HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags
  • 4.  HTML documents describe web pages  HTML documents contain HTML tags and plain text  HTML documents are also called web pages  The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:  <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>  Example Explained  The text between <html> and </html> describes the web page  The text between <body> and </body> is the visible page content  The text between <h1> and </h1> is displayed as a heading  The text between <p> and </p> is displayed as a paragraph
  • 5. HTML can be written and edited using many different editors like Dreamweaver and Visual Studio. However, in this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe using a plain text editor is the best way to learn HTML.
  • 6. When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
  • 7. HTML headings are defined with the <h1> to <h6> tags. Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> Headings Are Important Use HTML headings for headings only. Don't use headings to make text BIG or bold. Search engines use your headings to index the structure and content of your web pages. Since users may skim your pages by its headings, it is important to use headings to show the document structure. H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.
  • 8. HTML paragraphs are defined with the <p> tag. Example <p>This is a paragraph.</p> <p>This is another paragraph.</p> Don't Forget the End Tag Most browsers will display HTML correctly even if you forget the end tag:
  • 9. Example <p>This is a paragraph <p>This is another paragraph The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors. Note: Future version of HTML will not allow you to skip end tags. HTML Line Breaks Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:
  • 10. Example <p>This is<br />a para<br />graph with line breaks</p> The <br /> element is an empty HTML element. It has no end tag. <br> or <br /> In XHTML, XML, elements with no end tag (closing tag) are not allowed. Even if <br> works in all browsers, writing <br /> instead works better in XHTML and XML applications.
  • 11. HTML links are defined with the <a> tag. Example <a> href="http://www.w3schools.com">This is a link</a> Note: The link address is specified in the href attribute.
  • 12. Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
  • 13. Table Example <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> How the HTML code above looks in a browser: row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2
  • 14. Colors are displayed combining RED, GREEN, and BLUE light. Color Values HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). 16 Million Different Colors The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million different colors (256 x 256 x 256).
  • 15. If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.
  • 16. Color Names Supported by All Browsers 147 color names are defined in the HTML and CSS color specification (16 basic color names plus 130 more). AliceBlue  #F0F8FF
  • 17. At My Slied you will find complete references about tags, colornames, entities, character-sets, URL encoding, language codes and more.