Your SlideShare is downloading. ×
0
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Pres
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Building and Marketing Websites
  • 2. <html> <head> <title>Simple Website</title> </head> Web Server <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html> HTML
  • 3. HTML Example <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html>
  • 4. “Nesting” • Putting one element inside another
  • 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. <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. <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. Tags We’ve Seen • <h1> … </h1> • <h2> … </h2> • <p> … <p> • <ol> … </ol> • <ul> … <ul>
  • 9. Image Tag <html> <head> <title>Simple Website</title> </head> <body> <h1>Peanut Butter</h1> <img src=“peanut-butter.jpg” /> </body> </html>
  • 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. 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. 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. 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. 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. Tags for adding emphasis • <em> … </em> – Emphasized text • <strong> … </strong> – Strongly emphasized text • Used only for text!
  • 16. Block Elements vs Inline Elements
  • 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. Inline Elements • <em> … </em> • <strong> … </strong> • <img src=“test” /> • Go with the flow
  • 19. Block vs Inline • Block elements are the major building blocks of your Web page • Inline elements for small pieces of content
  • 20. CSS
  • 21. • HTML describes the content in a Web page • CSS describes how you want that content to look
  • 22. HTML for Structure CSS for Presentation
  • 23. CSS • www.csszengarden.com • Separate language with its own syntax
  • 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>

×