Web Design 1 - HTML Lesson 12 - tile Backgrounds, Google Forms

Seamless Tile as a Background

You already know how to use color as a page background. An image can also be used but there are a few things to consider:

Trying to place a large image for the background is not a good idea
- just don't do it - it takes a lot of file space, has a long load time , and is difficult (if not impossible) to always match the screen size your customer may be viewing the site on

A busy pattern may not be the best choice
- be sure it is not overwhelming and commanding more attention than the main content of your site

Do use a small image that "tiles"
- this means it will repeat as needed to fill the screen and has edges that match up perfectly (seamless)

Where do you find these?
Here are three sites but there are other online.

Safety Tips:
- ALWAYS be careful about what sites you dowload from - if you can download just the .jpg or .png file that is ok
- do not ever download any .zip or other type of compressed files
(this will download all unseen programs in a file and is one way a virus can be loaded onto your computer)


Now change your body style so that it is calling an image for the background
- it is fine to keep the background color style (just in case the image does not load)

body {
background-color: #6D0020;

Save your page and look at it - does the background show up and can you see how the image is repeating across the screen

Adding a Google Form

Google Forms are an easy way to collect information and simple to create and add to your site.

  • Just go to Google Drive - to your class folder
  • Choose New - Google Form (you might need to use the more option at the bottom to see it)
  • You can add different types of questions
  • To change the colors or apply a theme use the paint icon
  • Use preview to see how your form will look
  • Choose how to accept responses - if you click on the Sheets icon you can see your answers in spreadsheet in your folder
  • When happy choose send
    - you can change the anyone at SHS to just anyone
    - you will see options to email, get a link, or the embed code - we will copy the embed code and add it into your pages just like we did with the google maps and youtube videos


Assignment for HTML Lesson 12

  • Find and apply a tile background for your page - use something other than the one we tested with

  • Create a Google Form with at least 3 different types of questions - you may, of course, add more
    - be sure the form has a theme applied
    - embed the form in your page