Image Placement – Float property

Objectives

In this lessons, students will learn:

  • How to create nested and side-by-side elements
  • How to use the float property with images and text two different ways

Different ways to use the float property

image-float-right
Image float right

img-right

image-float-left
Image float left

img-left

float-left
Image  and paragraph float left

img-p-left


Files to download

Advertisements

Project – Jenware

Objectives:

At the end of this project, you will be able to:

  • Create a HTML  documents using <div>  and style with an embeded style sheet

jencare

jenware-specs


Files to Download
Jenware files

Requirements

  1. Folder called “LastName_FrstName_Jenware
  2. HTML document called “jenware.html”
  3. Directory structure
  4. Embedded Style Sheet

Defaults

Fonts – Verdana, Geneva, and sans-serif
Background color – #FDF9BD

  1. Create a one column layout in an HTML document.
  2. The width of the #container is 700px.
  3. Place the jenware_logo image inside of the header section
    Create a class for the jenware_logo called “logo”
  4. Place the main heading inside of the header section
    The main heading “Make it Personal” is 1.2em, letter-spacing is .2em, using a margin-top of -10px in size and color #F26521
  5. Place the tagline inside of the header section
    The tagline (“Special occasions…”) font is  Georgia, Times, and serif, with a margin of 1em
    Create a class for the tagline called “tagline”
  6. Create a navigation/menu within the nav section.
    The nav id background color is #751c54.
    The links color is #FFFFFF, and place a margin of 20px.
    The hover state color is #FDF9BD.
  7. Place the content “New Product…12mos” inside the products section.
    The content id background color is #FFFFFF, line-height 1.5em, padding 1em.
    The border color is #FFBC53 and margin 1em
  8. The secondary heading “New Product” is 1.2em in size and color #AC267B
  9.  “Barware and Babyware” is placed in an <h3> element and the size is 1em color #F26521
  10. The <em> element color is #F26521
  11. Place the copyright into the footer sectionThe font is .8em in size and color #663333. HTML code for © ( &copy; )
  12. Description of images:
    jenware_logo.png – Jenware
    glasses.jpg – Photo of glasses decorated with the letter R
    shirts.jpg – Photos of shirts personalized with initial letters
  13. Place files in a folder and name: lastname_firstname_Jenware

This is due at the end of class (Tuesday, October 17, 2017).
Share folder link to Google Classroom > Jenware

Ask assistance if you are not sure about a specific task.

One Column Layout Exercise

One Column Layout Exercise

one-col-edit1Default
Font – Arial
Size – 20px

Color:
header – dark salmon
content – light blue
footer – coral

  1. Create an HTML document with an Embedded style sheet
    and re-create the one column layout.
  2. Place text within a <p> element.
  3. Save as LastName_FirstName-one-col-layout.html.
  4. Upload the assignment to Google Classroom > One Column Layout.

Due: Thursday, October 12, 2017, at the end of class.