HTML

1
CHAPTER 8

• HTML

2
HTML

• Hypertext Markup Language
• Most commonly used of several Internet Markup
  Languages
• HTML is effected by marking up a document
  (tags), similar to the way you would mark up a
  memo for a secretary to type it in a polished
  form
• Some Browsers are capable of interpreting
  additional tags, and new tags are being added

3
HTML Versionshttp//www.w3.org/hypertext/WWW/Mar
kUp

• 0.0 - Original version developed by Timothy
  Berners-Lee
• 1.0 - First public version
• 2.0 - Version supported by first versions of
  Netscape and Internet Explorer
• 3.2 - Version supported by latest versions of
  Netscape and Internet Explorer (1997)
• 4.0 - Not fully implemented yet (Dynamic HTML,
  Cascading Style Sheets, etc.)
• HTML 4.01, released in December 1999

4
Looking at HTML in Documents

• Open HTML Document
• View
• Source
• Example
• Open Netscape Communicator
• Select Composer from Communicator menu.
• From View menu select page source

5
Building HTML Documents

• Text editor
• Word Processor (text mode only)
• HTML editor built into some browsers
• HTML converters built into some products (ie
  M/S word, etc.)
• Special Web Authoring Software
• FrontPage
• Hot Metal
• WebAuthor

6
Procedure to Build HTML Document

• Use a Windows editor (ie Wordpad)
• Save file as text file with .htm extension
• Open File in Browser to look at your work
• Keep both editor browser windows open as you
  refine your home page

7
HTML Documents

• HTML documents consists of two parts
• Head - heading information (prologue)
• Body - body of document
• Both the head and the body use pieces of code
  called tags

8
Tags

• Tags
• style text
• link files
• embed graphics
• insert tables
• run Java Applets, etc.

9
Tags (continued)

• Tags are normally typed as all capitals for
  clarification, although they are not case
  sensitive
• Syntax is
• ltTag_Name Property_Listgt...content...lt/Tag_namegt
• The property (or argument) list is optional
• Example
• ltH1 ALIGNCENTERgtGarage Salelt/H1gt

10
Tags (continued)

• Some tags can be used by themselves
• ltPgt (tag to end a paragraph)
• Best to use in pairs for new HTML 4
  capabilities.
• Other tags must be used together
• ltH1gt and lt/H1gt which styles a first level (1)
  heading

11
ltHTMLgt and lt/HTMLgt

• Start each document with the ltHTMLgt tag and end
  with lt/HTMLgt
• Example
• ltHTMLgt
• ...document text tags...
• lt/HTMLgt

12
ltHEADgt and lt/HEADgt

• The ltHEADgt tag should be at the top of your
  document, and denotes the start of your heading
  area
• The lt/HEADgt denotes the end of your heading
• Example
• ltHTMLgt
• ltHEADgt...heading... lt/HEADgt
• ..document text tags...
• lt/HTMLgt

13
ltTITLEgt and lt/TITLEgt

• ltTITLEgt and lt/TITLEgt denote the start and end of
  the text that will show in the title bar of the
  browser window
• Example
• ltHTMLgt
• ltHEADgtltTITLEgtITM Home Pagelt/TITLEgt lt/HEADgt
• ...document text tags...
• lt/HTMLgt

14
ltBODYgt and lt/BODYgt

• The main part of your document is delimited by
  the two body tags
• Example
• ltHTMLgt
• ltHEADgtltTITLEgtITM Pagelt/TITLEgt lt/HEADgt
• ltBODYgt
• ...body of document...
• lt/BODYgt
• lt/HTMLgt

15
ltHigt and lt/Higt

• These tags surround text (usually headings) and
  indicate level (i)
• The level will determine the relative size of the
  text when the browser displays it (1 thru 6)

• ltHTMLgt
• ltHEADgtltTITLEgtITM Home Pagelt/TITLEgt lt/HEADgt
• ltBODYgt
• ltH1gtITMlt/H1gt
• ...body of document...
• lt/BODYgt
• lt/HTMLgt

16
ltPgt

• This tag indicates the start/end of a paragraph
• The browser will typically place a blank line at
  this point
• You can also use this tag in pairs (ltPgt lt/Pgt)
  to delimit paragraphs

• ltHTMLgt
• ltHEADgtltTITLEgtITM Home Pagelt/TITLEgt lt/HEADgt
• ltBODYgt
• ltH1gtITMlt/H1gt
• ltPgt
• ...body of document...
• lt/BODYgt
• lt/HTMLgt

17
Images

• Images use the ltIMGgt tag
• It requires additional information called
  arguments such as
• filename/path
• alignment

18
Images

• ltHTMLgt
• ltHEADgtltTITLEgtITM Home Pagelt/TITLEgt lt/HEADgt
• ltBODYgt
• ltH1gtITMlt/H1gt
• ltIMG ALIGNtop SRCITM.gifgt
• ltPgt
• ...body of document...
• lt/BODYgt
• lt/HTMLgt

19
Copying Images From WWW Documents

• Place mouse on image
• Right Click
• Pick save image (save to your diskette)
• Cannot do this for images displayed from within
  Java applets
• Download from image sites

20
Lab1

• Create an initial home page document with
• heading body
• title
• your name (H1)
• An image
• some text

21
Lab 1

• ltHTMLgt
• ltHEADgtltTITLEgtITM Home Pagelt/TITLEgt lt/HEADgt
• ltBODYgt
• ltH1 AlignCentergtITMlt/H1gt
• ltIMG ALIGNleft SRCITM.gif gt
• ...body of document...
• lt/BODYgt
• lt/HTMLgt

22
Making Your Own Images

• Use drawing programs
• Paintbrush (.BMP files), or other drawing
  programs
• Scanning
• University Department resources
• Digital Cameras
• Mail in Photography (get back diskette)
• Video Capture frame grabber

23
Image Processing

• Browsers support different file formats
• gif (Graphics Interchange Format)
• jpeg (Joint Photographic Experts Group) formats
• pcx Graphics file format for programs running on
  PC
• etc.
• Try to convert all your images to these formats

24
Image Dimensions(Width, Height)

• The Width and Height arguments can be used to
  scale images
• Browsers will stretch or squeeze the image to fit
  in the space indicated (not retaining
  proportions)
• These arguments also speed loading by telling the
  browsers how big a space (in pixels) to reserve
  so they can add the text immediately instead of
  waiting to see how big the image is going to be
• ltIMG SRCme.gif Width100 Height150gt

25

• The SRC image indicates the location of your
  image file
• If you do not specify a path, it is assumed to be
  in the same directory as your home page
• Images are horizontally aligned like text

26
Alignment

• You can control the horizontal alignment of text
  and graphics
• Default is alignment, all elements will align
  left (and have a ragged right edge)
• Some browsers support the tags
• ltCentergt ... lt/Centergt
• ltLeftgt ... lt/Leftgt
• ltRightgt ... lt/Rightgt
• Example
• ltCentergt
• ...centered text...
• lt/Centergt

27

• However, more recent releases of browsers use
  Align instead of the ltLeftgt and ltRightgt tags
• Use Align inside of ltPgt and ltHigt type tags
• ltP AlignRightgt ...paragraph text ... lt/Pgt
• ltH1 AlignCentergtA Centered Heading lt/H1gt

28
Aligning Graphics with Text

• You can align graphics with text using the ALIGN
  attribute within the ltIMGgt tag
• Options are
• top - text aligned with top of image
• texttop -
• middle - text aligned with middle of image
• absmiddle
• bottom (or baseline)- text aligned with bottom of
  image
• absbottom
• Default is bottom
• ltIMG ALIGNtop SRCme.gifgt...text...

29
Adding Space Around Graphics

• You can add space around images with the VSpace
  and HSpace arguments
• Use VSpace for space on top and bottom
• Use HSpace for space along the sides
• Example
• ltIMG Srcme.gif Alignleft HSpace50 VSpace10gt

30
Centering Images

• The ALIGN property of the IMG tag aligns an image
  relative to neighboring text
• To center an image on the page
• Put it inside of a table (discussed later)
• Or put it inside of a centered paragraph
• ltP ALIGNCENTERgtltIMG SRCme.gifgtlt/Pgt

31
Alternatives to Images

• People using non graphic browsers, or people who
  turn off image loading, do not see in-line
  graphics
• The ALT argument specifies alternative text
• ltIMG SRCme.gig AltPicture of megt

32
Lab 2

• Align your image
• Add some text next to your image
• Provide alternative text for image

33
Lab 2

• ltHTMLgt
• ltHEADgtltTITLEgtITM Home Pagelt/TITLEgt lt/HEADgt
• ltBODYgt
• ltH1 AlignCentergtITMlt/H1gt
• ltIMG ALIGNleft SRCITM.gif AltMy Picturegt
• ...text next to image...
• ltPgt
• ...body of document...
• lt/BODYgt
• lt/HTMLgt

34
Comments

• To insert comments in your HTML code use
• lt!This is a commentgt

35
Line Breaks

• ltBRgt can be used to break a line (start a new
  line)
• Carriage returns, tabs, and line feeds in your
  editor have no effect
• Text will automatically flow to the extent of the
  browser window size and will not break otherwise
  unless you tell it to do so

36
Line Breaks(continued)

• You can use the no break tags (ltNoBRgt and
  lt/NoBRgt) to keep text from breaking at the end of
  the browser window. If you want text to break
  within this non breaking section, use ltWBRgt at
  that point.
• To keep text from flowing around a left aligned
  image, use ltBR Clearleftgt, or for a right
  aligned image ltBR Clearrightgt ( ltBR Clearallgt
  for between images)

37
Line Breaks(continued)

• You can use the no break tags (ltNoBRgt and
  lt/NoBRgt) to keep text from breaking at the end of
  the browser window. If you want text to break
  within this non breaking section, use ltWBRgt at
  that point.

38
Horizontal Rules

• To put a horizontal dividing line in a document
  use ltHRgt
• Arguments can be used to change the look of the
  default rule
• Size changes the thickness of the rule
• Width changes the length of the rule
• Align changes the justification of the rule
• NoShade creates a solid rule

39
Text Styles

• Relative tags can be used to select text style
• ltHigt where i goes from 1 to 6 with decreasing
  size and strength (boldness)
• ltADDRESSgt typically used for e-mail and other
  addresses shown in italics
• ltCITEgt similar to address, normally used for
  citations
• ltEMgt emphasis
• ltSTRONGgt bold
• ltVARgt indicates a variable (typically italics)

40

• ltCODEgt or ltSAMPgt or ltKBDgt - monospaced text
• ltBIGgt
• ltSMALLgt
• ltSUBgt subscripts
• ltSUPgt superscripts
• ltTTgt Do not use proportional font (ie use a font
  like Courier)
• End all of these style tags with the same tag
  using the slash (/)

41

• Instead of relative style tags which vary form
  browser to browser, you can use fixed tags
• Bold ltBgt and lt/Bgt
• Italic ltIgt and lt/Igt
• Underscore ltUgt and lt/Ugt
• Strikeout ltSgt and lt/Sgt
• Blink ltBlinkgt and lt/Blinkgt

42
Font Sizes (Points)

• You can change the default fonts size using the
  ltBasefontgt tag with the Size argument
• ltBasefont Size5gt
• The default size is 3, and the range is from 1 to
  7
• Using the tag ltFontgt changes the size for regular
  text but not headings (typically H1 6, H6 1)
• ltFont Size7gt
• You can also change font size in a relative
  manner with or -.
• ltFont Size1gt

43
LAB 3

• Use the following to enhance your home page
• styles
• rules
• breaks
• fonts
• Include in your document sections for your
  address and hobbies

44

• ltHTMLgt
• ltHEADgtltTITLEgtITMs Home Pagelt/TITLEgt lt/HEADgt
• ltBODYgt
• ltH1 AlignCentergtITMlt/H1gt
• ltIMG ALIGNcenter SRC"sun.gif" Alt"My
  Picture"gt
• ...text next to image...
• ltBR Clearleftgt
• ltPgtltHRgt
• ltH2gtMy address islt/H2gt
• ltADDRESSgt111 Peach StreetltBRgt
• Memphis, TN 38108lt/ADDRESSgtltPgt
• lt/BODYgt
• lt/HTMLgt

45
Special Characters

• Special Characters can be entered into document
  content by using the ISO 8859-1 standard
  (Latin-1)
• In the content, use an ampersign followed by
  either the code name or by a then the code
  number to insert the trademark symbol
• reg
• 174

46
Spaces Alignment

• Browsers will ignore additional spaces in
  content.
• To have extra spaces, you can use the special
  character nbsp (non-breaking space) or use the
  ltPREgt tag which tells newer browsers not to
  remove extra space (note the PRE tag also forces
  mono spacing)
• However for much precise alignment use tables
  (discussed later) - HTML version 4 (or the CSS
  style sheet extensions have new spacing,
  formatting, justification, and alignment features)

47
Block Quotes

• To indent a section of text you can use the block
  quotes tags
• ltBLOCKQUOTEgt
• ...some text to be indented...
• lt/BLOCKQUOTEgt
• Within the block quote you still have to use the
  paragraph and line break tags, and all other
  formatting tags

48
Lists

• Lists can be ordered (with numbers or letters) or
  can unordered (with bullets)
• Ordered lists use the tag ltOLgt lt/OLgt. Four
  types of symbols can be used (and you can use
  Start)
• Type1
• TypeA
• Typea
• Typei
• Unordered lists use ltULgt lt/ULgt. Three types of
  bullet symbols are available
• Typedisc
• Typecircle
• Typesquare

49

• For each item in the list, use ltLIgt
• Example
• ltOL Type1 Start10gt
• ltLIgtItem
• ltLIgtAnother item
• ltLIgtAnd still another item
• lt/OLgt

50
Glossary Lists

• Use glossarys for lists that have two parts
• The glossary is enclosed by ltDLgt and lt/DLgt
• Each term is initiated by ltDTgt
• Then the definition is initiated by ltDDgt
• ltDLgt
• ltDTgtTerm1ltDDgtDefinition1
• ltDTgtNext TermltDDgtNext Definition
• lt/DLgt

51
Lab 4

• Add another section to your homepage, perhaps
  about your best friend or girlfriend/boyfriend or
  some other topic of interest to you
• Use a list in this new section

52
Hypertext Links

• Links are the key to non-linear navigation of
  Internet information
• You can set up links from one point in a document
  to another
• You can set up links to other documents of yours
• You can set up links to another document anywhere
• Links can be set up from text (words) or images

53
Text Links

• By clicking on a text link a person follows a
  pointer to another place
• The text link shows up in another color, and most
  browsers change the color of the text link after
  you click on it once
• Links use the ltAgt tag set
• To link to another document use the HREF
  argument
• ltA HREFMyDoc2.htmlgtClick here for Doc 2lt/Agt

54
URLs

• The Universal Resource Locator indicates the
  location of a document (file) URLs are case
  sensitive
• A complete URL includes the service, server DNS
  name, disk, and directory path
• There are two types of paths
• Absolute - a complete path description
• Relative - specifies location relative to where
  the current document is

55

• Absolute paths
• http//www.cbu.edu/jdoe
• http//www.cbu.edu/user/jodie/welcome.html
• Relative paths
• filename.html file is in same directory
• otherdir/filename.html file is in otherdir
• ../otherdir/filename.html go up a directory,
  then got to otherdir

56
Links within Documents

• Links can take you to other places within your
  same document
• You have to set up the link using a label (or
  anchor) name
• ltA HREFmylabelgtClick here to go therelt/Agt
• The label (anchor) is specified with the NAME
  argument
• ltA NAMEmylabelgt...lt/Agt

57

• Anchor example
• ltH3 ALIGNCENTERgtltA NAMEDEMOgtDemographic
  Infolt/Agtlt/H3gt
• Try not to insert other tags within an anchor tag
• To link to a specific anchor in another document
• ltA HREFmyDoc2.htmlmyCarsgtClick here to see my
  carslt/Agt

58
Good Night
59
Tables

• Tables can be used to organize information in a
  grid fashion
• The cells of the table can contain any type of
  information (except other tables) and tags
• There are three parts to a table
• Caption
• Headings
• Cells

60

• Create the entries in your cells one at a time
  from the top left to the bottom right
• Each cell must have something in it, even it is
  just a space
• Start the table with the tag ltTABLEgt which can
  optionally have a border and alignment
• ltTABLE BORDER ALIGNRIGHTgt

61

• Next add a caption
• ltCAPTION AligntopgtMy Petslt/CAPTIONgt
• Each row starts with the tag ltTRgt and ends with
  lt/TRgt, each heading column starts with the
  tagltTHgt and ends with lt/THgt, and each non heading
  column starts with the tag ltTDgt and ends with
  lt/TDgt

62

• You can control the width of the overall table
  and each column
• Widths can be specified in pixels or relative to
  the browser window width
• Example
• ltTABLE BORDER Width400gt
• ltCAPTION AligntopgtMy Petslt/CAPTIONgt
• ltTRgt
• ltTH Width40gtNamelt/THgtltTH Width60gtTypelt/THgt
• lt/TRgt

63

• Cells can span more than one row or column
• If a cell is to span more than one column, then
  use the Colspan argument in the TH tag set
• If a cell is to span more than on row, then use
  the Rowspan argument in the TD tag set
• You can control the alignment of information
  within an entire row of cells by putting the
  Align argument in the TR tag set
• You can control the alignment of individual cells
  by putting the Align argument in the TH or TD
  tag sets

64

• Example
• ltTABLE BORDERgt
• ltCAPTION AligntopgtMy Petslt/CAPTIONgt
• ltTRgt
• ltTHgtNamelt/THgtltTHgtTypelt/THgt
• lt/TRgtltTRgt
• ltTDgtSamlt/TDgtltTDgtDoglt/TDgt
• lt/TRgtltTRgt
• ltTDgtDavelt/TDgtltTDgtCatlt/TDgt
• lt/TRgt
• lt/TABLEgt

65

• You can give table borders and grids special 3D
  like and other effects by using the border,
  cellpadding (padding around stuff in a cell), and
  cellspacing (border around cells) properties for
  example
• ltTABLE BORDER7 CELLPADDING6
  CELLSPACING6gt
• Combine this with particular background colors
  for inside tables for best effects
• ltTD ALIGNCENTER BGCOLOR......gt

66
Page Layout

• Tables can be used to define the layout of your
  entire page, so that you have complete control
  where everything goes
• However with HTML version 4, CSS (Cascading Style
  Sheets) will be supported which provides a better
  way to accomplish this

67
Lab 5

• Add another section to your home page
• In that section use a table

68
Lab 6

• Set up hypertext links in the top of your home
  page to go to the other sections.

69
Graphic Links

• You can also make your image act like links
• Just define the image tags within the link tags
  ltA HREF...gtltIMG...gtlt/Agt
• Example
• ltA HREF../Jane/JaneDoe.htmlgtltIMG
  Srcjane.gifgtlt/Agt

70
Image Borders

• Browsers normally display borders around image
  links and not around images that are not links
• You can override this with the Border argument
• ltIMG Srcme.gif Border10gt
• Borders are measured in pixels
• Note that you may confuse users by changing the
  expected defaults

71
E-Mail

• Some browsers can send e-mail
• You can place a link in your home page to the
  browsers e-mail window
• ltA HREFmailtojdoe_at_mail.cbu.edugtClick here to
  send me e-maillt/Agt

72
FTP

• Some browsers can automatically invoke ftp
• You can also place a link in your home page to
  download a file
• ltA HREFwww//http.xyz.edu/home/jdoe/WWW/myFile.d
  ocgtClick here to download a copy of this word
  documentlt/Agt

73
Lab 7

• Use a graphic in your homepage to link to the
  school home page
• Place an e-mail link in your page

74
Colors

• The colors used for text, background, links (both
  unvisited and visited) can be set
• Colors are specified by giving a value for the
  red, green, and blue content in percentages
• rrggbb
• ffffff is white (f for full)
• 000000 is black (no color)

75

• 000000 - BLACK
• BEBEBE - GREY
• FF0000 - RED
• 8000FF - PURPLE
• 0000FF - BLUE
• 00FFFF - CYAN
• 00FF00 - GREEN
• FFD700 - GOLD
• FFFF00 - YELLOW
• F5F5DC - BEIGE
• D2691E - CHOC.

• A52A2A - BROWN
• FF8000 - ORANGE
• FF00FF - MAGENTA
• FF0080 - PINK
• 000080 - NAVY
• E06000 - PEACH
• B03060 - MAROON
• 87CBEB - SKY
• B0C4DE - LT BLUE
• FFA0C0 - SALMON
• 00C0A0 - AQUA

76

• Use the BGColor argument for background
• Use the Text argument for text color
• Use the Link argument for link color
• Use the VLink argument for visited links
• These are put into the BODY definition
• ltBODY BGColor252525 Text757575
  Link505050 VLink101010gt

77

• Newer browsers will also let you specify a name
  for 16 basic colors
• Black, White, Red, Green, Blue, Yellow
• Aqua, Grey, Navy, Silver, Olive, Teal
• Lime, Purple, Fuchsia, Maroon
• You can also change the color locally within the
  FONT tag
• ltFONT SIZE... COLOR... FACE...gt...content...lt/F
  ONTgt
• Where SIZE is in points, and FACE is a font
  (ARIAL, HELVETICA, SANS SERIF, etc.)
• You have script comic fonts also
• FACE Comic Sans MS

78
Images for Background

• You can use an image as the background for you
  home page
• You specify the image to use in the BODY
  definition
• That image will be tiled as much as necessary to
  fill up your home page viewing area
• ltBODY Backgroundmyimage.gifgt
• There are many sites on the web to find
  backgrounds

79
Multimedia

• You can add various multimedia types to you page
  such as sound, audio, or video
• Your PC needs to be properly equipped
• Your browser needs to directly support or have a
  plug in installed for the specific file type
• Adding sound clips
• ltA HREFMyMusic.wavgt
• ltIMG SRCMusicPic.gif ALTClick here for my
  music !gtlt/Agt

80
HTML Information

• There is a META tag available to indicate
  certain key information about your page
• The meta tag takes NAME and CONTENT arguments
• The NAME argument is a code for the type of
  information in the CONTENT argument
• This tag should go just before your BODY tag

81

• There are several options for NAME, but the main
  purpose of META is to help search engines find
  out about your page
• ltMETA NAME Author CONTENTSITMgt
• ltMETA NAME Keywords CONTENTScollege,
  training, computer, information technologygt
• Other NAMEs include generator or authoring.tool,
  description, etc.
• There are many other META capabilities !

82
Forms

• A form is a group of data capturing widgets
  placed on an HTML page
• The form communicates the information (the user
  enters into the widgets) over the communication
  link to the Internet server via HTTP protocol
  encoded in a certain way (URLEncoded)
• Part of that HTTP protocol is the designation of
  a server side program which processes the form
  information that program (written in
  C/C/Perl/Java) is called a CGI (Common Gateway
  Interface) script

83

• Forms start with a ltFORMgt tag and end with
  lt/FORMgt
• Within the ltFORMgt tag arguments are needed for
  the method of data transfer to the CGI script
  (METHOD) and the name of the CGI script
  (ACTION)
• ltFORM METHODPost ACTION...path of cgi
  scriptgt
• For the form data to be routed to the mail
  server, the ACTION is mail to jdoe_at_mail.cbu.edu

84

• There are several widgets that can be placed on
  the form such as text fields, text areas (multi
  line), radio buttons,check boxes, selection
  lists, submit buttons, and reset buttons
• For text fields, submit buttons, reset buttons,
  and radio buttons, you use the INPUT tag
• For text fields the INPUT tag has arguments for
  Type (text), Size, and Name
• ltINPUT Typetext Size15 NameCitygt

85

• For buttons the INPUT tag has arguments for Type,
  Name, and Value
• ltINPUT Typeradio Namepaytype Valuecashgt
• ltINPUT Typeradio Namepaytype Valuecheckgt
• ltINPUT Typeradio Namepaytype
  Valuecreditgt
• ltINPUT Typesubmit Namesubmit
  Valuesubmitgt
• ltINPUT Typereset Namereset Valueresetgt
• Submit buttons send the form data to the server,
  reset buttons clear the data

86
Sample Form

• ltHRgt Please enter the following data ltBRgt
• ltFORM METHODPost ACTION...path of cgi
  scriptgt
• NameltINPUT Typetext Size30 NameNamegt
• CityltINPUT Typetext Size15 NameCitygt
• StateltINPUT Typetext Size2 NameStategt
• ltBRgtltBRgt
• ltINPUT Typesubmit Namesubmit
  Valuesubmitgt
• ltINPUT Typereset Namereset Valueresetgt
• lt/FORMgtltHRgt

87

• To really do anything significant with HTML forms
  you have to write the programs (CGI programs) on
  the server that will process the data from the
  form such as updating a database, querying a
  database, etc.
• Therefore the use of forms for anything but
  simple e-mail messages will be covered in the C,
  C, and Java courses

88
Lab8

• Make your background a color or Image
• Add META tags
• Add a form to route to the mail server

89
Image Maps

• Image maps allow you to associate links with
  portions of an image
• The older method handled the linking on the
  server much like forms are handled (server side
  image maps)
• New browers can handle image maps on the client
  side which perform the linkage quicker since the
  server is not as involved

90
Association an Image with a Map

• To associate an image with a map, simply set the
  property USEMAP to the name of the image map
• ltIMG SRCmyImage.gif USEMAPmyMapgt

91
Defining the Map

• The map identifies areas within the image using
  relative pixel coordinates
• MAP and AREA tags are used
• ltMAP NAMEmyMapgt
• ltAREA SHAPERECT COORDS5,5,45,45
  HREFmyDoc1gt
• ltAREA SHAPERECT COORDS105,105,195,195
  HREFmyDoc2gt
• lt/MAPgt

92

• The relative coordinate systems has the origin
  (0,0) at the top left.
• For the rectangular area, use the x,y coordinates
  of the top left point followed by the x,y
  coordinates of the lower right point
• You can also define circle areas using the x,y of
  the center followed by the radius
• ltAREA SHAPECIRCLE COORDS50,50,30
  HREFmyDoc3gt
• You can also define polygons by giving a list of
  x,y pairs
• ltAREA SHAPEPOLY COORDS0,100,0,50,100,100
  HREFmyDoc4gt

93

• You can lay out the map areas manually, or there
  are commercial products which you download over
  the Internet that allow you to visually define
  the image map

94
Frames

• Your browser window can be divided into separate
  frames each of which can show separate HTML
  documents
• You can have links in one HTML document to
  control which HTML document shows in another
  frame (or even control which HTML document shows
  in a separate browser window)

95

• Browser windows can be split up either
  horizontally or vertically
• Frames can be nested, so that a window divided
  can be further divided
• HTML documents are either
• frameset documents
• content or body documents
• For nested frames there can be one or several
  frameset documents

96

• Two vertical frames
• lthtmlgt
• ltheadgtlttitlegt...lt/titlegtlt/headgt
• ltframeset cols,gt
• ltframe srcx.html nameleftgt
• ltframe srcy.html namerightgt
• lt/framesetgt
• lt/htmlgt
• You can give the frames names like we have done
  here with left and right then they can be
  referenced in other frames

97

• Two horizontal frames
• lthtmlgt
• ltheadgtlttitlegt...lt/titlegtlt/headgt
• ltframeset rows,gt
• ltframe srcx.html nametopgt
• ltframe srcy.html namebottomgt
• lt/framesetgt
• lt/htmlgt

98
Sizing Frames

• Dividing into rows
• ltframeset rowss1,s2,s3....
• Dividing into columns
• ltframeset colss1,s2,s3....
• The sizes (s1...sn) can be
• (divide up evenly)
• absolute number - pixels (ie 300)
• percent (ie 30)
• relative number (ie 2, means twice as big as
  others)

99
Nesting Frames - Directly

• ltframeset rows,gt
• ltframe srcx.htmgt
• ltframeset cols ,gt
• ltframe src y.htmgt
• ltframe src z.htmgt
• lt/framesetgt
• lt/framesetgt

100
Nesting Frames - Indirectly can
give frameset as name

• ltframeset rows,gt
• ltframe srcx.htmgt
• ltframe srcyz.htm name bottomgt
• lt/framesetgt
• Document yz.htm
• ltframeset cols,gt
• ltframe srcy.htmgt
• ltframe srcz.htmgt

101
Targeting Frames

• Use target keyword in a href tag
• lta hrefmydoc.html targetbottomgt...lt/agt
• Targets may be
• HTML documents named in a name within the
  frame tag
• _self (this document)
• _parent (parent document)
• _top (update entire window)
• _blank (open new browser
  window)
• Use of any other name not specified in a
  frame tag will open a new browser window, and
  give that window a name !

102
Lab8a

• Use frames in your home page
• Set up a frameset document
• Divide your home page into several separate HTML
  documents
• Have a table of contents home page as a small
  frame with links to your other HTML documents

103
JavaScript DHTML

• JavaScript is Netscapes scripting language which
  will allow you to do some dynamic things on
  your homepage
• Microsoft (Internet Explorer) uses Visual Basic
  scripting language for the same thing now
  supports JScript also (some compatability
  issues).
• With these scripting languages you can do limited
  forms of programming including forms data
  validation, animation, and dynamically changing
  documents (via Document Object Model)
• Fully supported implementation in HTML 4

104
Java Applets

• Java is a full blown powerful object oriented
  programming language with it you can create
  independent applications or applets
• Applets run inside the Internet browser and are
  placed on the HTML page with the APPLET tag
• Since Java is a full language, you can do almost
  anything you want as long as you do not violate
  the browser security restrictions

105

• For example, Java Applets can build and validate
  forms and then send data to a database and get
  results back they can open client sockets to
  server sockets and do true client/server
  processing they can execute multiple threads of
  execution to efficiently handle animation, 3D,
  games, high speed communications, etc.
• You can get canned Applets from many sources
  that can do some fancy things inside your page,
  since the applets can receive parameters that you
  set within the HTML tag
• Java programming is covered in the Java course

106
Sample WEB Page Capabilities

• Form Input
• HTML Form
• Java Form
• Java Animations Slide Shows
• Forms for database lookup
• Complex Java Applications
• Shopping Cart
• Internet Games

107
Posting a Home Page

• Create a home page document in HTML using a
  general local Windows editor (or a specific HTML
  editor). Save the file with the extension .htm
  (as a text file)
• View that HTML document in your Windows browser
  (ie Netscapes open file). Go back to step one
  and revise as necessary
• Log onto CBU Server and create a subdirectory off
  your home directory called WWW change its
  attributes to let everyone read it (chmod arx
  WWW)

108

• Copy the home page to CBU Server (via FTP)
• Name the home page Welcome.html, put it in that
  WWW subdirectory, and change its attributes so
  that anyone can read it (chmod ar)
• Call or e-mail our webmaster (webmaster_at_cbu.edu)
  so that he can set up a link from the CBU home
  pages to your home page

109
Getting Your Page Noticed

• Use META HTML tags to describe the content of a
  document within the ltHEADgt area, so that search
  engines can readily get that information
• META uses name/value pairs
• Typical names are Author, Keywords, Generator,
  Classification, Description
• Examples
• ltMETA nameAuthor contentITMgt
• ltMETA nameKeywords contentladys man, stud,
  buff, cool, badgt

110

• Register your own domain name with NIC
  (rs.internic.net), then get your ISP to give you
  a virtual domain. If you host your site under
  your ISPs domain name, your ISP may limit robot
  access to your site
• Pick a great domain name. Available names can be
  found via NIC search. Some names taken now are
  for sale (see online brokers)
• Title your pages descriptively
• Quickly describe your site in the text, and use
  some keywords (do not use keywords more than
  five times on a page)

111

• Register directly with search engines that
  provide this capability and adhere to their
  catalog requirements (ie Yahoo) their are
  submission services that will do this for you
  (www.submit-it.com, www.netcreations.com/postmaste
  r, www.register-it.com) and other sites that
  lists all registration forms (www.freelinks.com)
  also follow the How to include Your Site or
  Add URL link found on the home page of many
  search engines

112

• Make sure each of your pages has a link to your
  home page
• Add your URL to your letterhead, business cards,
  and all company materials
• Incluse your URL in all your e-mail
  correspondnece (ie with a sig file)
• Send out a press release to traditional media
• Cross link to other sites, and get customers and
  vendors to link to you

113

• There are software products to help you with this
  entire process
• www.sitepromoter.com
• www.webpost96.com
• www.webposition.com

114
Attention Grabbing Techniques for Visitors

• Give something away free
• Automate e-mail with a mailto tag
• Use a guestbook to solicit contact info
• Embellish forms with drop downs and buttons - use
  Java if possible
• Use a visitor counter, only if appropriate
• Use multimedia effectively (ie RealAudio,
  Shockwave, or Java)

115
10 Ways to Make Your Home Page(s) Load Quicker !

• 1 - Keep your home page (including dependencies
  such as images and applets) to below 65K
• 2 - For more content, subdivide into linked
  pages find most common used paths by visitors
  and provide quick navigation thereto
• 3 - Use the right graphics file format (use JPEG
  for photos and GIF for drawings)

116

• 4 - Use compression for graphics
• 5 - Try color reduction for color images
• 6 - Try to interlace (incrementally load) your
  GIF files
• 7 - Recycle graphics (use same images on
  different pages) - these are cached
• 8 - Put Java applets in JAR files
• 9 - Reevaluate the value of each image and applet
  get rid of unnecessary ones
• 10 - Use Java and/or Dynamic HTML to minimize
  server interaction

117
Top 10 reasons your home page stinks !

• 10 - Your header picture is over 50K
• 9 - You put in a 400K picture of yourself and you
  appear in the lower left 20K
• 8 - We can only stomach so many pictures of your
  kids and pets
• 7 - You have a link to the White House
• 6 - Blink (Yawn)

118

• 5 - Ticker Tape Status Bars (Javascript)
• 4 - You use construction signs on your page
• 3 - Your home page consists of a desperate plea
  for a job
• 2 - You use some ???? 4-bit GIF that looks like a
  film negative left out in the desert for five
  years
• 1 - Youre own your own hot list !
• Jeff Glover

119
HTML Future

• HTML 4.0 (Cascading Style Sheets and Dynamic
  HTML)
• Extensible Markup Language (XML)
• Virtual Reality Modeling Language
• More extensive use of Java
• JDBC Database/Transaction Processing
• Java RMI Java Servlets
• Distributed Objects (RMI CORBA)

120
Homework
Design and built your own personal home page with
multiple sections ! Grading D - Straight Text,
Sections with Links to them, and your
picture (portrait style) C - Above plus table,
e-mail link, and link to CBU home page B
- Above plus form A - Above plus image map
and/or frames
121
(No Transcript)