Background and Forms

1
Background and Forms
2
Background - body

• To embed background into a whole page
• ltbody background"tile.gif"gt
• If the picture is smaller than the screen size,
  it will "tile"

3
Background - body

• To embed background into a whole page
• If the picture is a "verticular" image. Because
  it is "tiling", it gives an illusion of a fading
  background.

4
Background - table

• Similarly to putting an image on the background,
  you can put one inside a cell.

ltTABLE border"1" width"600" height"400"gt ltTRgt
ltTD width"300" background"blue.gif"gtlt/TDgt
ltTD width"300" background"brown.gif"gtlt/TDgt lt/TRgt
lt/TABLEgt
5
Exercise 5

• Create ex5 directory inside public_html directory
• Inside ex5
• Create home.html do this first as template
• Create projects.html
• Goodies If you want to scale down a large image,
  just define the width size and the browser will
  automatically resize the picture eg. ltimg
  src"pic.gif" width"100"gt

6
home.html
7
projects.html
8
Forms

• HTML Forms
• Receive information from the web surfer
• A form will take input from the viewer
• Text Fields
• Input fields are going to be the meat of your
  form's sandwich. The ltinputgt has a few attributes
  that you should be aware of.
• type - Determines what kind of input field it
  will be. Possible choices are text, submit, and
  password.
• name - Assigns a name to the given field so that
  you may reference it later.
• size - Sets the horizontal width of the field.
  The unit of measurement is in blank spaces.
• maxlength - Dictates the maximum number of
  characters that can be entered.

9
Forms Introduction

• ltform method"post" action"mailtoyouremail_at_email
  .com"gt
• Name ltinput type"text" size"10" maxlength"40"
  name"name"gt ltbr /gt
• Favorite Drink ltinput type"text" size"10"
  maxlength"20" name"message"gtltbr /gt
• ltinput type"submit" value"SEND"gt
• lt/formgt
• method - We will only be using the post
  functionality of method, which sends the data
  without displaying any of the information to the
  visitor.
• action - Specifies the URL to send the data to.

10
Forms Radio Buttons

• ltform method"post" action"mailtoyouremail_at_email
  .com"gt
• What kind of shirt are you wearing? ltbr /gt
• Shade
• ltinput type"radio" name"shade"
  value"dark"gtDark
• ltinput type"radio" name"shade"
  value"light"gtLight ltbr /gt
• Size
• ltinput type"radio" name"size"
  value"small"gtSmall
• ltinput type"radio" name"size"
  value"medium"gtMedium
• ltinput type"radio" name"size"
  value"large"gtLarge ltbr /gt
• ltinput type"submit" valueSEND"gt
• lt/formgt
• value - specifies what will be sent if the user
  chooses this radio button. Only one value will be
  sent for a given group of radio buttons (see name
  for more information, if the name is the same,
  you allow only one option. If name is different,
  you allow multiple option).
• name - defines which set of radio buttons that it
  is a part of. Here, we have 2 groups shade and
  size.

11
Forms Check Boxes (check all applicable)

• ltform method"post" action"mailtoyouremail_at_email
  .com"gt
• Select your favorite cartoon characters.
• ltinput type"checkbox" name"toon1"
• value"Goofy"gtGoofy
• ltinput type"checkbox" name"toon2"
• value"Donald"gtDonald
• ltinput type"checkbox" name"toon3"
• value"Bugs"gtBugs Bunny
• ltinput type"checkbox" name"toon4"
• value"Scoob"gtScooby Doo
• ltinput type"submit" value"SUBMIT"gt
• lt/formgt

12
Forms Drop down lists

• ltform method"post action"mailtoyouremail_at_email
  .com"gt
• College Degree?
• ltselect name"degree"gt
• ltoptiongtChoose Onelt/optiongt
• ltoptiongtSome High Schoollt/optiongt
• ltoptiongtHigh School Degreelt/optiongt
• ltoptiongtSome Collegelt/optiongt
• ltoptiongtBachelor's Degreelt/optiongt
• ltoptiongtDoctoratelt/optiongt
• ltinput type"submit" value"SEND"gt
• lt/selectgt
• lt/formgt

13
Forms Selection Forms

• ltform method"post"
• action"mailtoyouremail_at_email.com"gt
• Musical Taste
• ltselect multiple name"music" size"4"gt
• ltoption value"metal/rock" gtMetal/Rocklt/optiongt
• ltoption value"hiphop" gtHip Hoplt/optiongt
• ltoption value"classical" gtClassicallt/optiongt
• ltoption value"alternative" gtAlternativelt/optiongt
• lt/selectgt
• ltinput type"submit" value"SEND"gt
• lt/formgt

14
Forms Text Area

• ltform method"post"
• action"mailtoyouremail_at_email.com"gt
• lttextarea rows"5" cols"20" name"comments"gt
• Enter Comments Here
• lt/textareagt
• ltinput type"submit" value"SEND"gt
• lt/formgt
• Rows and columns need to be specified as
  attributes to
• the lttextareagt tag. Rows are roughly 12pixels
  high, the
• same as in word programs and the value of the
  columns
• reflects how many characters wide the text area
  will be.
• i.e. The example shows a text area 5 rows tall
  and
• 20 characters wide.