weeks3 5 cs_sbasics
DESCRIPTION
TRANSCRIPT
![Page 1: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/1.jpg)
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
![Page 2: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/2.jpg)
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
![Page 3: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/3.jpg)
3) Get embed code for video
![Page 4: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/4.jpg)
4) Paste embed code into <body> </body> tags
![Page 5: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/5.jpg)
5) Now try it between the <head> </head> tags
![Page 6: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/6.jpg)
6) Create a link:<a href="http://www...">text</a>
![Page 8: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/8.jpg)
8) Create an "unordered" list in header:<ul> </ul>
![Page 9: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/9.jpg)
9) Link list contents to other pages:
<ul><a href="about.html">about</a><a href="media.html">media</a>
</ul>
![Page 10: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/10.jpg)
CSS & next phase in the evolution of Web development:
![Page 11: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/11.jpg)
10) use basic HTML documents for CSS stylesheet
![Page 12: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/12.jpg)
11) open new unformatted text document
![Page 13: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/13.jpg)
12) structure of CSS tags
![Page 14: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/14.jpg)
13) structure of CSS tags
body {background-color: #FF0000;
}
![Page 15: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/15.jpg)
14) save CSS document as:
style.css
![Page 16: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/16.jpg)
15) Link your style sheet to your .html documents in the <head> </head>
tags:
<link rel="stylesheet" type="text/css" href="style.css" />
![Page 17: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/17.jpg)
16) add more attributes:
body {background-color: #FF0000;
}
h1 {color: yellow;background-color: black;
}
![Page 18: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/18.jpg)
17) add more attributes:
h1 {color: yellow;background-color: black;font-family: arial, sans-serif;font-size: 48;font-variant: small-caps;
}
![Page 19: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/19.jpg)
18) add more attributes:
h2 {color: blue;background-color: yellow;font-family: "times new roman", serif;font-size: 32;font-variant: small-caps;}
![Page 20: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/20.jpg)
19) add background image:
body {background-color: #FF0000;background-image: url("");
}
![Page 21: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/21.jpg)
20) fix image location upon scroll:
body {background-color: #FF0000;background-image: url("");background-attachment: fixed;
}
![Page 22: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/22.jpg)
21) fix image location in browser:
body {background-color: #FF0000;background-image: url("");background-attachment: fixed;background-position: 15% 35%;
}
![Page 23: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/23.jpg)
22) repeat image:
body {background-color: #FF0000;background-image: url("");background-attachment: fixed;background-position: 15% 35%;background-repeat: no-repeat;
}
![Page 24: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/24.jpg)
23) create paragraph attributes:
p {text-indent: 50px;
}
![Page 25: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/25.jpg)
24) create link attributes:
a {color: white;
}
![Page 26: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/26.jpg)
24) create link attributes:
a:link {text-decoration: none;
}
![Page 27: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/27.jpg)
25) create link attributes:
a:hover {color: orange;font-style: italic;
}
![Page 28: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/28.jpg)
25) float images:
in stylesheet:
# {float: right;width: 350;
}
in html document:
<div id=""> </div>
![Page 29: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/29.jpg)
26) other <div id=""> attributes:
# {text-align: justify;font-style: italic;
}
![Page 30: Weeks3 5 cs_sbasics](https://reader033.vdocuments.us/reader033/viewer/2022060106/54b8af614a7959ad648b4598/html5/thumbnails/30.jpg)
26) other <div id=""> attributes:
# {text-align: justify;font-style: italic;background: 5e6363;color: ffffff;padding: px px px px;
}