© 2004, Robert K. Moniot Chapter 5 Introduction to HTML, Continued

© 2004, Robert K. Moniot Tables A table organizes content into a grid of horizontal rows and vertical columns. The table area is enclosed in... A table row is started with (closing tag optional). Within each row, a table column item is started with (closing tag optional). Use instead, for column headings. Example 6

© 2004, Robert K. Moniot Forms HTML forms allow the user to supply data to the web server. We will focus on creating the form in HTML so it appears to the user with input fields and descriptive text, ready to be filled in. When the form is submitted, the data entered into the input fields is sent back to the web server and processed, for instance by a CGI program. We will not study CGI programming at this time.

© 2004, Robert K. Moniot Defining A Form A form is defined as follows:... (form fields and descriptive text go here) The optional name attribute gives the form a name. This is useful when using JavaScript to access the form. The “path to cgi” is a URL specifying the location of the CGI program that will process the form. The method attribute can be either "get" or "post". The region between the opening and closing form tags can contain input fields and any sort of normal HTML content.

© 2004, Robert K. Moniot Form Submit Methods Method "get" –The input data are appended to the URL of the request sent to the server when the form is submitted. The server passes the data to the CGI through an environment variable. –This method is primitive and suitable only for very small amounts of form data. It is deprecated nowadays. Method "post" –The input data are sent to the server in a data body following the request headers. The server passes the data to the CGI through an input mechanism. –This is the preferred method.

© 2004, Robert K. Moniot Form Input Fields The most common type of form input field is defined using the tag, which allows for various types of input elements: text boxes, check boxes, etc. The general form of this tag is Note that there is never a closing tag, since this defines an element, not a region. The name attribute gives the input field a name, which is useful for JavaScript and CGI processing. The type attribute allows different kinds of input fields to be defined. Depending on the field type, there may be other attributes to control other properties of the element.

© 2004, Robert K. Moniot Input Field Types The type attribute can take on one of the following values: text - specifies a small box in which the user can type text. password - like text, but the text which is typed appears as asterisks, though it is submitted to the server as typed. checkbox - specifies a box which can be clicked to check or un- check it. radio - specifies a “radio button.” Several buttons of this kind are usually defined as a group, each button of the group having the same name. A radio button is like a checkbox except that only one button of the group can be selected at a time.

© 2004, Robert K. Moniot Special Input Types There are some other input types that are special: submit - specifies a Submit button that sends the completed form data to the server. reset - specifies a Reset button that restores all input fields of the form to their default initial values. hidden - used to provide data that the user does not see.

© 2004, Robert K. Moniot Other Tag Attributes size="width" for input fields of type text or password. The width is an integer giviing the width of the box in characters. Default width is 20. maxlength="length" for fields of type text or password. Specifies the maximum number of characters that can be entered into the box. checked (this attribute takes no value) for checkbox and radio buttons. If this attribute is present, the box or button is selected by default. value="value" specifies a default value for the item or, for submit and reset buttons, a label for the button.

© 2004, Robert K. Moniot Form Menu Elements A menu is defined as follows: menu item 1 menu item 2...

© 2004, Robert K. Moniot Form Menu Elements Default appearance of a select element is to present the selected menu item in a text box, with a scroll button at one side that pops up the menu to allow selecting a different item. To create a menu that displays several options in the window, include the attribute size="length" where length is the number of items to show. Normally, only one item from the list can be selected. To allow multiple items to be selected, add the attribute multiple. The item tag allows the attribute selected to indicate that the item should be selected by default.

© 2004, Robert K. Moniot The textarea Element The text type of input element is intended only for small amounts of text. To provide space for more input text, as well as scrollbars, use this element. Example: Default text can be placed here. Example 7

© 2004, Robert K. Moniot Image Maps An image map is an image that has “hot spots” defined, i.e. different places on the image are links to various URLs. Examples of use: –A map of a country, with hot spots defined for different regions of the country, each linked to a document referring to that region. –An image consisting of text labels acting as links. This method allows the text to use fancier fonts or color schemes than the browser's supported text fonts, or to arrange the links in a way (such as in a circle) that would be hard to achieve using an HTML table or list.

© 2004, Robert K. Moniot Image Maps Image maps can be of two types: –client-side map: the browser determines the URL that corresponds to the hot spot where the mouse is, and opens that link when the user clicks on it. –server-side map: when the user clicks on a point in the image, the browser simply sends that pixel's location to the server, where the appropriate action is taken. In most cases, the client-side map is preferable. For instance, it can also be used with text-only browsers. For some applications, for instance to center or zoom in on a selected point of the image, a server-side map is required.

© 2004, Robert K. Moniot Elements of an Image Map An image map consists of three coordinated elements: the image, the map, and the document that uses the map. The image is always in a separate file, referenced using an tag. A client-side map is usually contained in the document that uses it. A server-side map is in a separate file, or it may be a CGI program. We discuss client-side image maps first.

© 2004, Robert K. Moniot The Image The creation of an image to use as a map is outside the scope of this course. Images can be obtained by: –taking a photo with a digital camera –digitizing a photo print using a scanner –drawing a picture on a computer, using a program such as Paint or the GIMP –using available clip art or stock pictures (but be sure to abide by copyright rules!) You will need to know the size of the image in pixels (picture elements). This information can be gotten by –file information provided by system, e.g. Windows XP –using an image manipulation program that reports the image size

© 2004, Robert K. Moniot Pixel Numbering Convention A specific pixel (picture element) is identified by a pair of numbers, giving the horizontal dimension (x) first and the vertical dimension (y) second, separated by a comma. Pixel numbering starts from 0,0 at the top left of the image. Since the numbering starts from 0, the maximum pixel number in a given direction is 1 less than the image size in that direction. –For instance, if an image is 200 pixels wide and 300 pixels high, the bottom right corner pixel has coordinates 199,299.

© 2004, Robert K. Moniot The Map The image map specifies a set of shapes that occupy different regions of the image. Each shape is associated with a URL that is the location to be opened when the user clicks over that shape. Rules about coverage: –The regions need not cover the image completely. If the user clicks on a part of the image that is not within any defined region, nothing happens. –Regions may overlap. Clicking on the overlapping parts of two regions selects the region that is defined first in the map. –To handle clicks that are not within any of the defined regions, you can define a rectangular area that covers the whole image, placing this last in the map.

© 2004, Robert K. Moniot Defining a Map A client-side map is placed somewhere in the body of the document that uses it. The form of a map definition is: <area href="URL" shape="shape" coords="x,y,..." alt="alternate text"> <area href="URL" shape="shape" coords="x,y,..." alt="alternate text">... The map-name gives the map a name that will be used to associate it with an image. The tag will be discussed in the next slide.

© 2004, Robert K. Moniot The Tag There is no closing tag for the element. The URL is the link target to be opened when the region defined by this element is clicked. The shape attribute value is one of rect (rectangle), circle, or poly (polygon), described in the next slide. The number of values in the coords list will vary depending on the shape. The alt attribute provides alternate text for non- graphical browsers. <area href="URL" shape="shape" coords="x,y,..." alt="alternate text">

© 2004, Robert K. Moniot Shapes The shape attribute of the element can be one of the following: –rect : takes two x,y pairs in the coords list. The first pair is the upper left corner of the rectangle, and the second pair is the lower right corner. –circle : takes three numbers in the coords list. The first two numbers are the x,y location of the center of the circle, and the third is the radius. –poly : takes three or more x,y pairs in the coords list. Each x,y pair is a vertex of the polygon. The first and last pair should be the same to close the polygon, though most browsers will infer a closing point if it is omitted.

© 2004, Robert K. Moniot Using an Image Map The document that uses the image map needs to include both the map (as an element somewhere in the body) and the image (as another element somewhere in the body). The map does not appear in the rendered page, so its location in the document is not important. Usually the map is placed immediately before or after the image for convenience. The image is included as usual by means of an tag, with an extra attribute to specify the map: The map-name is the name defined by the map's name attribute.

© 2004, Robert K. Moniot Using an Image Map The tag can use the usual other attributes specifying the height, width, and alternate text. It also is usually desirable to include the attribute border="0" This suppresses the thin border that is normally put around an image. Most browsers color this border a special color when an image is a map, which is usually not desirable. You can tell that the image has hot spots and where they are by moving the mouse over the image. The browser's status box will show the URL of the link corresponding to the region under the mouse. Also, Internet Explorer (but not Netscape) will pop up a “balloon” with the alternate text of the region. Example 9

© 2004, Robert K. Moniot Server-side Image Map A server-side image map is defined by two steps: –Make the image the link text of a link that references the server- side image map or CGI that will handle the mapping operation. –Include the ismap attribute in the tag. The URL of the link can be a server-side image map defined in a text file, which is similar to a client-side map, but has a different syntax that depends on the web server that is used. It is preferred nowadays to use client-side maps instead for this purpose. Alternatively, the URL of the link can be a CGI that is able to process the pixel coordinates which are sent when the user clicks on the image. This is the preferred mode for using server-side maps.

© 2004, Robert K. Moniot Server-side Image Map Form of a server-side image map using a CGI to process the request: The “path to cgi” is the URL of the CGI program that will receive the pixel location when the user clicks on a point in the image.

© 2004, Robert K. Moniot Server-side Image Map Hint: You can use this as a simple technique to find out pixel locations of points on your image when you are constructing a client-side map: make the image into a server-side map temporarily and read off the coordinates of any chosen points in the status box. For instance, in the above example, 298,42 is the x,y location of the mouse at this moment. Example 10 When the mouse is over the image, you will see something like this in the status box of the browser: This is the browser's syntax for invoking a CGI using the get method. Everything up to the question mark is the URL of the CGI. The text following the question mark is the data that will be sent to the CGI, in this case the coordinates of the pixel where the mouse is clicked.

© 2004, Robert K. Moniot Frames The use of frames allows a browser to display more than one web page in the same window simultaneously. Typically frames are used to provide navigation elements or logos that remain fixed while the main content area changes. Frames are introduced by using the element. Note: A page that has a element cannot have a element. The element of a page that uses frames replaces the element of a non-frame page.

© 2004, Robert K. Moniot Frames The overall structure of a page that uses frames is:... (head portion as usual) (material for browsers that do not recognize frames)

© 2004, Robert K. Moniot Attributes of The tag normally has one attribute that defines the spacing of the frames either horizontally or vertically on the screen. For example: specifies that there are two frames in the frameset side by side, the first occupying 20% of the width of the window, and the other occupying the balance. Each frame extends the entire height of the window. specifies that there are three frames in the frameset, one above the other. The first occupies 50 pixels of height, the next 100 pixels, and the last takes up all the rest of the available vertical space. Each frame extends the entire width of the window. If both rows and cols attributes are specified, then the frames are laid out in a grid.

© 2004, Robert K. Moniot Nesting Of Framesets One frameset can be nested inside another. This allows more complicated layouts than horizontal tiles, vertical tiles, or a grid. The nested frameset occupies the space where otherwise a single frame of the enclosing frameset would go. Example 10

© 2004, Robert K. Moniot The Tag Older browsers may not support frames. Such browsers will not see a document body and will display a blank page. To avoid this, use the tag to provide content for these older browsers. The tag is, of course, unknown to such browsers, so they will ignore it. You can place a short document body within this area and it will be displayed by these browsers. Frame-aware browsers ignore all content between tags. The noframes content should be placed inside a element because some browsers will not display content that is not in a document body. Example 10

© 2004, Robert K. Moniot Linking Between Frames Very often it is desired for a link located in one frame to open in another frame. This is achieved using the target attribute in the link element: Link text. When the link text is clicked, the URL will be opened in the frame whose name attribute is frame-name. The frame containing this link will remain in place. Example 10

© 2004, Robert K. Moniot Special target names The target attribute of a link in a frame can have one of the following special values: _blank opens the target URL in a new browser window. _self opens the target URL in the same frame as the anchor (replacing the frame content). _top opens the target URL in the whole browser window (replacing all frames).