HTML.co.uk

In HTML, image maps refer to an image consisting of different parts each pointing towards a different link on the web. These types of maps are used to represent various information related to a particular organization as a whole. The user can see all the options in the form of graphics and then he can select the necessary one to have the details of only the selected portion. Apart from the organizations, Image maps are frequently used by those websites which display maps of different regions. The main advantage of using image maps is that the user gets an easy and interactive way to link to different parts of an image without dividing it.

Example of the HTML code needed for an Image Map:

<MAP NAME=”map1″>
<AREA HREF=”contentmantra.html” ALT=”content mantra” TITLE=”content mantra”>
<AREA HREF=”italics.html” ALT=”italics” TITLE=”italics”>
</MAP>

<IMG SRC=”testmap.gif”
ALT=”map of italics” BORDER=0 WIDTH=300 HEIGHT=300
USEMAP=”#map1″><BR>

[<A HREF=”contentmantra.html” ALT=”contentmantra”>contentmantra</A>]
[<A HREF=”italics.html” ALT=”italics”>italics</A>]

Client side and Server Side Image Maps:

Image maps can be implemented either on client side or on the server side. If it is implemented on the client side, then the determination of the target URLs can be done on the user’s machine. On the contrary, if it is implemented on the server side then the data related to the page location must be passed to the server in order to determine the target URL. The client side image maps are comfortable to access but it cannot offer flexibility in complex decision making like the server side image map do.

Importance of Rollover effects on the Image Maps:

Rollover effects refer to those special effects which occur when the user takes the mouse cursor over the target object. There can be various types of rollover effects which can tell you that the object has been targeted or not. In image maps the most common type of rollover effect is the caption effect. In this kind of effect, whenever the user takes the mouse cursor over a particular part of an image map, a small text is shown which describes that particular part. Thus, the user gains sufficient knowledge about different portions of the map and decides well in advance whether to select a particular area or not. Rollover effects can be embedded with the help of different types of scripts and DHTML coding.

When not to use Image Maps:

No doubt that the image maps are one of the best possible tools to show the information on the web sites, but still there are some situations when one should avoid using them.

• Image maps should not be used if most of the end users are using text based web browsers because these browsers cannot display the graphics.

• Large image maps make the web page very heavy and it takes a long time to get the web site loaded on a slow internet connection.

• If you want to use server side image maps, then make sure that you have a live web server first because these maps cannot be tested without a web server.

OK, you have created the world’s best web site which has got breath taking designs and extraordinary multimedia effects, but the bottom line is you have to publish it on the World Wide Web (WWW, popularly known as the Internet) so that it can been viewed by the public. As soon as your web site gets published online, it is ready to be a victim of the BAD internet. Your files and folders are prone to a large number of internet security threats. The fact is that certain aspects of the web sites cannot be protected. There is no single day till now on which all the web pages on the internet were free from viruses, spams, trojans or hacking attempts. If you are connected to a huge computer network such as internet, you are 100% exposed to malicious activities and thus, ‘Play At Your Own Risk’ is recommended.

Try to be safe up to the maximum possible level:

In order to be safe, the first and foremost thing required is that you should know about the types of internet threats as much as possible. The most dangerous and fatal practices used to destroy HTML files on the web are:

• Data theft in the form of pishing, hacking, spamming, spoofing etc.
• Destruction of HTML files and folders stored on the web server.
• Modification of the contents of the HTML documents.
• Hacking the complete web server.
• Different types of viruses on the network.

Carefully design a protection plan:

Once you have got to know about the possible online threats, the next step is to carefully analyze and design a protection plan for the HTML files residing on the web server. Following are some basic guidelines which can assist you in making a protection plan.

• Carefully separate the most important data from that which is not too much sensitive.
• After that examine and decide the level of protection needed for different types of data i.e. from the important ones to the casual ones.
• Examine the value of your web site on the internet. Analyze the page ranks of your HTML documents. This will let you know about up to what extent your web site can attract the hackers.
• Do consider the time, effort and money which you can spend for implementing, maintaining and upgrading the protection system for your web site in advance and proceed accordingly.
• Carefully choose the best possible company which can offer you the world class internet security services at an affordable cost.

Choose form a number of options to secure your data:

There are numerous of options available in the market which can be effectively combined to make a high-tech security system. The most internet security tools are anti-virus software, firewalls (both hardware and software), anti-pishing, anti-spamming and anti-spoofing systems, password protection, alarms, log maintainers, network intrusion detectors etc.

Today almost every e-commerce website is integrated with a backend database to keep a record of all the transactions and customers. Database is a fast, easy, secure and reliable method of updating the records online. In fact database is an essential tool for the organizations which are involved into news-making, whether forecasts, networking, e-commerce, placement consultancy and many more. All the valuable information and knowledge base is stored in a database. There are different database softwares which are available in the market such as Oracle, Sybase, mSQL, Illustra, Microsoft SQL, FoxPro, Microsoft Access etc. One can choose any one or more than one keeping in mind his business requirements and budget.

In order to ripe the benefits of online databases, the web pages must be integrated with them in a proper manner. To accomplish this task a lot of database tools are available. There are various methods to integrate a database with the World Wide Web (WWW), popularly known as the internet and every database tool differs from the other with respect to its functions, features and capacity. Therefore the type of tool to be used should be carefully selected keeping in mind the type of database used.

Most popular database integration tools are:

1) PHP/FI: It is a CGI (common gateway interface) program which is developed in C programming language and can be used on any UNX system. You can use PHP to integrate mSQL and Postgres95 with your HTML documents.
2) Cold Fusion: It is an application which allows you to write scripts within your HTML code. It is basically a database interface which efficiently processes a script and then returns the information within the HTML text in that script. It works by processing a form created by the web developer and then sends a request to the web server. The server sends all the information entered by the user in the form to Cold Fusion engine and this way the information is processed, updated and stored. Cold Fusion is a very popular database tool.
3) w3-mSQL: It was created so that the mSQL database can be easily accessed via web pages. It works like a CGI script which reads the HTML code, processes all the queries and sends the final o\result to the web server which in turn redirects it to the end user’s web browser.
4) MsqlPerl: It is used to write the scripts in Perl language in order to access the mSQL database.
5) MsqlJava: Using this you can easily create Java Applets to access mSQL database.
6) WDB: It consists of Perl scripts which can be used to access Sybase, Informix and mSQL databases.
7) Web/Genera: This one is used to integrate Sysbase databases with the HTML documents.
MORE (Multimedia Oriented Repository Environment): It refers to those application programs that operate with a web server with an aim to provide access to the relational database systems (RDBMS).

Apart from these there are numerous other database tools which can be used with HTML and DHTML documents such as DBI, DBGateway, MS Visual InterDev etc. All of them come with different price tags and capacities. You can choose the one which matches with your requirements.

HTML images as discussed earlier, plays a very important role in attracting the web traffic towards your web site. Images are those elements of HTML documents, which add life to the web page and increase its worth. Images and other type of graphics can be used in a number of ways for different purposes but there are some important things, which should be considered before using them.

Why to use Graphics?

The first and foremost thing is to determine that why you should include graphics into your web page. Is there actually a need to use them? This is very important because images make the web sites heavy and it takes more time to load the web pages. Secondly, if you use too much of images then the user will get confused and the main subject matter of the document will get lost. Thus it should be well determined in advance that whether an image is required or not.

What type of graphics should be used?

If there is a scope for an image in the web site then a proper analyses regarding its design, color, size and position should be done. The size and the position of the image totally depend upon the type of content of the HTML document. The color, border style and the contrast too must be selected keeping in mind the background of the web site. The image should attract the viewer and it should give a soothing effect. If there is an ugly image with dark colors, then nobody will like to visit the web page.

Some important rules to be followed while using the images:

• Before using an image, check about its copyrights. One cannot use company logos, images, patented graphics etc.
• Never use any kind of offensive or pornographic images.
• Don’t use those images which make web pages heavy to load.
• Choose the right format for your image. If you want to use animation then .GIF is the best format to use otherwise if you want good resolution then go with JPEG/JPG.
• Images should be clear enough to view.

About Image size hints:

Size hints are used to explicitly define the height and width of the image. It has two main advantages:

1) If a user has disabled inline images in his browser the size hints for the image are not given, then instead of the image a small box will appear which will spoils all the formatting of the web page. If you give the size hints, then a blank box of the same size as of image will appear. This will preserve the formatting and appearance of the web page as it is.
2) Image size hints let the browser to display the formatted content/text quickly and download the image side by side. Thus, the user gets the main content even if the full image is not there and does not sits idle.

Size hints can be used by specifying HEIGHT and WIDTH attributes of <IMG> tag. For example:

<HTML>
<IMG SRC=”Content Mantra.jpg” WIDTH=”300” HEIGHT=”250”>
</HTML>

HTML tags are the basic building blocks of a web document. All the elements which make up a HTML page itself are made of a starting tag and an ending tag. Without the tags no web site can be created. In fact all the HTML editors such as Microsoft FrontPage, Adobe Dreamweaver etc. use tags while generating automatic HTML codes for the websites. Tags are the heart and brain of an HTML document.

Tags have all the powers which design, control, maintain and edit a web page. A simple notepad file is transformed into a web page just because of the tags <HTML>…..</HTML>. Tags describe the nature of your document. It affects both the visual appearance as well as the background processing a web page. In order to increase the functionality, most of the tags also have their attributes. Attributes precisely defines the nature, behavior and the appearance of the text enclosed within a particular tag set. Different types of tags have different possible attributes. For eg: the tag <FONT>……</FONT> have some attributes like face, color, size etc, but the tag <B>…</B> does not has any attribute. Attributes are always used with their tags, not alone. However, the tags can be used without its attributes. In order to use the attributes you have to start a tag and within its starting section the attributes can be used.

Every attribute must be provided with a value. Without the values an attribute cannot determine what to do and to which extent. Like the attributes, their values are also used within the tags. They are separated from the attributes by a = sign.

For example:

<FONT Face=”Comic Sans MS” Color=”Red” Size=”10”> Content Mantra is the one best solution for all your writing and editing needs. </FONT>

In the above HTML code <FONT> and </FONT> are the main HTML tags. The Face, Color and Size are its attributes which have Comic Sans MS, Red and 10 as their values respectively. One important thing which is to be noted is that whatever content written inside the tags is only meant to format the HTML document and it is not displayed on the web page as the final output. Only the portion between the start tag end the end tag is viewed by the internet user.

HTML tags are of different types. Some tags are used to format the visual appearance of the content of the web document, some are used to define the behavior of the HTML elements and some are used to control the HTML scripts. The syntax to be followed while using different tags can be the same or different from each other. Some tags have an end portion prefixed by a / while some of the tags don’t require an end. Like the <FONT> tag do have an end i.e. </FONT> but the <BR> tag does not have any end.

The end user interacts with the HTML forms via various kinds of controls such as text boxes, command buttons, option lists, checkboxes etc. Each and every option is intended to execute a specific type of command and generates the relevant output. The functions of every control is different form one another. Web developer can use only few of them or all of them depending upon his needs and keeping in mind the ultimate objective of embedding the form in the web site.

Every control is given a name so that the scripts can easily identify it. There are two types of values of the controls. One is the initial value which indicates the default status of the control at the time the form is loaded and the other one is current value which determines the current status of the control. For example: The initial value of a text box is blank, but when the user will enter his name into it its current value will change. These two values are important as they tell the scripts that whether the form has been modified or not. Every time the user resets the form all the control’s values get changed into their initial state.

Different types of controls used in the form are:

• Command Buttons
• Check Boxes
• Radio Buttons
• Drop Down Menus
• Text Boxes
• File Select
• Hidden Controls
• Object Controls

Command Buttons: Command buttons are used when the user wants to submit the information or he wants to reset the values embedded in the form. There are three types of command buttons i.e. submit button, reset button and push button. The submit button is used when the user wants to submit the details entered into the form. Reset button is pressed when the user wants to set all the values to their default state. Apart from these there can be other types of command buttons also which can be used for specific purposes. Those buttons are called push buttons.

Check Boxes: Check boxes are squared shaped boxes which are used to select one or more than one options simultaneously.

Radio Buttons: Radio buttons are circle shaped buttons which unlike the check boxes allow you to select only one option at a time within a given set of alternatives.

Drop Down Menus: These menus are used as alternative to radio buttons and check boxes. If the list of the options is very long, then using check boxes and radio buttons will take large space and the look of the web site will deteriorate. In order to solve this drop down menus is used in which infinite countless number of options can be accommodated without increasing the size of the menu.

Text Boxes: Text box is used to enter some textual data in the form such as your name. Text box cannot contain various lines of text. It is limited to a certain number of characters. If you want to give the user more space to write then the ‘TEXTAREA’ option can be used.

File Select: This control allows the user to select files so that their contents may be submitted with a form.

Hidden Controls: These kinds of controls are not shown to the end user. It is only in the background to facilitate data exchange between the client and the server.

After creating the most fruitful and advanced HTML documents, the next important task to do is putting them on the World Wide Web so that it can be visible to general public for use. The practice of hosting your web site on the internet is known as web publishing. Publishing your web site is very important because until you do that there is no use of creating the HTML pages. Web publishing or web hosting makes your web site go live on the internet. There are several companies which provide web publishing services. All you have to do is purchase a domain name and also pay an amount for the maintenance and updating of the site to these companies.

Before you can upload your HTML documents on the internet there are three main things which are needed:

1) Space on the web server
2) Procedures for uploading the file
3) Software for uploading the file

Some ISPs (Internet service Providers) may offer you a definite amount of space on the web and charge you for that on monthly basis. In fact you can purchase some megabytes on the web server to upload your HTML documents on that. Another alternative is to contact the companies specializing into web hosting if you want to get gigabytes of space on the web server for your web site. These companies have different types of flexible plans in which you may also get the maintenance and regular up-gradation of the site. You can subscribe to any of the plan according to your budget, needs and aspirations.

If you know about technical nitty gritty of web publishing then you can also set up your own web server but this will require a lot of efforts on your part and demand large amount of finance and time.

Components of web Publishing:

The vital components of web publishing are web browser, web cookies and web server. Web browser is needed to view the web site once published. A web server is required in order to publish your web site. It is responsible for replying to the web browsers and sending them the web pages requested. All the HTML files reside on the web server if published. Finally, the web cookies are also needed in order to surf the internet smoothly. Web cookies allow the web site to store the important information about the user on his computer which can be used in future. Web cookies also track the number of visits to a particular web site.

The most convenient way to publish your web site is to use CuteFTP. In order to use it you must ensure that all the HTML files are saved in a folder. After that you can upload the files form your folder to the folder which you will get on the web. One thing which should be noted is that you must buy a domain name and give your web site a unique URL while uploading it.

While surfing the web we come across different types of data. Some of them are presented in the form of paragraphs while some information is presented in the form of lists. Lists provide the content more visibility, readability and understandability. It also improves the overall look of the web site. In HTML documents different types of lists can be inserted. There are countless number of designs and styles, which can be applied to a list. Broadly speaking, HTML lists can be classified into three main categories. One is ordered lists (also known as numbered lists), second one is unordered lists (also known as bulleted lists) and the last one is glossary lists (also known as definition lists).

Ordered lists are those in which each list item is numbered in either an ascending order or in descending order. The HTML tags which make up the ordered lists are <OL>……</OL>.

Example code of ordered list:

<OL>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</OL>

The <LI> tag is always used within the <OL> tag. It represents the list items which have to be displayed. It’s not necessary that the numbered lists always put numerical in front of the each list item. You can also use alphabets and roman signs to them. In order to add these you can use the ‘TYPE’ attribute with <OL>. You can also start a list directly from any number or any alphabet by using ‘START’ attribute. Below is a comprehensive example explaining how to create different kinds of ordered lists.

HTML Code:

<OL>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”A”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”a” START=”b”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”i”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”I” START=”!!!”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

It is clear that:

1) “1” specifies the standard Arabic numerals to be used in the ordered list.
2) “a” specifies the lowercase alphabets to be used in the ordered list.
3) “A” specifies the uppercase alphabets to be used in the ordered list
4) “i” specifies the lowercase Roman numerals to be used in the ordered list.
5) “I” specifies the uppercase Roman numerals to be used in the ordered list.

So far we have seen that the ordered lists numbers the list items in a flow like 1, 2, 3, 4 etc. or a, b, c….etc. but we can also break the sequence and directly jump to any number or alphabet of our choice. For this purpose we have to use ‘VALUE’ attribute with the <LI> tag. For example:

<OL TYPE=”1” START=”2”>
<LI> Content </LI>
<LI> Resume </LI>
<LI VALUE=”10”> Blogs
<LI> SMO
</OL>