1) Review your &quot;Web&quot; folder contents: <ul><ul><li>index.html </li></ul></ul><ul><ul><li>.jpg, .gif, or .png </li...
2) Change some attributes of other pages <ul><ul><li>add <h1> </h1> tags </li></ul></ul><ul><ul><li>add justify attributes...
3) Get embed code for video
4) Paste embed code into <body> </body> tags
5) Now try it between the <head> </head> tags
6) Create a link: <a href=&quot;http://www...&quot;>text</a>
7) Create an email link:   <a href=&quot;mailto:ehughes@usc.edu&quot;> contact me </a>
8)  Create an &quot;unordered&quot; list in header: <ul> </ul>
9)   Link list contents to other pages:   <ul> <a href=&quot;about.html&quot;> about </a> <a href=&quot;media.html&quot;> ...
CSS & next phase in the evolution of Web development:  
10)   use basic HTML documents for CSS stylesheet
11)   open new unformatted text document
12)   structure of CSS tags
13)   structure of CSS tags body { background-color: #FF0000; }
14)   save CSS document as: style.css
15)   Link your style sheet to your .html documents in the <head> </head> tags:   <link rel=&quot;stylesheet&quot; type=&q...
16)   add more attributes: body { background-color: #FF0000; } h1 { color: yellow; background-color: black; }
17)   add more attributes: h1 { color: yellow; background-color: black; font-family: arial, sans-serif; font-size: 48; fon...
18)   add more attributes: h2 { color: blue; background-color: yellow; font-family: &quot;times new roman&quot;, serif; fo...
19)   add background image: body { background-color: #FF0000; background-image: url(&quot;&quot;); }
20)   fix image location upon scroll: body { background-color: #FF0000; background-image: url(&quot;&quot;); background-at...
21)   fix image location in browser: body { background-color: #FF0000; background-image: url(&quot;&quot;); background-att...
22)   repeat image: body { background-color: #FF0000; background-image: url(&quot;&quot;); background-attachment: fixed; b...
23)   create paragraph attributes: p { text-indent: 50px; }
24)   create link attributes: a { color: white; }
24)   create link attributes: a:link { text-decoration: none; }
25)   create link attributes: a:hover { color: orange; font-style: italic; }
25)   float images: in stylesheet: # { float: right; width: 350; } in html document: <div id=&quot;&quot;> </div>
26)   other <div id=&quot;&quot;> attributes: # { text-align: justify; font-style: italic; }
26)   other <div id=&quot;&quot;> attributes: # { text-align: justify; font-style: italic; background: 5e6363; color: ffff...
Upcoming SlideShare
Loading in...5
×

Weeks3 5 cs_sbasics

479
-1

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
479
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Weeks3 5 cs_sbasics

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

    Clipping is a handy way to collect important slides you want to go back to later.

×