Internet Applications

1
Internet Applications
Ahmed M. Zeki Sem 2 2000/2001 ---------------- C
hapter 4
2
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 ltULgt lt/ULgt tags, which open and close the
  unordered list element.
• Each entry in an unordered list is inserted with
  the ltLIgt 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 (lt/LIgt) is optional.

3

• 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

• An ordered list (ltOLgtlt/OLgt) 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

• To change the sequence type of a list, use the
  TYPE attribute in the ltOLgt opening tag or in an
  individual ltLIgt tag. The default type is
  TYPE1, which uses the 1,2,3. sequence. The
  second type, TYPEI, makes a capital Roman
  numeral sequence I, II, III, and so on.
• TYPEi creates the lowercase Roman numeral
  sequence i, ii, iii, etc. The last two types are
  TYPEA and TYPEa, which produce uppercase
  and lowercase alphabetical sequence, respectively.

6

• HTML tables organize data into rows and columns.
  All tags and text that apply to a table go inside
  the ltTABLEgtlt/TABLEgt 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 ltCAPTIONgt lt/CAPTIONgt 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

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

8

• 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
  (ltTHgtlt/THgt) and ones located in the table body
  (ltTDgtlt/TDgt). Header cells, usually placed in the
  ltTHEADgt 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

• 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

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

11

• 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

• 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 VALIGNmiddle.

13

• 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

• 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?namezekiorder5). 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

• 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

• ltFORM METHOD "POST" Action "/cgi-bin/formmail"
  gt
• ltInput type "hidden" name "recipient" value
  "amzeki_at_iiu.edu.my"gt
• ltInput type "hidden" name "subject" value
  "Feedback"gt
• ltInput type "hidden" name "redirect" value
  "main.html"gt
• ltInput Name "name" type "text" size "25"gt
• ltbrgtltbrgtltbrgt
• ltInput type "submit" value "submit your
  message"gt
• ltInput type "reset" value "clear your entry"gt
• 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

• 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

• 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

• 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

• The input TYPEtext 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

• 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 TYPEsubmit 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

• The TYPEreset 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 ltTEXTAREAgt tag with
  the ROWS attribute and the COLS attribute.

23

• Data entered in a TYPEpassword 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
  asterisksthe real form data is still submitted
  to the server.       

24

• 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

• 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
  ltSELECTgtlt/SELECTgt 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 SIZEsize
  attribute inside the ltSELECTgt tag. Use this
  attribute if you prefer an expanded version of
  the list to one-line expandable list.

26
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.htmltop.

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

28

• A hotspot on the image is designated with the
  AREA element. Every ltAREAgt 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 ltIMGgt tags.
• SHAPErect creates a rectangular hotspot around
  the coordinates of a COORDS element.

29

• 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

• The SHAPEpoly 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.
• SHAPEcircle creates a circular hotspot it
  requires both the coordinates of the center of
  the circle and the length of the radius, in
  pixels.

31

• 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.
• lt! DOCTYPE HTML PUBLIC - //W3C//DTD HTML 4.0
  Transitional //ENgt tells the browser that the
  following HTML conforms to a transitional subset
  of HTML version 4.0.

32

• 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

• 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

• 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

• lt! DOCTYPE html PUBLIC - //W3C//DTD HTML 4.0
  Frameset // ENgt tells the browser that we are
  using frames in the following code. You should
  include this modified version of lt! DOCTYPEgt
  whenever you use frames in your HTML document.
• The FRAMESET tag tells the browser that the page
  contains frames.

36

• 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

• 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

• 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

• 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
  ltNOFRAMESgtlt/NOFRAMESgt 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

• By nesting FRAMESET elements, you can create more
  complex layouts.
• www.webdeveloper.com

41
Quiz

• (1) You can specify the background of the page as
  an attribute in the lthtmlgt tag. (True or False).
• (2) Why is this code invalid
• ltpgtHere is some textltbrgtlt/brgt
• And some more textlt/pgt
• (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.

42
Quiz 2

• Create an image, when clicked, it launches the
  email system and create a new message.
• Write an HTML code that
• Creates a paragraph
• Changes the font to Arial
• The size of the font is 1
• 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
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

44
Assignment 29th jan

• Create a table contains all HTML tags that we
  have covered.

HTML Tag Opening and Closing Tags Description Attributes Values
ltIMG gt To include and image in the document Src width http//. 130 pix 40 of the width