Pres

361 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
361
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. Marketing Tidbit • Google • Majority of revenue (97%) comes from advertising
  3. 3. <html> <head> <title>Simple Website</title> </head> Web Server <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html> HTML
  4. 4. HTML Example <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html>
  5. 5. “Nesting” • Putting one element inside another
  6. 6. 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
  7. 7. Image Tag <html> <head> <title>Simple Website</title> </head> <body> <h1>Peanut Butter</h1> <img src=“peanut-butter.jpg” /> </body> </html>
  8. 8. Element Attributes • Instructions that clarify or modify an element. <element attribute-name="value">Content</element> <element attribute-name="value" /> <img src=“peanut-butter.jpg” alt=“Sandwich” />
  9. 9. HTML comments • <!– Comment goes here --> • Great for leaving notes to yourself
  10. 10. CSS
  11. 11. • HTML describes the content in a Web page • CSS describes how you want that content to look
  12. 12. HTML for Structure CSS for Presentation
  13. 13. 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>
  14. 14. Style sheet <head> <title>Simple Website</title> <style type=“text/css”> p { border:2px solid black; } </style> </head> • Made up of one or more style instructions (called rules) • Rules describe how an element or group of elements should be displayed.
  15. 15. Style sheet rules <style type="text/css"> h1 { border:2px solid green; } p { border:2px solid black; } img { border:2px solid red; } </style>
  16. 16. Selector <style type="text/css"> h1 { border:2px solid green; } p { border:2px solid black; } img { border:2px solid red; } </style> • Example of element type selector • Most basic type of selector
  17. 17. Declaration <style type="text/css"> h1 { border:2px solid green; } p { border:2px solid black; } img { border:2px solid red; } </style> • Property/value pair
  18. 18. Declaration Block • There can be more than one declaration in a single rule
  19. 19. Style sheet rules <style type="text/css"> h1 { border:2px solid green; } p { border:2px solid black; } img { border:2px solid red; } </style>
  20. 20. Combining Rules <style type="text/css"> h1 { border:2px solid black; } h2 { border:2px solid black; } </style> <style type="text/css"> h1, h2 { border:2px solid black; } </style>
  21. 21. Selectors visually <style type="text/css"> h1 { border:2px solid green; } p { border:2px solid black; } img { border:2px solid red; } </style>
  22. 22. h1 { border: 2px solid black; } html head body h1 h2 p p
  23. 23. h1, h2 { border: 2px solid black; } html head body h1 h2 p p
  24. 24. p{ color: green; } html head body h1 h2 p p

×