back

Web Authoring 1 - Assignment 4a 

Follow this directory structure

4a. Basic HTML Web Page using CSS

Assignment Instructions
Use Text editing software such as Notepad or TextEdit to create 1 HTML and 1 CSS file in a root folder:

HTML

  1. Create html page called "index.html".
  2. On this page place your name at the top using h1 tags.
  3. Use the same text as you see in this example and create 2 paragraphs. In the 2nd paragraph insert a line break as you see it here.
  4. After that create an Unordered List with the exact same text as seen in the example.
    • On each line as well isolate the words you see in red with a Span tag and apply a style attribute making it RED.
  5. Then add the green text using H2 tags.
  6. Use IMG tag to place photo of dog. Surround IMG tag wit P tags to keep it on it's own line.
  7. Add the next text in a paragraph.
  8. Finally Add the text "This is a link to DJO Lessons" and create a hyperlink to http://djolessons.com

HTML CODE - complete

 

CSS Stylesheet

Create new style sheet for this page and save it in the css folder in your root folder. Call it "mycss.css".

  1. Create 3 new tag selectors in stylesheet file to be applied to Body, H1,H2 tags. Each with unique properties.
  2. Create the following Link State tags:
    a:link, a:hover & a:visited tags with a different colour for each.
  3. Create 1 new class style named ".pictureframe" in the stylesheet file to be applied to the photo to decorate the border.
  4. Create 1 ID style called "#mylist" to be applied to the list. Set attributes according to provided instructions.

CSS CODE - complete

 

Details for code are privided in the green links as well as on the video demo.

 

  It should look like this.

Once completed Zip and upload Root folder to Canvas.