HTML and CSS Basics - 01

This is a header of secondary importance

This is a header of secondary importance

Your assignment

I think you will enjoy seeing how coding works. For those of you who already know html and css, please do this exercise anyway, a little refresher will probably be good for you and it will demonstrate to me what you are actually capable of. Knowing how html and css work will help immeasurably when using Dreamweaver.

  1. Go to this page: Code Academy tutorial
  2. Complete the following tutorials. I have included several notes for them below that you may find useful. 
    • Note that there are some situations where the tutorial insists that you have coded something incorrectly. Sometimes you have made a mistake and need to find it based on what they report as the error. They make this very simple.
    • But at other times the error message is not accurate. I have made note below of the few steps where this happened to me. If it happens to you, just go to the next page using the menu at the top of the left sidebar.
    • You must use a plain text editor for your code. Do not use a word processor such as Microsoft Word or Apple Pages. Examples of plain text editors include:

My notes about the pages, please read them



HTML Structure: Tables, Divs, Spans


Now, please do the following:

To do this exercise, you can use any one of the online tutorial's html code editing pages. That editor will allow you to see the results of your code in the preview pane. Otherwise, you can use Notepad on Windows or TextEdit on Mac (with these settings).

  1. Start by saving an html file, even if there is no code in it yet. Save your file as:
    • yourlastname-html-css-basics-01.html
    • Be certain to include the file extension .html at the end. Do not use .txt or any other filetype extension.
    • Replace yourlastname with your last name.
      • For example, if I were saving the file I would name my file: html-css-basics-01-vaughan.html
  2. Create the html code needed for a proper basic html page including doctype, html, head, title, and body elements in the proper sequence.
  3. Include an html <title> with the following information:
    • yourlastname html-css-basics-01
    • Once again, please replace yourlastname with your last name.
      • For example, if I were doing this exercise, I would write this code:
        <title>vaughan html-css-basics-01</title>
  4. Then code within the body an example of each of the 6 headers using the words "heading 1", "heading 2", and so on. It ought to result in looking like this: 

    Example of the result of coding html headings 1 thorugh 6

  5. Then use the html style attribute to format the text of each of the headers the following colors:
    1. red - for heading 1
    2. green - for heading 2
    3. blue - for heading 3
    4. magenta - for heading 4
    5. cyan - for heading 5
    6. yellow - for heading 6 (you will have a difficult time seeing the yellow text)
  6. Your headings now ought to look like this:

  7. Underneath the headings create a paragraph element.
  8. Put into the paragraph element: Copyright followed by the entity for a copyright: &copy; ...followed by the year and your full name. For example, in the code I write I would have:
  9. Then end the page with closing </body> and </html> tags.
  10. Upload the file to me.