SlideShare a Scribd company logo
2
Most read
4
Most read
8
Most read
www.eshikshak.co.in
Introduction to HTML
•   HTML stands for Hyper Text Markup Language
•   Language interpreted by a web browser
•   Web-pages are also called HTML Documents.
•   It defines the structure and layout of a Web
    document by using a variety of tags and
    attributes.



                                   www.eshikshak.co.in
Features of HTML
• Create a Web page using tags.
• Use graphics and display text in different fonts, sizes, and
  color.
• Enhance the presentation of the document using HTML
  elements.
• Create hyperlinks to navigate to different documents
  present on the Web.
• Display data in a tabular format.
• Create multiple windows in a Web page to display
  information from multiple sources in different windows

                                             www.eshikshak.co.in
HTML tags
• A command inserted in a document that
  specifies how the document, or a portion of
  the document, should be formatted.
• HTML tags begin with an open angle bracket
  (<) and end with a close angle bracket (>).
• HTML tags are of two types
  – Paired Tags
  – Singular Tags

                                 www.eshikshak.co.in
HTML attributes
• A language construct that programmers use
  to add additional information (i.e., metadata)
  to code elements (e.g., assemblies, modules,
  members, types, return values, and
  parameters) to extend their functionality.
• Attributes are written immediately following
  the tag
• Multiple attributes can be associated

                                   www.eshikshak.co.in
Types of HTML tag – Paired tag
• A tag is said to be a paired tag if the text is
  placed between a tag and its companion tag.
• In paired tags, the first tag is referred to as
  Opening Tag and the second tag is referred to
  as Closing Tag.
  – Example: <i>This text is in italics. </i>
  – Note: Here,
     • <i> is called opening tag
     • </i>          is       called   closing         tag.

                                           www.eshikshak.co.in
Types of HTML tag – Singular tag
• A standalone tag does not have a companinon
  tag.



  – Example: <BR /> - This tag will insert a line break
  – This tag does not require any companion tag.




                                         www.eshikshak.co.in
The structure of HTML document
<html>                                   This page is written in HTML
  <head>                                 Head tag contians information
       <title>                           about web page

                 Title of the web page                    title tag contains
      </title>                                            title of a web page

  </head>
                                         body tag contains contents of
  <body>                                 web page
       Content of the Page
       <address> Your address </address>                  This is the footer of
                                                          the web page
  </body>
</html>
                                                            www.eshikshak.co.in
The structure of HTML document
• The basic structure for all HTML documents is
  simple and should include the following
  minimum elements or tags:
  – <html> : The main container for HTML pages
  – <head> : The container for page header
    information
  – <title> : The title of the page
  – <body> : The main body of the page


                                  www.eshikshak.co.in
DOCTYPE
• The HTML !doctype tag is used for specifying
  which version of HTML the document is using.
  This is referred to as the document type
  declaration (DTD).
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN“ "http://www.w3.
  org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html>




                                         www.eshikshak.co.in
The <html> Element
• The <html> element is the containing element
  for the whole HTML document. Each HTML
  document should have one <html> and each
  document should end with a closing </html>
  tag.
• Following two elements appear as direct
  children of an <html> element:
  – <head>
  – <body>
                                 www.eshikshak.co.in
The <head> Element
• The <head> element is just a container for all
  other header elements.

• It should be the first thing to appear after the
  opening <html> tag.

• Each <head> element should contain a <title>
  element indicating the title of the document

                                    www.eshikshak.co.in
The <head> Element
• The <title> tag is used to give title to the document.

• The <link> tag is used to link to an external file, such
  as a style sheet or JavaScript file.

• The <style> tag is used to include CSS rules inside the
  document.

• The <script> tag is used to include JAVAScript or
  VBScript inside the document.
                                          www.eshikshak.co.in
The <head> Element
• The <base> tag is used to create a "base" url for all
  links on the page.

• The <object> tag is designed to include images,
  JavaScript objects, Flash animations, MP3 files,
  QuickTime movies and other components of a page.




                                        www.eshikshak.co.in
The <title> Element:
• To specify a title for every page that you write
  inside the <title> element.
• This element is a child of the <head> element.
• It is used in several ways:
  – It displays at the very top of a browser window.
  – It is used as the default name for a bookmark in
    browsers such as IE and Netscape.
  – Its is used by search engines that use its content
    to help index pages.
                                       www.eshikshak.co.in
The <title> Element:
• Here is the example of using title tag.

  <html>
        <head>
              <title>Welcome to MyWebsite</title>
        </head>
  </html>




                                        www.eshikshak.co.in
The <body> Element:
• The <body> element appears after the <head>
  element.
• It contains the part of the Web page that you
  actually see in the main browser window.
• A <body> element may contain anything from
  a couple of paragraphs under a heading to
  more complicated layouts containing forms
  and tables.

                                  www.eshikshak.co.in
The <body> Element:
• Here is the example of using body tag.
  <html>
        <head>
              <title>Welcome to MyWebsite</title>
        </head>

        <body>
              You are welcome to MyWebsite.
        </body>
  </html>


                                       www.eshikshak.co.in

More Related Content

PPT
Eye catching HTML BASICS tips: Learn easily
PPTX
PPTX
The Complete HTML
PPTX
PPTX
HTML Text formatting tags
PPTX
Basic HTML
PPT
Html project
PPTX
Eye catching HTML BASICS tips: Learn easily
The Complete HTML
HTML Text formatting tags
Basic HTML
Html project

What's hot (20)

PPT
Cascading Style Sheets (CSS) help
PPTX
Complete Lecture on Css presentation
PPTX
Html links
PPTX
How to learn HTML in 10 Days
PPTX
html-table
PPTX
PPTX
Links in Html
PDF
Html table tags
PPT
Introduction to Cascading Style Sheets (CSS)
PPTX
Css types internal, external and inline (1)
PPT
Introduction to html
PPT
PPTX
HTML: Tables and Forms
ODP
PPTX
Introduction to CSS
PPTX
Html ppt
PPT
PDF
HTML5: features with examples
PPTX
Html forms
Cascading Style Sheets (CSS) help
Complete Lecture on Css presentation
Html links
How to learn HTML in 10 Days
html-table
Links in Html
Html table tags
Introduction to Cascading Style Sheets (CSS)
Css types internal, external and inline (1)
Introduction to html
HTML: Tables and Forms
Introduction to CSS
Html ppt
HTML5: features with examples
Html forms
Ad

Viewers also liked (20)

PPT
Introduction to HTML
PDF
Lesson 1: Introduction to HTML
KEY
HTML presentation for beginners
PPTX
Internet and html
PPTX
Introduction to HTML
PDF
PPTX
Introduction to HTML
PPTX
HTML Introduction
PPT
Html for beginners part I
PPT
Mesics lecture 5 input – output in ‘c’
PDF
Html phrase tags
PDF
Lecture15 comparisonoftheloopcontrolstructures.ppt
PDF
Lecture21 categoriesof userdefinedfunctions.ppt
PPT
Mesics lecture 3 c – constants and variables
PDF
Lecture 7 relational_and_logical_operators
PDF
Lecture7relationalandlogicaloperators 110823181038-phpapp02
PPT
Introduction to html
PPT
Mesics lecture files in 'c'
PDF
Algorithm
PPT
Mesics lecture 7 iteration and repetitive executions
Introduction to HTML
Lesson 1: Introduction to HTML
HTML presentation for beginners
Internet and html
Introduction to HTML
Introduction to HTML
HTML Introduction
Html for beginners part I
Mesics lecture 5 input – output in ‘c’
Html phrase tags
Lecture15 comparisonoftheloopcontrolstructures.ppt
Lecture21 categoriesof userdefinedfunctions.ppt
Mesics lecture 3 c – constants and variables
Lecture 7 relational_and_logical_operators
Lecture7relationalandlogicaloperators 110823181038-phpapp02
Introduction to html
Mesics lecture files in 'c'
Algorithm
Mesics lecture 7 iteration and repetitive executions
Ad

Similar to Introduction to html (20)

PPTX
Basic tags in html
PDF
Html text and formatting
PDF
Html tutorial
PDF
PDF
Html tutorial
PDF
Html - Tutorial
PDF
Title, heading and paragraph tags
PDF
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
PDF
html complete notes
PDF
html compete notes basic to advanced
PPTX
About html
PDF
Let me design
PPTX
ppt.pptx
DOC
Html, xml and java script
PPTX
Introduction to html
PPTX
PPTX
PPTX
Week-1_PPT_WEBAPPS-done.pptx
Basic tags in html
Html text and formatting
Html tutorial
Html tutorial
Html - Tutorial
Title, heading and paragraph tags
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
html complete notes
html compete notes basic to advanced
About html
Let me design
ppt.pptx
Html, xml and java script
Introduction to html
Week-1_PPT_WEBAPPS-done.pptx

More from eShikshak (20)

PDF
Modelling and evaluation
PDF
Operators in python
PDF
Datatypes in python
PDF
Introduction to python
PPT
Introduction to e commerce
PDF
Chapeter 2 introduction to cloud computing
PDF
Unit 1.4 working of cloud computing
PDF
Unit 1.3 types of cloud
PDF
Unit 1.2 move to cloud computing
PDF
Unit 1.1 introduction to cloud computing
PPT
Mesics lecture 8 arrays in 'c'
PPT
Mesics lecture 6 control statement = if -else if__else
PPT
Mesics lecture 4 c operators and experssions
PPT
Mesics lecture 5 input – output in ‘c’
PDF
Lecture20 user definedfunctions.ppt
PDF
Lecture18 structurein c.ppt
PDF
Lecture17 arrays.ppt
PDF
Lecture13 control statementswitch.ppt
PDF
Lecturer23 pointersin c.ppt
PDF
Lecture19 unionsin c.ppt
Modelling and evaluation
Operators in python
Datatypes in python
Introduction to python
Introduction to e commerce
Chapeter 2 introduction to cloud computing
Unit 1.4 working of cloud computing
Unit 1.3 types of cloud
Unit 1.2 move to cloud computing
Unit 1.1 introduction to cloud computing
Mesics lecture 8 arrays in 'c'
Mesics lecture 6 control statement = if -else if__else
Mesics lecture 4 c operators and experssions
Mesics lecture 5 input – output in ‘c’
Lecture20 user definedfunctions.ppt
Lecture18 structurein c.ppt
Lecture17 arrays.ppt
Lecture13 control statementswitch.ppt
Lecturer23 pointersin c.ppt
Lecture19 unionsin c.ppt

Recently uploaded (20)

PDF
KodekX | Application Modernization Development
PDF
AI And Its Effect On The Evolving IT Sector In Australia - Elevate
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PDF
Modernizing your data center with Dell and AMD
PDF
Chapter 2 Digital Image Fundamentals.pdf
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
PDF
HCSP-Presales-Campus Network Planning and Design V1.0 Training Material-Witho...
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PDF
Electronic commerce courselecture one. Pdf
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
GDG Cloud Iasi [PUBLIC] Florian Blaga - Unveiling the Evolution of Cybersecur...
PDF
Empathic Computing: Creating Shared Understanding
PPTX
Cloud computing and distributed systems.
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Advanced IT Governance
PPT
Teaching material agriculture food technology
PDF
Review of recent advances in non-invasive hemoglobin estimation
KodekX | Application Modernization Development
AI And Its Effect On The Evolving IT Sector In Australia - Elevate
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Modernizing your data center with Dell and AMD
Chapter 2 Digital Image Fundamentals.pdf
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
HCSP-Presales-Campus Network Planning and Design V1.0 Training Material-Witho...
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Electronic commerce courselecture one. Pdf
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
CIFDAQ's Market Insight: SEC Turns Pro Crypto
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
GDG Cloud Iasi [PUBLIC] Florian Blaga - Unveiling the Evolution of Cybersecur...
Empathic Computing: Creating Shared Understanding
Cloud computing and distributed systems.
Reach Out and Touch Someone: Haptics and Empathic Computing
Advanced IT Governance
Teaching material agriculture food technology
Review of recent advances in non-invasive hemoglobin estimation

Introduction to html

  • 2. Introduction to HTML • HTML stands for Hyper Text Markup Language • Language interpreted by a web browser • Web-pages are also called HTML Documents. • It defines the structure and layout of a Web document by using a variety of tags and attributes. www.eshikshak.co.in
  • 3. Features of HTML • Create a Web page using tags. • Use graphics and display text in different fonts, sizes, and color. • Enhance the presentation of the document using HTML elements. • Create hyperlinks to navigate to different documents present on the Web. • Display data in a tabular format. • Create multiple windows in a Web page to display information from multiple sources in different windows www.eshikshak.co.in
  • 4. HTML tags • A command inserted in a document that specifies how the document, or a portion of the document, should be formatted. • HTML tags begin with an open angle bracket (<) and end with a close angle bracket (>). • HTML tags are of two types – Paired Tags – Singular Tags www.eshikshak.co.in
  • 5. HTML attributes • A language construct that programmers use to add additional information (i.e., metadata) to code elements (e.g., assemblies, modules, members, types, return values, and parameters) to extend their functionality. • Attributes are written immediately following the tag • Multiple attributes can be associated www.eshikshak.co.in
  • 6. Types of HTML tag – Paired tag • A tag is said to be a paired tag if the text is placed between a tag and its companion tag. • In paired tags, the first tag is referred to as Opening Tag and the second tag is referred to as Closing Tag. – Example: <i>This text is in italics. </i> – Note: Here, • <i> is called opening tag • </i> is called closing tag. www.eshikshak.co.in
  • 7. Types of HTML tag – Singular tag • A standalone tag does not have a companinon tag. – Example: <BR /> - This tag will insert a line break – This tag does not require any companion tag. www.eshikshak.co.in
  • 8. The structure of HTML document <html> This page is written in HTML <head> Head tag contians information <title> about web page Title of the web page title tag contains </title> title of a web page </head> body tag contains contents of <body> web page Content of the Page <address> Your address </address> This is the footer of the web page </body> </html> www.eshikshak.co.in
  • 9. The structure of HTML document • The basic structure for all HTML documents is simple and should include the following minimum elements or tags: – <html> : The main container for HTML pages – <head> : The container for page header information – <title> : The title of the page – <body> : The main body of the page www.eshikshak.co.in
  • 10. DOCTYPE • The HTML !doctype tag is used for specifying which version of HTML the document is using. This is referred to as the document type declaration (DTD). • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> www.eshikshak.co.in
  • 11. The <html> Element • The <html> element is the containing element for the whole HTML document. Each HTML document should have one <html> and each document should end with a closing </html> tag. • Following two elements appear as direct children of an <html> element: – <head> – <body> www.eshikshak.co.in
  • 12. The <head> Element • The <head> element is just a container for all other header elements. • It should be the first thing to appear after the opening <html> tag. • Each <head> element should contain a <title> element indicating the title of the document www.eshikshak.co.in
  • 13. The <head> Element • The <title> tag is used to give title to the document. • The <link> tag is used to link to an external file, such as a style sheet or JavaScript file. • The <style> tag is used to include CSS rules inside the document. • The <script> tag is used to include JAVAScript or VBScript inside the document. www.eshikshak.co.in
  • 14. The <head> Element • The <base> tag is used to create a "base" url for all links on the page. • The <object> tag is designed to include images, JavaScript objects, Flash animations, MP3 files, QuickTime movies and other components of a page. www.eshikshak.co.in
  • 15. The <title> Element: • To specify a title for every page that you write inside the <title> element. • This element is a child of the <head> element. • It is used in several ways: – It displays at the very top of a browser window. – It is used as the default name for a bookmark in browsers such as IE and Netscape. – Its is used by search engines that use its content to help index pages. www.eshikshak.co.in
  • 16. The <title> Element: • Here is the example of using title tag. <html> <head> <title>Welcome to MyWebsite</title> </head> </html> www.eshikshak.co.in
  • 17. The <body> Element: • The <body> element appears after the <head> element. • It contains the part of the Web page that you actually see in the main browser window. • A <body> element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables. www.eshikshak.co.in
  • 18. The <body> Element: • Here is the example of using body tag. <html> <head> <title>Welcome to MyWebsite</title> </head> <body> You are welcome to MyWebsite. </body> </html> www.eshikshak.co.in