Pres

352 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
352
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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>

×