CS472- Lab 2: Basic HTML and CSS Solved

  Basic lab instructions
You may want to bring your textbook to labs to look up syntax and examples.
Have a question? Ask a TA for help.
We encourage you to talk to your classmates; it's okay to share code and ideas during lab.
You are not expected to finish all of the exercises. Just do as much as you can in the allotted time. You don't need to finish the rest after you leave the lab.
Before you leave, check in with a TA to get credit for your work.
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
Validate Your Page
Upload Your Page to the Web
Validation Links
Advanced Style Techniques
Favorite Movie
Decrementing ol
Exercise: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:

Your name
A description of you in <= 2 sentences. Emphasize important word(s) in bold.
A list of classes you are taking right at MUM.
Your 3 favorite movies, books, or TV shows, in order. Make at least one link to an interesting site about that TV show/movie/book, such as itsIMDB
Two images that represent you when you're happy and sad. (consider GIS)
Something about one of your neighbors (people sitting next to you)
, how to view the page
To see your page in the web browser, in Chrome click File, Open File... and browse to your page file to open it.

Exercise: CSS Styles (~15 min)
(See example screenshot on next slide.)

Create a stylesheet named styleme.css to improve the appearance of your About Me page.

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: Arial, Arial Black, Verdana, Trebuchet MS,Georgia, Tahoma, Courier
New, Times New Roman

Change at least one other thing (e.g. background color, text alignment, etc.)
: Validate Your Page (~10 min)
Next, validate the syntax of your HTML and CSS code:

Open http://validator.w3.org/ (HTML) or http://jigsaw.w3.org/css-validator/ (CSS)
Either click Validate by File Upload and then Browse to your html file, or click Validate by Direct Input and then copy/paste your code into the text box.
If there are any errors, fix the first one, then repeat the previous steps.
o     Try to get the green bar for 0 errors. "Warnings" are okay. o               (The error messages can be hard to understand. Feel free to ask a TA or neighbor for help.)

Exercise: Put Page on Web (~10 min)
Use our Uploading Files directions to upload your page to the mumstudents.org server.Put your files in a folder named lab1 within your public_html
Check the page by viewing it in the web browser. Its URL should be:http://mumstudents.org/~USERNAME/lab1/aboutme.html
Ask the instructor if you have any problems logging in to mumstudents.org or uploading your files!

Exercise: validation links
image: http://mumstudents.org/cs472/2013-09/images/w3c-html.png
Image: https://manalabs.org/img/w3c-html.png   link URL: http://validator.w3.org/check/referer

Link: https://validator.w3.org/nu/?doc=<url of your page>

image: http://mumstudents.org/cs472/2013-09/images/w3c-css.png
Image: https://manalabs.org/img/w3c-css.png        link URL: http://jigsaw.w3.org/css-validator/check/referer

Link: http://jigsaw.w3.org/css-validator/validator?uri=<url of your page>

(These links work only if you view your page on mumstudents.org, not on your computer's hard drive.) 

 

: Advanced Styles (~10 min)
(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:

Make your hyperlinks not underlined by default. 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.)
These are tricks not covered yet in class. Use Google or a CSS reference such as W3Schools.

Exercise, example
These are snippets of TA Victoria's updated page, showing links and drop-caps: Links: (hover is not shown)

 

Drop-caps:

 

Exercise: Favorite Movie
(See example screenshot on next slide.)

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.

The info is in short topic: → value pairs, such as Genre: Comedy.
Therefore, represent it as an HTML definition list. (see lecture slides)  Consider applying styles to your definition list to make it look snazzy.
 

, example
These are snippets of TA Victoria's updated page, showing a favorite movie:

 

Exercise : (h4x0rz only): Decrementing 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.

 

, example
These are snippets of TA Victoria's updated page with a decrementing 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 exercises unless you want to for fun.

Great work!