HTML Programming

1
HTML Programming
Final Summation
BASIC HTML - HYPERLINKS - COLOR - GRAPHIC FILES
IMAGEMAPS - TABLES FRAMES- CASCADING STYLE
SHEETS FORMS MULTIMEDIA - JAVASCRIPT

• By Professor Al Fichera, M.A.A.

2
BASIC HTML

• HTML tags are not case sensitive, but XHTML tags
  all should be done in lowercase.

3
BASIC HTML

• The HTML statement MY HOME PAGE
  instructs the browser to display the enclosed
  text "MY HOME PAGE" using the largest available
  heading size.

4
BASIC HTML

• According to the HTML 3.2 standard, the
  difference between an unordered list and an
  ordered list is an ordered list automatically
  labels the items with numbers starting at "1",
  while an unordered list places a bullet symbol to
  the left of each list item.
• Ordered List
  1. Un-Ordered List
     
     5
     BASIC HTML
     • If you wanted to write a glossary in which a word
       or phrase would be followed by its meaning, the
       most suitable HTML list type would be a
       definition list.
     • Definition List
     • Definition Title
     • Definition Description
     
     6
     BASIC HTML
     • The tags indicates that text should be
       used with a font that allots the same width to
       each character, (a fixed-width font such as
       Courier New).
     
     7
     BASIC HTML
     • You use the SIZE property to specify a Horizontal
       Line's width in pixels.
     • You may include a SIZE, WIDTH, and a NOSHADE
       values as well. For example
     • You should begin closing this one-sided tag now
       with the following XHTML syntax
     
     8
     BASIC HTML
     • The tag text will cause
       "text" to appear in Arial type face provided that
       the type face is installed on the user's
       computer.
     
     9
     BASIC HTML
     • To affect the Text Color on the entire page in
       one spot use the TEXT tag in the
       BODY.text"white".
     
     Return to Start

10
HYPERLINKS

• An Anchor is text that is specially marked so you
  can link to it from other points in the document.
• or

11
HYPERLINKS

• The HTML statement
• Music specifies a hyperlink
  to a specific section of the current document.

12
HYPERLINKS

• All of the following statements are true of
  anchor names.
• They are case-sensitive.
• References to anchor names must be preceded by a
  pound () sign.
• Each anchor name should be unique in the
  document.

13
HYPERLINKS

• Absolute path names in a hypertext reference are
  usually longer and more cumbersome than relative
  path names.

14
HYPERLINKS

• An important reason to use relative over absolute
  path names in a hypertext reference is that Web
  documents can be more readily moved to another
  server.

15
HYPERLINKS

• The HTML tag sequence
• Bach,
• means that the inline image "icon.gif" is not a
  hyperlink, but the text "Bach" is.

Return to Start
16
COLOR

• A color value is a numerical expression that
  exactly describes a color's appearance.
• Decimal or RGB
• 0 TO 255 From total lack of color to the
  maximum value of the color.
• Hexadecimal
• ff0000 RED
• 00ff00 GREEN
• 0000ff BLUE

17
COLOR

• If you were designing a Web page for a paint
  manufacturer, why would you NOT rely on the use
  of HTML color names?
• Because the use of color names alone may not
  provide the variety of colors needed.
• And, older browsers may not support all the color
  names that you want to use.

18
COLOR

• HTML uses the hexadecimal number system to
  represent intensity levels of the three primary
  colors (RED, GREEN, BLUE).

19
COLOR

• The LINK property of the tag specifies the
  color of hypertext links.
• The normal colors are
• link"blue"
• alink"red"
• vlink"purple"

20
COLOR

• The color of a specific section of text may be
  controlled by the COLOR property of the
  deprecated tag.

Return to Start
21
GRAPHIC FILES

• When a browser retrieves a background graphic
  file, it repeatedly inserts the image into the
  page's background in a process called tiling.

22
GRAPHIC FILES

• The following is true of graphic files having
  transparent colors.
• They are supported by the GIF89a format.
• In place of a transparent color, the browser will
  display whatever appears on the page's
  background.
• They can be created by a graphic package having a
  transparent color tool.

23
GRAPHIC FILES

• Use the following XHTML syntax to insert a
  GRAPHIC image file to your document
• width"n" height"n"
• alt"image description" /

24
GRAPHIC FILES

• A major advantage of interlaced over
  non-interlaced GIF files is that they give the
  user a preview of the entire image before it is
  completely loaded.

25
GRAPHIC FILES

• JPEG files can display a maximum of 16.7 million
  colors.

26
GRAPHIC FILES

• When a 16.7-million color image is displayed at
  256 colors, the browser must go through a process
  called dithering in which the appearance of
  increased color depth is approximated.

Return to Start
27
IMAGE MAPS

• What method or approach would you use if you were
  writing a Web page for an art museum and wanted
  to include a room-by-room description of the
  collection?
• Use an inline image of the floor plan of the
  museum and define an image map for each room
  which is a hyperlink to a description of the
  collection in that room.

28
IMAGE MAPS

• The three allowable values of the shape property
  of the tag are
• rect
• circle
• poly.

29
IMAGE MAPS

• The rectangular hotspot of an image map is
  defined by two pairs of coordinates, one
  specifying the upper-left corner and the other,
  the lower-right corner of the rectangle.
• hrefmypage.html

Return to Start
30
TABLES

• The problem with using a proportional font (such
  as Times New Roman or Arial), in a text table is
  that it is difficult to get the columns of the
  text to line up properly.
• Use Courier New to get a fixed width font.

31
TABLES

• If five ... two-sided flags appear
  within a flag, the table has five columns.

32
TABLES

• One way that the data two-sided flag
  differs from the data two-sided flag is
  that data entered within the tag pair will
  have centered, bold text in the cell.

33
TABLES

• The border width of a graphical table is measured
  in pixels.

34
TABLES

• The difference between the CELLSPACING and
  CELLPADDING properties of the flag is
  that CELLSPACING specifies the width of a cell
  border, while CELLPADDING specifies the size of
  the gap between a cell's text and the surrounding
  cell border.

35
TABLES

• If you wanted data to be positioned both
  vertically and horizontally in the center of a
  table cell, you would use these flags

36
TABLES

• By default, a browser will wrap the text of a
  cell in a table to a second line within that cell
  when it is no longer possible to increase the
  size of the column or decrease the size of the
  remaining columns.

37
TABLES

• A spanning cell is a cell that occupies more than
  one row or column in a table.
• OR

38
TABLES

• When placing a column of text in a table cell, it
  is best to assign a value of TOP to the valign
  property of the flag.

39
TABLES

• The blank space that separates the material
  between two columns of a table is referred to as
  a Gutter.

Return to Start
40
FRAMES

• Using Frames on a Web page decreases the speed at
  which a Web page is loaded from a server. Because
  there are more pages to load.
• Another way of saying this is that the use of
  Frames increases the time to load a page.

41
FRAMES

• When the two-sided tag is used in an
  HTML file, the tag is omitted from that
  file.

42
FRAMES

• The tag has two properties, rows and
  cols.

43
FRAMES

• The frameset size specification cols"120, means that there are two columns of
  frames. The left-most frame is allocated 120
  pixels, and the right-most frame is allocated
  whatever unclaimed space remains.

44
FRAMES

• The following properties of a frame's appearance
  can be controlled
• The Frame's scroll bars.
• The size of the margin between the source
  document and the frame border.
• Whether or not the user is allowed to change the
  Frame's width or height.

45
FRAMES

• Scroll bars for a frame will always appear when
  the SCROLLING property of the tag is set
  to yes.

46
FRAMES

• When you want to control the behavior of
  hyperlinks in a Frame, you have to give each
  Frame on the page a name, and point each
  hyperlink to a named Frame.

47
FRAMES

• To display a page within a specific frame, you
  add the TARGET property to the tag of the
  hyperlink.
• e.g.,

48
FRAMES

• Magic target names are special names reserved by
  HTML that can be used in place of a frame name as
  a target for a hypertext link.  
• e.g.,

49
FRAMES

• Magic target names all begin with the underscore
  character (_) and must be in lower-cased text.

50
FRAMES

• Use the magic target name _top to load a document
  into the full display area, replacing the current
  frame layout.

51
FRAMES

• When pages lie outside your Web presentation, the
  practice of displaying them within a Frame that
  is on your own site is certainly discouraged.

52
FRAMES

• The following are all possible reasons for
  setting the border size to zero in the
  tag.
• It provides more space for text and images within
  Frames.
• It will create the impression of a "seamless" Web
  page.
• It will give the illusion of a single Web page
  rather than separate Frames.

Return to Start
53
FORMS

• A CGI script is any program or set of commands
  running on the Web server that receives data from
  the Web page and then acts upon that data to
  perform a certain task.

54
FORMS

• The proper tag to create an INPUT box with the
  name "phone" would be

55
FORMS

• The following property would create a phone input
  box that is 10 characters wide.

56
FORMS

• What HTML tag would you enter to create an input
  box named "subscribe" with a default value of
  "yes"?

57
FORMS

• What HTML tag would you enter to create a reset
  button with the label "Cancel Form"?

58
FORMS

• What HTML tag would you enter to create a submit
  button with the label "Send Form"?

59
FORMS

• What property would you add to the TextArea tag
  to cause the memo text to automatically wrap to
  the next row, and to send that text wrapping
  information to the CGI Script?
• wrap"physical" or wrap"hard"

60
FORMS

• What HTML tag would make "Oregon" the default
  selection in a Select list?
• Oregon

61
FORMS

• How would you modify a Select tag to allow more
  than one item to be selected from the list?
• Change the tag to

Return to Start
62
Cascading Style Sheets

• Inline Styles are added to each individual tag
  within the HTML file.
• Embedded Styles are applied to the entire HTML
  file.
• Linked Styles come from a linked text file with
  Style declarations.

63
Cascading Style Sheets

• You can have multiple attributes strung along in
  a style block as long as you put a semicolon
  between each declaration.
• Use curly braces when you create your style
  declaration in the HEAD.
• A declaration is a collection of attributes and
  values for a selector.

64
Cascading Style Sheets

• An embedded style has precedence over an external
  style sheet.

65
Cascading Style Sheets

• In CSS, an element that contains another element
  is called a parent.
• The BODY tag is the ultimate parent, since it
  contains all of the other tags that you will use
  in formatting the content of your page.
• Using the principle of inheritance, styles
  defined for each parent tag are transferred to
  that tags descendants.

66
Cascading Style Sheets

• Generic fonts for CSS are
• Sans-Serif,
• Serif,
• Cursive,
• Fantasy, and
• Monospace.
• Use a comma to separate one font name from
  another.

67
Cascading Style Sheets

• Sample font-size style keywords could be
• medium, xx-small, x-large, etc.
• Sample lengths for font-size could be
• mm, pica, em, px, pt, etc.

68
Cascading Style Sheets

• If you wanted your paragraphs to be
  double-spaced, you would enter the style
  definition
• p line-height2

69
Cascading Style Sheets

• To display a font in small caps, use this style
• font-variantsmall-caps
• If you want the first line of your paragraphs in
  uppercase, use this style
• pfirst-line text-transformuppercase

70
Cascading Style Sheets

• You can use any of the following formats to set a
  bodys text color
• body colorteal
• body color008080
• body colorrgb(0,128,128)
• body colorrgb(0,60,60)

Return to Start
71
JAVASCRIPT

• The Objects JavaScript deal with are
• Windows
• Forms
• Form Elements
• Buttons, and Radio Buttons
• Check Boxes
• Objects have their own Unique Names.

72
JAVASCRIPT

• JavaScript provides two commands to display text
  on a Web page the document.write() and
  document.writeln() commands. Here is the syntax
• document.write(text here)
• document.writeln(text here)

73
JAVASCRIPT

• ("This Is Red Text")
• Notice that what is inside of the parentheses is
  encased in quote marks. In HTML, those quote
  marks are not required. Here, they are. You must
  use them.
• Remember Inside of double quotes... use single
  quotes.

74
JAVASCRIPT

• Use comments throughout to help you understand
  the program. // comments
• Use indented text to make your code easier to
  read and follow.
• JavaScript is case-sensitive, be careful.
• Include HTML comment tags to hide
  JavaScript from older browsers that dont support
  the code.
• Test your JavaScript program with several
  browsers if possible.

75
JAVASCRIPT

• Instance, Method, Write, Object, Document
• The Instance of a command is contained in
  parentheses immediately following the command.
• The Instance contains information about what an
  object is to do or how a method is to be carried
  out.

76
JAVASCRIPT

• Instance, Method, Write, Object, Document
• A Method is a command that tells how an object is
  to be acted upon.
• Write is a method that acts upon the object
  document to post text to a page.

77
JAVASCRIPT

• Instance, Method, Write, Object, Document
• An Object is something that exists such as the
  HTML Document, the browser window, or the date
  and time.
• An Object can also be something that you create
  through a function.
• This is an object name that refers specifically
  to the HTML document that contains the JavaScript.

78
JAVASCRIPT

• There are basically two types of errors you can
  produce Syntax errors and Run-Time errors.
• A Syntax error means that you've misspelled
  something or the JavaScript is not configured
  correctly.
• A Run-Time error means that you have used an
  incorrect command.

79
JAVASCRIPT

• Once you're actually at the line that has an
  error, you need to decide what to do.
• If it's a Syntax error
• The line has been chopped off early (truncated).
• Something is misspelled.
• Or you have used double quotes where a single
  quotes should go (unbalanced quotes).

80
JAVASCRIPT

• If the error is Run-Time
• Then the command the error message is pointing at
  is a command that doesn't logically follow in the
  sequence.
• For instance, you call for a button by using a
  command that actually calls for a text box.

81
JAVASCRIPT

• Fix the errors one at a time, from top to bottom.
  
• Each time you fix an error, run the script again.
  
• You might get 20 error messages, but only have to
  fix one or two.

Return to Start
82
MULTIMEDIA

• Bandwidth is the measure of the amount of data
  that can be sent through a communications circuit
  each second.

83
MULTIMEDIA

• The recommended sound file formats for the Web
  are both WAV and AU, however, the WAV format is
  the most commonly used.

84
MULTIMEDIA

• MIDI sound files are limited in their scope and
  cannot be expected for general sound recording.
  They are most suited to synthesizers and music
  files.

85
MULTIMEDIA

• Thanks in part to Macromedia Flash, MPEGs have
  been used for audio files.
• Primarily they have been used for video clips.

86
MULTIMEDIA

• RealAudio sound files can be "streamed", that is,
  the sound can be played before the whole file is
  downloaded to your computer.

87
MULTIMEDIA

• Application software that enables the browser to
  work with an embedded object is known as a
  "plug-in", or sometimes called "add-ons".
• Examples of these devices can beActiveX,
  LiveAudio, ActiveMovie.

88
MULTIMEDIA

• When working with Embedded Sound Files, you can
  set the loop property to infinite, to really bug
  the visitor to your Web site.

89
MULTIMEDIA

• Video images can be captured by you if you have
  access to these itemsA Camcorder, Television,
  or VCR.

90
MULTIMEDIA

• If you've worked with programs like Macromedia
  Flash, you'd be aware that video files are made
  up of individual Frames, each containing
  individual images.
• Some of these Video file formats areAVI, MPEG,
  MOV, and QuickTime.
• The standard format for Windows Video is MPEG

91
MULTIMEDIA

• Both Netscape and Internet Explorer can display
  AVI and MOV files directly within the browser
  without the use of plug-ins.

92
MULTIMEDIA

• Java, when used on a Web page, will appear in
  it's own Applet Window. These appear as a silvery
  gray until all the parts have arrived to the
  users computer.
• It's not recommended that Java Applets be placed
  in a prominent spot of your Main Home Page, since
  they take a while to download.

93
MULTIMEDIA

• Internet Explorer has a proprietary bit of coding
  that is called Marquee. This will be ignored by
  Netscape.
• Some of the Behaviors that you can use in the
  Marquee tag arescrolling, sliding, and
  alternating (side-to-side movement) of the text.
• These behaviors can be started from the Left side
  or the Right side of the screen.

Return to Start
94
IT'S BEEN NICE!

• I hope you get to use all of this information
  very easily from now on!
• Good luck in your Web Page Design and Publishing
  endeavors.
• Lastly, I think youve learned quite a bit!
• You've made it a fun trip, thanks!

95
(No Transcript)