1

WEB TECHNLOGIES
UNIT-IV

1. Discuss Image Compression and explain GIFs, JPGs & PNGs.

Ima ge Compression: Image compression is integral to image formats. Image compression

involves reducing the size of the file containing the image. Compressed image take up less disk space.
Complex algorithms called compression algorithms, compact or discard nonessential data in the image file.
The compression is handled by the format in w hich the image is being saved rather than by explicitly
running a program such as compress, gzip or PKZIP. GIF, JPG and PNG all use different compression
algorithms.

Smaller images permit faster transmission overt the internet, so the image-containing web
pages can load more quickly. To view an image, the software display ing the image (such as a Web
Browser or image editing program) must decompress the image. The MIME types specifying the image
format is indicated by the file extension are .gif, .jpg or .png. Some compression methods may work
better than others, depending on the content of the image being saved. That is, different compression
algorithms will achieve different reductions in any given image’s file size and there is no clear-cut winner
for all the images.

The popular image formats also vary in the number of distinct colors they are able to represent
in an individual image. The word palette or color palette refers to a group of distinct colors. Palette is
sometimes used in conjunction with an 8-bit color scheme in which 256 (28 colors) distinct colors may be
represented.

Gra phics Interc hange Format (GIF): GIF image files are identified by .gif extension. GIF is
the format commonly used to save simple images that require only a small number of colors. Such images
include buttons, icons and simple line draw ings (cartoons and logos). GIF was developed by
CompuSe rve, and it uses a patented form of Lossless Compression called LZW (LZW stands f or the
names of its developers, three scientists named Lempel, Ziv and Welch).

Lossless compression algorithms try to capitalize on color repetitions and patterns in an image.
Images that contain large areas of the same color such as buttons and icons, lend themselves to
compression using this technique. Using this method, all the information about the image is preserved.
Thus, when the image is decompressed, it looks exactly the same as it did originally-hence the name
lossless compression.

GIF supports up to 256 colors. This is the number of colors that can be represented using 8-
bits. If the user is converting an image that contain large number of colors to GIF using an image editing
program such as Pa int Shop Pro (Microsoft Windows), it is necessary to reduce the number of colors
in the image to 256. A process called dithe ring can be used to reduce the number of colors in an image.
The basic idea is to approximate the color in the limited-color palette.

Joint Photographic Expe rts Group(JPG): Images saved in the JPG format are identified by
the .jpg extension. JPG is used to store complex images that involve a large number of colors such as
photographs and complex artwork. JPG was developed by the Joint Photographic Experts Group and in
contrast to GIF, it uses Lossy Compression scheme.

Lossy Compression involves throw ing away some of the information contained in the data. The
challenge is determining which information to get rid of w ithout significantly reducing the image quality.
The key to the JPG compression algorithm is that subtle differences in color are not perceptible to the
human eye. Thus, it is necessary to maintain the information that keeps track of these subtle differences.
People w ill not be able to detect them anyway. The JPG compression method takes advantage of the
number of colors and color variations found in photographs and realistic artwork. Using this strategy saves
a great deal of space without too much image quality deterioration. The resulting smaller files are suitable
for Web images.
IIMC Prasanth Kumar K
 2

The image quality is reduced when an image created by using a lossy compression algorithm is
displayed. One benefit of JPG is that it can save full-color information about an image. Where GIF is
limited to 8 bits of color information per pixel, JPG stores 24-bits per pixel. This translates to over 16.7
million different colors. It is importance to note that full-color hardware is necessary in order to view all
the colors in such images. Many PC monitors now support 24-bit color.

Portable Network Graphics (PNG): PNG is newer image format. Images stored in this
format have .png as a file extension. The development of PNG was a response to the controversy
surrounding the patent held by Unisys on the LZW compression algorithm. Once Unisys and CompuServe
began charging software development royalties for the use of the LZW compression algorithm, the
nonpatented PNG alternative was devised.

Like GIF, PNG uses Lossless Compression. This means that when saved in this format
detailed images such as photographs may result in very large files. However, for simple images, PNG
advocates claim several advantages over GIF:

(i). PNG compresses images slightly more than GIF-a saving of about 20 percent is usually obtained.
(ii). PNG supports full-color representation of images as well as reduced color whereas GIF only supports
8-bit color. Since it uses lossless compression, PNG also provides a way to save images w ithout losing any
of the image information similar to JPG.
(iii). Of course, the major advantage is that it is patent-free. This makes the format very attractive to
software developers who currently pay royalties for using GIF.

However, one interesting feature of GIF that is not replicated by PNG is animation support.

2. Write a short note on Animated GIFs & Interlaced GIFs?

Animated GIFs: While surfing the Web, we come across eye-catching Web graphics that
appear to move. An easy way to achieve this effect is to use animated GIFs. An animated GIF is actually a
series of images displayed in rapid succession, thereby creating the illusion of continuous motion. GIF
animation is a feature of GIF89a, the newer version of the GIF file format. GIF89a was released in 1989
and is an extension of the earlier version, GIF87a. Most browsers now support the GIF89a animation
format and those that do not will typically only display either the first or last GIF image in the series.

To create an animated GIF, you need a series of at least two GIF images that will serve as
frames. These can be created using any image editing program. We will also need a GIF animation
program to assemble the frames. GIF animation works along the same lines as a cartoon flip book. Each
frame in the series has a slight variation. When the f rames are displayed quickly in succession, the image
appears on move.

A GIF animation program puts the frames together in a single GIF file that we can include in our
HTML document using the image tag in the customary manner. The program also specifies various
parameters such as how much time should elapse between display ing each frame and whether the
animation should loop continuously or play a f ixed number of times. The Stop button on the browser can
be used to freeze animated GIFs.

The following are list of software:

(i). GIF Animator (ii). GIF Builder (iii) GIF Construction Set
(iv) GIF Converter (v). GIFMerge (vi) WhirlGIF

Interlaced GIFs: An image is displayed on the browser screen starting from top to bottom.
The top half of the image is visible approximately halfway through the download, but at that point the
bottom half is still missing. Interlaced GIFs appear on the screen in such a way that the whole image
appears to load at one time, but it starts out blurry. The image comes into sharper focus as the download

IIMC Prasanth Kumar K

 3
advances. This way, the user can get a sense of w hat is being displayed without hav ing to wait f or the
whole image to download.

Interlaced and non-interlaced GIF files contain the same image information and are the same
size. The difference is the order in which the rows of data making up the image are saved. In a Four-pass
inte rlaced ima ge, four passes are used to save the image. Each succeeding pass specifies more detail.

The information is div ided as follows:

· Pass One: The first row and every eighth row after it is saved.
· Pass Two: The fifth row and every eighth row after it is saved.
· Pass Three: The third row and every fourth row after it is saved.
· Pass Four: The second row and every second row after it is saved.

3. Explain a bout Ima ge and Text Alignme nt with syntax and examples.

Ima ge Tag: A common image tag includes the follow ing attributes:
SRC, ALT, HEIGHT and WIDT H.

<i mg src =”web.jpg” alt =”Web Technologies” height =”200” width=”200”>

Ima ge and Text Alignment: When we include an image within a line of text on a web page,
the browser displays the image such that the bottom of the image is even with the bottom of the text. The
imaginary line on w hich a line of text rests is called base line. The following HTML code which is rendered
demonstrates this idea.

<p>
Fundamentals of the Internet and the World Wide Web.
<i mg src =”web.jpg” border=”1” alt =”Web Technologies” height =”200” width=”200”>
</p>

The Align attribute of the image w ill position the image vertically with respect to the line of text.
To position the image in the top line looks like.

<p>
Fundamentals of the Internet and the World Wide Web.
<i mg src =”web.jpg” align=”top” border=”1” alt =”Web Technologies” height =”200” width=”200”>
</p>

Align Attribute Values: To position an image in a line with respect to the text, use one of the
follow ing:
· Baseline or bottom: Aligns the bottom of the image with the baseline. This is the default setting.
· Middle : Aligns the middle of the image with the baseline.
· Top: Aligns the top of the image with the highest point of the text in the line.

To align an image w ith the highest or lowest object in the line (which can be either text or another
image), use one of the following:
· Absbottom: Aligns the bottom of the image with the bottom of the lowest object in the line.
· Absmiddle : Aligns the middle of the image with the middle of the line.
· Top: Aligns the top of the image with the top of the highest object in the line.

4. Write short notes on Wrapped Text a nd Text Wrap Prevention.

Wrapped Text: Image placement on a web page makes only one line of text displays either
side of the image. If the text is longer than will fit on one line, the browser will display the remainder text
below the image. The Align attribute prov ides a way to wrap text next to an image. Using a value of
either left or right positions the image next to either the left or the right margin permits multiple lines of

IIMC Prasanth Kumar K

 4
text to wrap alongside an image. It is also possible to display two images, one on left side of the page and
the other on the right side of the page with text flowing in between.

<h4>Web Technologies</h4>
<p>
<i mg src =”web1.jpg” align=”left” height =”100” width=”100”>
<i mg src =”web2.jpg” align=”right” height =”100” width=”100”>

Text Wrap Text Wrap Text Wrap Text Wrap Text Wrap Text Wrap Text Wrap Text Wrap Text
Wrap Text Wrap Text Wrap Text Wrap Text Wrap Text Wrap Text Wrap Text Wrap Text Wrap Text Wrap
</p>

Text Wrap Prevention: Sometimes, we want all of the text to be wrapped next to an image.
Using the line-break tag, <BR> starts a new line of text alongside the image. We can use CLEAR attribute
to continue the text below the image. Three values of CLEAR are:

· Left: The text breaks to a clear line to the left side of the page. This is useful w ith images that are
aligned to the left.
· Right: The text breaks to a clear line to the right side of the page. This is useful w ith images that
are aligned to the right.
· All: The text breaks to a line is clear to both sides of the page. This is usef ul when text wrapped
between two images.

The code for a break tag that causes a break to a clear line to the left side of the page is:
<BR CLEAR=”left”>

5. Write about Cente red Images and Low Source Images.

Centered Images: There are several ways to center images:

1. Use the division tag

<div align=”center”>
<i mg src =”web.jpg” alt =”Web Technologies” height =”200” width=”200”>
</div >

2. Use the center tag.

<center>
<i mg src =”web.jpg” alt =”Web Technologies” height =”200” width=”200”>
</center>

3. Use the Paragraph tag.

<p align=”center”>
<i mg src =”web.jpg” alt =”Web Technologies” height =”200” width=”200”>
</p>

4. Use a Header tag.

<h3 align=”center”>
<i mg src =”web.jpg” alt =”Web Technologies” height =”200” width=”200”>
</h3>

Low Source Images: The low source image provides a preview of what is coming. The
LOWSRC attribute of the image tag allows another image to display in place of the intended image
while the remainder of the page is loading. The LOWSRC image is replaced by the image has been
transferred over. The LOWSRC attribute can be used as follows:

<img src =”web.jpg” lowsrc =”web2.jpg” alt =”Web Technologies” height =”200” width=”200”>

IIMC Prasanth Kumar K

 5
The SRC attribute should be specified f irst to avoid confusing the browsers that do not support the
LOWSRC attribute. The HEIGHT and WIDTH attributes apply to both SRC and the LOWSRC attribute, so
the two images should be the same size. If neither the HEIGHT nor WIDTH attributes are specified, the
dimensions of the LOWSRC image w ill be used for both images.

6. Explain a bout (a) Se rver-side Image Ma p (b).Client-side Image Ma p.

Image maps have become quite popular as navigation aids. A geographic map is an excellent
candidate for an image map, since viewers can click on a specific region on the map and the link will lend
them to a page describing that region. The image map is v isually pleasing and it serves to entice the
viewer to explore the Web Presentation further. Any item can be clicked on and information related to that
object will be prov ided.

Two types of image maps are currently being used: Se rver-side ima ge maps & Client-side
image maps. Server-side image maps have been around longer and are supported by practically all
browsers. Client-side image maps are a more recent development and some browsers may not support
them. However, client-side image maps are quickly gaining acceptance as they are more efficient and
easier to implement than server-side image maps.

Server-Side Image Map: A server-side image map involves three components:

1. An image that is used as the image map.
2. A map file that describes the areas of the image and their corresponding URLs.
3. An image map program.

The map file and image map program must reside on the server. The image is displayed by the
browser. Each time a user clicks on an area of the image map, a connection is made to the server and the
image map program handles the request. The browser sends the location of the mouse click in the form of
x and y coordinates. The image map program performs some calculations and looks up the location in the
map file to determine the associated URLs. The corresponding document is then sent to the client to
satisfy the request.

Server-side image maps place an extra burden on the server, since they require the web server
to perform calculations. This results in a delay between clicking on an image map area and seeing the
resulting web page.

Client-Side Image Map: In client-side image maps, instead of maintaining the information
files on the server, the HTML document contains the map information and the browser performs the
necessary calculations. The result is that the performance of client-side image maps is better than that of
server-side image maps.

Another drawback to server-side image map is that in order to test them, the map file and
image map program must be installed on the server. Many users do not have permission to install
programs on Web Server, so creating server-side image maps is not an option. The corresponding benefit
of client-side image maps is that user can test and implement the image map locally, since the web
browser does all the processing.

A best advantage of client-side image maps is that URL of the hyperlink related to each image
area map will display in the web browser status bar w ithout the area having to be selected. With a server-
side image map, the URL is not available from the server until the user actually clicks on the area. Server-
side image maps display the URL of the image map itself (and perhaps the x and y coordinates as well) in
the status bar, but not the URL of the page to be located.

The process of creating a client-side image map can be broken down into four steps:
1. Select an image to be used as the image map.

IIMC Prasanth Kumar K

 6
The image should have clearly def ined areas. Prominent boundaries make it easier for the user to
select an area. For this reason, line draw ings or images consisting of distinct shapes tend to work
better than photographs.

2. Def ine the areas of the image maps.

User needs to define the areas of the image map in terms of their shape and position. One way
to determine the coordinates of the perimeters of the areas is to use an image editing program. Such
program w ill display the x and y coordinates of the mouse cursor locations. Tracing the mouse ov er
the perimeter of the shape w ill reveal the coordinates of its boundary. There are three ways to
describe an area in an image map: circle, rectangle or polygon.

Type of Area Shape name Cvalues

Circle circle x,y,z where (x,y) indicates the center and z is its radius
Rectangle rect X1 ,y1 ,x2 ,y2 where (X1 ,y1 ),…. Are coordinates
Polygon poly X1 ,y1 ,x2 ,y2,…..xn,yn where (X1,y1 ),…. Are coordinates

3. Include the map information in the HTML code.

Use the map, <MAP> and area, <AREA> tags to define the image maps. The map declaration
is as follows:

<MAP NAME=”mapname”>
…………………
</MAP>

The information on the area coordinates and shapes plus the URLs to be activated when the
mouse is clicked in a given area goes between the beginning and ending map tags. This information is
included by using the area tag, <AREA> which has no ending tag. The syntax of the area tag is:

<AREA SHAPE=”shapename” COORDS=”cvalues” HREF =”link”>

The value of shapename can be circle, rect or poly. The type of shape being def ined
determines how coordinates are specified in the COORDS attribute. The HREF value is the name of
the URL to be loaded when the corresponding map area is selected.

<MAP NAME=”samplemap”>
<AREA SHAPE=”poly”
COORDS=”139,140,204,214,101,195”
HREF =”triangle.ht ml”>

<AREA SHAPE=”circle”
COORDS=”110, 103, 27”
HREF =”circle.ht ml”>

<AREA SHAPE=”rect”
COORDS=”176, 84,239,148”
HREF =”square.ht ml”>

</MAP>

4. Connect the image w ith the map information.

The final step in creating a client-side image map involves “connecting” the image with the map
information in the map tag. This is done through the USEMAP attribute of the image tag. The value
assigned to USEMAP is the same as the NAME attribute in the map tag, but with a preceding #

IIMC Prasanth Kumar K

 7
sy mbol. The # sy mbol tells the browser to look within the current HTML document for the map
information.

<i mg src =”web.jpg”

Height =”75”
Width=”75”
Usemap=”#samplemap”>

<MAP NAME=”samplemap”>
<AREA SHAPE=”poly”
COORDS=”139,140,204,214,101,195”
HREF =”triangle.ht ml”>

<AREA SHAPE=”circle”
COORDS=”110, 103, 27”
HREF =”circle.ht ml”>

<AREA SHAPE=”rect”
COORDS=”176, 84,239,148”
HREF =”square.ht ml”>

</MAP>

7. Write short notes on Sca nne rs. Explain in brie f about Scanne r types & Sca nne r selections.

Scanne rs: Scanners are the devices that can convert an image to a digital format that is
suitable for manipulation by computers. Scanners play a signif icant role in desktop publishing and the
office environment.

Two applications of scanners are:

1. Scanners can be used for text recognition. With the use of the Optica l Characte r Reade r (OC R)
software, scanned documents can be converted into a format suitable for text editing (such as
Microsoft Word format). The OCR software examines each character of the scanned document and
attempts to guess what the character is by comparing it to a database of character shapes. Although
not perfect, OCR software is fairly accurate and is often included when a scanner is purchased.

2. Scanners may serve as a sort of copier by being used to make digital images of documents. A digital
copy of a scanned document can be stored on disk and can then be printed or faxed or utilized in
another manner. This is different from text recognition in that the document copy cannot be changed
using a text editor. The image is just a picture of the original document.

Scanne r Types: Three types of scanners are currently on the market: Hand-held, Sheet-fed
and Flatbed. Each type contains a light source and a cha rge-coupled device (CCD). The CCD is an
array of electronic sensors that are able to read light variations and convert them to digital form. An
optical resolution of 300 x 600 dpi (dots per inch) means that there are 300 sensors per linear inch
of the CCD array and each vertical inch covered by the array is div ided into 600 lines. A greater
vertical resolution means that the scan head will move slower and the scanning process will take a bit
longer.

Scanning color involves measuring the amount of red, green and blue in the image. Some
color scanners make three passes with scan head (one per color) to collect the color information. A
single-pass color scanner performs the collection with one pass of the scan head.

IIMC Prasanth Kumar K

 8
A typical scanner resolution of 300 x 600 dpi is much higher than the resolution of a typical
manner. A monitor’s resolution is usually specified in terms of the entire size. A 15-inch monit or
normally has resolution of 800 x 600. This means there are 600 lines in the vertical dimension and
each line is comprised of 800 pixels. A 17-inch monitor usually has a resolution of 1024 x 768.

Hand-Held Scanne r: With a hand-held scanner, the scanner unit is passed over a stationary
page. The scanning width is small; usually no more than 4 inches and larger images may require two
or passes that must then be stitched together. This means that hand-held scanners are usually not
suitable for OCR scanning or for scanning large images. Hand-held scanners are compact and portable
and are good for scanning small images and text.

Sheet-Fed Scanne rs: Sheet-fed scanners remain stationary. The page to be scanned is drawn
into unit using rollers. The scanning width is larger than the hand-held units, but thick or bound
documents present a problem. Sheet-fed scanners are smaller than f latbed scanners and larger than
hand-held scanners. They are sized to fit on the desktop.

Most sheet-fed scanners do no currently support colors. However this is not an issue when
documents are scanned for text recognition or for black and white documents. Generally sheet-fed are
not used for creating digital images for a web page, since the images will lack color.

Flatbed Scanner: Flatbed scanners remain stationary. The scanner looks like a small
photocopier. The CCD and light pass over the document during the scanning process. These scanners
are good for creating digital images, OCR scans and document images. Since the scanner must be at
least large enough to accept an 8.5 x 11 inch piece of paper, the unit is quite a bit larger than a hand-
held or sheet-fed scanner. This larger size restricts portability and presents drawback for those w ith
limited workspace.

Scanner Se lection: Since not all scanners perform equally well in all situations, user should
first consider the primary use w hen purchasing a scanner. If user needs to scan small images for w eb
pages, an inexpensive hand-held scanner may suffice. Scanning black and w hite documents for the
purpose of text recognition might require a sheet-fed scanner. If user needs to scan larger color
images, then consider flatbed scanner.

Another consideration is cost. The hand-held units are cheapest followed by sheet-fed scanners.
The more versatile flatbed scanners are most expensive, though their cost has been dropping
considerably.

Scanning at a higher resolution only produces larger image files. Selecting a color scanner that
records more than 16.7 million colors is required.

8. Explain the working of CGI Sc ript.

Common Gate way Interface (C GI): CGI is a set of rules that specify how parameters are
passed from programs to web servers. When user submits a form, the program may be executed by
the web server. And the results are returned to the browser. The particular program that is to be
executed is specified in the AC TION attribute of the form tag. Any program run by a web server in
response to a user’s request is called a script or C GI Sc ript. While they may be w ritten in scripting
languages, they can be more generally be w ritten in any language that a server is capable of
executing.

Scripts are useful for interacting w ith databases. When user submits a query to a search
engine, user is actually submitting a form. The web server corresponding to the search engine then
runs a program that interacts with search engine’s index of web pages. Once the program determines
the result set of the query, it returns this information as an HTML document to the browser. The
browser then renders the document the document on screen.

IIMC Prasanth Kumar K

 9
Because of the intermediary role that script plays, they are sometimes called Gate ways. The
script serves as a passage between the Web and the search engine’s database.

Script and Forms: The server mentioned in the ACTION attribute of the form tag receives a
request fro the user when the user submits the form. The server must then locate the script the user
has requested. The server makes calls to the operating system on which the web server is running to
determine if the script exists. If the script is located and is world executable, then server runs it.

The inputs to the script are the values that are user transmitted with the form. The script must
decode these values to use them. Once the script has run, the results it computed are passed back to
the web server. The web server then sends the results usually an HTML document back to the client
that submitted the form.

Security: A CGI script is a program that anyone can run on a web server. Such scripts must
therefore be carefully w ritten and all but the most straightforward scripts should be written by very
experienced programmers. It is easy to write a script with security holes, but very hard to verify that a
script has no loopholes. With a f lawed script, certain inputs can be passed to the script that may allow
the script to gain control of the web server’s operating system. Once this happens, the program can
delete files and cause other damage. Scripts usually need to be placed in a special directory called
something like cgibin on most systems.

9. Explain a bout Client Pull and Server Push.

When user requests a web page, browser sends a request to a server that in turn sends back
the file requested. In the case of dynamic docume nts more than just a single transaction may take
place. A dynamic document is one that has the capacity to change. There are two varieties of dy namic
documents and their differences result from the way in which transaction are initiated.

Client Pull: In the client pull model, browser initiates the document’s change. Periodically,
browser may automatically request information f rom the server. Each time it does, a new connection
to the server must be established. Using client pull, user can cause a document to “re fresh” itself or
load a completely new document.

The META tag along w ith its HTTP-EQUIV and CONTENT attributes are used to create client
pull documents. The Meta tag syntax for client pull applications in which user can refresh the same
document continually is as follows:

<META HTTP-EQUIV=”ref resh” CONTENT =”n”>

The HTTP-EQUIV attribute takes the value of re fresh and the CONTENT attribute takes a
number n indicating how many seconds to wait before automatically reloading the page. A value of n
equal to 15 would cause the page to reload every 15 seconds and a value of 0 would cause the page to
reload continuously w ith little or no delay. The smaller the vale of n, the higher the demand placed on
the internet.

Suppose the user would like to display the file splash.html for 10 seconds before automatically
loading the file data. html. The following HTML code included in the head tag of the file splash.ht ml
accomplishes the desired effect.

<META HTTP-EQUIV=”ref resh”

CONTENT =”10”;
URL=”http://www.abc.com/data.html”>

When user loads splash.ht ml, it will be displayed for 10 seconds and then the file data.ht ml w ill
automatically be loaded.

IIMC Prasanth Kumar K

 10
Server Push: In the server push model, the server initiates the document change. Periodically,
the server may send the browser some new information to display. For example, current weather
report, stock prices or sports updates, etc. For server push to work, the client-server connection must
remain open after the client initial request is satisfied. This places a continuous demand on the serv er.
Server push is not accomplished using HTML tags. Server push programs are usually written in Java or
Perl. To use server push, programmer needs to develop program code and must also know technical
details about the server.

10. Explain va rious HTML Tools that are in use.

Editors: An HTML Editor is a software tool that helps to develop HTML code. It is a tag and text
editor that is specialized to HTML.

There are essentially two different types of HTML Editors:

(i). WYSIWY G HTML Editor: WYSIWY G means “what you see is w hat you get.” In this model,
programmers almost totally isolated from HTML. They do not become directly involved in HT ML
programming. The programmer selects items from menus, clicks on them, possibly fills in some text
and positions the items. The on-screen material they see is not the HTML document but rather the
rendered HTML document. In other word, during the development process, the page developer does
not actually see the tags comprising the source code unless they specifically decide to view the code.

(ii). Tag-oriente d HTML Editor: In this model, the page developer selects HTML tags from menus
and has the option to manipulate the code directly. The HTML code is not hidden. For example, a
programmer might select a list tag such as <OL> and then be presented w ith a template like the
follow ing one
<OL>
<LI> <LI>
</OL>

The developer can fill in the list item and then selects to add another list item in which case another
list item tag will appear. There is usually a wide range of HTML tags to choose from. However, the
more complex tags such as frameset and table may not be supported or may be supported in only a
limited fashion.

Even a novice page developer can use WYSIWYG HTML editor. However, to perform at even a
modest level of competency, the user must be computer literate. To be effective on the tag-oriented
model, a person should be computer literate and should understand at least basic HTML.

Editor Compone nts: Not all editors have same components and some of them are:

(i). Color Selection: Some editors provide a built-in color selector. User can either manipulate three
measures that control the amounts of red, green and blue or choose a color from a palette. Then the
color can be applied to HTML document. The HTML code for the body tag w ith the BGCOLOR attribute
will automatically be generated and w ill include the hexadecimal number of the color.

(ii). Docume ntation: Because of their limited nature, early HTML editors were easy to f igure out and
required no documentation. A computer literate can immediately begin using them. HTML editors have
become more complex offering more features, the need for good off-line and on-line documentation
has become necessary.

(iii). HTML Converter: Many editors allow to input a text file and have it converted into an HT ML
document. The conversion is usually done in a quick and dirty unsophisticated manner that needs to
be heavily fine-tuned.

IIMC Prasanth Kumar K

 11
(iv). Hyperlink Inserte r: User can “cut and paste” hyperlink using most HTML editors. Since URLs are
often cumbersome to type making them error prone, this is an important feature.

(v). Spell Chec k: It is always a good idea to run HTML document through spell checker. A built-in
spell checker is featured in many HTML editors. There are separate spell-checking programs that are
often more comprehensive than those included w ith HTML editors. However, since most on-line
dictionaries may not contain HTML tags like SRC.

(vi). Ta g Ge nerator: Most HTML editors allow selecting from a w ide range of tags by clicking on menu
items. Others allow to type tags directly. Once user selects the desired tag, a dialog box is usually
presented, so you can enter the text to be formatted.

(vii). Template Creator: Some editors provide with a variety of predefined HTML templates. They
may have a generic business, personal and resume page. User can customize these templates to meet
the needs.

(viii). Tutorial: A number of editors prov ide an interactive tutorial. This is usually a very good to learn
how to use a complicated HTML editor.

(ix). Vie wer: Not all HTML editors are WYSIWYG. However, most prov ide a v iewer so that user can
see the document which will look like on-line.

11. Explain the F rames concept with an example.

12. Explain different Form controls with a n example.

IIMC Prasanth Kumar K