Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Build Websites and Market Them Effectively
Semelhante a Build Websites and Market Them Effectively (20)
Build Websites and Market Them Effectively
- 1. Building and Marketing Websites
- 2. Marketing Tidbit • Google • Majority of revenue (97%) comes from advertising
- 3. <html> <head> <title>Simple Website</title> </head> Web Server <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html> HTML
- 4. HTML Example <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html>
- 5. “Nesting” • Putting one element inside another
- 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. Image Tag <html> <head> <title>Simple Website</title> </head> <body> <h1>Peanut Butter</h1> <img src=“peanut-butter.jpg” /> </body> </html>
- 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. HTML comments • <!– Comment goes here --> • Great for leaving notes to yourself
- 10. CSS
- 11. • HTML describes the content in a Web page • CSS describes how you want that content to look
- 12. HTML for Structure CSS for Presentation
- 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. 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. Style sheet rules <style type="text/css"> h1 { border:2px solid green; } p { border:2px solid black; } img { border:2px solid red; } </style>
- 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. 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. Declaration Block • There can be more than one declaration in a single rule
- 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. 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. Selectors visually <style type="text/css"> h1 { border:2px solid green; } p { border:2px solid black; } img { border:2px solid red; } </style>
- 22. h1 { border: 2px solid black; } html head body h1 h2 p p
- 23. h1, h2 { border: 2px solid black; } html head body h1 h2 p p
- 24. p{ color: green; } html head body h1 h2 p p