Assignment

Class on Thursday 9.26.13

Today we are going to continue our work on CSS but first we will talk about the assignment that is due on Thursday.

Details on Assignment 3

There are a few web design principles that are behind what I’m requiring for this assignment. We’ll talk about them briefly

  • Consistency and Repetition. When someone comes to your site it is good if it is clear that each page on the site is part of the same website. One of the ways you do that is to be consistent in the way you lay out pages and to repeat elements of the design. In the assignment that is seen in the requirements:
    • that you have the same h1 heading on each page (with the same text inside)
    • there is an image directly after the h1
    • there is navigation directly after the image
    • each page is centered
    • each page uses the same .css stylesheet
  • Usability. This refers to how easy it is for people to use your site. Following the guidelines of Consistency and repetition go a long way towards helping to make the site usable. Some of the requirements that help with usability are:
    • The navigation must be exactly the same on each page and come near the top of the page.
    • Not using a font-size less than 16px
    • The width of the page is not allowed to be too wide (makes it easier to read)
  • Scanability. This refers to how easy it is for peopel to recognize the various sections of your page so they can quickly understand what it is about.
    • Everything for consistency and repetition pretty much also applies to scanability. People will remember where things are on the page as they click through and not have to search as much
    • Adding space inbetween elements shows the eye that one section has stopped and the next is beginning. The sections of the pages for this assignment are heading, top image, navigation, main content

We will also talk about wireframes uploading and turning it in

CSS Continued

For this make sure you have the files from last class. If you don’t, you can download this file:100class_9.24.13_inClass.zip

We will continue to look into CSS. To make sure you have what you need for the assignment we will cover:

  • Setting the font-family
  • setting the font-size
  • The CSS Box Model: and go over block vs inline elements again
  • Setting padding and margins.
  • setting width of elements
  • Centering the page

I don’t think that we will get through everything listed here today. So whatever we don’t cover we will cover on Tuesday. The assignment isn’t due until the end of the day on Tuesday so you will have time to work on it in class and after class. I recommend that you get started over the weekend if you haven’t gotten started already.

Fonts

There are two basic things that you will want to style

  1. The font that is used
  2. The size of the font

font-family

You set the font with the font-family property. The value for the property is a list of fonts you would like the computer to use. The browser will try to use the first font in the list and if the user’s computer doesn’t have that, then will try the second and so on. Use quotes if the name has spaces. Here’s an example:

p{
    font-family: "Helvetica Neue", Helvetica, Arial;
}

So what happens if the users’s computer doesn’t have any of the fonts? What we do is specify one of five generic font types at the end and the computer will pick a font of that type:

  1. serif
  2. sans-serif
  3. monospace
  4. cursive
  5. fantasy

Something you will have to learn is the differnce between those and what fonts belong to which of the generic families. For the above example we would add sans-serif like so:

p{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

We will cover that in more detail in a later class. For now remember these guidelines:

  • most font’s are serif or sans-serif. Use these 90% of the time.
  • Fonts that look like handwriting or fancy old text are often cursive
  • fonts that are totally different with wild shapes and such are fantasy

You often learn at first by imitating

I would recommend at first that you use a site like this one: http://cssfontstack.com/
They allow you to copy
fonts and have thought about it a lot.

font-size and line-height

You set the size of the font with the aptly named font-size property. Here’s an example:

p{
    font-size: 16px;
}
Units

When you set a property like font-size you need to say what units you are using. For now, it’s easiest if you think in pixels which is px later we will learn some more units.

line-height

Whenever you set the font-size it’s a good idea to set the line-height too. This controls how much space there is between the lines. It is similar to setting single space or double space lines in MS Word, but you have more control. Line-height is one of the few that don’t need units. Most of the time just use a number between 1.3 and 2. Here’s an example:

p{
    font-size: 16px;
    line-height: 1.5;
}

The CSS Box Model

I’ve said it before and I”ll say it again: Everything on a web page must be inside of tags the other part to that is that visually, to the browser, all tags are boxes. To see that in action copy the CSS below and paste it at the very top of your styles.css file, then look at your .html page in a browser again.

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

There how that works. The * is called the universal selector. It selects all elements on the page. When you put in more than one of them at a time it it selects child elements.

Let’s look at this HTML as an example (we’re only including the body because you can’t style html and head elements).

<body>
    <h1>Heading</h1>
    <p> SOme text with <em>emphasis</em></p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>list item 3</li>
    </ol>
</body>
  1. The * is the first level, which starts with the body and includes everything else, so everythign would get a dotted red outline
  2. The * * would target just elements that were children of body and change their outline to dotted green. h1, p, ol in this case
  3. The * * * would target the elements inside of the previous elements and give them a dotted orange outline, em and li in this case.

So, once you get this example you are on your way to understanding:

  • Everything is in an element
  • Elements are boxes
  • These boxes(elements) can be nested inside each other
  • When one box is nested in another box, it is called the child element of that outside box and the outside box is called the parent element.
  • When we talk about layout, you will also hear the parent element referred to as the containing element because it contains the other elements.

Box Model Diagram

Open the link to this web site and we will see a visual diagram of how the box model works: http://www.redmelon.net/tstme/box_model/

This, http://www.w3.org/TR/CSS2/box.html, is the offical explanation, but may be a bit too complex for you right now. You may want to come back to it later when you have a more specific question about the model.

Block vs Inline

The final concept to get is that not all of the boxes are treated the same for each element. The two types are called Block and Inline. The basic difference is that

Styling the Box Model

Then you’re ready to learn the different properties

  • width
  • height
  • padding (can be set at once or for each side: top, right, bottom, left)
  • margin (can also be set at once or for each side: top, right, bottom, left)
  • border (can also be set at once or for each side: top, right, bottom, left)

For Inline elements you can only set:

  • padding-left
  • padding-right
  • margin-left
  • margin-right

Top and bottom padding and margin will not work and width and height settings wont’ take effect either. However you can change the

  • line-height

to make an inline element have a bigger height. I recommend not just randomly doing that but have a good reason and make sure you are targeting just the thing that needs more height with your selector.

Let’s look at an example. I have an element with a class of highlight. To give it a width and height of 200 pixels, add a 1px solid red line around the element and give it a 10px padding inside that border, you would write:

.highlight{
    width: 200px;
    height: 200px;
    border:1px solid #ff0000;
    padding: 10px;
}

A note about height
Generally you don’t want to set the height of elements. The content inside of the element will set the height for you.

Padding and margin use that number for each side of the box. You can also style each side individually. If I just wanted the padding and border on the top and bottom I could use:

.highlight{
    border-top:1px solid #ff0000;
    border-bottom:1px solid #ff0000;
    padding-top: 10px;
    padding-bottom:10px;
}

There are other ways to write this, which we will learn as we go along.

A note about border
Border might need a bit more explaining. It is a compound property that lets you set the border-width, border-style and border-color at once. You kind of need all three for a border to show so most people use border and then give a value for each one of those (order is not important). But to show you, both of the examples below are the same:

.highlight{
    border:1px solid #ff0000;
}

/* or */

.highlight{
    border-width:1px;
    border-stye: solid;
    border-color: #ff0000;
}   

Centering the page

To center the page we need to do two things to the body element (we use the body because it contains everything on the page):

  1. give it a width
  2. set the left and right margins to auto

Here is an example of setting 600 pixel width page that is centered:

body{
    width:600px;
    margin-left: auto;
    margin-right: auto;
}

You can also use shorthand with the margin property. That looks like

body{
    width:600px;
    margin: 0 auto;
}

The first number, 0, applies to the top and bottom margin and the second value, auto, applies to the left and right margins. You must use auto for the second value to center, but you can change 0 to another number, just don’t forget the unit value:

body{
    width:600px;
    margin: 50px auto;
}

Assignment 3: Bio Site with Images

This assignment is to take the three pages you created in Assignment 2 and add images and basic CSS styling to the pages. Here are the specifics

  • You have one css file and it is lined to each of the pages.
  • Every page must have the same h1 at the top of the page. You can pick the text but don’t think too hard. It can be something like Chris Stein’s Bio or All About Me or whatever but it should make sense.
  • Every page must have an image  with 800×300 dimensions after the h1. You can use the same image on every page or use a different one on each page, but they must all be 800×300
  • Every page must have navigation after the large image. This navigation must have the minimum navigation styling we will learn in class. You can add more styling if  you like.
  • After the navigation comes the content for the page. The navigation must be exactly the same on each page.
  • On the favorites page add at least two images that help visualize your favorites. Each image must be 380×200 in dimension. You can add more than two if you like
  • You have a single CSS file that is lined to each of the pages.
  • The CSS fiile must have styles to:
    • Make the page 800px wide
    • Center the page
    • Set the font-family
    • Set the font-size for the h1, p and li elements. You cannot use a font-size less than 16px
    • use margin and padding to add space between the elements of the page, including the images
    • You can add other styles if you like
  • There is an images folder with all of the images, there is a css folder with the CSS file

 

Due Date

This assignment is due on Tuesday, October 1 (you have a week and a half this time).

Turning it in

To turn it in to Blackboard you will upload it to the MMP server and then put a link to the index.html file on the web into the Comments in Blackboard. We will cover this in class but if you are confused then ask me and I can explain.

Example

Here are a couple of wireframes to give you an idea of what the pages will look like:

index.html

 

sites.html

 

 

favorites.html

 

Assignment 2: Biography Mini Site

Assignment 2 Biography Mini Site

This assignment extends Assignment 1. So make sure that you complete assignment 1 first.

What to do

  1. Create a folder named MMP100-Assignment2-YourName where you replace YourName with your name.
  2. Put your HTML file from assignment 1 in this folder. If it is not named index.html then change the name to index.html
  3. Create a new file named sites.html
    • add the basic html elements for a page
    • add a heading with text “Sites I Use or Admire”
    • add a list of at least 3 web sites you use a lot or really like for some reason. Make sure you add a link (<a> element ) to each of them.
  4. Create a new file named favorites.html
    • add the basic html elements for a page
    • add a heading with the text “My Favorites”
    • add a list of at least 3 favorite things. It’s up to you what kinds of things you want to add.q
  5. Add navigation to all three pages. This should be a nav element with an unordered lists and the pages (index.html, sites.html and favorites.html) as the list items. The navigation should be the same on each page and in the same place on the page.
  6. 2 Bonus points if you add a definition list to one of the pages.
  7. All HTML you add on every page must be valid and semantic.

Turning it in

To turn in this assignment zip the folder you used to keep the files and then upload that folder to Assignment 2 on Blackboard

Due Date

This assignment is due on Thursday, September 19

Assignment 1: HTML Page Biography

Create an HTML page that is a brief bio of your life. You must use all of the following tags at least once. You can use the h1 and p tags more than once and you can use more tags if you want and they are semantic.

  • html
  • head
  • title
  • body
  • h1
  • p

Make certain that the tags are semantically correct (h tags for headings, p for paragraphs etc) and that you have properly closed all of your tags.

Due Date

The assignment is due on Tuesday, September 10

Turning it in

Upload your files to Assignment 1 in Blackboard.