HTML.co.uk

Since its birth, the World Wide Web has been through various ups and downs, changes, modifications and upgrades but for the first time it happened that the whole ideology of the WWW has been changed. Recently the web has been through an impact full revolution, the revolution known as The Web 2.0.

Web 2.0 is basically an idea to transform the way we use the internet. It is aimed at providing freedom to the user; freedom of speech, freedom of expression and the most noticeable, the freedom to expand his/her social domain. Web 2.0 is targeted to build a society where every internet user can be a journalist, a musician, a painter, animator or anything else. With Web 2.0 you have complete freedom to portray yourself the way you want online. It lets you to give birth to the online communities, social networking web sites, wikis, blogs and much more. You can actually socialize on web and spend a quality time with your friends. The Web 2.0 has the power of the latest cutting edge technology which helps to create never seen before web tools, animations, graphics, photos, audio, video and much more. It gives you the opportunity to enhance the way to communicate with each other and brings all the elements of the world closer to each other.

The way internet users conveys message to each other has been completely changed by the Web 2.0. It has given a highly interactive platform which can be used to transform the web into an online café where people can talk, share and enjoy. Old style internet which consists of boring web pages and which provided limited amount of options to its users is now an obsolete term. The modern web is very young and full of energy, enthusiasm and aspirations.

Web 2.0 does not emphasize on the emergence of the new technologies. Rather it changed the way the web developers make use of different technologies. It has carved out a whole new mould in order to give the internet a new and exciting shape. According to Tim O’Reilly,” Web 2.0 is the business revolution in the computer industry caused by the move to the Internet as platform, and an attempt to understand the rules for success on that new platform.” Although the Web 2.0 is perceived differently by different people and has been defined in more than one way, at its core it implies the new internet equipped with interconnectivity and interactive web content. It allows the internet users to do more than just simply retrieving the information via web sites. It offers them highly interactive web pages, e-business solutions, online shopping and social networking sites offering download and upload of the multimedia content. This means that the users not only publish their data on the web but they also have complete control over it. They can now create their own blogs, threads and web pages within seconds using the user friendly wizards available online. But the game is not over yet, the Web 2.0 still have lots of surprises which the users will explore down the line.

Frame naming and targeting is used when the developer wants to associate the link of one frame with the output of another frame. For example, suppose there are two vertical frames. The left one consists of all the links and whenever the user clicks any one of them then the HTML document associated with that link is displayed on the right hand side frame without opening up a new window or affecting the contents of the left side frame. That means the left side contents remain static and the content of the right side frame changes.

These types of frames are very useful and are used to make web site navigation user friendly and interactive. One thing to be noted is that frame targeting cannot be done without naming the frame. The name is necessary because it becomes the identity of the frame and is used by the other frames.

How to do naming and targeting?

The naming of the frame is done using the NAME attribute and the targeting is done with the help of TARGET attribute. The frames can be targeted in different styles. It can be done on an A (Anchor) element, on a BASE element, on an AREA element and on a FORM element.

Targeting for Anchor (A) element:

The Anchor tag (A) which is used at the time of defining hyperlinks in the HTML document is also used while targeting the frames. It specifies the linked document which is to be displayed after the user clicks on a particular link in the frame. For example:

<HTML>
<frameset rows=45%,10%,45%>
<frame name=”upper”>
<frame name=”middle” source=”doc1.html”>
<frame name=”bottom”>
</frameset>
</HTML>

Now the following HTML code has to be written for the doc1.html document

<HTML>
<UL>
<LI><A target=”upper” HREF=”http;//www.italics.in”> Italics Home Page </A></LI>
<LI><A target=”lower” HREF=”http://www.contentmantra.com”> Content Mantra Home Page </A></LI>
</UL>
</HTML>

Whenever the user will click on the Italics Home Page then the web page will get displayed in the upper frame and if he clicks on the Content Mantra Home Page then the relevant web site will be displayed in the lower frame.

Targeting for a BASE element

In this the TARGET attribute uses a default window_name and target all the links towards the same window.

<BASE target=”window_name”>

Targeting for the AREA element

The AREA element type is defines by the Internet-Draft of Client-Side image maps. It is used with the image maps and defines a particular area on the client side image map. It associates a link with that area containing all the details and when the TARGET element is used then the output of the link can be directed towards a separate window.

<AREA shape=”shape” COORDS=”x,y,z…..” HREF=”URL” target=”window_name”>

Targeting for the FORM element

Without any defined target window the FORM element displays the output of the form submission in the same window used to submit the form. The TARGET attribute can be used to direct this output to another window.

<FORM Action=”URL” target=”window_name”>

Frames are used to divide a window into two or more scrollable sections. In each section different documents can be displayed or various parts of the same document can be linked together. Like any other HTML element each frame can be given a name, its dimensions can be set, its alignment can be defined, the borders and shades can be applied and finally a particular HTML file can be linked with it which is to be displayed. Apart from this some advanced operations such as defining the loading/unloading behavior, scroll behavior, style sheets etc. can be also performed on the frames.

HTML frames use the following attributes to behave in a particular manner and display the desired document:

• Name: It is used to link the frame to any addressable object. When a name is assigned to a frame then it can be targeted by the links in other documents. However it is not mandatory to use this attribute. By default all the windows are unnamed, but if you want to target the contents of the frame then the name attribute are necessary.

• Source: This attribute is used to display the desired HTML page in the frame.

• frameborder: This is used to set or unset the border between the frames. If the value of this attribute is 1 then a border will appear and if the value is 0 then there will be no border.

• marginwidth and marginheight: These two attributes are used to specify the frame margins both sideways and vertically respectively.

• noresize: It is used to restrict the end user from resizing the frame.

• scrolling: This one is used to define the scrolling mode of the frame. If its value is yes, then the frame will have a scroll bar. If the value is no, then the frame will have no scroll bar, and if its value is auto, then the frame will have the scroll bar only if the document size is larger than the frame.

Because of these attributes different types of frames can be created. For example:

• Static Frames: These types of frames are fixed and display only static documents. They are used to display that information which the user can see all the time, such as logos, copyrights, buttons, graphics etc. The user cannot affect the behavior of such frames by doing any activity.

• Live Frames: These frames responds according to the user’s input. They are very interactive in nature and generally contain interactive forms, videos, audio and multimedia content.

• Functional Table of Contents: These types of frames are used to display interactive table of contents on one side and when the user clicks on any topic the document linked to that link is displayed in the adjacent frame.

• Single Page Query and Answer Displays: These types of documents have two sections, one containing the query from which has to filled by the user and the other section displays the answers to the query interactively.

Apart from these, several other types of frames can be designed and customized using different attributes according to the requirements.

As discussed earlier, whenever the TARGET attribute is used to direct the output to a new window then the Window_name has to be specified. Whether the developer is targeting for the AREA element, BASE element or the FORM element, the window_name has to be used. A general rule with respect to the window_name says that it must begin with an alphabet. However there are some predefined special window_names which begins with an underscore sign ‘_’. Below is a list of such special window_names and their associated functions:

• _blank: When used, it directs the output to a new window. This name forces the target attribute to load the HTML document associated with the link in a separate unnamed window.

• _self: Whenever this is used the output is displayed in the same frame the user clicks in. In other words the linked document gets loaded in the same frame as the anchor. One crucial point to be noted is when the _self name is used it overrides the BASE target assigned globally.

• _parent: It can be used whenever the linked document has to be loaded into the immediate FRAMESET parent of the document. If there is no parent, then it works like the _self.

• _top: This will make the linked document to get loaded in a full browser window.

Preparing alternate document for the non-frame web browsers

In order to make the frames work properly it is essential that the web browser supports the frames. Sometimes it happens that the web client is incompatible with the frames or it has been configured not to load them. In that case an alternate document has to be prepared so that if the web browser cannot handle the frames then instead of showing an error it loads the alternate documents containing the information.

The alternate document can be prepared very easily with the help of the BODY element and the NOFRAMES tag which follows the outermost FRAMESET element. The content of the BODY element is ignored by those browsers which can read frames. Apart from this all the attributes of the NOFRAMES tag is also ignored.

Below is the HTML code which shows the usage of the NOFRAMES tag.

<HTML>

<frameset cols=”50%,50%”>
<frameset rows=”50%,50%”>
<frame src=”doc.html” >
<frame src=”doc1.html”>
</frameset>
<frameset>
<frame src=”doc2.html”>
<frame src=”doc3.html”>
<frame src=”doc4.html”>
</frameset>
</frameset>
<body>
<noframes>
This section is for those whose web browser is not compatible with frames. It will be ignored automatically if the web browser is set to read the frames. This is an excellent option to avoid any kind of errors.
</noframes>
</body>
</HTML>

As shown in the above code the NOFRAMES tag can be used at the end of the code with all the description and text which has to be displayed without the frames. Above the NOFRAMES tag, there is the normal HTML coding representing the use of nested frames and will be automatically considered when the web browser can support the frames.

If the internet has proved itself as a source of entertainment, international trade and knowledge, then it has also attracted hackers, spammers and other types of online criminal activities. Everyday a large number of web sites are hacked with the intuition of stealing the private data of companies, stealing credit card information, unethically discovering customer details and similar kinds of illicit activities. It is therefore important to keep the web pages secured 24×7.

To make the web a secure place to work, various tools are being designed everyday. There are different types of firewalls, anti-root kits, anti-virus, anti-spam tools available in the market. One can make judicious use of all of them as per his/her needs and network infrastructure. Besides these tools there are other methodologies also which should be considered while securing the web pages online. For example:

• Disabling the Guest account: Most of the Windows servers have a guest account by default. This account gives the users limited access to the server’s resources but as it does not asks for password anyone can log into the server and try to infiltrate the data somehow.

• Don’t forget to rename the Administrator’s Account: By default the Windows server assigns ‘administrator’ as the user name for the administrator account which has all the powers and access to all the resources. If you don’t rename this account then half the work has been already done for the hacker. Now he has to guess only the password.

• Take your passwords to the heights of complexity and ambiguity: The passwords should always be very, very complex. You can set a strong password policy for your servers to avoid successful password guess by the hacker.

• Disable the unwanted protocols: Not all the protocols running in the background are needed all the time. Thus it is recommended that all the unwanted protocols must be disabled as these protocols open up different communication ports on the network. For example if the Telnet protocol is enabled unnecessary then the hacker may get successful in establishing a remote connection with your server.

• Use SSL: SSL (Secured socket Layer) is a protocol which is developed to promote web security. It allows the use of a large number of encryption methods.

• Use SHTTP: SHTTP is a short for Secure Hyper Text Transfer Protocol. It is an extension of the standard HTTP protocol and is different from the SSL but is used for the same purpose; to deliver secured web pages.

• Use Certificates: Certificates can be used in order to ensure leak proof transactions over the web. It features user authentication. They are digitally signed electronic documents which verify the connection between a server’s encryption scheme and the server’s identification. All the digital signatures, cryptographic functions and trust policies are defined while issuing the certificates and they are issued by the third parties known as Certificate Authorities. In order to get a certificate for a web site one has to get registered with this authority. The digital certificate which is then issued is unique.

Once the web site is complete the next important task is to publish it on the web. As a single web site can contain lots of HTML documents rich in multimedia content, hyperlinks and other real time resources it is quite difficult to manage the whole structure and publish each document on the World Wide Web perfectly. Thus in order to make the web publishing easy different companies has come up with a number of web publishing softwares which offer a large number of options and tools. Below are some of the popular web publishing tools:

Netscape Navigator Gold: It offers a visual editing environment that is same as a web page so that the user can edit and publish his HTML documents without getting confused. Netscape Navigator Gold includes a number of formatting tools, menu designers and text editors. Right from the visual appearance to directory structure management, the Navigator Gold is able to handle everything smoothly.

Backstage Desktop Studio: This one is developed by Macromedia and consists of a complete suite of web publishing tools to assemble and manage end-to-end HTML documents. The Backstage Desktop Studio specializes in Web authoring. It features WYSIWYG (What You See Is What You Get) interface which makes it easy to design the web page. Apart from this the desktop studio offers dynamic options for site management.

Page Mill and Site Mill: Both Page Mill and Site Mill are the excellent tools for web page design and publishing created by Adobe. Most of the features of these two applications are similar in nature and thus one can use any of them in place of each other.

The Site Mill is a perfect choice for managing and editing the HTML documents. It records the whole structure of the web site and checks each hyperlink for its reliability and functionality and the remaining content whether in the form of text or images, and displays all the errors.

The Page Mill can be used in two different modes, i.e. Browse Mode and Edit Mode. The Browse Mode is the default mode of the application and it allows you to view your page in exactly the same manner it will look on the web. In the Edit Mode you can make the necessary changes to your web site. Page Mill supports a variety of operations such as cut, copy, paste, RTF (Rich Text Format) support, image editing, hyperlink management, site map management, image maps management, web site navigation management, style sheets handling, form, frames, tables and much more.

Apart from all these applications there are other tools also which provides awesome options for editing and managing the HTML documents. Some of them are Adobe GoLive, HotDog, HotDog Pro, HoTMetal, HoTMetal Pro etc. All of them are equipped with the WYSIWYG feature. However there are some differences among them with respect to the Operating System needed, supported file extensions, processing speed etc. One can make use of any one or more depending upon his/her needs.

Once the web pages has been designed it is very important that they are verified and tested completely before going live on the World Wide Web. Verification here means to check the HTML documents for a large number of errors and testing refer to the checking the reliability, functionality and compatibility of the web pages. During verification the HTML documents are generally examined with respect to their layout, typographic errors, grammatical mistakes and so on. In testing phase all the scripts, functions, applets, embedded tools, CSS (Cascading Style Sheets), DHTML effects etc. are checked.

If you are dealing with a complex web site containing a large number of HTML documents then verifying and testing each and every resource manually can be cumbersome. Therefore, in order to ensure high level of accuracy and to save time a large number of sophisticated computer programs can be used. Below are some popular verification services which can be used to test the web pages:

• Doctor HTML: This is a verification service which is used to analyze the contents of a web page in detail. It can be used for checking different aspects of the HTML documents such as spelling, images, the structure of the document, tables, hyperlinks, forms and much more. It should be noted that Doctor HTML is not a software which can be downloaded and installed in the computer, rather it is a web service (a Common Gateway Interface, CGI script) for which one has to subscribe in order to get his/her web site verified.

• Weblint: Just like Doctor HTML, Weblint is also a web based service which is used to test and verify the HTML documents. It can be used to check the basic structure of the website, to check for the unknown elements and attributes, tag context, overlapped tags, illegally nested tags, images, hyperlinks, obsolete tags etc.

• WebTechs: It is also a web based service which can be used to check whether a particular HTML document or web site conforms to the predefined standards or not.

• Some of the other web site verification services are Slovenian HTMLchek, U.S.M.A (United States Military Academy’s verification service), Harbinger and URL-Minder.

In case you have to verify a small number of HTML documents then it is recommended that apart from using the online verification services you check the web pages yourself also so that the chances of mistakes are minimized. While performing a manual check makes sure that there are no spelling errors, grammatical errors and formatting errors. The navigation structure of the web site should be checked for consistency, all the DHTML effects should be tested in order to see if they are working in the way they were supposed to and the tables should be checked for their alignment. Besides this, all the images, hyperlinks, background scripts and forms should also be checked thoroughly.

Site verification and testing is a continuous and dynamic process. As the web standards change from time to time the web sites are also updated frequently and retested according to the new standards and procedures.

One of the most basic elements of the HTML document is the frame. A frame is basically a device which allows you to open two or more pages in the same window. Mostly the frame concept is used in cases where you wish to split the window. As is the case with many websites, the left hand side is like a navigation strip, a separate page which is a tabulated list of the topics with the relevant links, while the right hand side shows the content related to those topics.

Reading this you might be misled into believing that there are two pages in the window but there are in fact three pages. One tends to forget there is one page which is holding both the pages. This page is called the ‘container’ page, which contains both the pages. All we need to do is open this page and both the other pages automatically open in this page. The format of this page is similar to any other pages.

The HTML frames concept is generally regarded as quite complicated and very hard for new users to grasp. There is an on-going debate among the champions and critics of frames. The critics feel that frames are associated with a few problems, which is why they wish new users to avoid them.

One popular opinion is that they interfere with the basic concept of the web. The web is ideally supposed to be a group of pages, each page with a separate URL and these pages are simply interlinked. On the other hand, frames allow number of pages to have the same URL and when one bookmarks any of these pages, they end up with the URL of the container page.

A second problem with the frameset pages is that they are not browser friendly. Although not a problem now but a bunch of earlier browsers could not access the framed pages. Even now, when such pages are opened on devices other than computers, like palmtops or phones, they do not allow the browser to resize them which makes page viewing cumbersome. Similar to the resizing issue is the printing problem. Browsers find it hard to print such pages and the prints are never satisfactory. There is also the general overall feel that such pages are hard to code especially be novice coders.

Arguably the biggest problem with frames is that they are not search engine friendly. Even search engines like Google do not go through the content of the internal pages and only read the content of the container page.

The champions of frames on the other hand feel the benefits they create are worth a few hassles and they mostly cite the example of inline frames. Inline frames are special frames which circumvent most of the aforementioned problems. Inline frames are also called floating frames. The basic difference between these and the conventional frames is that these pages open in your container page like images or tables would. The coding for these is also quite easy and they present no obvious problems.