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
- Create html page called "index.html".
- On this page place your name at the top using h1 tags.
- 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.
- 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.
- Then add the green text using H2 tags.
- Use IMG tag to place photo of dog. Surround IMG tag wit P tags to keep it on it's own line.
- Add the next text in a paragraph.
- 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".
- Create 3 new tag selectors in stylesheet file to be applied to Body, H1,H2 tags. Each with unique properties.
- Create the following Link State tags:
a:link, a:hover & a:visited tags with a different colour for each.
- Create 1 new class style named ".pictureframe" in the stylesheet file to be applied to the photo to decorate the border.
- 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.

|