Your SlideShare is downloading. ×
Weeks3 5 cs_sbasics
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

Weeks3 5 cs_sbasics

437

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
437
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
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. 1) Review your "Web" folder contents:
      • index.html
      • .jpg, .gif, or .png
      • at lest one more page.html
      • at least one more image
      • check folder structure
  • 2. 2) Change some attributes of other pages
      • add <h1> </h1> tags
      • add justify attributes to <p> tag
      • try this by adding a <div> </div tag
  • 3. 3) Get embed code for video
  • 4. 4) Paste embed code into <body> </body> tags
  • 5. 5) Now try it between the <head> </head> tags
  • 6. 6) Create a link: <a href=&quot;http://www...&quot;>text</a>
  • 7. 7) Create an email link:   <a href=&quot;mailto:ehughes@usc.edu&quot;> contact me </a>
  • 8. 8) Create an &quot;unordered&quot; list in header: <ul> </ul>
  • 9. 9) Link list contents to other pages:   <ul> <a href=&quot;about.html&quot;> about </a> <a href=&quot;media.html&quot;> media </a> </ul>
  • 10. CSS & next phase in the evolution of Web development:  
  • 11. 10) use basic HTML documents for CSS stylesheet
  • 12. 11) open new unformatted text document
  • 13. 12) structure of CSS tags
  • 14. 13) structure of CSS tags body { background-color: #FF0000; }
  • 15. 14) save CSS document as: style.css
  • 16. 15) Link your style sheet to your .html documents in the <head> </head> tags:   <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; />
  • 17. 16) add more attributes: body { background-color: #FF0000; } h1 { color: yellow; background-color: black; }
  • 18. 17) add more attributes: h1 { color: yellow; background-color: black; font-family: arial, sans-serif; font-size: 48; font-variant: small-caps; }
  • 19. 18) add more attributes: h2 { color: blue; background-color: yellow; font-family: &quot;times new roman&quot;, serif; font-size: 32; font-variant: small-caps; }
  • 20. 19) add background image: body { background-color: #FF0000; background-image: url(&quot;&quot;); }
  • 21. 20) fix image location upon scroll: body { background-color: #FF0000; background-image: url(&quot;&quot;); background-attachment: fixed; }
  • 22. 21) fix image location in browser: body { background-color: #FF0000; background-image: url(&quot;&quot;); background-attachment: fixed; background-position: 15% 35%; }
  • 23. 22) repeat image: body { background-color: #FF0000; background-image: url(&quot;&quot;); background-attachment: fixed; background-position: 15% 35%; background-repeat: no-repeat; }
  • 24. 23) create paragraph attributes: p { text-indent: 50px; }
  • 25. 24) create link attributes: a { color: white; }
  • 26. 24) create link attributes: a:link { text-decoration: none; }
  • 27. 25) create link attributes: a:hover { color: orange; font-style: italic; }
  • 28. 25) float images: in stylesheet: # { float: right; width: 350; } in html document: <div id=&quot;&quot;> </div>
  • 29. 26) other <div id=&quot;&quot;> attributes: # { text-align: justify; font-style: italic; }
  • 30. 26) other <div id=&quot;&quot;> attributes: # { text-align: justify; font-style: italic; background: 5e6363; color: ffffff; padding: px px px px; }

×