This week's standard lab includes the creation of a basic HTML webpage and a basic CSS external style sheet which demonstrate the use of various types of selectors in creating CSS style rules. Below are an example and instructions for the standard version of Lab 06.

My Great Blog

Featured Story

by Someone Special

Resistor trigger point DARPA glass Beta. Destroy optimization drive train energy source hover laser serve and protect save interlock. Degrees of freedom optimization charging kawasaki parallel metal ID-10T destroy wheel solar LaGrange multipliers.

Gear memory hover axle hose wheel machine screw beep. Current reliability ID-10T titanium laser beams driver performance automation servo lithium ion reach order energy source Z-2. Error collision sensor engine repair gear.

Last Week's Story

by An Important Author

Nut inverse kinematics solar solenoid degrees of freedom screw diode program. Intelligence power reach three laws of robotics performance iteration ID-10T memory velocity realtime. Sensor exponential assembly kawasaki direct numerical control engine inverse kinematics intelligence camera jitter. Pneumatic three laws of robotics kawasaki solenoid trigger point Voltron driver screw inverse kinematics scale axle singularity titanium.

Hose KARR realtime save Asimo metal normalize magnet optimization pulley. Static save axle drive train R2-D2 T-850 program servo kawasaki drive power jerk performance microchip sensor linear. Hybrid oil sensor industrial camera system.

Ancient History

by Someone Else

Charging collision sensor LaGrange multipliers system pulley iron order watts. Normalize Chani ID-10T magnet memory autonomous intelligence Go-bots saw gear Speedy. IG-88 iteration error mechanical Tony beep redundancy singularity Dot Matrix device metal optimization sprocket microchip mechanization. Normalize repair performance hydraulic glass hover servo shear pad drive train ohm collision sensor singularity error function Decepticons.

Standard Lab

Checklist
  • element selector
  • id selector
  • class selectors
  • Meaningful comments in HTML & CSS
  • Valid CSS & HTML (2 marks)
  • Consistent Formatting in CSS
  • ADV Navigation System (2 marks)
  • ADV Polish

Part 1 - Create Your HTML Page

  1. Use this lab06.html template as a starting point. It has three blog-like entries, using markup like this to keep everything meaningful:
    <article id="current"> <h2 class="title">This Week's Story</h2> <h2 class="author">by Robin</h2> <p> Static save axle drive train R2-D2 T-850 program servo kawasaki drive power jerk performance microchip sensor linear. Hybrid oil sensor industrial camera system. Hose KARR realtime save Asimo metal normalize magnet optimization pulley. </p> </article> <article> <h2 class="title">Last Week's Story</h2> <h2 class="author">by Robin</h2> <p> Hose KARR realtime save Asimo metal normalize magnet optimization pulley. Static save axle drive train R2-D2 T-850 program servo kawasaki drive power jerk performance microchip sensor linear. Hybrid oil sensor industrial camera system. </p> </article> ...
  2. Note that only the first article has an id attribute of "current".
  3. Don't forget to put a link from your main index.html page to your lab06.html page!

Part 2 - Create Your CSS Content and Add Selectors

  1. For the Standard part of this lab, do not modify any of the HTML.
  2. Create a new CSS doc named lab06.css, place it in your css folder. Use a link element to connect your lab06.html file to your lab06.css file. Use relative addressing to make sure those two files are properly connected.
  3. Add in the minimum CSS rules to obtain the following design objectives:
    • authors and titles should look different from each other, but be the same for each article (use those CSS classes)
    • paragraphs should be easy to read (use an element selector)
    • the title for the first article should be a a style unique from the rest (use the id selector)
  4. You don't need to know all the properties yet! For this lab you can simply use the color property, or whatever makes sense and looks good.
  5. Also, remember to work incrementally: check that a style rule is working as soon as you put it into the css file.
  6. Don't forget that to have id and class selectors affect your HTML code, you need to have id and/or class attributes on some of your HTML elements
  7. Once everything is working on your local copy of the website, upload the two files to your site
  8. Don't forget to test and validate your HTML and CSS files - I'll be checking both.

Advanced Lab

Add a few more articles to your blog, so the content is at least a couple of screens long. Then have a look at this example as a starting point. Build a menu system at the top of your lab which contains links to each of the blog posts within the page using id attributes and a elements. Give some extra visual style to the menu system. Note: If you do complete the advanced section of this lab, be sure to indicate this in the title you give your lab (i.e. Lab 6 Standard & Advanced).