HTML stands for HyperText Markup Language. It is used to design web pages using a markup language.
ssuser6478a8
150 views
17 slides
Feb 26, 2024
Slide 1 of 17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
About This Presentation
HTML stands for HyperText Markup Language. It is used to design web pages using a markup language.
Slide Content
History of HTML
HTMLstandsforHyperTextMarkupLanguage,
whichisthemostwidelyusedlanguageonWebto
developwebpages.
HTMLwascreatedbyBerners-Leeinlate1991
but"HTML2.0"wasthefirststandardHTML
specificationwhichwaspublishedin1995.
HTML4.01wasamajorversionofHTMLandit
waspublishedinlate1999.
ThoughHTML4.01versioniswidelyusedbut
currentlywearehavingHTML-5versionwhichisan
extensiontoHTML4.01,andthisversionwas
publishedin2012
HTMLstandsforHyperTextMarkupLanguage,
whichisthemostwidelyusedlanguageonWebto
developwebpages.
HTMLwascreatedbyBerners-Leeinlate1991
but"HTML2.0"wasthefirststandardHTML
specificationwhichwaspublishedin1995.
HTML4.01wasamajorversionofHTMLandit
waspublishedinlate1999.
ThoughHTML4.01versioniswidelyusedbut
currentlywearehavingHTML-5versionwhichisan
extensiontoHTML4.01,andthisversionwas
publishedin2012
HTML Versions
What is HTML?
•HTML stands for Hyper Text Markup Language
•HTML is a markup language
•A markup language is a set of markuptags
•The tags describedocument content
•HTML documents containHTMLtagsand plain
text
•HTML documents are also calledweb pages
•HTML stands for Hyper Text Markup Language
•HTML is a markup language
•A markup language is a set of markuptags
•The tags describedocument content
•HTML documents containHTMLtagsand plain
text
•HTML documents are also calledweb pages
•HypertextreferstothewayinwhichWeb
pages(HTMLdocuments)arelinkedtogether.
Thusthelinkavailableonawebpageare
calledHypertext.
•Asitsnamesuggests,HTMLisaMarkup
LanguagewhichmeansyouuseHTMLto
simply"markup"atextdocumentwithtags
thattellaWebbrowserhowtostructureitto
display.
pages(HTMLdocuments)arelinkedtogether.
Thusthelinkavailableonawebpageare
calledHypertext.
•Asitsnamesuggests,HTMLisaMarkup
LanguagewhichmeansyouuseHTMLto
simply"markup"atextdocumentwithtags
thattellaWebbrowserhowtostructureitto
display.
•Originally,HTMLwasdevelopedwiththe
intentofdefiningthestructureofdocuments
likeheadings,paragraphs,lists,andsoforthto
facilitatethesharingofscientificinformation
betweenresearchers.
•Now,HTMLisbeingwidelyusedtoformat
webpageswiththehelpofdifferenttags
availableinHTMLlanguage.
intentofdefiningthestructureofdocuments
likeheadings,paragraphs,lists,andsoforthto
facilitatethesharingofscientificinformation
betweenresearchers.
•Now,HTMLisbeingwidelyusedtoformat
webpageswiththehelpofdifferenttags
availableinHTMLlanguage.
HTML Page Structure
<!DOCTYPE html>
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration helps the browser to
display a web page correctly.
There are many different documents on the web,
and a browser can only display an HTML page
100% correctly if it knows the HTML type and
version used.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
The <!DOCTYPE> declaration helps the browser to
display a web page correctly.
There are many different documents on the web,
and a browser can only display an HTML page
100% correctly if it knows the HTML type and
version used.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
•TheDOCTYPEdeclarationdefinesthe
documenttype.The<!DOCTYPE>declaration
helpsthebrowsertodisplayawebpage
correctly.
•The<!DOCTYPE>declarationtagisusedby
thewebbrowsertounderstandtheversion
oftheHTMLusedinthedocument.Current
versionofHTMLis5anditmakesuseofthe
followingdeclaration:
<!DOCTYPEhtml>
•Therearemanyotherdeclarationtypeswhich
canbeusedinHTMLdocumentdependingon
whatversionofHTMLisbeingused.
documenttype.The<!DOCTYPE>declaration
helpsthebrowsertodisplayawebpage
correctly.
•The<!DOCTYPE>declarationtagisusedby
thewebbrowsertounderstandtheversion
oftheHTMLusedinthedocument.Current
versionofHTMLis5anditmakesuseofthe
followingdeclaration:
<!DOCTYPEhtml>
•Therearemanyotherdeclarationtypeswhich
canbeusedinHTMLdocumentdependingon
whatversionofHTMLisbeingused.
•Thetextbetween<html>and</html>
describesthewebpage.
•Thetextbetween<head>tagrepresentsthe
document'sheaderwhichcankeepother
HTMLtagslike<title>,<link>etc.
•Thetextbetween<body>and</body>isthe
visiblepagecontent
•Thetextbetween<h1>and</h1>isdisplayed
asaheading
•Thetextbetween<p>and</p>isdisplayedas
aparagraph
describesthewebpage.
•Thetextbetween<head>tagrepresentsthe
document'sheaderwhichcankeepother
HTMLtagslike<title>,<link>etc.
•Thetextbetween<body>and</body>isthe
visiblepagecontent
•Thetextbetween<h1>and</h1>isdisplayed
asaheading
•Thetextbetween<p>and</p>isdisplayedas
aparagraph
HTML Attributes
•HTMLelementscanhaveattributes
•Attributesprovideadditionalinformation
aboutanelement
•Attributesarealwaysspecifiedinthestarttag
•Attributescomeinname/valuepairslike:
name="value"
•HTMLelementscanhaveattributes
•Attributesprovideadditionalinformation
aboutanelement
•Attributesarealwaysspecifiedinthestarttag
•Attributescomeinname/valuepairslike:
name="value"
Attribute Example
<ahref="http://www.google.com">
This is a link</a>
<ahref="http://www.google.com">
This is a link</a>
HTML Headings
•Any document starts with a heading. You can use
different sizes for your headings. HTML also has
six levels of headings, which use the
elements<h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser
adds one line before and one line after that
heading.
•<h1> defines the most important heading. <h6>
defines the least important heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
•Any document starts with a heading. You can use
different sizes for your headings. HTML also has
six levels of headings, which use the
elements<h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser
adds one line before and one line after that
heading.
•<h1> defines the most important heading. <h6>
defines the least important heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Lines
•Horizontallinesareusedtovisuallybreak
upsectionsofadocument.The<hr>tag
createsalinefromthecurrentpositionin
thedocumenttotherightmarginand
breaksthelineaccordingly.
•The <hr>tag creates a horizontal line in
an HTML page.
•The hr element can be used to separate
content.
•Horizontallinesareusedtovisuallybreak
upsectionsofadocument.The<hr>tag
createsalinefromthecurrentpositionin
thedocumenttotherightmarginand
breaksthelineaccordingly.
•The <hr>tag creates a horizontal line in
an HTML page.
•The hr element can be used to separate
content.
Centering Content
•You can use<center>tag to put any content in the center
of the page or any table cell.
<!DOCTYPE html>
<html>
<head>
<title>CentringContent Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
•You can use<center>tag to put any content in the center
of the page or any table cell.
<!DOCTYPE html>
<html>
<head>
<title>CentringContent Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
HTML Paragraphs
•HTMLdocumentsaredividedintoparagraphs.
•The<p>tagoffersawaytostructureyourtext
intodifferentparagraphs.Eachparagraphof
textshouldgoinbetweenanopening<p>and
aclosing</p>tagasshownbelowinthe
example:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
•HTMLdocumentsaredividedintoparagraphs.
•The<p>tagoffersawaytostructureyourtext
intodifferentparagraphs.Eachparagraphof
textshouldgoinbetweenanopening<p>and
aclosing</p>tagasshownbelowinthe
example:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Line Breaks
•Usethe<br>tagifyouwantalinebreak(anew
line)withoutstartinganewparagraph.
•Wheneveryouusethe<br/>element,anything
followingitstartsfromthenextline.Thistagis
anexampleofanemptyelement,whereyoudo
notneedopeningandclosingtags,asthereis
nothingtogoinbetweenthem.
•The<br/>taghasaspacebetweenthe
charactersbrandtheforwardslash.Ifyouomit
thisspace,olderbrowserswillhavetrouble
renderingthelinebreak,whileifyoumissthe
forwardslashcharacterandjustuse<br>itis
notvalidinXHTML.
•Usethe<br>tagifyouwantalinebreak(anew
line)withoutstartinganewparagraph.
•Wheneveryouusethe<br/>element,anything
followingitstartsfromthenextline.Thistagis
anexampleofanemptyelement,whereyoudo
notneedopeningandclosingtags,asthereis
nothingtogoinbetweenthem.
•The<br/>taghasaspacebetweenthe
charactersbrandtheforwardslash.Ifyouomit
thisspace,olderbrowserswillhavetrouble
renderingthelinebreak,whileifyoumissthe
forwardslashcharacterandjustuse<br>itis
notvalidinXHTML.
Tags
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 150
- Slides 17
- Age 645 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
31 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
28 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
24 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views