Advanced

1

• Advanced
• Web Page Authoring
• with
• Hypertext Markup Language

2
What Are Some Advanced Webpage Features?

• ???
• ???
• ???
• ???
• ???

3
Course Outline

• Meta Tags, Background Tag
• Comments
• Linking in Pages Multiple Pages - A Website
• Tables
• Forms
• Frames
• Image Maps
• Java, JavaScript

4
Meta Tags

• The ltMETAgt tag is used to indicate special
• instructions for the browser
• It is placed in the ltHEADgt tag
• Attributes of the ltMETAgt tag
• HTTP-EQUIV REFRESH
• Namekeywords/description
• Contentseconds/URL/description/etc

5
Meta Tags ..(cont.)

• HTTP-EQUIV REFRESH Content6,
  URLhttp//abc.org
• Tells the Browser (e.g. Netscape) to
• repeatedly reload the document in the
• number of seconds specified in the
• CONTENT attribute, which specifies the
• number of seconds the document should
• refresh itself (in 6 seconds) to the URL
• specified

6
Meta Tags ..(cont.)

• HTTP-EQUIV REFRESH Content URL
• Describes the full address and filename of
• the document to be reloaded. If the
• filename is not specified, the current
• document is reloaded
• Example ltMETA HTTP-EQUIV URL
• CONTENThttp//www.abc.orggt

7
Meta Tags ..(cont.)

• ltMETA NAMEkeywords
• CONTENT"money,smartmoney,gt
• ltMETA NAME"description"
• CONTENT"SmartMoney Interactive is an
  original-content site with daily stock and mutual
  fund recommendations, hourly market updates ...gt

Source http//www.smartmoney.com/
8
Body -Background Tag

• The BACKGROUND tag allows the author to place a
  graphic file or picture as the background of the
  document
• Example
• ltBODY BACKGROUNDIMAGE.GIFgt

9
Body -Background Color TagltBGCOLORgt

• The BGCOLOR tag established the background color
  of the page. You can also specify the color of
  the text and the links as well.
• Example
• ltBODY BGCOLORFFFFFF LINK000000
  VLINKFFFF00 ALINKB5A642 TEXTFF7F00gt
• VlLINK Visited Link ALINK Active Link

10
Tables ltTABLEgt

• ltTABLEgt has 3 main markup tags
• 1 ltTHgt Table Heading
• 2 ltTRgt Table Row
• 3 ltTDgt Table Data

11
Table..(cont.)
Table Row
2 Table Row
Table Row
12
Table..(cont.)
ltCAPTIONgt
1
ltTHgt-Table Heading
ltTHgt-Table Heading
2
3
ltTRgt
ltTDgtTable Data
ltTDgtTable Data
ltTDgtTable Data
ltTRgt
ltTDgtTable Data
13
Table with Border

• Border - to place a border around the table in
  pixels
• (0 means no border 1 - has border)
• Example ltTABLE BORDER1gt
• To widen the cells using percentages
• Example ltTABLE BORDER width80gt
• Or
• Using pixels
• Example ltTABLE BORDER width80gt

14
Table with Border

• Cellspacing - To specify borders between the
  cells (the width of the borders) in pixels
• Example ltTABLE BORDER CELLSPACING5gt
• Cellpadding - to specify the space in pixels
  between the cell contents and cell border
• Example ltTABLE BORDER CELLPADDING5gt

15
Columns and Rows

• To widen a row or column across the rows
• and columns, use the tag COLSSPAN and
• ROWSPAN
• COLSPAN indicates how many columns (counting to
  the right) are occupied by the cell
• ROWSPAN indicates how many rows (hanging down)
  the cells spans

16
Table with Images

• Place the images inside the ltTDgt tags
• Example
• ltTDgtltIMG SRC"winkgf05.gif" lt/TDgt

17
Forms Tag

• Provides a means of accepting input from the user
• Information collected can be displayed by the
  browser or sent to a server
• Allows the user to create a fill-out form
• Allows user to type information into the fields
  or elect from buttons pull-down menus

18
Forms Tag..cont

• When user submits the form, the data is
  transmitted to a Web Server where it is processed
  by a program.
• This is done by
• email
• CGI (Common Gateway Interface) program residing
  on the Web Server

19
Frames

• Frames are
• are mini windows
• are used by many new browsers
• not supported by some browsers
• when used alone, is called a single frame
• in a group is called a frameset

20
Frames
ltFramesetgt
Rows
Frame 1file1.html
Frame 3 file3.html
Frame 2 file2.html
Rows
Frame 4file4.html
Rows
Columns
Columns
21
JavaScript

• is a simple object-oriented scripting language
• is an interpreted language. The programs are
  read and executed line by line
• The code is in plain text
• Can have user interactivity

22
Java

• Java is a new programming language
• developed by Sun Microsystems
• allows interactive multimedia features like
  animation and calculation, using small Java
  programs, called Applets

23
Java Applets

• A Java applet is a Java program that can be
  included in an HTML page, much like an image that
  can be included.
• needs a Java-compatible browser to run it.
• Java applets make Web pages highly interactive.
  for eg. can include animation, graphics, games,
  and other special effects

Source http//www.javasoft.com/nav/read/Tutorial/
index.html
24
Comments in HTML

• Comments line are indicated by the beginning tag
  lt!-- and ending tag --gt
• lt!-- END Home Page Banner --gt

Source http//javaworldtour.sbexpos.com/
25
Image Map

• is a picture on a Web page that contains hot
  spots
• Has Image map code that points to links to
  different specified URLs
• Image map code is made up of a series of map
  coordinates
• When a certain area is clicked the browser jumps
  to the associated link using the map coordinates
  as a guide

26
Creating an Image Map

• 1. Get a graphic
• 2. Download and install a map creator
• program
• 3. Create a HTML document with the
• image file in it
• 4. Using the map creator program, create
• the code and URL for each map
• coordinates.
• 5. Save as an HTML document