HTML Review

1
HTML Review

• HTML
• and
• JavaScript

2
What is HTML?

• HTML stands for HyperText Markup Language
• It is the set of instructions hidden behind every
  web page (called the source of the page)
• HTML tags tell the browser (like Internet
  Explorer) how to display the page.
• For example, ltBgtHI THERElt/Bgt would display the
  words HI THERE in bold.

3
What is HTML?

• HTML tags are contained within lt gt
• The letters inside the lt gt are the instructions
  (like ltBgt for bold) and may be upper or lower
  case.
• Tags often come in pairsone to begin a feature,
  and another to end it.
• In the previous example, ltBgt means begin bold
  here and lt/Bgt means end bold here.

4
HTML Structure

• Each web page has a HEAD and a BODY.
• All web pages have required tags like these
• ltHTMLgt begin the page
• ltHEADgt some set up instructions
• lt/HEADgt are here
• ltBODYgt the main part of the page
• lt/BODYgt is here
• lt/HTMLgt end the page

5
HTML Structure

• The HEAD section often contains tags to display a
  page title.
• The title is displayed at the top of the window
  (not on the page).
• Here is an example
• ltHEADgt
• ltTITLEgtMy Web Pagelt/TITLEgt
• lt/HEADgt

6
HTML Structure

• The BODY section contains all the instructions
  for the actual page display.
• Inside the body section of a web page you will
  find tags that control text, graphics, lines,
  links, tables and other special functions.
• Remember that some, but not all, tags come in
  pairs.

7
Text-Related Tags

• Text is most often displayed in paragraphs, using
  block form.
• The paragraph tags ltPgt and lt/Pgt are used before
  and after a paragraph.
• ltBRgt (line break) is like pressing
  Return/Enter. The text that follows is displayed
  on the next line.
• NOTE Just pressing Return/Enter when you are
  writing a page in HTML does not guarantee that it
  will be displayed on the next line.

8
Text-Related Tags

• Text is sometimes displayed in BOLD or ITALICS.
• The tag pair ltBgt and lt/Bgt make the text between
  display in bold.
• The tag pair ltIgt and lt/Igt make the text between
  display in italics.
• Examples
• ltBgtThis is bold text.lt/Bgt This is bold text.
• ltIgtHere is italics.lt/Igt Here is italics.
• ltBgtltIgtBoth!lt/Igtlt/Bgt Both!

9
Text-Related Tags

• NOTE Though there is a tag for underlining (ltUgt
  lt/Ugt) it is not a good idea to underline text. It
  may be confused with a link, since they are
  usually underlined.
• The ltFONTgt lt/FONTgt tag pair can be used to change
  other aspects of text (e.g., color).

10
Text-Related Tags

• You will often see text displayed in large, bold
  type, almost like a newspaper headline.
• The header tags are used for this purpose.
• The largest header tag is ltH1gt lt/H1gt (larger
  numbers make smaller headers).
• An example ltH1gtMY PAGElt/H1gt displays MY PAGE
• ltH6gtMY PAGElt/H6gt displays MY PAGE

11
Text-Related Tags

• To center a header, the tag pair ltCENTERgt
  lt/CENTERgt is used.
• An example
• ltCENTERgt
• ltH1gtTRAINSlt/H1gt
• lt/CENTERgt
• displays
• TRAINS

12
Lines

• Many web pages use horizontal lines to divide the
  page.
• The ltHRgt tag is used to draw a line.
• You can control the size (thickness in pixels)
  and width ( of the window).
• Examples
• ltHRgt one pixel thick, 100 of window
• ltHR SIZE4 WIDTH50gt
• 4 pixels thick, 50 of window

13
IMAGE Tags

• The ltIMGgt tag is used to display graphics on web
  pages.
• The main requirement for the IMG tag is the file
  name (source) of the image.
• NOTE Web page images DO NOT become part of a web
  page file. They are separate files and must be
  located in the same folder as the web page file
  unless otherwise noted.

14
IMAGE Tags

• An example of an IMG tag that displays a graphic
  called ME.JPG
• ltIMG SRCME.JPGgt
• In the example above, the name (source or SRC)
  of the picture file is ME.JPG (stored in the same
  folder as the web page file).
• NOTE The image files name must be exactly as
  stored (upper/lower case, etc.)
• .JPG and .GIF indicate types of images
  appropriate for web pages.

15
Lists

• Many web pages contain lists.
• Lists can be unordered (using bullets like this
  list) or ordered (with numbers or letters).
• ltULgt lt/ULgt indicates an unordered (bulleted)
  list.
• ltOLgt lt/OLgt indicates an ordered list.
• ltLIgt lt/LIgt is used for each list item.

16
List Examples

• These tags
• ltULgt
• ltLIgtDogslt/LIgt
• ltLIgtCatslt/LIgt
• ltLIgtLizardslt/LIgt
• lt/ULgt

• Produce this list
• Dogs
• Cats
• Lizards

17
List Examples

• These tags
• ltOLgt
• ltLIgtDogslt/LIgt
• ltLIgtCatslt/LIgt
• ltLIgtLizardslt/LIgt
• lt/OLgt

• Produce this list
• Dogs
• Cats
• Lizards

18
List Examples

• These tags
• ltOL TYPEAgt
• ltLIgtDogslt/LIgt
• ltLIgtCatslt/LIgt
• ltLIgtLizardslt/LIgt
• lt/OLgt

• Produce this list
• Dogs
• Cats
• Lizards

19
A Word about Links

• All links use the tag that begins ltA HREF
• The A stands for anchor (think of an anchor
  chain..its made of linksright?).
• The HREF part will be the name of a web page or a
  web address.

20
A Word about Links

• Here are a couple of examples, you will see the
  actual message to click on between the A tags.
• This link shows the words Go Back and sends the
  user to a page called HOME.HTM that is stored in
  the same folder as the current page.
• ltA HREFHOME.HTMgtGo Backlt/Agt

21
A Word about Links

• This link shows the words More Info and sends the
  user to the CSUH home page.
• ltA HREFhttp//www.csuhayward.edu/gtMore
  Infolt/Agt

22
More about Links

• Virtually every web page has linksits the basic
  idea of the web and HTML (HyperText refers to
  links).
• Link tags look like this
• ltA HREFaddressgtwhat to click onlt/Agt
• The address can be a file name (like home.htm) or
  a web address (like http//www.csuhayward.edu)

23
More about Links

• The what to click on is quite often text.
• Whatever is placed between the ltAgt tags is
  displayed on the screen and usually underlined
  (though you can change it in your browser
  settings).
• You can also place an lt IMGgt tag between the ltAgt
  tags, making the image into a link.

24
More about Links

• The example below shows an image called TOY.JPG
  as a link to a page called TOYSTORY.HTM
• ltA HREFTOYSTORY.HTMgt
• ltIMG SRCTOY.JPGgtlt/Agt
• The ltIMGgt tag may also contain HEIGHT, WIDTH, and
  BORDER information.
• This way, however, the user will not know that
  the image is a link. See the next slide for a
  better idea.

25
More about Links

• In the example below, both the image TOY.JPG and
  the words GO TO TOY STORY are part of the link
  to TOYSTORY.HTM.
• ltA HREFTOYSTORY.HTMgtGO TO TOY STORY
• ltIMG SRCTOY.JPGgtlt/Agt
• The words in the link can come before or after
  the ltIMGgt tag. Placement of text is next to
  images.

26
More about Links

• Sometimes it is convenient to have a list of
  links. See the example below
• ltULgt
• ltLIgtltA HREFhttp//www.csuhayward.edu/gtCSUH
  lt/Agtlt/LIgt
• ltLIgtltA HREFhttp//www.csuhayward.edu/math/gt
  College of Math lt/Agtlt/LIgt
• ltLIgtltA HREFhttp//www.csuhayward.edu/bheckergt
  Barbaras Classeslt/Agtlt/LIgt
• lt/ULgt

27
Colors in HTML

• When you specify colors in HTML, you can either
  enter a color by name (for simple colors) OR
• You can put in codes that specify the amount of
  red, green and blue to include in the color
  (which gives you millions of combinations).

28
Colors in HTML

• Here is an example of the use of color in a
  ltFONTgt tag. The text will print in red.
• ltFONT colorredgtThe text.lt/FONTgt
• Here is another way to say red
• ltFONT colorFF0000gtThe text.lt/FONTgt (weird,
  huh?)

red
green
blue
29
Colors in HTML

• Whats all this FF stuff?
• If you want more than simple colors, you must
  specify the amount of red, green, and blue in the
  color.
• This is done with six hexadecimal (base 16)
  numbers (thats what means) - two each for red,
  green and blue.
• Each pair of numbers ranges from 00 to FF (yes,
  FF is a number) 00 none, FF highest

30
Colors in HTML

• Here are some sample color numbers
• RED FF0000 (high red, no green, no blue)
• GREEN 00FF00 (no red, high green, no blue)
• BLUE 0000FF (no red, no green, high blue)
• BLACK 000000 (no red, no green, no blue)
• WHITE FFFFFF (high red, high green, high blue)
• YELLOW FFFF00 (high red, high green, no blue)
• CYAN 00FFFF (no red, high green, high blue)
• MAGENTA FF00FF (high red, no green, high blue)

31
Colors in HTML

• Another place to use color is for a background.
• Background color is specified in the ltBODYgt tag.
• For example, to set the background of a page to
  light blue, use
• ltBODY BGCOLORlight bluegt

32
Colors in HTML

• You can also set the link color and text color
  for the whole page in the ltBODYgt tag.
• Here is a tag that sets the background to yellow,
  the text to red, the links to blue, and the
  visited links (the ones you have already been to)
  to purple
• ltBODY BGCOLORyellow TEXTred LINKblue
  VLINKpurplegt

33
More about Text Size

• You know header tags make large text (like
  ltH1gtlt/H1gt)
• You can also specify text size with a ltFONTgt tag.
  
• Here is an example of very small text
• ltFONT SIZE1gtWrite this.lt/FONTgt

34
More about Images

• Web page images are displayed on the left side of
  a page and in their actual stored size unless
  otherwise instructed.
• The HEIGHT and WIDTH of an image can be specified
  in the IMG tag.
• HEIGHT and WIDTH are measured in pixels.

35
More about Images

• Example
• ltIMG SRCMyPicture.gif HEIGHT100 WIDTH50gt
• The example above displays the graphic file
  MyPicture.gif with a height of 100 pixels and a
  width of 50 pixels.
• NOTE If you do not specify HEIGHT and WIDTH, the
  image will appear the size at which it was
  stored.

36
More about Images

• To align an image at the center or the right of
  the screen, it is easiest to use one of the
  following tag pairs
• ltCENTERgt lt/CENTERgt
• ltRIGHTgt lt/RIGHTgt
• The IMG tag is placed between the alignment tags
• ltCENTERgtltIMG SRCpicture.jpggtlt/CENTERgt
• NOTE If you place several IMG tags in a row (one
  for each picture), they will appear next to each
  other when the page is displayed.

37
More about Images

• If you want a border (like a frame) around the
  image, you can put BORDERthickness in pixels in
  the IMG tag. Example
• ltIMG SRCkitty.jpg BORDER3gt
• Here is an example of an image called BOG.gif
  which is centered, displayed 200 x 200, with a
  4-pixel border.
• ltCENTERgt
• ltIMG SRCBOG.gif HEIGHT200 WIDTH200 BORDER4gt
• lt/CENTERgt

38
Image Maps

• You have learned that a graphic can be a link.
• With an image map, a single graphic can be used
  to link to several different sites.
• Coordinates within an image are used to map
  various areas, each of which may be used as a
  link to a different web page.

39
Image Maps

• If you could see an image with its map, it might
  look like this

These areas might link to EAR.HTM
Each area could be a separate link.
This area might link to FEET.HTM
40
Image Maps

• Each area is defined by coordinates in pixels.
• For rectangular areas, it is the upper left and
  lower right.

This area might be defined as 2,200 (upper left)
205,300 (lower right)
41
Image Maps

• The HTML code to make an image map begins with
  the IMG tag.
• Here is a sample
• ltIMG SRCpig.gif USEMAPMIGgt
• USEMAP says that the graphic is an image map.
• MIG is the name of the map definition ( means
  look in this same document).

42
Image Maps

• The image map definition begins with a map tag
• ltMAP NAMEMIGgt
• The name of this map definition is MIG.
• lt/MAPgt ends the definition.
• The lines in between describe the areas (by
  coordinates) and the web pages that they link to.

43
Image Maps

• The lines between ltMAP NAMEMIGgt and lt/MAPgt
  define the areas, one tag for each area.
• Here is an example from the pig
• ltAREA SHAPERECT HREFFEET.HTM
  COORDS2,200 205,300gt
• The shape of the area is a rectangle, the link
  goes to FEET.HTM, the upper left of the rectangle
  is at 2,200 and the lower right of the rectangle
  is at 205,300.

44
Image Maps

• How can I find the coordinates?
• You can search shareware sites for image map
  programs.
• You can use a graphics program, if it shows the
  position of the cursor with pixels.
• Move the cursor over the picture and write down
  the appropriate coordinates.

45
Frames

• A FRAMESET document uses ltFRAMESETgt and
  lt/FRAMESETgt instead of ltBODYgt and lt/BODYgt.
• The type of frames (rows or columns) must be
  specified, and each frame must be described with
  a ltFRAMEgt tag like this
• ltFRAME SRC content1.htm" border"0" NORESIZE gt

46
FRAMESET Sample

• Here is the FRAMESET code for the example --gt
• ltHTMLgt
• ltHEADgtlt/HEADgt
• ltFRAMESET COLS100,gt
• ltFRAME SRCleft.htmgt
• ltFRAME SRCright.htmgt
• lt/FRAMESETgt
• lt/HTMLgt

WELCOME!

• Links
• One
• Two
• Three

Join us..etc.
left.htm
right.htm
47
FRAMESET Sample

• Two column frames - the first (left) is 100
  pixels wide. The right frame takes up whatever
  space is left over () on the screen.
• left.htm is the web page file for the left frame.
• right.htm fills the right frame.

• ltHTMLgt
• ltHEADgtlt/HEADgt
• ltFRAMESET COLS100,gt
• ltFRAME SRCleft.htmgt
• ltFRAME SRCright.htmgt
• lt/FRAMESETgt
• lt/HTMLgt

48
Self Check - Example Questions

• Which of the following is NOT a required tag?
• ltHTMLgt
• lt/BODYgt
• ltH1gt
• ltHEADgt

49
Self Check - Example Questions

• Which of the following is NOT a required tag?
• ltHTMLgt
• lt/BODYgt
• ltH1gt headings/headlines are common, but not
  required
• ltHEADgt

50
Self Check - Example Questions

• Which of the tags below will show the words MY
  PAGE on the page in very large type?
• ltTITLEgtMY PAGElt/TITLEgt
• ltH1gtMY PAGElt/H1gt
• ltH7gtMY PAGElt/H7gt
• ltFONT SIZE2gtMY PAGElt/FONTgt

51
Self Check - Example Questions

• Which of the tags below will show the words MY
  PAGE on the page in very large type?
• ltTITLEgtMY PAGElt/TITLEgt
• ltH1gtMY PAGElt/H1gt H1 shows the largest
  headline
• ltH7gtMY PAGElt/H7gt
• ltFONT SIZE2gtMY PAGElt/FONTgt

52
Self Check - Example Questions

• Which set of tags below would display this text
  in italics and bold CLICK HERE
• ltIgtltBgtCLICK HERElt/Igtlt/Bgt
• ltIgtltBgtCLICK HERElt/Bgtlt/Igt
• ltBgtCLICK HERElt/Bgt
• ltH1gtCLICK HERElt/H1gt

53
Self Check - Example Questions

• Which set of tags below would display this text
  in italics and bold CLICK HERE
• ltIgtltBgtCLICK HERElt/Igtlt/Bgt
• ltIgtltBgtCLICK HERElt/Bgtlt/Igt
• ltBgtCLICK HERElt/Bgt
• ltH1gtCLICK HERElt/H1gt
• Explanation Tags must be nested - the first
  to be turned on must be the last to be turned
  off.

54
Self Check - Example Questions

• To put a blank line after typing
• ltBRgt
• ltPgt and lt/Pgt
• Just press Return/Enter
• Either ltBRgt or ltPgtlt/Pgt will work.

55
Self Check - Example Questions

• To put a blank line after typing
• ltBRgt
• ltPgt and lt/Pgt
• Just press Return/Enter
• Either ltBRgt or ltPgtlt/Pgt will work.

56
Self Check - Example Questions

• Which the the following makes a numbered list
  (1., 2., etc.)?
• ltOLgtlt/OLgt
• ltLIgtlt/LIgt
• ltULgtlt/ULgt
• ltNLgtlt/NLgt

57
Self Check - Example Questions

• Which the the following makes a numbered list
  (1., 2., etc.)?
• ltOLgtlt/OLgt a numbered list is an ordered
  list
• ltLIgtlt/LIgt
• ltULgtlt/ULgt
• ltNLgtlt/NLgt

58
Self Check - Example Questions

• To draw a line across the web page, use
• ltHRgt
• ltLINEgt
• ltLIgtlt/LIgt
• Must use a graphic.

59
Self Check - Example Questions

• To draw a line across the web page, use
• ltHRgt a line is a horizontal rule
• ltLINEgt
• ltLIgtlt/LIgt
• Must use a graphic.

60
Self Check - Example Questions

• Which of the following displays the words CLICK
  ME as a link to homepage.htm?
• ltLI homepage.htmgtCLICK MElt/LIgt
• ltLI CLICK MEgthomepage.htm
• ltA HREFhomepage.htmgtCLICK MElt/Agt
• ltLINKTO homepage.htmgtCLICK ME

61
Self Check - Example Questions

• Which of the following displays the words CLICK
  ME as a link to homepage.htm?
• ltLI homepage.htmgtCLICK MElt/LIgt
• ltLI CLICK MEgthomepage.htm
• ltA HREFhomepage.htmgtCLICK MElt/Agt
• ltLINKTO homepage.htmgtCLICK ME

62
Self Check Example Questions

• Which command is used to set the background color
  of a web page to white
• ltBODY BGCOLORWHITEgt
• ltBODY BGCOLOR000000gt
• ltBODY BGCOLORNONEgt

63
Self Check Example Questions

• To set the background color of a web page to
  white
• ltBODY BGCOLORWHITEgt
• ltBODY BGCOLOR000000gt
• ltBODY BGCOLORNONEgt

64
Self Check Example Questions

• Which of the following places a graphic called
  dog.jpg on a web page?
• ltIMG SRCdog.jpggt
• ltIMG SRCDOG.JPGgt
• ltGRP SRCdog.jpggt
• ltIMG GRPdog.jpggt

65
Self Check - Example Questions

• Which of the following places a graphic called
  dog.jpg on a web page?
• ltIMG SRCdog.jpggt
• ltIMG SRCDOG.JPGgt case must match file name
• ltGRP SRCdog.jpggt
• ltIMG GRPdog.jpggt

66
Self Check - Example Questions

• Which of the following sets the size of dog.jpg
  to 100 x 100 pixels?
• ltIMG SRCdog.jpg SIZE 100x100gt
• ltIMG SRCdog.jpg SIZE1100 SIZE2100gt
• ltIMG SRCdog.jpg HEIGHT100 WIDTH100gt

67
Self Check - Example Questions

• Which of the following sets the size of dog.jpg
  to 100 x 100 pixels?
• ltIMG SRCdog.jpg SIZE 100x100gt
• ltIMG SRCdog.jpg SIZE1100 SIZE2100gt
• ltIMG SRCdog.jpg HEIGHT100 WIDTH100gt

68
Self Check - Example Questions

• Which of the following creates a link to HOME.HTM
  by clicking GO HOME?
• ltA HREFGO HOMEgtHOME.HTMlt/Agt
• ltA HREFHOME.HTMgtGO HOMElt/Agt
• ltIMG HREFHOME.HTMgtGO HOMElt/Agt
• ltIMG HREFGO HOMEgtHOME.HTMlt/Agt

69
Self Check - Example Questions

• Which of the following creates a link to HOME.HTM
  by clicking GO HOME?
• ltA HREFGO HOMEgtHOME.HTMlt/Agt
• ltA HREFHOME.HTMgtGO HOMElt/Agt
• ltIMG HREFHOME.HTMgtGO HOMElt/Agt
• ltIMG HREFGO HOMEgtHOME.HTMlt/Agt

70
Self Check - Example Questions

• Which of the following allows the user to click
  on GO HOME or a graphic (home.jpg) to go to
  HOME.HTM?
• ltA HREFHOME.HTMgtltIMG SRChome.jpggtGO HOMElt/Agt
• ltA HREFHOME.HTMgtGO HOMEltIMG SRChome.jpggtlt/Agt
• ltA HREFHOME.HTMgtltIMG SRChome.jpggtlt/Agt

71
Self Check - Example Questions

• Which of the following allows the user to click
  on GO HOME or a graphic (home.jpg) to go to
  HOME.HTM?
• ltA HREFHOME.HTMgtltIMG SRChome.jpggtGO HOMElt/Agt
• ltA HREFHOME.HTMgtGO HOMEltIMG SRChome.jpggtlt/Agt
• ltA HREFHOME.HTMgtltIMG SRChome.jpggtlt/Agt
• Either graphics first or words first

72
Self Check - Example Questions

• Which of the lists below will results from these
  tags?
• ltOLgt
• ltLIgtltA HREFMINE.HTMgtSee Melt/Agtlt/LIgt
• ltLIgtGO AWAY!lt/LIgt
• lt/OLgt

1. See Me
2. GO AWAY!

1. See Me
2. GO AWAY!

1. See Me
2. GO AWAY!

73
Self Check - Example Questions

• Which of the lists below will results from these
  tags?
• ltOLgt
• ltLIgtltA HREFMINE.HTMgtSee Melt/Agtlt/LIgt
• ltLIgtGO AWAY!lt/LIgt
• lt/OLgt

1. See Me
2. GO AWAY!

1. See Me
2. GO AWAY!

1. See Me
2. GO AWAY!

74
Self Check - Example Questions

• Which is the correct text placement if this tag
  is used? ltIMG SRCSOS.GIF ALIGNTOPgtSINK!

SINK!
SINK!
SINK!
75
Self Check - Example Questions

• Which is the correct text placement if this tag
  is used? ltIMG SRCSOS.GIF ALIGNTOPgtSINK!

SINK!
SINK!
SINK!
76
Self Check - Example Questions

• To use a graphic (back1.gif) as a page
  background, use
• ltBODY BACKGROUNDback1.gifgt
• ltBODYgtltIMG SRCback1.gifgtlt/BODYgt
• ltBODY BGCOLORback1.gifgt
• You cannot use a graphic as a background.

77
Self Check - Example Questions

• To use a graphic (back1.gif) as a page
  background, use
• ltBODY BACKGROUNDback1.gifgt
• ltBODYgtltIMG SRCback1.gifgtlt/BODYgt
• ltBODY BGCOLORback1.gifgt
• You cannot use a graphic as a background.

78
Self Check - Example Questions

• If a background graphic is smaller than the page
  display
• The image is displayed larger to fill the window.
• The image is centered on the page window.
• The image is tiled (repeated).

79
Self Check - Example Questions

• If a background graphic is smaller than the page
  display
• The image is displayed larger to fill the window.
• The image is centered on the page window.
• The image is tiled (repeated).

80
Self Check - Example Questions

• To use an image (lineup.gif) as a line, use the
  following tag(s)
• ltHRgtltIMG SRClineup.gifgtlt/HRgt
• ltIMG SRClineup.gifgt
• ltHR SRClineup.gifgt
• ltHRgtlineup.giflt/HRgt

81
Self Check - Example Questions

• To use an image (lineup.gif) as a line, use the
  following tag(s)
• ltHRgtltIMG SRClineup.gifgtlt/HRgt
• ltIMG SRClineup.gifgt
• ltHR SRClineup.gifgt
• ltHRgtlineup.giflt/HRgt

82
Self Check Example Questions

• Which of the following graphics formats would
  need to be converted before using on a web page?
• GIF
• JPG
• TIFF
• BMP
• PICT

83
Self Check - Example Questions

• Which of the following graphics formats would
  need to be converted before using on a web page?
• GIF
• JPG
• TIFF
• BMP You will need a graphics
• PICT conversion program

84
Self Check - Example Questions

• An image map is
• A GIF that shows a map of a country
• A graphic that links to several different web
  pages
• A graphic that links to a single web page
• There is no such thing!

85
Self Check - Example Questions

• An image map is
• A GIF that shows a map of a country
• A graphic that links to several different web
  pages
• A graphic that links to a single web page
• There is no such thing!

86
Self Check - Example Questions

• Which of the following tags shows a rectangular
  area linking to home.htm with coordinates of
  100,100 and 300,400?
• ltAREA SHAPERECT HREFhome.htm
  COORDS100,100,200,400gt
• ltAREA SHAPERECT HREFhome.htm COORDS100,100
  200,400gt

87
Self Check - Example Questions

• Which of the following tags shows a rectangular
  area linking to home.htm with coordinates of
  100,100 and 200,400?
• ltAREA SHAPERECT HREFhome.htm
  COORDS100,100,200,400gt
• ltAREA SHAPERECT HREFhome.htm COORDS100,100
  200,400gt
• No comma between sets of coordinates

88
JavaScript
89
What is JavaScript?

• JavaScript is a programming language. This means
  that the instructions you write in JavaScript
  will make something happen.
• You can include it easily within the HTML code of
  a web page to customize the page.

90
What is JavaScript?

• JavaScript is related to Java and C, but it
  does not need to be compiled (translated to
  binary) before it is used.
• JavaScript is not the same as Java.

91
What is JavaScript?

• JavaScript code is interpreted - the browser
  executes each line of code as it is encountered.
• JavaScript is free and many existing samples are
  available.

92
How do you add JavaScript to a web page?

• When you copy or type the code, notice where it
  should go.
• JavaScript is most commonly placed in the ltHEADgt
  section of a page, but there are often parts that
  must go elsewhere.

93
JavaScript - Sample

• Here is an explanation of a simple use of
  JavaScript - asking a question and displaying an
  answer.
• In this case, there will be a JavaScript function
  (small program) called getName() placed in the
  HEAD section of the HTML.
• It will ask for a name and print Hi and the name.

94
JavaScript - Sample

• Heres what the function looks like
• ltscript language"JavaScript"gt
• var stName"XX"
• function getName( )
• stNameprompt("Please enter your name"," ")
• alert("Hi, " stName)
• lt/scriptgt

95
JavaScript - Sample

• The script tags are needed to identify this code
  as JavaScript.
• ltscript language"JavaScript"gt
• var stName"XX"
• function getName( )
• stNameprompt("Please enter your name"," ")
• alert("Hi, " stName)
• lt/scriptgt

96
JavaScript - Sample

• The line beginning var sets up a variable called
  stName with a beginning value of XX.
• ltscript language"JavaScript"gt
• var stName"XX"
• function getName( )
• stNameprompt("Please enter your name"," ")
• alert("Hi, " stName)
• lt/scriptgt

97
JavaScript - Sample

• function getName() defines the name of the
  function (notice the two parentheses).
• ltscript language"JavaScript"gt
• var stName"XX"
• function getName( )
• stNameprompt("Please enter your name"," ")
• alert("Hi, " stName)
• lt/scriptgt

98
JavaScript - Sample

• The braces ( and ) show where the function
  begins and ends.
• ltscript language"JavaScript"gt
• var stName"XX"
• function getName( )
• stNameprompt("Please enter your name"," ")
• alert("Hi, " stName)
• lt/scriptgt

99
JavaScript - Sample

• The line beginning stName displays the message
  Please enter your name and waits for an entry,
  which will be the value of stName.
• ltscript language"JavaScript"gt
• var stName"XX"
• function getName( )
• stNameprompt("Please enter your name"," ")
• alert("Hi, " stName)
• lt/scriptgt

100
JavaScript - Sample

• The line beginning alert displays Hi, and the
  value of the variable stName.
• ltscript language"JavaScript"gt
• var stName"XX"
• function getName( )
• stNameprompt("Please enter your name"," ")
• alert("Hi, " stName)
• lt/scriptgt

101
JavaScript - Sample

• Something has to start the getName() function.
• This can be done by the user clicking on a
  graphic or a form button.

102
JavaScript - Sample

• To start a function, its name will be somewhere
  in the HTML getName()
• You will see this code in an IMG tag
  onclickgetName()
• When the graphic is clicked, the function starts.

103
JavaScript - Sample

• You will also see this code between ltFORMgt tags
  ltinput value"HI" onclick"getName()"
  type"button"gt
• FORMs are used to make buttons and input boxes
  appear on a web page.

104
Self Check Example Questions

• True or false - JavaScript and Java are exactly
  the same thing.

105
Self Check - Example Questions

• True or false - JavaScript and Java are exactly
  the same thing.
• False - Java must be complied (translated to
  binary) before running, while JavaScript runs
  automatically every time the web page is opened.
  Java is also much more powerful than JavaScript.

106
Self Check - Example Questions

• JavaScript is most often found in the _____
  section of the HTML code for a web page.
• ltHEADgt
• ltBODYgt
• ltTABLEgt
• ltLISTgt

107
Self Check - Example Questions

• JavaScript is most often found in the _____
  section of the HTML code for a web page.
• ltHEADgt
• ltBODYgt may be here, too
• ltTABLEgt
• ltLISTgt

108
Self Check - Example Questions

• Which of the following is the correct way to
  begin JavaScript?
• ltSCRIPT LANGUAGEJavascriptgt
• ltSCRIPT LANGUAGEJavaScriptgt
• ltJAVASCRIPTgt
• ltJavaScriptgt

109
Self Check - Example Questions

• Which of the following is the correct way to
  begin JavaScript?
• ltSCRIPT LANGUAGEJavascriptgt
• ltSCRIPT LANGUAGEJavaScriptgt
• ltJAVASCRIPTgt
• ltJavaScriptgt
• upper and lower case must be exact

110
Self Check - Example Questions

• Suppose you created the function shown below.
  What command would activate the function?
• function HAPPY()
• happy()
• HAPPY
• HAPPY()

111
Self Check - Example Questions

• Suppose you created the function shown below.
  What command would activate the function?
• function HAPPY()
• happy()
• HAPPY
• HAPPY() case sensitive must include ( )

112
Self Check - Example Questions

• Which of the following commands waits for input?
• prompt
• alert

113
Self Check - Example Questions

• Which of the following commands waits for input?
• prompt waits for input and Return/Enter
• alert displays message only

114
Object-Oriented Programming

• Programming languages come in many varieties.
• Older languages like BASIC and FORTRAN accepted
  input from the user and displayed information.
• They could not directly influence objects such
  as graphics or text boxes.

115
Object-Oriented Programming

• JavaScript (and other contemporary languages) are
  classified as object-oriented, because they can
  affect objects on the screen.
• For example, JavaScript can be used to change an
  image when the mouse rolls over it.

116
Addressing Objects

• In order to affect objects, JavaScript must have
  a way of addressing (naming) them.
• JavaScript uses a dot scheme (parts of the web
  page are addressed using certain terms with
  periods/dots in between).

117
Addressing Objects

• For example, a graphic on a web page might be
  window.document.button or window.document.images1
  
• The largest part (window) is first, then a subset
  of window (document), and finally a subset of
  document (the image named button).

118
Properties

• Objects on the screen often have properties
  (attributes) that can be addressed by JavaScript.
• For example, each image has a source.
• A web page document may have a background color.

119
Properties

• Here are some dot addresses
• image source (image place named M)
• window.document.M.srcme.gif
• image source (2nd image on the page)
• window.document.images2.srcme.gif
• web page background color
• window.document.bgcolor.valueblue

120
Example - The Status Bar

• JavaScript can be used to put text into the
  status bar.
• For example, a message can be placed in the
  status bar when the mouse moves over images.

121
Example - The Status Bar

• The dot address of the status bar is
  window.status (it doesnt have anything to do
  with the web page document, so the term document
  is not included).

122
Example - The Status Bar

• Here is the code to add to an IMG tag to put text
  into the status bar
• onMouseOverwindow.statusHI!
• Notice that the entire instruction (from
  window.status to the end is in quotes ().
• The message itself (HI!) is inside single quotes
  ().

123
Example - The Status Bar

• The IMG tag might look like this (name of image
  file is hello.jpg)
• ltIMG srchello.jpg onMouseOverwindow.statusH
  I!gt
• Other choices for images are onClick (if you
  click on the image) and onMouseOut (when you move
  the mouse away from the image).

124
Example - Text in a Box

• Forms are used to put buttons and input boxes on
  the web page.
• The next JavaScript example will put a message in
  a text box.
• The message will depend on the time of day.

125
Example - Text in a Box

• This page uses FORM tags for the box
• ltform name"greet"gt
• ltinput type"text" size"20name"greetingbox"gt
• lt/formgt
• This results in a text box (20 characters long)
  called greetingbox

126
Example - Text in a Box

• The dot address for the box is
• document.greet.greetingbox.value
• The box is called greetingbox.
• The box called greetingbox is in the form called
  greet.
• The form called greet in in the current web page
  document.
• value shows that something will be put into the
  box.

127
Example - Text in a Box

• Here is the JavaScript code
• ltscript language"JavaScript"gt
• currentTimenew Date()
• if (currentTime.getHours() lt 12)
• document.greet.greetingbox.value"Good
  morning!"
• else if (currentTime.getHours() lt 17)
• document.greet.greetingbox.value"Good
  afternoon!"
• else document.greet.greetingbox.value"Good
  evening!"
• lt/scriptgt

128
Example - Text in a Box

• The SCRIPT tags begin and end the JavaScript
• ltscript language"JavaScript"gt
• currentTimenew Date()
• if (currentTime.getHours() lt 12)
• document.greet.greetingbox.value"Good
  morning!"
• else if (currentTime.getHours() lt 17)
• document.greet.greetingbox.value"Good
  afternoon!"
• else document.greet.greetingbox.value"Good
  evening!"
• lt/scriptgt

129
Example - Text in a Box

• new Date() puts the current time/date (from your
  computer) into the variable currentTime
• ltscript language"JavaScript"gt
• currentTimenew Date()
• if (currentTime.getHours() lt 12)
• document.greet.greetingbox.value"Good
  morning!"
• else if (currentTime.getHours() lt 17)
• document.greet.greetingbox.value"Good
  afternoon!"
• else document.greet.greetingbox.value"Good
  evening!"
• lt/scriptgt

130
Example - Text in a Box

• Look at the structure of the IF statements
• if (currentTime.getHours() lt 12)
• document.greet.greetingbox.value"Good
  morning!"
• else if (currentTime.getHours() lt 17)
• document.greet.greetingbox.value"Good
  afternoon!"
• else document.greet.greetingbox.value"Good
  evening!
• The computer must make a decision about the
  message, depending on the hour (12noon,
  175 pm). currentTime.getHours() contains the
  hour information (originally from new Date() )

131
Example - Text in a Box

• JavaScript IF statements look like this
• IF (condition) instructions
• The condition usually contains (is equal to)
  or lt (less than) or gt (greater than).
• If the condition is true, the instructions are
  carried out.
• If the condition is false, the program goes to
  the next line without performing the instructions.

132
Example - Text in a Box

• In this case there are three choices
• The hour is lt 12 (before noon) - Good morning!
• The hour is between 12 and 17 (noon and 5 pm) -
  Good afternoon!
• The hour is gt 17 (after 5 pm) - Good evening!
• Using IF, ELSEIF and ELSE lets the computer make
  the choice among these three options.

133
Example - Text in a Box

• If you have looked at the HTML code for this
  example, you will see something very strange.
• The JavaScript is in the BODY section, not the
  HEAD.

134
Example - Text in a Box

• The reason for this difference is that computer
  must be instructed to start the JavaScript.
• In past examples, we have clicked buttons to
  start the JavaScript instructions.
• This time, the instructions start automatically
  when the browser reaches that part of the HTML.

135
Self Check Example Questions

• True or false - all programming languages are
  object-oriented.
• True
• False

136
Self Check - Example Questions

• True or false - all programming langauges are
  object-oriented.
• True
• False

• most current languages are object-
  oriented, but older languages like BASIC are not

137
Self Check - Example Questions

• In order to address objects on the screen,
  object-oriented languages use
• Pixel addresses (form top, from left)
• Dot addresses (e.g., window.status)
• They cannot address objects.

138
Self Check - Example Questions

• In order to address objects on the screen,
  object-oriented languages use
• Pixel addresses (form top, from left)
• Dot addresses (e.g., window.status)
• They cannot address objects.

139
Self Check - Example Questions

• The dot address of the source of an image place
  called M1 would be
• window.document.src. M1
• window.document.M1.src
• document.M1.src

140
Self Check - Example Questions

• The dot address of the source of an image place
  called M1 would be
• window.document.src. M1
• window.document.M1.src
• document.M1.src

window may be deleted when the address refers to
the web page document.
141
Self Check - Example Questions

• The dot address of a text box called B in a form
  called MYFORM would be
• window.document.B.MYFORM
• window.document.MYFORM.B

142
Self Check - Example Questions

• The dot address of a text box called B in a form
  called MYFORM would be
• window.document.B.MYFORM
• window.document.MYFORM.B

143
Self Check - Example Questions

• The code to put HI into a box called B in a
  form called MYFORM would be
• window.document.MYFORM.BHI
• window.document.MYFORM.B.srcHI
• document.MYFORM.B.valueHI

144
Self Check - Example Questions

• The code to put HI into a box called B in a
  form called MYFORM would be
• window.document.MYFORM.BHI
• window.document.MYFORM.B.srcHI
• document.MYFORM.B.valueHI

145
End of Review