Today's Lab Exercises
Today you will create a basic "About Me" HTML page and style it with a
bit of CSS:
-
"About Me" Page
-
Style Your Page with CSS
-
Upload Your Page to the Web
-
Advanced Style Techniques
-
Definition Lists for Your Favorite Movie
-
Decrementing
ol
Exercise 1: "About Me" Page
(See example screenshot on the next slide).
Create a page aboutme.html that describes you. Include
information such as:
-
Your name
-
A brief description of you in 1-2 sentences
-
A list of classes you are taking right now at UW
-
Your 4 favorite movies, books, games, and TV shows. Make at
least one link to an interesting site about that favorite
movie/book/game/show, such as its IMDB page
-
Two images that represent when you're happy and sad (consider
Google Image Search)
-
Something about one of your neighbors (students sitting next to you)
Exercise 1 (Continued): Example
This example page describes textbook co-author Victoria Kirst. Look
at the lecture slides about HTML to see examples of the right tags to use.
Exercise 1 (Continued): How to View Your Page
Cloud 9 has a really handy live preview feature that you can use to watch the results
of your changes to HTML and CSS! To set up the preview feature, follow the screenshots on the
slides below.
To view your page, click on the Preview tab in the top-right corner of the
Cloud 9 Application and select "Live Preview File (aboutme.html)".
You should see the results of you HTML in a new tab, similar to the screenshot below.
Now you're set to make your page more style-tastic with CSS!
Exercise 2: CSS Styles (~15 min)
(See example screenshot on slide below)
Create a CSS style sheet named styleme.css to improve the
appearance of your About Me page. You can find some CSS properties
in the lecture slides or online.
Use a <link> tag to reference your CSS file in your
HTML:
<head>
...
<link type="text/css" href="styleme.css" rel="stylesheet" />
...
</head>
Exercise 2 (Continued): Adding CSS Styles
-
Change the color of at least two elements
-
Change the font properties (family, size, weight, or style) of
at least two elements. Some standard fonts include Arial, Arial
Black, Verdana, Trebuchet MS, Georgia, Tahoma, Courier New, and
Times New Roman
-
Change at least one other thing (e.g. background color, text
alginment, etc.)
Exercise 2 (Continued): Example
Exercise 3: Turn in Your Page to GradeIt (~10 min)
There's still some more to do with your aboutme.html page, but let's try
a test turnin to see your files live on a real webserver!
Note that the turnin only accepts an aboutme.html page -- this means that if your
page links to other resources (like images) then you'll have to use absolute URLs to reference
them in your aboutme.html page. Follow the directions on the slides below to turn
in your code!
Exercise 3 (Continued): Transferring from Cloud 9 to GradeIt
-
Download your
aboutme.html file from cloud9 (use the 'File' menu)
-
Save it someplace on your computer
-
click here to open up the 'lab1' turnin page in GradeIt
-
Select your
aboutme.html from where you saved it on your local computer
-
Fill out the rest of the form and turn it in
-
In your turnin receipt page, you should see a link to your
aboutme.html page. Click it, and see your page on webster!
Exercise 4: Advanced Styles (~10 min)
(See example screenshot on slide below)
If you complete the previous exercises, great job! You can add any
extra content to your page that you like. Or, if you want a challenge,
try to figure out how to add the following styles:
-
Make your hyperlinks not underlined by default. However, when a user hovers
over the link, the underline should appear (Hint: Look for
information about CSS "pseudo-classes")
-
Make every paragraph start with a "drop-caps";
that is, a large initial letter that is 1.5 times the normal
paragraph font size (Hint: Look for information about CSS
"pseudo-elements")
-
Make text for each list item alternate between two different
colors (Hint: Look for information about CSS "pseudo-classes")
These are tricks not covered yet in class. Use Google or A CSS
reference such as W3Schools.
Exercise 4: Example
These are snippets of Victoria's updated page, showing links and
drop-caps:
Links: (hover is not shown)
Drop-caps:
Exercise 5: Favorite Movie
(See example screenshot on slide below)
Look up one of the favorite movies/shows from your About Me
Page on imdb.com
In your page, reproduce some of the film's IMDB info in a nested
list under that movie's bullet. You'll want to read through teh slides
below to learn how to represent this information as a HTML
definition list
Consider applying styles to your definition list to make it look snazzy
Exercise 5: Example
These are snippets of Victoria's updated page, showing a favorite movie:
Exercise 6: Decrementing ol
(See example screenshot on slide below)
- Modify your page's Top 3 movies/shows list to be in decreasing order, from 3 down to 1
- The list must look the same as teh default ordered list format, but in reverse order
- The only change you may make to your HTML is to switch the order of your list items, but otherwise all work should be done by CSS
- You won't find out how to do this in the slides; you will need to figure it out on your own by searching the web for the appropriate CSS documentation!
Exercise 6: Example
These are snippets of Victoria's updated page with decremeting ol:
If You Finish Them All...
If you finish all the exercises, you can add any other content or styles you like to your page.
If the lab is over or almost over, check with a TA and you may be able to be dismissed.
Once the lab time is up, you may stop working. You don't need to complete the remaining exercies unless you want to for fun.
Great work!