back

Web Authoring 1 - Assignment 6b 

Follow this directory structure

6b. Layout using Div Tags & 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 "lastname-6b.html".
  2. On this page in the upper left place your name inside an absolute postioned div tag with an orange background (200px x 200px).
  3. Create a second abolute positioned div tag that contains the provided image. 275 pixels from the left.
  4. After that create relative positioned div tag, centered 80% width, green background, dark green border.
  5. Nest 2 absolute positioned div tags inside the container div tag using the properties provided in the link below.

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 "lastname_6b.css".

  1. Create 5 new ID selectors in stylesheet file to be applied to div tags on HTML page as seen in provided link below.

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.