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.

Style - Internal styles

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.

Style - External styles

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.

Style - Inline style

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.

Style - Conflicting styles

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.

Color - Color names

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

Color - Color numbers

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

Other property values

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

We have just looked at color names and color numbers
A specific word, such as small, which is specified as a possible value for a style property
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 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.
A Uniform Resource Locator (URL) specifies how to find something on the Internet. For example:

Lab 3

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.

Put your web page on the Internet

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

Complete lab

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

  • lab1.html
  • lab2.html
  • lab3.html
  • index.html
Look at these pages with your Firefox browser.
Make sure each page works correctly on voyager.
Make sure the links from the index page work for each of the three lab pages.
Make sure each of the three lab pages has a link back to the index page.
Then submit assignment 3 in Canvas. The assignment submission should say:
Lab 3 is complete.

Reading assignment

Reading assignments are in HTML, A Beginner's Guide, by Wendy Willard.
Read the chapter.
You may wish to answer the self test questions. The answers to the self test questions are in the back of the book.
You are not required to do the projects in the book; we have our own laboratory assignments for this course.

Chapter 2 (last three sections in the chapter)
Chapter 3

Chapter 2
Use Character Entities to Display Special Characters
Be sure to always start a character entity with an ampersand (&) and close with a semicolon (;).
If you are using the number of the character, do not forget the number sign (#).
Add Commentsto an HTML File
Use comments to describe major sections and unusual techniques.
Set Up Style sheets in an HTML File
We are using internal styles and inline styles this week. Best practice is to use external styles, instead of internal styles and inline styles.
Typographical error in Creating the Structure, in sub section Inline, the second sentence should be: In the previous examples, a declaration was surrounded by braces, but inline declarations are enclosed in double quotes using the style attribute.
Even with correcting the errors in the sentence, it still seems a little awkward to me. I might have said:
Internal and External properties are enclosed in braces; example:
  color: blue;
  font-style: italic;

Inline properties are enclosed in quotes; example:
"color: blue; font-style: italic;"

Chapter 3
Identify the Ways in Which Color Is Referenced in Web Development
Best practice is to use color names for the 17 standard color names, and use six hexadecimal numbers for all other colors.
Web-Safe Colors
It is common to use "web-safe" colors, but this is no longer important. Modern computers have better color capabilities, so "web-safe" colors are not required.
Specify Document Colors
It is good to specify colors and other appearance characteristics in an external style sheet. There are older techniques, but style sheets are generally better.
On the Horizon
Optional, scan if you are interested.

An alternate text is Even More Excellent HTML by Timothy T. Gottleber and Timothy N. Trainor. This book gives both new and older techniques. You may read in this book, if you wish. Chapters 2 (previously assigned - read more this week) and 8.