STRUCTURE
HTML
Structure
   HTML is all about structure
   Order of something
   Helps user understand easier
   Used in many forms of media
     Newspapers,   books, Word docs…
Tags
   Act like containers
   Opening tag
   Closing tag
                          TAGS




       <p>This is a paragraph.</p>
Elements
   Opening and closing tags
   Content
   Makes up HTML

                       Element

                  <p>This is a paragraph.</p>
Attributes
   More info about element
   Appear in opening tag
   Have a name and a value
   Value in quotations
                     Attribute


<p lang = “en-us”>This is a paragraph.</p>
<html> tag
   Contains whole page
   Starts and ends with it

<html>
   Code goes here…
</html>
<head> tag
   Has info about web page
   Doesn’t show up in browser (except for <title>
    tag)

<html>
     <head>
          Info about page goes here…
     </head>
</html>
<title> tag
 In <head> section
 Displayed in title/menu bar

<html>
      <head>
           <title>Title goes here…</title>
      </head>
</html>
<body> tag
 Shown in browser
 Contains working HTML code

 MAIN element

<html>
      <head>
            Info about page goes here…
      </head>
      <body>
            Web page goes here…
      </body>
</html>
How to Look at Other Websites
Code
   Right click in browser
   Click View Source (View)
   Great way to learn HTML fast

HTML - Structure

  • 1.
  • 2.
    Structure  HTML is all about structure  Order of something  Helps user understand easier  Used in many forms of media  Newspapers, books, Word docs…
  • 3.
    Tags  Act like containers  Opening tag  Closing tag TAGS <p>This is a paragraph.</p>
  • 4.
    Elements  Opening and closing tags  Content  Makes up HTML Element <p>This is a paragraph.</p>
  • 5.
    Attributes  More info about element  Appear in opening tag  Have a name and a value  Value in quotations Attribute <p lang = “en-us”>This is a paragraph.</p>
  • 6.
    <html> tag  Contains whole page  Starts and ends with it <html> Code goes here… </html>
  • 7.
    <head> tag  Has info about web page  Doesn’t show up in browser (except for <title> tag) <html> <head> Info about page goes here… </head> </html>
  • 8.
    <title> tag  In<head> section  Displayed in title/menu bar <html> <head> <title>Title goes here…</title> </head> </html>
  • 9.
    <body> tag  Shownin browser  Contains working HTML code  MAIN element <html> <head> Info about page goes here… </head> <body> Web page goes here… </body> </html>
  • 10.
    How to Lookat Other Websites Code  Right click in browser  Click View Source (View)  Great way to learn HTML fast