| Lab 8/9 Conditionals |
Fill in the page
Now you have a page with a heading, a text box, a drop-down list and a set of radio buttons. Next, you'll finish the page by adding text and an image.
1. Add text and line breaks (using <br /> tags) and tags for italicizing (<em>) or bolding (<strong>) to make the page look like this:
We'll want to update the text "10:00 am" using Javascript, so we'll need to give it an id.
2. To do that, put the text inside <span> tags and give that span the id "adjustedTime", (we want it to be bold so keep the <strong> tags):
<strong><span id="adjustedTime">10:00 am</span></strong>
3. Now add the image. You can put it inside your <form> tags. Use the image below (right-click and choose "Save Image As..." or "Save Picture As" and save it to your desktop.
Reminder: The image tag looks like this: <img src="" alt=""/>. The src attribute contains the name of the image file and the alt attribute contains the alternate text.
The final step in making the page look the way we want it to, is to add CSS. Since we are only creating one page, it makes sense to add the CSS to this page rather than creating a separate CSS file.
4. Go to the <head> section of your page and add <style> tags like this:
<style type="text/css">
</style>5. Inside those tags, add the CSS just the way you would in a separate CSS file. You can copy and paste the following CSS, then change the colors etc. to personalize it (i.e., to use colors and fonts that you like):
body
{
background-color:#FFFFCC;
color: #333333;
font-family:Arial, Helvetica, sans-serif;
margin:40px;
}
h1{
background-color:#669966;
font-stretch:expanded;
font-variant:small-caps;
}6. To indent everything under the heading, add CSS for the <form> tab using the "padding-left" property.
7. Save the file and look at it in your browser. You'll see that the text inside the drop-down list and the text box doesn't use the CSS for the page (for example it doesn't use the same background color). It also isn't bold the way we we want it. To fix this, add CSS for both the input and select elements like this:
input, select
{
}
8. Inside the curly brackets, add the following properties:
background-color and font-family properties to match the properties you've given the whole page (i.e. the <body> tag).
text-align property (The number in the text box is automatically aligned with the left side of the box. We want it to be aligned with the right side of the box so that it's right next to the :00. To do that, add a "text-align" property and set it to "right".)
font-weight property (We want the text inside the text box and the drop-down box to be bold, so add a "font-weight" property and set it to "bold").
9. Save your file and view it in a browser to see if everything looks correct. Type a number in the text box to see that it is bold and that it lines up with the right side of the box.
10. Go to your Catalayst quiz and answer questions #3 & 4
Now that the page looks correct, we'll work on making it work properly
