Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.
thanks to former TAs Victoria Kirst, Jeff Prouty, Morgan Doocy, Brian Le for their work on these labs.
Today you will create a basic "About Me" HTML page and style it with a bit of CSS.
About MePage
ol
About MePage (~20-25 min)
(The next 3 slides describe this exercise. Please read them all, then start.)
Create a page aboutme.html
that describes you. Include information such as:
This example page describes textbook coauthor Victoria Kirst.
Look at the lecture slides about HTML to see examples of the right tags to use.
To see your page in the web browser, in Notepad++ click Run, Launch in Firefox.
Or in Firefox, click File, Open File... and browse to your page file to open it.
(See example screenshot on next slide.)
Create a stylesheet named styleme.css
to improve the appearance of your About Me page.
This example is Victoria's styled page (scroll down to see the rest):
Next, validate the syntax of your HTML and CSS code:
Validate by File Uploadand then Browse to your
aboutme.html
file,Validate by Direct Inputand then copy/paste your code into the text box.
lab1
within your public_html
folder.
Ask a TA if you have any problems logging in to Webster or uploading your files!
Add links on your page to the HTML and CSS Validators, using the URLs below.
(These links work only if you view your page on webster, not on your computer's hard drive.)
(See example screenshot on next slide.)
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:
pseudo-classes.)
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.)
These are tricks not covered yet in class. Use Google or a CSS reference such as W3Schools.
These are snippets of TA Victoria's updated page, showing links and drop-caps:
Links: (hover is not shown)
Drop-caps:
(See example screenshot on next slide.)
Look up one of the favorite movies/shows from your About Me page on imdb.com.
topic:→
valuepairs, such as
Genre: Comedy.
These are snippets of TA Victoria's updated page, showing a favorite movie:
ol
(See example screenshot on next slide.)
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 the 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. We aren't going to give any hints; you must figure it out on your own by searching the web.
Note: This is very tricky! It is not something that students will be expected to do in this course.
These are snippets of TA Victoria's updated page with a decrementing ol
:
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 exercises unless you want to for fun.
Great work!