Weeks3 5 cs_sbasics
•Download as PPT, PDF•
0 likes•645 views
The document provides instructions for basic HTML and CSS tasks including: 1) Reviewing web folder contents and adding additional pages and images. 2) Adding HTML tags like <h1> and attributes like "justify" to paragraphs. 3) Embedding a video and inserting embed code into the HTML document. 4) Creating links to other pages and email addresses with HTML anchor tags. 5) Linking an external CSS stylesheet to style HTML pages. 6) Adding CSS styles for colors, fonts, sizes and other attributes to style page elements.
![1) Review your "Web" folder contents: ,[object Object],[object Object],[object Object],[object Object],[object Object]](https://image.slidesharecdn.com/weeks35cssbasics-110919112401-phpapp01/85/Weeks3-5-cs_sbasics-1-320.jpg)
![2) Change some attributes of other pages ,[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
Similar to Weeks3 5 cs_sbasics
Similar to Weeks3 5 cs_sbasics (20)
More from Evan Hughes
More from Evan Hughes (20)
Recently uploaded
Recently uploaded (20)
Weeks3 5 cs_sbasics
- 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="http://www...">text</a>
- 7. 7) Create an email link: <a href="mailto:ehughes@usc.edu"> contact me </a>
- 8. 8) Create an "unordered" list in header: <ul> </ul>
- 9. 9) Link list contents to other pages: <ul> <a href="about.html"> about </a> <a href="media.html"> 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="stylesheet" type="text/css" href="style.css" />
- 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: "times new roman", serif; font-size: 32; font-variant: small-caps; }
- 20. 19) add background image: body { background-color: #FF0000; background-image: url(""); }
- 21. 20) fix image location upon scroll: body { background-color: #FF0000; background-image: url(""); background-attachment: fixed; }
- 22. 21) fix image location in browser: body { background-color: #FF0000; background-image: url(""); background-attachment: fixed; background-position: 15% 35%; }
- 23. 22) repeat image: body { background-color: #FF0000; background-image: url(""); 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=""> </div>
- 29. 26) other <div id=""> attributes: # { text-align: justify; font-style: italic; }
- 30. 26) other <div id=""> attributes: # { text-align: justify; font-style: italic; background: 5e6363; color: ffffff; padding: px px px px; }