1. / 441 Internet Applications Ahmed M. Zeki Sem – 2 2000/2001 ---------------- Chapter 4

2. / 442 HTML The unordered list element creates a list in which every line begins with a bullet mark. All entries in an unordered list must be enclosed within … tags, which open and close the unordered list element. Each entry in an unordered list is inserted with the tag, which creates a line break and inserts a bullet mark at the beginning of the line. You then insert and format any text. The closing list element tag ( ) is optional.

3. / 443 Nested lists display information in outline form. A nested list is a list that appears in the bounds of another list element. Nesting the new list inside the original indents the list one level and changes the bullet type to reflect the nesting. Browsers insert a line of white space after every closed list.

4. / 444 An ordered list ( … ) begins every new line with a sequence number instead of a bullet. By the default, ordered lists use decimal sequence number (1,2,3…).

5. / 445 To change the sequence type of a list, use the TYPE attribute in the opening tag or in an individual tag. The default type is TYPE=1, which uses the 1,2,3…. sequence. The second type, TYPE=I, makes a capital Roman numeral sequence : I, II, III, and so on. TYPE=i creates the lowercase Roman numeral sequence: i, ii, iii, etc. The last two types are TYPE=A and TYPE=a, which produce uppercase and lowercase alphabetical sequence, respectively.

6. / 446 HTML tables organize data into rows and columns. All tags and text that apply to a table go inside the … tags. The BORDER attribute lets you set the width of the tables border in pixels. The WIDTH attribute sets the width of the tableyou specify either a number of pixels or a percentage of the screen width. The text inside the … tags is inserted directly above the table in the browser window. The caption text is also to help text-based browsers interpret the table data.

7. / 447 Tables can be split into distinct horizontal and vertical sections. Put all header information (such as table titles and column headers) inside the … tags. The TR (table row) element is used for formatting the cells of individual rows. All of the cells in the row belong within the … tags of that row.

8. / 448 The smallest area of the table that we are able to format is the data cell. There are two types of data cells: ones located in the header ( … ) and ones located in the table body ( … ). Header cells, usually placed in the area, are suitable for titles and column headings. Like THEAD, the TBODY is used for formatting and grouping purposes. Most tables use TBODY to house the majority of their content.

9. / 449 TD table data cells are left aligned by default. TH cells are centered by default. Forgetting to close any of the area formatting tags inside the table area can distort the table format. Just as you can use THEAD and TBODY element to format groups of table rows, you can use the COLGROUP element to group and format columns.

10. / 4410 COLGROUP is used by setting in its opening tag the number of columns it affects and the formatting it imposes on that group of columns. Each COL element contained inside the.. tags can in turn format a specified number of columns.

11. / 4411 You can add a background color or image to any table row or cell with either the BGCOLOR or BACKGROUND attributes, which are used in the same way as in the BODY element. It is possible to make some table data cells larger than others by using the ROWSPAN and COLSPAN attributes. The attribute value extends the data cell to span the specified number of cells.

12. / 4412 The VALIGN (vertical alignment) attribute of a table data cell accepts the following values: top, middle, bottom and baseline. All cells in a table row whose VALIGN attribute is set to baseline will have the first text line on a common baseline. The default vertical alignment in all data and header cells is VALIGN=middle.

13. / 4413 HTML provides several mechanisms - including the FORM- to collect information from people viewing your site. Use METHOD = post in a form that cause changes to server data, for example when updating a database. The form data will be sent to the server as an environment variable, which scripts are able to access.

14. / 4414 The other possible value, METHOD = get, should be used when your form does not cause any changes in server side data, for example when making a database request. The form data from METHOD =get is appended to the end of the URL (For example: /cgi-bin/formmail?name=zeki&order=5). Because of this, the amount of data submitted using this METHOD is limited to 4K. Also be aware that METHOD = get is limited to standard characters, and cannot submit any special characters.

15. / 4415 A web server is a machine that runs a software package such as PWS (Personal Web Server), MS IIS (Internet Information Server), Apache or Jigsaw. Servers are designed to handle browser requests. When a user uses a browser to request a page or file somewhere on the server, the server processes, this request and returns an answer to the browser.

16. / 4416 In this example the data from the form goes to a CGI (Common Gateway Interface) script, which is a means of interfacing an HTML page with a script (program) written in Perl, C, Tcl or other languages. The script then handles the data fed to it by the server and typically returns some information for the user.

17. / 4417 The ACTION attribute in the FORM tag is the path to a script that processes the form data. In the previous example, the script is a common script which emails form data to an address. Most ISPs will have a script like this on their site, so you can ask your system administrator how to set up your HTML to use the script correctly.

18. / 4418 The INPUT element is common in forms, and always requires the TYPE attribute. Two other attributes are NAME, which provides a unique identification for the INPUT, and VALUE, which indicates the value that the INPUT element sends to the server upon submission.

19. / 4419 Hidden input always have the attribute TYPE = hidden. The three hidden inputs -shown in the previous example- are typically for this kind of CGI script: An email address to which to send the data, the subject line of the email and a URL to which the user is redirected after submitting the form.

20. / 4420 The input TYPE=text inserts a one-line text bar into a form. The value of this INPUT element and the information that the server sends to you from this INPUT is the text that the user types into the bar. The SIZE attribute determines the width of the text input, measured in the characters. You can also set a maximum number of characters that the text input will accept by inserting the MAXLENGTH = length attribute.

21. / 4421 You must make sure to include a textual identifier (in this case, Name:) adjacent to the INPUT element to indicate the function of the element. The TYPE=submit INPUT element places a button in the form that submits data to the server when clicked. The VALUE attribute of the submit input changes the text displayed on the button.

22. / 4422 The TYPE=reset input element places a button on the form that, when clicked, will clear all entries the user has entered into the form. The TEXTAREA element inserts a box into the form. You specify the size of the box (which is scrollable inside the opening tag with the ROWS attribute and the COLS attribute.

23. / 4423 Data entered in a TYPE=password input appears on the screen as asterisks. The password is used for submitting sensitive information that the user would not want others to be able to read. It is just the browser that displays asterisks the real form data is still submitted to the server.

24. / 4424 Every INPUT element with TYPE = checkbox creates a new checkbox in the form. Checkboxes can be used individually or in the group may be selected at any time. All of the NAME attributes of a group of radio inputs must be the same and all of the VALUE attributes different. Insert the attributes CKECKED to indicate which radio button you would like selected initially.

25. / 4425 The SELECT element places a selectable list of items inside your form. To add an item to the list, insert an OPTION element in the … area, and type what you want the list item to display on the same line. You can change the number of list options visible at one time by including the SIZE=size attribute inside the tag. Use this attribute if you prefer an expanded version of the list to one- line expandable list.

26. / 4426 Internal Linking A location on a page is marked by including a NAME attribute in an A element. Clicking on this hyperlink in an anchor for linking. You can also link to an internal location on another page by using the URL of that location. For example: HREF = page.html#top.

27. / 4427 Image Map An image map allows you to designate certain sections of the image as hotspots and then use these hotspots as anchors for linking. All elements of an image map are contained inside the … tags. The required attribute for the MAP element is NAME.

28. / 4428 A hotspot on the image is designated with the AREA element. Every tag has the following attributes: HREF sets the target for the link on that spot, SHAPE and COORDS set the characteristics of the area and ALT function just as it does in tags. SHAPE=rect creates a rectangular hotspot around the coordinates of a COORDS element.

29. / 4429 A coordinate pair consists of two numbers, which are the locations of the point on the x and y axes. The x-axis extends horizontally from the upper-left corner and the y-axis vertically. Every point on an image has a unique x-y coordinate, annotated as (x, y). In the case of a rectangular hotspot, the required coordinates are those of the upper- left and lower-right corners of the rectangle.

30. / 4430 The SHAPE=poly creates a hotspot of no preset shapeyou specify the shape of the hotspot in the COORDS attribute by listing the coordinates of every vertex, or corner of the hotspot. SHAPE=circle creates a circular hotspot; it requires both the coordinates of the center of the circle and the length of the radius, in pixels.

31. / 4431 To use an image map with a graphic on your page, you must insert the USEMAP = #name attribute into the IMG element, where name is the value of the NAME attribute in the MAP element. The main HTML element that interacts with search engines is the META element. tells the browser that the following HTML conforms to a transitional subset of HTML version 4.0.

32. / 4432 META tags contain two attributes that should always be used. The first of these, NAME, is an identification of the type of META tag you are including. The CONTENT attribute gives the information the search engine will be cataloging.

33. / 4433 The CONTENT of a META tag with NAME = keyword provides the search engines with a list of words that describe the key aspects of your site. By including META tags and their content information, you can give precise information about your site to search engines. This will help you draw a more focused audience to your site.

34. / 4434 The description value of the NAME attribute in the META tag should be a 3 to 4 line description of your site, written in sentence form. This description is used by the search engine to catalog and display your site. META elements are not visible to users of the site and should be placed inside the header section of your HTML document.

35. / 4435 tells the browser that we are using frames in the following code. You should include this modified version of whenever you use frames in your HTML document. The FRAMESET tag tells the browser that the page contains frames.

36. / 4436 The value of COLS or ROWS gives the width of each frame, either in pixels or as a percentage of the screen. In each FRAME element, the SRC attribute gives the URL of the page that will be displayed in the specified frame.

37. / 4437 The purpose of a NAME attribute in the FRAME element is to give an identity to that specific frame, in order to enable hyperlinks in a FRAMESET to load their intended FRAME. The TARGET attribute in an anchor element is set to the NAME of the FRAME in which the new page should load.

38. / 4438 A target in an anchor element can be set to a number of preset values: TARGET = _blank loads the page in a new blank browser window. TARGET = _self loads the page into the same window as the anchor element. TARGET=_parent loads the page into the parent FRAMESET. TARGET=_top loads the page into the full browser window.

39. / 4439 Not everyone who will be looking at your page will be using a browser that can be handle frames. You therefore need to include a NOFRAMES element inside of the FRAMESET. You should include regular HTML tags and elements within the … tags. Use this area to direct the user to a non- framed version of the site or to provide links for downloading a frame-enabled browser.

40. / 4440 By nesting FRAMESET elements, you can create more complex layouts. www.webdeveloper.com

41. / 4441 Quiz (1) You can specify the background of the page as an attribute in the tag. (True or False). (2) Why is this code invalid: Here is some text… And some more text… (3) Markup a paragraph of 3 lines using these tags: H3, EM, STRONG and BR. (4) write an HTML code to create an image, when clicked, the browser takes you to www.iiu.edu.my. www.iiu.edu.my

42. / 4442 Quiz #2 (1) Create an image, when clicked, it launches the email system and create a new message. (2) Write an HTML code that: (1) Creates a paragraph (2) Changes the font to Arial (3) The size of the font is +1 (4) The color of the font is purple (3) What is the job of ALT keyword, it is used with ___________ tag. (4) The name of your site should always be: homepage.html (true or false).

43. / 4443 Group Assignment (29 th Jan) Write a (3-page) report that describe the following topics: Browser extensions What are plug-ins and helpers? Browser extension categories. Browser.com Internet Security Cookies Trojan Horses

44. / 4444 Assignment 29 th jan Create a table contains all HTML tags that we have covered. HTML Tag Opening and Closing Tags DescriptionAttributesValues To include and image in the document Src width http://…. - 130 pix - 40% of the width