SlideShare a Scribd company logo
1 of 48
Download to read offline
Hyper Text Markup Language

HTML
HTML INTRODUCTION


Example Explained
<!DOCTYPE html>
<html>
•The DOCTYPE declaration defines the
document type
<body>
<h1>My First Heading</h1> •The text between <html> and </html>
describes the web page
<p>My first paragraph.</p> •The text between <body> and </body> is
the visible page content
</body>
•The text between <h1> and </h1> is
</html>
displayed as a heading
•The text between <p> and </p> is
displayed as a paragraph
WHAT IS HTML?









HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describes document content
HTML documents contain HTML tags and
plain text
HTML documents are also called web pages
HTML TAGS







HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) 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
The end tag is written like the start tag, with
a forward slash before the tag name
Start and end tags are also called opening
tags and closing tags
HTML ELEMENTS
"HTML tags" and "HTML elements" are often
used to describe the same thing.
 But strictly speaking, an HTML element is
everything between the start tag and the end
tag, including the tags:
 HTML Element:


 <p>This

is a paragraph.</p>
WEB BROWSERS


The purpose of a web browser (such as Google Chrome,
Internet Explorer, Firefox, Safari) 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 VERSIONS


Since the early days of the web, there have been many versions of
HTML:
Version
HTML
HTML+
HTML 2.0
HTML 3.2
HTML 4.01
XHTML 1.0
HTML5
XHTML5

Year
1991
1993
1995
1997
1999
2000
2012
2013
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.
COMMON DECLARATIONS








HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
TAGS
<html> </html>
 <body> </body>


 Bgcolor
 Background
 Topmargin
 Leftmargin
 Rightmargin
 bottommargin
<head></head>
 <title></title>
 <p></p>


 Align
 left,right,center
HTML COMMENT <!-







The comment tag is used to insert comments in the source code.
Comments are not displayed in the browsers.
You can use comments to explain your code, which can help you
when you edit the source code at a later date. This is especially
useful if you have a lot of code.
It is also a good practice to use the comment tag to "hide" scripts
from browsers without support for it (so they don't show them as
plain text):

<!--This can be viewed in the HTML part of a
document-->
<!DOCTYPE>


The <!DOCTYPE> declaration must be the very first thing in your HTML document,
before the <html> tag.



The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web
browser about what version of HTML the page is written in.



In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01
was based on SGML. The DTD specifies the rules for the markup language, so that

the browsers render the content correctly.


HTML5 is not based on SGML, and therefore does not require a reference to a DTD.



<!DOCTYPE html>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE>


HTML 5



<!DOCTYPE html>



HTML 4.01 Strict



This DTD contains all HTML elements and attributes, but does NOT INCLUDE
presentational or deprecated elements (like font). Framesets are not allowed.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">



HTML 4.01 Transitional



This DTD contains all HTML elements and attributes, INCLUDING presentational and
deprecated elements (like font). Framesets are not allowed.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE>


HTML 4.01 Frameset



This DTD is equal to HTML 4.01 Transitional, but allows the use of
frameset content.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">






XHTML 1.0 Strict
This DTD contains all HTML elements and attributes, but does NOT
INCLUDE presentational or deprecated elements (like font). Framesets
are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE>















XHTML 1.0 Transitional
This DTD contains all HTML elements and attributes, INCLUDING
presentational and deprecated elements (like font). Framesets are not allowed.
The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset
content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for
example to provide ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML EDITORS
Writing HTML Using Notepad or TextEdit
 HTML can be edited by using a professional
HTML editor like:


Adobe Dreamweaver
 Microsoft Expression Web
 CoffeeCup HTML Editor




However, for learning HTML we recommend a
text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good
way to learn HTML.
FOLLOW THE 4 STEPS BELOW TO CREATE YOUR
FIRST WEB PAGE WITH NOTEPAD.
STEP 1 : START NOTEPAD
To start Notepad go to:
 Start
All Programs
Accessories
Notepad

STEP 2: EDIT YOUR HTML WITH NOTEPAD


Type your HTML code into your Notepad:
STEP 3: SAVE YOUR HTML
Select Save as.. in Notepad's file menu.
 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.
 Save the file in a folder that is easy to
remember.

STEP 4 : RUN THE HTML IN YOUR BROWSER




Start your web browser and open your html file
from the File, Open menu, or just browse the folder
and double-click your HTML file.
The result should look much like this:
<FONT> </FONT>


Attribute
 Color
 Size
 Face
TAGS FOR FORMATTING
<b></b>
 <i></i>
 <u></u>
 <strike></strike>
 <sub></sub>
 <sup></sup>
 <tt></tt>
 <pre></pre>

HEADING LEVEL
<h1></h1>
 <h2></h2>
 <h3></h3>
 <h4></h4>
 <h5></h5>
 <h6></h6>

<IMG SRC=“”>
 Attributes
 Width
 Height
 border
HORIZONTAL RULE


<hr width="25%" color="#6699ff" size="6" />
<MARQUEE></MARQUEE>
Bgcolor
 Scrollamount
 Width
 Height
 Direction (up,down,left,right)
 Loop

MENU


<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>
ORDER LIST


Attributes
 Start
 Type

<ol>
 <li>one</li>
 <li>two</li>
 </ol>


A,a,i,I,1
UNORDERLIST


Attributes
 Start
 Type

<ul>
 <li>one</li>
 <li>two</li>
 </ul>


circle,square,disc
DEFINITION TERM




Definition Description, Definition List, Definition
List
<dd>


<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
HTML EMBED OBJECT


<embed src="yourfile.mid" width="100%" height="60"
align="center">



<embed src="yourfile.mid" autostart="true" hidden="false"
loop="false">
<noembed><bgsound src="yourfile.mid"
loop="1"></noembed>
<OBJECT> TAG








The <object> tag defines an embedded object within an HTML
document. Use this element to embed multimedia (like audio, video,
Java applets, ActiveX, PDF, and Flash) in your web pages.
You can also use the <object> tag to embed another webpage into your
HTML document.
You can use the <param> tag to pass parameters to plugins that have
been embedded with the <object> tag.
<object width="400" height="400“
data="helloworld.swf"></object>
<TABLE></TABLE>


Attributes
 bgcolor
 Width
 Height
 Cellspacing
 Cellpadding
 background

<tr></tr>
<td></td>
<th></th>
ANCHOR TAG


The <a> tag defines a hyperlink, which is
used to link from one page to another.
 <a

href=“”>Clickme</a>
 <a href=“”><img src=“”></a>


By default, links will appear as follows in all browsers:




An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
<BASEFONT> TAG


HTML <basefont> Tag. Not Supported in HTML5

 <basefont

color="red" size="5" />
<STYLE> TAG


The <style> tag is used to define style information for an

HTML document.


Inside the <style> element you specify how HTML elements
should render in a browser.



Each HTML document can contain multiple <style> tags.
STYLE


<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
<BLOCKQUOTE> TAG






The <blockquote> tag specifies a section that is quoted from
another source.
The <basefont> tag is not supported in HTML5. Use CSS instead.
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world’s leading
conservation organization, WWF works in 100 countries and is supported by 1.2
million members in the United States and close to 5 million globally.
</blockquote>
FORM
<form></form>
 <form
action="mailto:you@yourdomain.com">
Action


 Method

post/get
INPUT TAG
<input type=“text”>
 <input type=“radio”>
 <input type=“checkbox”>
 <input type=“password”>
 <textarea></textarea>
 <select></select>


(allow=multiple) for list
 Size to define number of fields




<input type=“file”>

(rows,cols)
FIELDSET




The <fieldset> tag is used to group related elements in a
form.
The <fieldset> tag draws a box around the related elements.


<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
FRAMESET
<frameset rows=“50%,50%”>
 <frame src=“”>
 <frame src=“”>
 </frameset>

IFRAME
<iframe src=“” width=400 height=400>
 </iframe>

MAP TAG


The <map> tag is used to define a client-side image-map.

An image-map is an image with clickable areas.


The required name attribute of the <map> element is
associated with the <img>'s usemap attribute and creates a

relationship between the image and the map.


The <map> element contains a number of <area> elements,
that defines the clickable areas in the image map.
IMAGE MAP


<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm"
alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
META TAG


<meta name="Description" content="Description of your site">
<meta name="keywords" content="keywords describing your site">



<meta HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain.com/">



<meta http-equiv="Pragma" content="no-cache">
<meta name="rating" content="General">
<meta name="robots" content="all">
<meta name="robots" content="noindex,follow">





More Related Content

What's hot

introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technologyvikram singh
 
IP addressing seminar ppt
IP addressing seminar pptIP addressing seminar ppt
IP addressing seminar pptSmriti Rastogi
 
WWW or World Wide Web
WWW or World Wide WebWWW or World Wide Web
WWW or World Wide WebSaransh Arora
 
Presentation on HTML
Presentation on HTMLPresentation on HTML
Presentation on HTMLsatvirsandhu9
 
Database Programming
Database ProgrammingDatabase Programming
Database ProgrammingHenry Osborne
 
Basic Internet Concepts
Basic Internet ConceptsBasic Internet Concepts
Basic Internet ConceptsKiran Budhrani
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html BasicsMcSoftsis
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)AakankshaR
 
Internet tools and services
Internet tools and servicesInternet tools and services
Internet tools and serviceslearnt
 
World wide web An Introduction
World wide web An IntroductionWorld wide web An Introduction
World wide web An IntroductionSidrah Noor
 
Difference between internet and www
Difference between internet and wwwDifference between internet and www
Difference between internet and wwwDevika Rangnekar
 
UNDERSTANDING MARKUP LANGUAGES.pptx
UNDERSTANDING MARKUP LANGUAGES.pptxUNDERSTANDING MARKUP LANGUAGES.pptx
UNDERSTANDING MARKUP LANGUAGES.pptxAnbu1416
 

What's hot (20)

introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
Sgml
SgmlSgml
Sgml
 
IP addressing seminar ppt
IP addressing seminar pptIP addressing seminar ppt
IP addressing seminar ppt
 
internet protocol
internet protocolinternet protocol
internet protocol
 
WWW or World Wide Web
WWW or World Wide WebWWW or World Wide Web
WWW or World Wide Web
 
Presentation on HTML
Presentation on HTMLPresentation on HTML
Presentation on HTML
 
Database Programming
Database ProgrammingDatabase Programming
Database Programming
 
Web technology
Web technologyWeb technology
Web technology
 
HTTP & HTML & Web
HTTP & HTML & WebHTTP & HTML & Web
HTTP & HTML & Web
 
Basic Internet Concepts
Basic Internet ConceptsBasic Internet Concepts
Basic Internet Concepts
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Internet tools and services
Internet tools and servicesInternet tools and services
Internet tools and services
 
World wide web An Introduction
World wide web An IntroductionWorld wide web An Introduction
World wide web An Introduction
 
HTTP
HTTPHTTP
HTTP
 
Web servers
Web serversWeb servers
Web servers
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Difference between internet and www
Difference between internet and wwwDifference between internet and www
Difference between internet and www
 
Domain name system
Domain name systemDomain name system
Domain name system
 
UNDERSTANDING MARKUP LANGUAGES.pptx
UNDERSTANDING MARKUP LANGUAGES.pptxUNDERSTANDING MARKUP LANGUAGES.pptx
UNDERSTANDING MARKUP LANGUAGES.pptx
 

Similar to HTML (Hyper Text Markup Language)

1 introduction to html
1 introduction to html1 introduction to html
1 introduction to htmlmyrajendra
 
introdution-to-html.pptx
introdution-to-html.pptxintrodution-to-html.pptx
introdution-to-html.pptxdatapro2
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.pptSri Latha
 
introdution-to-html (1).ppt
introdution-to-html (1).pptintrodution-to-html (1).ppt
introdution-to-html (1).pptF3ZONE1
 
introdution-to-html.ppt jahjdbsfhbdhdbjkgbe
introdution-to-html.ppt jahjdbsfhbdhdbjkgbeintrodution-to-html.ppt jahjdbsfhbdhdbjkgbe
introdution-to-html.ppt jahjdbsfhbdhdbjkgbeJamaicaCabrales
 
introdution-to-html programming and dhtml
introdution-to-html programming and dhtmlintrodution-to-html programming and dhtml
introdution-to-html programming and dhtmlsanthosh sriprada
 
introdution-to-html.ppt for bca ,bsc students
introdution-to-html.ppt for bca ,bsc studentsintrodution-to-html.ppt for bca ,bsc students
introdution-to-html.ppt for bca ,bsc studentsMaheshMutnale1
 
introdution-to-html-introdution-to-html.ppt
introdution-to-html-introdution-to-html.pptintrodution-to-html-introdution-to-html.ppt
introdution-to-html-introdution-to-html.pptmarkgilvinson
 
introdution-to-html.ppt NJBJGHGJHGGJGJG
introdution-to-html.ppt  NJBJGHGJHGGJGJGintrodution-to-html.ppt  NJBJGHGJHGGJGJG
introdution-to-html.ppt NJBJGHGJHGGJGJGAMRITHA16
 
introduction to html.ppt
introduction to html.pptintroduction to html.ppt
introduction to html.pptVincentAcapen
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.pptGezahegnHailu1
 
introdution-to-html (1).ppt
introdution-to-html (1).pptintrodution-to-html (1).ppt
introdution-to-html (1).pptMarktero2
 
introdution-to-html_jayarao27_11_22.pptx
introdution-to-html_jayarao27_11_22.pptxintrodution-to-html_jayarao27_11_22.pptx
introdution-to-html_jayarao27_11_22.pptxjayarao21
 

Similar to HTML (Hyper Text Markup Language) (20)

HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
 
1 introduction to html
1 introduction to html1 introduction to html
1 introduction to html
 
introdution-to-html.pptx
introdution-to-html.pptxintrodution-to-html.pptx
introdution-to-html.pptx
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
summary html.ppt
summary html.pptsummary html.ppt
summary html.ppt
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
introdution-to-html (1).ppt
introdution-to-html (1).pptintrodution-to-html (1).ppt
introdution-to-html (1).ppt
 
introdution-to-html.ppt jahjdbsfhbdhdbjkgbe
introdution-to-html.ppt jahjdbsfhbdhdbjkgbeintrodution-to-html.ppt jahjdbsfhbdhdbjkgbe
introdution-to-html.ppt jahjdbsfhbdhdbjkgbe
 
introdution-to-html programming and dhtml
introdution-to-html programming and dhtmlintrodution-to-html programming and dhtml
introdution-to-html programming and dhtml
 
introdution-to-html.ppt for bca ,bsc students
introdution-to-html.ppt for bca ,bsc studentsintrodution-to-html.ppt for bca ,bsc students
introdution-to-html.ppt for bca ,bsc students
 
introdution-to-html-introdution-to-html.ppt
introdution-to-html-introdution-to-html.pptintrodution-to-html-introdution-to-html.ppt
introdution-to-html-introdution-to-html.ppt
 
html.pptx
html.pptxhtml.pptx
html.pptx
 
introdution-to-html.ppt NJBJGHGJHGGJGJG
introdution-to-html.ppt  NJBJGHGJHGGJGJGintrodution-to-html.ppt  NJBJGHGJHGGJGJG
introdution-to-html.ppt NJBJGHGJHGGJGJG
 
introduction to html.ppt
introduction to html.pptintroduction to html.ppt
introduction to html.ppt
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
Html basics
Html basicsHtml basics
Html basics
 
Html introduction
Html introductionHtml introduction
Html introduction
 
introdution-to-html (1).ppt
introdution-to-html (1).pptintrodution-to-html (1).ppt
introdution-to-html (1).ppt
 
introdution-to-html_jayarao27_11_22.pptx
introdution-to-html_jayarao27_11_22.pptxintrodution-to-html_jayarao27_11_22.pptx
introdution-to-html_jayarao27_11_22.pptx
 

More from actanimation

More from actanimation (10)

Web Designing Kit
Web Designing KitWeb Designing Kit
Web Designing Kit
 
Internet Technology
Internet TechnologyInternet Technology
Internet Technology
 
Financial Accouting
Financial AccoutingFinancial Accouting
Financial Accouting
 
Copmuter Languages
Copmuter LanguagesCopmuter Languages
Copmuter Languages
 
Developers
DevelopersDevelopers
Developers
 
Computer Viruses
Computer VirusesComputer Viruses
Computer Viruses
 
Computer Fundamental
Computer FundamentalComputer Fundamental
Computer Fundamental
 
AutoCAD
AutoCADAutoCAD
AutoCAD
 
Java script by Act Academy
Java script by Act AcademyJava script by Act Academy
Java script by Act Academy
 
Act academy
Act academyAct academy
Act academy
 

Recently uploaded

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 

Recently uploaded (20)

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 

HTML (Hyper Text Markup Language)

  • 1. Hyper Text Markup Language HTML
  • 2. HTML INTRODUCTION  Example Explained <!DOCTYPE html> <html> •The DOCTYPE declaration defines the document type <body> <h1>My First Heading</h1> •The text between <html> and </html> describes the web page <p>My first paragraph.</p> •The text between <body> and </body> is the visible page content </body> •The text between <h1> and </h1> is </html> displayed as a heading •The text between <p> and </p> is displayed as a paragraph
  • 3. WHAT IS HTML?        HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describes document content HTML documents contain HTML tags and plain text HTML documents are also called web pages
  • 4. HTML TAGS       HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) 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 The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags
  • 5. HTML ELEMENTS "HTML tags" and "HTML elements" are often used to describe the same thing.  But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:  HTML Element:   <p>This is a paragraph.</p>
  • 6. WEB BROWSERS  The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) 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:
  • 7. HTML VERSIONS  Since the early days of the web, there have been many versions of HTML: Version HTML HTML+ HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 HTML5 XHTML5 Year 1991 1993 1995 1997 1999 2000 2012 2013
  • 8. 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.
  • 9. COMMON DECLARATIONS       HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 10. TAGS <html> </html>  <body> </body>   Bgcolor  Background  Topmargin  Leftmargin  Rightmargin  bottommargin
  • 12. HTML COMMENT <!-    The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code. It is also a good practice to use the comment tag to "hide" scripts from browsers without support for it (so they don't show them as plain text): <!--This can be viewed in the HTML part of a document-->
  • 13. <!DOCTYPE>  The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.  The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.  In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.  HTML5 is not based on SGML, and therefore does not require a reference to a DTD.  <!DOCTYPE html>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • 14. <!DOCTYPE>  HTML 5  <!DOCTYPE html>  HTML 4.01 Strict  This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  HTML 4.01 Transitional  This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • 15. <!DOCTYPE>  HTML 4.01 Frameset  This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">    XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 16. <!DOCTYPE>          XHTML 1.0 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • 17. HTML EDITORS Writing HTML Using Notepad or TextEdit  HTML can be edited by using a professional HTML editor like:  Adobe Dreamweaver  Microsoft Expression Web  CoffeeCup HTML Editor   However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML.
  • 18. FOLLOW THE 4 STEPS BELOW TO CREATE YOUR FIRST WEB PAGE WITH NOTEPAD.
  • 19. STEP 1 : START NOTEPAD To start Notepad go to:  Start All Programs Accessories Notepad 
  • 20. STEP 2: EDIT YOUR HTML WITH NOTEPAD  Type your HTML code into your Notepad:
  • 21. STEP 3: SAVE YOUR HTML Select Save as.. in Notepad's file menu.  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.  Save the file in a folder that is easy to remember. 
  • 22. STEP 4 : RUN THE HTML IN YOUR BROWSER   Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file. The result should look much like this:
  • 24. TAGS FOR FORMATTING <b></b>  <i></i>  <u></u>  <strike></strike>  <sub></sub>  <sup></sup>  <tt></tt>  <pre></pre> 
  • 25. HEADING LEVEL <h1></h1>  <h2></h2>  <h3></h3>  <h4></h4>  <h5></h5>  <h6></h6> 
  • 26. <IMG SRC=“”>  Attributes  Width  Height  border
  • 27. HORIZONTAL RULE  <hr width="25%" color="#6699ff" size="6" />
  • 28. <MARQUEE></MARQUEE> Bgcolor  Scrollamount  Width  Height  Direction (up,down,left,right)  Loop 
  • 29. MENU  <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </menu>
  • 30. ORDER LIST  Attributes  Start  Type <ol>  <li>one</li>  <li>two</li>  </ol>  A,a,i,I,1
  • 31. UNORDERLIST  Attributes  Start  Type <ul>  <li>one</li>  <li>two</li>  </ul>  circle,square,disc
  • 32. DEFINITION TERM   Definition Description, Definition List, Definition List <dd>  <dl> <dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl>
  • 33. HTML EMBED OBJECT  <embed src="yourfile.mid" width="100%" height="60" align="center">  <embed src="yourfile.mid" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed>
  • 34. <OBJECT> TAG     The <object> tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages. You can also use the <object> tag to embed another webpage into your HTML document. You can use the <param> tag to pass parameters to plugins that have been embedded with the <object> tag. <object width="400" height="400“ data="helloworld.swf"></object>
  • 35. <TABLE></TABLE>  Attributes  bgcolor  Width  Height  Cellspacing  Cellpadding  background <tr></tr> <td></td> <th></th>
  • 36. ANCHOR TAG  The <a> tag defines a hyperlink, which is used to link from one page to another.  <a href=“”>Clickme</a>  <a href=“”><img src=“”></a>  By default, links will appear as follows in all browsers:    An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red
  • 37. <BASEFONT> TAG  HTML <basefont> Tag. Not Supported in HTML5  <basefont color="red" size="5" />
  • 38. <STYLE> TAG  The <style> tag is used to define style information for an HTML document.  Inside the <style> element you specify how HTML elements should render in a browser.  Each HTML document can contain multiple <style> tags.
  • 39. STYLE  <html> <head> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>A heading</h1> <p>A paragraph.</p> </body> </html>
  • 40. <BLOCKQUOTE> TAG    The <blockquote> tag specifies a section that is quoted from another source. The <basefont> tag is not supported in HTML5. Use CSS instead. <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
  • 42. INPUT TAG <input type=“text”>  <input type=“radio”>  <input type=“checkbox”>  <input type=“password”>  <textarea></textarea>  <select></select>  (allow=multiple) for list  Size to define number of fields   <input type=“file”> (rows,cols)
  • 43. FIELDSET   The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.  <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>
  • 44. FRAMESET <frameset rows=“50%,50%”>  <frame src=“”>  <frame src=“”>  </frameset> 
  • 45. IFRAME <iframe src=“” width=400 height=400>  </iframe> 
  • 46. MAP TAG  The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.  The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.  The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.
  • 47. IMAGE MAP  <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>
  • 48. META TAG  <meta name="Description" content="Description of your site"> <meta name="keywords" content="keywords describing your site">  <meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/">  <meta http-equiv="Pragma" content="no-cache"> <meta name="rating" content="General"> <meta name="robots" content="all"> <meta name="robots" content="noindex,follow">   