Week 1


moving blog

Please check and post the common public blog now at: http://mpm17fall2009.wordpress.com/

liquid layout

Here’s the layout I created on Kompozer, but after several attempts of publishing it, it still didnt go through. so I’ve snipped and printed the image from screen and pasting it on hereCSS stands for Cascading Style Sheet
CSS would define how the HTML elements are displayed when you view the web page.
CSS was created for storing the all the formatting tags that were being put into HTML pages.
HTML only intends to define the content of a document and the World Web Consortium created CSS to for the purpose of stylizing the HTML elements.
Styles are saved in external .css files, web creators are allowed to change the appearance and layouts just by editing one single file.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
you can control the style and layout of multiple web pages all at once by inserting the above code into the HTML and CSS pages at the very top.

The correct HTML for referring to an external style sheet is link below
<link rel=”stylesheet” type=”text/css” href=”style.css”>
this is always added to the head section.

Declaration refers to the style attributes and it consists of property and value.
Property refers to the style attributes you would like to change, for example “color”.
Value is the amount of pixels or the colour value that is set for the property to change into.

CSS box model refers to the design and layout. It consists of margins, borders, padding and the HTML content.

An element is the CCS or HTML syntax, for example <h1>, <p>

You can select a background colour for an element by changing the colour code in the body selector.
i.e h1 {background-color:#6495ed}

You can add a background image to an element by inserting the following link under a specific selector.
i.e. body {background-image:url(‘paper.gif’)}

Liquid Layout will comply with the viewport on the computer screen when you maximize or minimize the size of you window.
It moves in and out and is utterly based on its percentages in the entire window layout set by the developer.

When creating a liquid layout with CSS, you need to:
1. start with a layout grid.
-Determine how many columns you want and how wide it will be.
-Convert pixel-based measurements into percentage units.
-the percentage measurements will be calculated by the browser
-Divide the grid into columns and gutters and set the percentages for these elements in advance.
-Gutters prevent the columns becoming too wide in wide browser windows.
2. convert the columns into <div>containers.
-Add float, width, margin-left values into the CSS code when creating the columns.
i.e. (borrowed from http://www.maxdesign.com.au/presentation/liquid/#definitions)
float: left;
width: 48%;
margin-left: 3%;

float: left;
width: 20%;
margin-left: 3%; }

float: left;
width: 20%;
margin-left: 3%;

3. Add header and footer
-apply #header {margin-bottom: 10px;} at the very top of CSS code
-as for the footer, insert #footer {clear: both;} at the very bottom of CSS code.

4. Apply padding to the text with the container
i.e. (borrowed from http://www.maxdesign.com.au/presentation/liquid/#definitions)
h2, p { margin-left: 7px; margin-right: 7px;}

A block element would take up the full length and width available.
For example if you hover your mouse on a link, the area around the actually text would also be highlighted and clickable.

An inline element does the oppose as it would only take up necessary width.

You can change how an element is displayed by inserting the following exaple link:
li {display:inline}

When positioning the content on the webpages, you can either do static positioning that’s set by default.
Or you can do fixed positioning, so that the text will not move when the window is scrolled.
p. pos_fixed {position:fixed; top:30px; right:5px;}

CSS float allows an element to be pushed to the left or right, it’s often for the purpose to clear spaces for readable text that might be otherwise blocked or hard to covered up by the image.
Elements can only float horizontally, not vertically.
The elements after the floating element will comply with the movement and move around it.
For example, if an image goes to the right, the text after it will move to the left.
You can also float more than one element, several images can be set right next to each other using the following code:
{ float:left; width:110px; height:90px; margin:5px; }

You can turn off float by inserting the {clear:both;} code to stop the elements from floating.





Linda Lou – Organize Presentation

Lilian Chow – Diagrams and blog Posts

Winne Kwan – Writing Script

Kalytta Ng – Research

Now that you guys have learned about the internet, we’ll tell you about the web. Everybody who has access to the internet knows what it is but very few knows how to define it. Many people would respond with something on the lines of “The web is the internet”, except that is not true.

The web is within the internet – the internet is the container. For example, the CN Tower is the web while Toronto is the internet. An easier way of describing this is through demonstration. Here is a practical demonstration of the web with real people:

Lilian – Web Surfer
Linda – Computer
Kalytta – Server

Lilian is our web user and she is going to post something on her blog. To do this, Lilian has to put this through her computer, which is Linda. When Linda takes in the information, she changes it into a code called binary code. This binary code is read through any type of electronic technology. The packets of 8-bit binary code are then sent through the internet to the server, which is Kalytta. Now the server will take this binary code and translate it into HTML and it will display onto the web browser. Now that it’s on the web browser, people connected to the internet can view it. This also works if Lilian were to browse another page, except she would be finding somebody else’s server using the web address.

This is a simple way of describing what the web is. but in reality, it is actually quite complicated. We just simplified how the web works in a very simple format to be shown.





– Presentations of week 1 questions

– delicious and wikis

For next week:

Create a Liquid three column layout

Create a liquid layout with three columns using the following layout:

css layout

Your layout has to

–         Load the same background image in three different pages.

–        Position a background image in the right hand column away from the text

–        Align the text in the Header to the left

–        Align the text in the right hand column to the right

–        Remove the line under all links, change their color to a color of your choice.

–        Specify the width of the right and left column to be 300 px

–        Make sure you use padding and margin to create the same text flow as in the example.


As a group create the layout and develop a presentation that explains how you did it.

Post your answer as a comment to this post.

Here are some questions to get you started:

1: What is CSS and how does it work. (How do you use CSS to control the style and layout of multiple Web pages all at once. What is the correct HTML for referring to an external style sheet?)

2: What does the style attribute do and what do declaration, property and values refer to?

3: What is the CSS box model?

4: what is an element? How do you add a background color for all <h1> elements? How do you Set the background color of different elements?

How do you set an image as the background of a page?

5: What is a liquid layout? How do you build a liquid layout with css?

6: What is the difference between inline and block-level elements? How do you use them?

7: How do you size blocks, what do you need to know?

8: Explain the different ways to position elements on the screen. What is CSS floating?

welcome back to 2010

Hi All,

Welcome to this new year!

A copy of the course outline is in this blog.

Here are the research questions I need you to answer today. Make sure to enter your answers as comments here or a link to comments in the comments here…

Research questions:

1: What is the Internet and how does it work?

2: What is the web and how does it work?

3: What is a browser (list existing browsers and their platforms) and how does it work?

4: What is HTML and how does it work? Explain the structure

5: How do you link between pages, explain the different ways of linking? Explain the code

6: How do you include images in your pages? Explain the code

7: What is XHTML and how does it work?

8: What is XML and how does it work?

9: What is the difference between embedded and linked content?

Take care and have a great year!