Basic Page Sections

Basic Page Sections

A basic web page usually has these sections:

  • Header: This identifies the site, usually has an h1 element and maybe a logo if one is used
  • Navigation: so you can move throughout pages in the site
  • Content: this is where the main content for the page goes
  • Footer: this let’s people know they’ve reached the end of the page and also often has info about who created the site, copyright info and, if pages are long a smaller version of the navigation.

Here is a diagram

In HTML5 elements were added to help us define some of these sections: header, nav, footer. For the content it is common to add a div with a class or ID on it that wraps all content. Two other HTML5 elements, article and section are also used, but we will cover them later. Here is a basic page with sections that you can use:

<!doctype html5>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Page Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>My Main Heading</h1>
    </header>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="page2.html">Page2</a></li>
            <li><a href="page3.html">Page3</a></li>
        </ul>
    </nav>
    <div class="main">
        <!-- page content goes here -->
    </div>
    <footer>
        <!-- footer content goes here -->
    </footer>
</body>
</html>

Styling the Page

When you are styling the page you want to use some of the graphic design basics to help identify the diffferent sections of the page:

  • Color
  • Line
  • Space

Color

When you want to set the color of text, you use the color property:

h2{
    color:#ff3300;
}

When you want to set the background color of an element use the background-color property:

nav{
    background-color:#000;
}

If you do set the background color, also make sure you set the color of the text so it contrasts with the background-color and is readable.

Line

The simplest way to add lines to define and separate elements with borders.

header{
    border:1px solid #333;
}

Sometimes you don’t want a border all the way around. So you can just set one, like here adding a border above the footer:

footer{
    border-top: 3px solid black;
}

You can set all four borders separately:

  • border-top
  • border-right
  • border-bottom
  • border-left

Space

Adding space between elements is another way to separate them. When you’re trying to add space between elements, margin is the way to go first:

footer{
    margin-top:50px;
}

Like border you can set all four separately or at once if you just use margin:30px

Navigation

The first thing you need to do navigation is HTML. In this class, and in most sites on the web, we will use an unordered list (<ul>) to hold our navigation. Each <li> will have an <a> with a link to the proper page. We will also wrap all of that in the HTML 5 <nav> element. So all of your navs will basically look like this:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="sites.html">My Sites</a></li>
        <li><a href="favorites.html">My Favorites</a></li>
    </ul>
</nav>

When you do other sites you will basically just change the text and the links in the href attribute.

Review: Block vs Inline and the Box Model

To understand how we are going to turn this list from a bunch of bullets into something that looks like navigation we need to review the box model and block vs inline.

Block vs Inline

The basic difference to remember is that

  • Block elements are like big blocks that put themselves on their own line and take up the full width of the containing element by default.
  • Inline elements just go with the flow and stack next to each other

Common block and inline elements:

Block Inline
h1..h6
p
ul
ol
li
div
nav
section
article
a
img
b
i
em
strong

You’ll notice that the list elements we want to use are block elements. So we have to figure out a way to get them to appear next to each other. The next part of this article deals with how to do that. It’s all CSS from here.

Navigation CSS

CSS is pretty powerful and one thing it can do is to change an element from block display to inline and vice versa. So we’re going to do that with our li.

We want to make sure it just effects the li elements in our navigation so we will use the nav as part of our selector:

nav li{
   display:inline;
}

This gives us basically what we want. But we need a bit more styling to remove the bullet points and space out the nav items from each other:

nav li{
   display: inline; /*moves list items next to each other*/
   list-style-type: none; /*removes the bullet points*/
   padding-right: 20px; /*spaces the nav items out so not too close to each other*/
}

And there you have a basic navigation. Usually you also want to remove the underline from the links and possible color them to match your design. Here is a simple rule that will do that:

nav li a, nav li a:visited{
    color: #fff;
    text-decoration: none;/* removes the underline */
}

The only complicated part there is we added a “nav li a:visited” selector. We did this because by default a visited link is styled with purple color. We want the links to stay the same whether or not they have been visited.

Additional styles

Sometimes it helps to show that it is navigation if you add some more styling. here are a couple of other things you can do:

This adds a hover style that adds an line under the nav item and changes the color. This way they can see it’s a nav when they hover over it

nav li a:hover{
    color:#ccc;
    border-bottom:1px solid #ccc;
}

This makes the nav look like a nav bar by giving a background color to the ul:

nav ul{
    background-color:#888;
    padding:10px; /*to give some breathing space around the text*/
}

Closing

Have fun and use your creativity to experiment with different color combinations, fonts, sizes etc. But remember that in the end it needs to look and function like navigation or your users will be confused.

There are other ways to style navigation. In the future I’ll show you some more advanced ways of creating a navigation. However the method above is simple and works well on all browsers and so we will learn that first.

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;
}

Class on Tuesday 9.24.13

Here are the files we worked on in class: 100class_9.24.13_inClass.zip

Today we are going to start with going over FTP again (we didn’t really get to finish it fully last class) and then diving into CSS.

FTP

In order for people to see your files on the web, you have to upload them to a web server. To upload files we can use the FTP protocol. This a protocol like the HTTP protocol the browser uses but it is designed to upload and download files.

I have created a separate post on FTP with Filezilla you can read here.

CSS

Today we will really get into CSS. I will use

To give you a hands on introduction.

Other Materials

Uploading files with FTP and Filezilla

There are a number of different programs which allow you to use the FTP protocol. The one we will use in class is Filezilla. It is free and is available on both Mac OSX and Windows. You can download it here if you don’t have it at home yet.

In order to use FTP we need three pieces of information:

  1. The Host, which for all of you is: mmp.bmcc.cuny.edu
  2. The Username, this was given to you last class and is some version of your first and last names
  3. The Password, this was also given to you in class.

If you don’t remember your username or password I can give it to you, but please put it somewhere that you will be able to remember it.

Here is the process for uploading files.

  1. Open Filezilla

  2. Enter your login information (Host, username, Password) and click QuickConnect

  3. You should see this message if you connect successfully

  4. When you are logged in you will see the folders and files on the server on the right panel. The first time it will be blank. On the left panel select the folder that contains the files or folders you want to upload. I suggest creating a BMCC-Server or MMP-Server folder that will contain all of the content you want to put on the server

  5. To upload a folder or file, first make sure you are in the correct place in both panels (local and server), then right click the file or folder on the local (left) side and select Upload.

  6. You can see the progress in the bottom window.

If you make changes to files or folder names or locations outside of filezilla, there is a refresh button you can click to update:

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

 

Intellectual Property on the Web

Intellectual Property on the Web

Digital files, like text and images on the Web, are easy to reproduce and edit. However most content found on websites is copyrighted by law and cannot be reproduced without an explicit permission from its author. Copyrighted content includes most creative property found on the web, such as text, images, video, audio and code. If you do not know if material on the web is copyrighted it is safe to assume that it is. Copyright laws apply regardless if the website displays a copyright notice. If you want to use materials created by somebody else, your best route would be to ask for permission from the author.

What is copyright?

According to the US Copyright Office, “Copyright is a form of protection provided by the laws of the United States … to the authors of “original works of authorship,” including literary, dramatic, musical, artistic, and certain other intellectual works. This protection is available to both published and unpublished works.”

Copyrights laws give author exclusive rights to reproduce, distribute, and display their work in public, as well as create other work derived from it. Authors can grant other people permission to reproduce their work or use it in other ways.
More about copyright laws.

Fair Use

Under certain circumstances it may be legal to make very limited use of copyrighted material without the permission of the author. For example, in a book review, you may quote a paragraph from the book you are reviewing, or in a article about a movie you may include an image from the movie. You still must attribute the work to its creator. Fair use usually implies that your intent is non-commercial, educational or nonprofit, that you use a small portion of the original material and that your use of it does not devalue its original source. However, Fair Use does not stipulate the amount of text, code, video or music that is permissible to use and your safest bet is always to seek author permission.
More about Fair Use.

Creative Commons

Some authors choose to allow others the use their work on certain conditions. Authors using one of the Creative Commons licenses keep their copyright but allow people to copy and distribute their work on the conditions specified in the licence, and provided they give them credit. For example, in flickr.com/creativecommons you can find images published under several Creative Commons licenses. If you wish to use one of these images in your work you will have to carefully read the license of the image and comply by its rules.
More about Creative Commons.

Class on Tuesday 9.17.13

This week we are going to focus on images. How to add them to your HTML file and how to do basic cropping and resizing in Photosohp and some of the concepts you need to know about what they are and how they should be used.

Old Business

At the beginning of class we will quickly go over the assignment and some HTML and using Blackboard.

Images

We will start on Tuesday with jumping right in and learning how to add images to a page and opening Photoshop and doing some basic image editing.

Images are covered in Chapter 5 in the book which you should read and will help if you forget how to do things we did in class when you get home.

There are also some supplemental materials the book provides that are helpful for this. I’ll link to those in the sections below.

Planning for Adding Images

Before you start adding images to your page you need to know at least a couple of things:

  • The dimensions you want for the image. This is the width and height in pixels.
  • What image you want on the page. If you don’t know that yet you will need the next section.

Finding Images

Sometimes you already have images ready before you start creating the page but often you need to find images. First let’s look at the type of images you might want to look for. Our book has a resource for this: http://htmlandcssbook.com/extras/choosing-images-for-your-site/

The book resource is great with helping to understand how images are used. The only problem is that the images shown are professional photographs and if you can’t shoot them yourself and don’t have the money to buy them then there is still often the problem of actually finding an image.

Creative Commons
In order to use an image on a web site you have to have permission from the creator of the image to use it. Formally this is a license (if a friend allows you to use an image at least have them send you an email saying it’s OK). The Creative Commons license is one image creators can give their images that allow people to use them and even edit them and manipulate them. Their website has a search that can be a good place to start looking:

Here are two other page with more information about what you can and can’t use and how to find images:


For the following examples you can use images you found while we were doing the Creative Commons search or you can download the following zip file and use images from that. They’re my images (a random set) and you can use them for class.

imagesForTesting.zip

Cropping and Resizing Images in Photoshop

There are two basic things you need to do to an image to use it on the web.

  1. Resize it to fit on the site.
  2. Crop it to the Aspect Ratio you want.

Both of these actions change the image’s Image Dimensions

We are going to explore what these are and how to do them in Photoshop.

The book as a tutorial on changing the image dimensions:
http://htmlandcssbook.com/extras/image-dimensions/

File Formats and Saving for the Web

After you’ve edited your image you need to save it in a format that works on the web. Photoshop’s native .psd file format won’t work. Generally you use one of the following 3 formats:

  1. JPEG (.jpg, .jpeg): These are used for photographs and images with a lot of detail and gradients.
  2. PNG (.png): This is used for images without a lot of detail like icons and text rendered as an image. The PNG format can also do transparent backgrounds in images.
  3. GIF (.gif): This is simlar to PNG but it is a proprietary image format.
More on GIF

Because this is proprietary (technically you have to pay a company to use the format) many people have stopped using it and use PNG instead. You don’t need to use it, but you should know about it and some people do because older browsers sometimes have trouble with PNG files (especially the transparency). Nowadays not many people use those browsers anymore. The other reason people use GIF files is to create animated gifs. Some links for those if you’re intersted because we won’t cover them in class:

Saving for the web

The book also has a tutorial on saving images out for the web which you can use:
http://htmlandcssbook.com/extras/resizing-and-saving-images-for-the-web/

Adding Images to Your HTML Page

Finally, we are ready to add an image to the page. The good news is that once you understand a couple of details, this is the easy part.

One thing to remember is that the image stays as a separate file and is not embedded in the page like MS Word might do. You can just tell the browser where to find the image and where it should add it to the page when it makes the page.

A basic image has these pieces:

  • img tag <img>: where you put this on the page tells the browser where to place the image
  • src attribute src=”images/cat.jpg”: this tells the browser where to find the image file
  • alt attribute alt=”dog chasing ball”: this is a text description of the image. Blind people and those with text browsers use this to know what the image is about. ALWAYS INCLUDE THE ALT ATTRIBUTE.

Optional

  • width attribute: this tells the browser how wide the image will be
  • height attribute: this tells the browser how tall the image will be.

Don’t use:

  • align attribute. We will use CSS for this instead

Absolute vs Relative Paths

The src attribute in the img element is where you tell the browser it can find the image. This is called the image path. There are two ways to do this.

A Relative path is directing how to get to the image relative to the current HTML page.

Examples:

  • file is in same place as html: src=”cat.jpg”
  • file is in folder named images: src=”images/cat.jpg”
  • file is in folder named animals that is in a folder named images: src=”images/animals/cat.jpg”
  • file is in folder named animals that is outside of your root folder where the .html file is: src=”../animals/cat.jpg”

To keep things simple we always use a folder named images that is in the same place as the HTML files and put all of our images there so the src is always src=”images/filename.jpg”

An Absolute path is a full url to an image on the web. It starts with http:// and if you put it in the address bar of your browser it would show the image.

Warning a common mistake when using some programs is that they insert an absolute link to a file on your hard drive. It will look somethign like:

src=”file:///C:/Users/Username/Desktop/cat.jpg”

This is not correct and won’t work. Change it to be a realtive link. You may have to move the file to your images folder first.

Example img elements

Relative examples

<img src="images/cat.jpg" alt="Picture of my cat fluffy">

<img src="images/dog.jpg" alt="My dog Fido" width="200" height="150">

Absolute example

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Iris_cat.jpg/320px-Iris_cat.jpg" alt="picture of orange kitten named iris being held in a hand">
<!-- iris uploaded by Alvesgaspar to http://commons.wikimedia.org/wiki/File:Iris_cat.jpg -->

Different people will require different ways of attributing an image. I used a comment here but a better way, if possible is to add text to the page with the creator’s name and a link to the original. We will look at that in another class.

Book Examples

The book also has examples from Chapter 5 of adding images. You will need to View Source or use the Inspect Element to see what the pages are: http://htmlandcssbook.com/code-samples/chapter-05/