Style and color

Comments are read by humans, and ignored by the computer. You should use comments to make it clear what you are doing. I put a comment at the beginning of each section. Sometimes I add a comment when I do something unusual.

Comments begin with   <!--   and end with   -->
You can put anything in a comment, except do not put   --   within a comment.

Internal styles can be used to change the appearance of the elements in a page. For example, you can make the background color for all paragraphs lime and the color of the text navy.

To code an internal style, we put a style element within the head container.
Inside the style element we specify we want to change the appearance of every p element in the page. Then we specify the background-color and the color . You can see the punctuation and format in the sample. Internal style sheets are usually satisfactory, but external style sheets are better.

External styles are exactly like internal styles, except the styles are put in a separate file. This is very valuable. One style sheet file can be used with many html pages. This is very good when you want to make many pages look the same. You have probably noticed many of my web pages have a similar look. I use one common style sheet for most of my instructional pages.

Most styles are put in external style sheets. External style sheets are easier to manage.

You can see the link, needed to use a style sheet in an external file, in the sample.

Another technique is to a style property and its value inside a html element. To do this put a style attribute in the html element. You do not need to select what you are changing with the style; it is this element. Inside the value of the style attribute, put the style property and value. Look at the sample.

If there are several conflicting styles, the closest and most specific one wins. For example, if there is an inline style and an external style that conflict, the inline style wins. Another example, if there is an internal style and an external style, the internal style wins.

You often need a color for the value of a style property.

There are approximately 140 standard color names. The link provides a listing of color names names

If you wish to use more colors use color numbers. See the discussion in the linked page.

Here are some other values you may use with some style properties.

Color

We have just looked at color names and color numbers

Keyword

A specific word, such as small, which is specified as a possible value for a style property

Length

The length specified in some units. Most common is in pixels. A pixel is one dot in the computer screen. For example, a screen might have 1600 dots across the screen; in that case a length of 1000px would be about 2/3 of the way across the screen.

Percent

Percent specifies how much of the available space is to be used. For example, if an element is in a division that is 400 pixels wide, and its width is specified as 50%, it will be about 200 pixels wide.

URL

A Uniform Resource Locator (URL) specifies how to find something on the Internet. For example: http://voyager.deanza.edu/~oldham

Now you are ready to build your lab 3 web page.
Follow the link on the left to read the lab 3 requirements and build your lab 3 web page.

Upload your index.html page and your lab 1.html and lab 3.html pages to our Internet server, voyager.
Do this the same way you uploaded your lab 2.html page.

The following web pages need to have been uploaded to your public_html directory in voyager:

• lab1.html
• lab2.html
• lab3.html
• index.html