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
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.
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.
- 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
- Create a new
lab06.html page and put three blog-like entries in it. Use markup like this to keep everything meaningful:
<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>
- Give only the first article an
id attribute of "current".
- Don't forget to put a link from your index.html page to your lab06.html page!
Part 2 - Create Your CSS Content and Add Selectors
- Create a new CSS doc named
lab06.css, place it in your css folder, and 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
- You don't need to know all the properties yet! For this lab you can simply use the
- Also, remember to work incrementally: check that a style rule is working as soon as you put it into the css file.
- Don't forget that to have
class selectors affect your HTML code, you to have to add
class attributes to some of your HTML elements
- Once everything is working on your local copy of the website, upload the two files to your site
- Don't forget to test and validate your HTML and CSS files - I'll be checking both. Also, don't forget a link from your index.html to your new 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. 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).