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

Create a page for Lesson 14
- you can make it a simple table if you like - we are just going to change the background image, and add a Google Form to it

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? All over the web
    - just search for tile backgrounds (be sure these are not full wallpaper sizes - you need to look at the pixel dimensions)
    - but ALWAYS be careful about what sites you dowload from - if you can download just the .jpg or .png file that is ok
    - but do not 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)
    - You can also create your own - there are several websites that offer editors to help create a seamless tile background - again, be careful about which ones you use...

This is a tile with a slight texture - it may not be obvious but the corners will line up with no break showing -
Try it out - Copy this image to your images folder for html lessons
- it is not the most beautiful but you will see how this works

Now change your body tag so that it is calling an image for the background:

<body style="background-image: url(images/blue_paper.jpg)">

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

Here are some sites that have free seamless tiles:

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 14

  • 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, ask more
    - be sure the form has a theme applied
    - embed the form in your page
    * keep in mind that we will be taking each other's surveys so be appropriate in your questions, ok?