SlideShare a Scribd company logo
1 of 30
Introduction to html Y.Ravindra Reddy
https://www.seoskills.in
HTML Overview
https://www.seoskills.in
HTML
Hyper Text Markup Language
https://www.seoskills.in
• HTML stands for Hyper Text Markup Language.
• It is developed by Tim Berner's Lee at W3C (World Wide WebConsortium).
• It is used to create Static Web pages.
• It is a global language i.e., it can be understood by all browsers.
• It is a markup language.
• It is not case-sensitive language.
• The latest version of HTML is HTML 5
• HTML documents are also called as web pages.
• HTML pages can run on any browser.
https://www.seoskills.in
• HTML documents are simply text documents with a specific form
• Documents comprised of content and markup tags
• Content: actual information being conveyed
• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension
• An HTML file can be created using a simple text editor
https://www.seoskills.in
HTML Tags
https://www.seoskills.in
• HTML tags are used to mark-up HTML elements
• Surrounded by angle brackets < and >
• HTML tags normally come in pairs, like <tagname> (start tag) and </tagname>
(end tag)
• The text between the start and end tags is the element content
• Not case-sensitive
• Follow the latest web standards:
• Use lowercase tags
https://www.seoskills.in
Tag Attributes
https://www.seoskills.in
• Tags can have attributes that provide additional information to an HTML element
• Attributes always come in name/value pairs like: name=“value”
• Attributes are always specified in the start tag
• Attribute values should always be enclosed in quotes. Double quotes are most
common.
• Also case-insensitive: however, lowercase is recommended
• <tagname a1=“v1” a2=“v2”></tagname>
• For example, <table border=“0”> is a start tag that defines a table that has no borders
https://www.seoskills.in
HTML Document Structure
https://www.seoskills.in
Entire document enclosed within <html> and </html> tags
Two subparts:
1. Head
Enclosed within <head> and </head>
Within the head, more tags can be used to specify title of the page, meta-information,
etc.
2. Body
Enclosed within <body> and </body>
Within the body, content is to be displayed
Other tags can be embedded in the body
https://www.seoskills.in
What We’ll Study?
https://www.seoskills.in
• HTML Elements
• HTML Headings
• HTML Paragraphs
• HTML Formatting
• HTML Styles
• HTML Images
• HTML Tables
• HTML Lists
• HTML Forms
• HTML Colors
https://www.seoskills.in
HTML Layout
https://www.seoskills.in
One common way is to use HTML tables to format the layout of an HTML page
The trick is to use a table without borders, and maybe a little extra cell-padding
• Keep screen resolution in mind
• Use color to define spaces
• Align your images
• Balance the graphics and text on a page
• Think about text width – scan length 7 – 11 words
• Centering text is inadvisable
• Here is the link: http://webdesign.about.com/od/layout/a/aa062104.htm
https://www.seoskills.in
HTML Frames
https://www.seoskills.in
HTML frames are a means of having several browser windows open within a
single larger window
Each HTML document is called a frame
Disadvantages:
Must keep track of more HTML documents
Difficult to print the entire page
https://www.seoskills.in
HTML Page Structure
https://www.seoskills.in
HTML Page Structure
https://www.seoskills.in
Below is a visualization of an HTML page structure:
<html>
<body>
<h1>This a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
https://www.seoskills.in
HTML Versions
https://www.seoskills.in
Since the early days of the web, there have been many versions of HTML
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
https://www.seoskills.in
The <!DOCTYPE> Declaration
https://www.seoskills.in
The <!DOCTYPE> Declaration
https://www.seoskills.in
The <!DOCTYPE> declaration helps the browser to display a web page orrectly.
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.
https://www.seoskills.in
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">
https://www.seoskills.in
HTML code can be written in:
• Notepad
• Notepad++
• Microsoft Visual Studio
• Adobe Dreamweaver
• Microsoft Expression Web
• Edit Plus
• Text Pad
• Notepad++ etc.
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.
https://www.seoskills.in
HTML and XHTML Full References
https://www.seoskills.in
Full Reference from W3schools:
http://www.w3schools.com/tags/
Test your HTML
http://www.w3schools.com/html/html_whyusehtml4.asp
https://www.seoskills.in
https://www.seoskills.in

More Related Content

What's hot (20)

Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Meta tags
Meta tagsMeta tags
Meta tags
 
Html coding
Html codingHtml coding
Html coding
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Hyperlinks in HTML
Hyperlinks in HTMLHyperlinks in HTML
Hyperlinks in HTML
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Html introduction
Html introductionHtml introduction
Html introduction
 
HTML practical file
HTML practical fileHTML practical file
HTML practical file
 
Basic html tags
Basic html tagsBasic html tags
Basic html tags
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
Intro Html
Intro HtmlIntro Html
Intro Html
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Html basics
Html basicsHtml basics
Html basics
 
Intro to html
Intro to htmlIntro to html
Intro to html
 

Similar to Introduction to html course digital markerters

Similar to Introduction to html course digital markerters (20)

HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
 
BITM3730Week1.pptx
BITM3730Week1.pptxBITM3730Week1.pptx
BITM3730Week1.pptx
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2
 
BITM3730Week3.pptx
BITM3730Week3.pptxBITM3730Week3.pptx
BITM3730Week3.pptx
 
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
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
 
Understanding the Web Page Layout
Understanding the Web Page LayoutUnderstanding the Web Page Layout
Understanding the Web Page Layout
 
Html5
Html5 Html5
Html5
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
mst_unit1.pptx
mst_unit1.pptxmst_unit1.pptx
mst_unit1.pptx
 
Origins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTMLOrigins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTML
 
Html5
Html5Html5
Html5
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
 
html
htmlhtml
html
 

More from SEO SKills

SEO Course outline - SEO SKILLS ACADEMY
SEO Course outline - SEO SKILLS ACADEMYSEO Course outline - SEO SKILLS ACADEMY
SEO Course outline - SEO SKILLS ACADEMYSEO SKills
 
Doodle art introduction
Doodle art   introductionDoodle art   introduction
Doodle art introductionSEO SKills
 
Html5 structure tags
Html5 structure tagsHtml5 structure tags
Html5 structure tagsSEO SKills
 
Html5 essentials
Html5 essentialsHtml5 essentials
Html5 essentialsSEO SKills
 
Introduction to web technologies
Introduction to web technologiesIntroduction to web technologies
Introduction to web technologiesSEO SKills
 
Adobe illustrator CC 2017 introduction _ SEOSKILLS Hyderabad
Adobe illustrator CC 2017 introduction  _ SEOSKILLS HyderabadAdobe illustrator CC 2017 introduction  _ SEOSKILLS Hyderabad
Adobe illustrator CC 2017 introduction _ SEOSKILLS HyderabadSEO SKills
 
Graphical user interface _ SEOSKILLS Hyderabad
Graphical user interface _ SEOSKILLS HyderabadGraphical user interface _ SEOSKILLS Hyderabad
Graphical user interface _ SEOSKILLS HyderabadSEO SKills
 
Creative process_ SEOSKILLS
Creative process_ SEOSKILLSCreative process_ SEOSKILLS
Creative process_ SEOSKILLSSEO SKills
 
History of computers
History of computersHistory of computers
History of computersSEO SKills
 
Types of software
Types of softwareTypes of software
Types of softwareSEO SKills
 
Introduction to color theory for Multimedia Students
Introduction to color  theory  for Multimedia StudentsIntroduction to color  theory  for Multimedia Students
Introduction to color theory for Multimedia StudentsSEO SKills
 
Overview of video file formats for Multimedia Students
Overview of video file formats for Multimedia StudentsOverview of video file formats for Multimedia Students
Overview of video file formats for Multimedia StudentsSEO SKills
 
introduction to audio formats - Multimedia Students
introduction to audio formats - Multimedia Studentsintroduction to audio formats - Multimedia Students
introduction to audio formats - Multimedia StudentsSEO SKills
 
Overview about multimedia for BMM Students and Teachers
Overview about multimedia  for BMM Students and TeachersOverview about multimedia  for BMM Students and Teachers
Overview about multimedia for BMM Students and TeachersSEO SKills
 
Networking fundamentals for multimedia students and teachers
Networking fundamentals for multimedia students and teachers Networking fundamentals for multimedia students and teachers
Networking fundamentals for multimedia students and teachers SEO SKills
 
Ms dos commands for Multimedia Students and Facultyes
Ms dos commands  for Multimedia Students and FacultyesMs dos commands  for Multimedia Students and Facultyes
Ms dos commands for Multimedia Students and FacultyesSEO SKills
 
Elements of digital images day06
Elements of digital images  day06Elements of digital images  day06
Elements of digital images day06SEO SKills
 
Computer fundamentals day02
Computer fundamentals  day02Computer fundamentals  day02
Computer fundamentals day02SEO SKills
 
Computer fundamentals for Multimedia Students
Computer fundamentals for Multimedia StudentsComputer fundamentals for Multimedia Students
Computer fundamentals for Multimedia StudentsSEO SKills
 
Best SEO Curse PPT
Best SEO Curse PPTBest SEO Curse PPT
Best SEO Curse PPTSEO SKills
 

More from SEO SKills (20)

SEO Course outline - SEO SKILLS ACADEMY
SEO Course outline - SEO SKILLS ACADEMYSEO Course outline - SEO SKILLS ACADEMY
SEO Course outline - SEO SKILLS ACADEMY
 
Doodle art introduction
Doodle art   introductionDoodle art   introduction
Doodle art introduction
 
Html5 structure tags
Html5 structure tagsHtml5 structure tags
Html5 structure tags
 
Html5 essentials
Html5 essentialsHtml5 essentials
Html5 essentials
 
Introduction to web technologies
Introduction to web technologiesIntroduction to web technologies
Introduction to web technologies
 
Adobe illustrator CC 2017 introduction _ SEOSKILLS Hyderabad
Adobe illustrator CC 2017 introduction  _ SEOSKILLS HyderabadAdobe illustrator CC 2017 introduction  _ SEOSKILLS Hyderabad
Adobe illustrator CC 2017 introduction _ SEOSKILLS Hyderabad
 
Graphical user interface _ SEOSKILLS Hyderabad
Graphical user interface _ SEOSKILLS HyderabadGraphical user interface _ SEOSKILLS Hyderabad
Graphical user interface _ SEOSKILLS Hyderabad
 
Creative process_ SEOSKILLS
Creative process_ SEOSKILLSCreative process_ SEOSKILLS
Creative process_ SEOSKILLS
 
History of computers
History of computersHistory of computers
History of computers
 
Types of software
Types of softwareTypes of software
Types of software
 
Introduction to color theory for Multimedia Students
Introduction to color  theory  for Multimedia StudentsIntroduction to color  theory  for Multimedia Students
Introduction to color theory for Multimedia Students
 
Overview of video file formats for Multimedia Students
Overview of video file formats for Multimedia StudentsOverview of video file formats for Multimedia Students
Overview of video file formats for Multimedia Students
 
introduction to audio formats - Multimedia Students
introduction to audio formats - Multimedia Studentsintroduction to audio formats - Multimedia Students
introduction to audio formats - Multimedia Students
 
Overview about multimedia for BMM Students and Teachers
Overview about multimedia  for BMM Students and TeachersOverview about multimedia  for BMM Students and Teachers
Overview about multimedia for BMM Students and Teachers
 
Networking fundamentals for multimedia students and teachers
Networking fundamentals for multimedia students and teachers Networking fundamentals for multimedia students and teachers
Networking fundamentals for multimedia students and teachers
 
Ms dos commands for Multimedia Students and Facultyes
Ms dos commands  for Multimedia Students and FacultyesMs dos commands  for Multimedia Students and Facultyes
Ms dos commands for Multimedia Students and Facultyes
 
Elements of digital images day06
Elements of digital images  day06Elements of digital images  day06
Elements of digital images day06
 
Computer fundamentals day02
Computer fundamentals  day02Computer fundamentals  day02
Computer fundamentals day02
 
Computer fundamentals for Multimedia Students
Computer fundamentals for Multimedia StudentsComputer fundamentals for Multimedia Students
Computer fundamentals for Multimedia Students
 
Best SEO Curse PPT
Best SEO Curse PPTBest SEO Curse PPT
Best SEO Curse PPT
 

Recently uploaded

Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfAyushMahapatra5
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
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).pptxVishalSingh1417
 
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.pdfPoh-Sun Goh
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
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).pptxVishalSingh1417
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptxMaritesTamaniVerdade
 
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-701bronxfugly43
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
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.docxRamakrishna Reddy Bijjam
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
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 17Celine George
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22
 
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.pptxNikitaBankoti2
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 

Recently uploaded (20)

Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
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
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
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
 
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
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
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
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
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
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
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
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
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
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 

Introduction to html course digital markerters

  • 1. Introduction to html Y.Ravindra Reddy https://www.seoskills.in
  • 3. HTML Hyper Text Markup Language https://www.seoskills.in
  • 4. • HTML stands for Hyper Text Markup Language. • It is developed by Tim Berner's Lee at W3C (World Wide WebConsortium). • It is used to create Static Web pages. • It is a global language i.e., it can be understood by all browsers. • It is a markup language. • It is not case-sensitive language. • The latest version of HTML is HTML 5 • HTML documents are also called as web pages. • HTML pages can run on any browser. https://www.seoskills.in
  • 5. • HTML documents are simply text documents with a specific form • Documents comprised of content and markup tags • Content: actual information being conveyed • The markup tags tell the Web browser how to display the page • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor https://www.seoskills.in
  • 7. • HTML tags are used to mark-up HTML elements • Surrounded by angle brackets < and > • HTML tags normally come in pairs, like <tagname> (start tag) and </tagname> (end tag) • The text between the start and end tags is the element content • Not case-sensitive • Follow the latest web standards: • Use lowercase tags https://www.seoskills.in
  • 9. • Tags can have attributes that provide additional information to an HTML element • Attributes always come in name/value pairs like: name=“value” • Attributes are always specified in the start tag • Attribute values should always be enclosed in quotes. Double quotes are most common. • Also case-insensitive: however, lowercase is recommended • <tagname a1=“v1” a2=“v2”></tagname> • For example, <table border=“0”> is a start tag that defines a table that has no borders https://www.seoskills.in
  • 11. Entire document enclosed within <html> and </html> tags Two subparts: 1. Head Enclosed within <head> and </head> Within the head, more tags can be used to specify title of the page, meta-information, etc. 2. Body Enclosed within <body> and </body> Within the body, content is to be displayed Other tags can be embedded in the body https://www.seoskills.in
  • 13. • HTML Elements • HTML Headings • HTML Paragraphs • HTML Formatting • HTML Styles • HTML Images • HTML Tables • HTML Lists • HTML Forms • HTML Colors https://www.seoskills.in
  • 15. One common way is to use HTML tables to format the layout of an HTML page The trick is to use a table without borders, and maybe a little extra cell-padding • Keep screen resolution in mind • Use color to define spaces • Align your images • Balance the graphics and text on a page • Think about text width – scan length 7 – 11 words • Centering text is inadvisable • Here is the link: http://webdesign.about.com/od/layout/a/aa062104.htm https://www.seoskills.in
  • 17. HTML frames are a means of having several browser windows open within a single larger window Each HTML document is called a frame Disadvantages: Must keep track of more HTML documents Difficult to print the entire page https://www.seoskills.in
  • 20. Below is a visualization of an HTML page structure: <html> <body> <h1>This a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> https://www.seoskills.in
  • 22. Since the early days of the web, there have been many versions of HTML Version Year HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 https://www.seoskills.in
  • 25. The <!DOCTYPE> declaration helps the browser to display a web page orrectly. 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. https://www.seoskills.in
  • 26. 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"> https://www.seoskills.in
  • 27. HTML code can be written in: • Notepad • Notepad++ • Microsoft Visual Studio • Adobe Dreamweaver • Microsoft Expression Web • Edit Plus • Text Pad • Notepad++ etc. 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. https://www.seoskills.in
  • 28. HTML and XHTML Full References https://www.seoskills.in
  • 29. Full Reference from W3schools: http://www.w3schools.com/tags/ Test your HTML http://www.w3schools.com/html/html_whyusehtml4.asp https://www.seoskills.in