Building and Marketing Websites
<html>
    <head>
              <title>Simple Website</title>
    </head>                                     Web Server
 ...
HTML Example
<html>
  <head>
     <title>Simple Website</title>
  </head>
  <body>
     <h1>Welcome</h1>
     <p>This is a...
“Nesting”
• Putting one element inside another
Nesting Relationship
<html>
    <head>                                        <html>
          <title>Simple Website</titl...
<html>

   <head>
      <title>Simple Website</title>
   </head>
   <body>
        <h1>Welcome</h1>
        <p>This is a d...
<html>
   <head>
        <title>Simple Website</title>
   </head>

   <body>
      <h1>Welcome</h1>
      <p>This is a dem...
Tags We’ve Seen
•   <h1> … </h1>
•   <h2> … </h2>
•   <p> … <p>
•   <ol> … </ol>
•   <ul> … <ul>
Image Tag
<html>
  <head>
     <title>Simple Website</title>
  </head>
  <body>
     <h1>Peanut Butter</h1>
     <img src=...
How Browser Displays Images
1. Loads HTML
2. Looks through HTML for image tags
3. Asks Server for each image it finds in H...
Empty Elements

• Don’t have text content
• Don’t have a closing tag
• They end with “ /> ”
  – This is called terminating...
Element Attributes
• Instructions that clarify or modify an element.

• src (short for source) is example of attribute
• F...
Element Attributes
<element attribute-name="value">Content</element>
<element attribute-name="value" />

• May be several ...
Summary
         <img src=“peanut-butter.jpg” />

• Tells the browser to get an graphic file from
  Server and insert it i...
Tags for adding emphasis
• <em> … </em>
  – Emphasized text

• <strong> … </strong>
  – Strongly emphasized text

• Used o...
Block Elements
      vs
Inline Elements
Block Elements
• Paragrahs <p> … </p>
• Headings <h1> … </h2>
• Lists <ol> … </ol>

• Block-level element begins on a new ...
Inline Elements
• <em> … </em>
• <strong> … </strong>
• <img src=“test” />

• Go with the flow
Block vs Inline
• Block elements are the major building blocks
  of your Web page
• Inline elements for small pieces of co...
CSS
• HTML describes the content in a
  Web page

• CSS describes how you want that
  content to look
HTML for Structure

CSS for Presentation
CSS
• www.csszengarden.com
• Separate language with its own syntax
Style element
<html>
   <head>
      <title>Simple Website</title>
      <style type=“text/css”>

      </style>
   </head...
Pres
Upcoming SlideShare
Loading in...5
×

Pres

250

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
250
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Pres"

  1. 1. Building and Marketing Websites
  2. 2. <html> <head> <title>Simple Website</title> </head> Web Server <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html> HTML
  3. 3. HTML Example <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html>
  4. 4. “Nesting” • Putting one element inside another
  5. 5. Nesting Relationship <html> <head> <html> <title>Simple Website</title> </head> <body> <head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> <title> <h1> </html> <p>
  6. 6. <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html> • The Head provides information about the document
  7. 7. <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html> • Body contains everything that we want to show up in the browser window.
  8. 8. Tags We’ve Seen • <h1> … </h1> • <h2> … </h2> • <p> … <p> • <ol> … </ol> • <ul> … <ul>
  9. 9. Image Tag <html> <head> <title>Simple Website</title> </head> <body> <h1>Peanut Butter</h1> <img src=“peanut-butter.jpg” /> </body> </html>
  10. 10. How Browser Displays Images 1. Loads HTML 2. Looks through HTML for image tags 3. Asks Server for each image it finds in HTML peanut-butter.jpg HTML
  11. 11. Empty Elements • Don’t have text content • Don’t have a closing tag • They end with “ /> ” – This is called terminating (or closing) the element <img src=“peanut-butter.jpg” /> <h1 />
  12. 12. Element Attributes • Instructions that clarify or modify an element. • src (short for source) is example of attribute • For img tags, src attribute is required <img src=“peanut-butter.jpg” alt=“Google” />
  13. 13. Element Attributes <element attribute-name="value">Content</element> <element attribute-name="value" /> • May be several attributes applied to an element, separated by spaces <img src=“peanut-butter.jpg” alt=“Sandwich” />
  14. 14. Summary <img src=“peanut-butter.jpg” /> • Tells the browser to get an graphic file from Server and insert it into page • Empty Elements • Element Attributes
  15. 15. Tags for adding emphasis • <em> … </em> – Emphasized text • <strong> … </strong> – Strongly emphasized text • Used only for text!
  16. 16. Block Elements vs Inline Elements
  17. 17. Block Elements • Paragrahs <p> … </p> • Headings <h1> … </h2> • Lists <ol> … </ol> • Block-level element begins on a new line, and some space is also usually added above and below the entire element by default.
  18. 18. Inline Elements • <em> … </em> • <strong> … </strong> • <img src=“test” /> • Go with the flow
  19. 19. Block vs Inline • Block elements are the major building blocks of your Web page • Inline elements for small pieces of content
  20. 20. CSS
  21. 21. • HTML describes the content in a Web page • CSS describes how you want that content to look
  22. 22. HTML for Structure CSS for Presentation
  23. 23. CSS • www.csszengarden.com • Separate language with its own syntax
  24. 24. Style element <html> <head> <title>Simple Website</title> <style type=“text/css”> </style> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×