weeks3 5 cs_sbasics
Post on 16-Jan-2015
414 Views
Preview:
DESCRIPTION
TRANSCRIPT
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) 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) 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="http://www...">text</a>
7) Create an email link:
<a href="mailto:ehughes@usc.edu">contact me
</a>
8) Create an "unordered" list in header:<ul> </ul>
9) Link list contents to other pages:
<ul><a href="about.html">about</a><a href="media.html">media</a>
</ul>
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="stylesheet" type="text/css" href="style.css" />
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;font-variant: small-caps;
}
18) add more attributes:
h2 {color: blue;background-color: yellow;font-family: "times new roman", serif;font-size: 32;font-variant: small-caps;}
19) add background image:
body {background-color: #FF0000;background-image: url("");
}
20) fix image location upon scroll:
body {background-color: #FF0000;background-image: url("");background-attachment: fixed;
}
21) fix image location in browser:
body {background-color: #FF0000;background-image: url("");background-attachment: fixed;background-position: 15% 35%;
}
22) repeat image:
body {background-color: #FF0000;background-image: url("");background-attachment: fixed;background-position: 15% 35%;background-repeat: no-repeat;
}
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=""> </div>
26) other <div id=""> attributes:
# {text-align: justify;font-style: italic;
}
26) other <div id=""> attributes:
# {text-align: justify;font-style: italic;background: 5e6363;color: ffffff;padding: px px px px;
}
top related