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

/ 441

Internet Applications

Ahmed M. Zeki

Sem – 2

2000/2001

----------------

Chapter 4

/ 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 <UL>… </UL> tags, which open and close the unordered list element.

Each entry in an unordered list is inserted with the <LI> 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 (</LI>) is optional.

/ 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.

/ 444

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

/ 445

To change the sequence type of a list, use the TYPE attribute in the <OL> opening tag or in an individual <LI> 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.

/ 446

HTML tables organize data into rows and columns. All tags and text that apply to a table go inside the <TABLE>…</TABLE> tags. The BORDER attribute lets you set the width of the table’s border in pixels. The WIDTH attribute sets the width of the table—you specify either a number of pixels or a percentage of the screen width.

The text inside the <CAPTION>… </CAPTION> 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.

/ 447

Tables can be split into distinct horizontal and vertical sections. Put all header information (such as table titles and column headers) inside the <THEAD>…</THEAD> 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 <TR>…</TR> tags of that row.

/ 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 (<TH>…</TH>) and ones located in the table body (<TD>…</TD>). Header cells, usually placed in the <THEAD> 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.

/ 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.

/ 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 <COLGROUP> .. </COLGROUP> tags can in turn format a specified number of columns.

/ 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.

/ 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”.

/ 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.

/ 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.

/ 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.

/ 4416

<FORM METHOD = "POST" Action = "/cgi-bin/formmail">

<Input type = "hidden" name = "recipient" value = "[email protected]"><Input type = "hidden" name = "subject" value = "Feedback"><Input type = "hidden" name = "redirect" value = "main.html">

<Input Name = "name" type = "text" size = "25">

<br><br><br>

<Input type = "submit" value = "submit your message"><Input type = "reset" value = "clear your entry">

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.

/ 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.

/ 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.

/ 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.

/ 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.

/ 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.

/ 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 <TEXTAREA> tag with the ROWS attribute and the COLS attribute.

/ 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.       

/ 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.

/ 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 <SELECT>…</SELECT> 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 <SELECT> tag. Use this attribute if you prefer an expanded version of the list to one-line expandable list.

/ 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”.

/ 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 <MAP>…</MAP> tags. The required attribute for the MAP element is NAME.

/ 4428

A hotspot on the image is designated with the AREA element. Every <AREA> 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 <IMG> tags.

SHAPE=”rect” creates a rectangular hotspot around the coordinates of a COORDS element.

/ 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.

/ 4430

The SHAPE=”poly” creates a hotspot of no preset shape—you 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.

/ 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.

<! DOCTYPE HTML PUBLIC “- //W3C//DTD HTML 4.0 Transitional //EN”> tells the browser that the following HTML conforms to a transitional subset of HTML version 4.0.

/ 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.

/ 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.

/ 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.

/ 4435

<! DOCTYPE html PUBLIC “- //W3C//DTD HTML 4.0 Frameset // EN”> tells the browser that we are using frames in the following code. You should include this modified version of <! DOCTYPE> whenever you use frames in your HTML document.

The FRAMESET tag tells the browser that the page contains frames.

/ 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.

/ 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.

/ 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.

/ 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 <NOFRAMES>…</NOFRAMES> 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.

/ 4440

By nesting FRAMESET elements, you can create more complex layouts.

www.webdeveloper.com

/ 4441

Quiz (1) You can specify the background of the

page as an attribute in the <html> tag. (True or False).

(2) Why is this code invalid:<p>Here is some text…<br></br>And some more text…</p>

(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.

/ 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).

/ 4443

Group Assignment (29th 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

/ 4444

Assignment 29th jan Create a table contains all HTML

tags that we have covered.

HTML TagOpening and Closing Tags

Description Attributes Values

<IMG …> To include and image in the document

Srcwidth

“http://….”-“130” pix-“40%” of the width