HTML.co.uk

Indenting means controlling white spaces, which is the most common problem with HTML. Almost all the web browsers condense or collapse multiple white spaces in HTML code, which means that a web page whenever will encounter or interpret an HTML, it will display multiple spaces (” “) exactly in a similar fashion as a single space (“ “). And this holds true not only for spaces but also for white space characters such as carriage returns (newlines) and tabs. Therefore, it is not important as to how you indent in HTML but how you reliably indent in HTML.

There are several possible solutions available which can effectively an reliably solve the problem of indenting or controlling white spaces such as non-breaking spacing, blockquotes, images, Netscape spacer tag, tables, preformatted text and bad list structures. The non breaking space is the character identity that most of the browsers honor as a white space and therefore multiple spaces will be treated as is with no condensing or collapsing to a single space. In case of non breaking space you do not require any special HTML structures for achieving the indent.

The non breaking space is very important to hold the table cells open or otherwise they will appear quite strange. Some browsers can still collapse the column to zero or nothing only when there are just the white space characters in the cells or if the table columns have nothing or details stored in them. Non breaking space can also be used to indent images and text but with the limitation of using them only in small amount. Some of the older browsers do not support more than one non breaking space in a row.

The use of PRE tag can be used for indenting spaces, line feeds and carriage returns as it is from the source code. This feature is supported by almost ALL browsers including the text-only browsers. The PRE tag indents not only a single text line but controls indentation for multiple text lines. Deeper indenting of HTML can be achieved using BLACKQUOTEs. Most of the browsers support this kind of indentation. Netscape has specifically created a tag for indentation in the HTML document. This tag is capable o producing vertical only or horizontal only or blocking white space. This tag can easily control the size of spacing at the pixel level and can also be used to create the float space elements.

Definition List structure contains a special DD term which is indented by almost all the browsers including the older ones. Tables can also be used for indentation wherein you can successfully use either the first column of the table or the first row of a cell. By this you can not only control the first line but the entire block and it works at the pixel level. Almost all the browsers support tables as they make all the complex indentations also possible. For controlling complex indentations where extremely high degree of control is required such as negative values etc. cascading style sheets can be used. For controlling the width of the images or for graphical representations, Images can be used. Almost all the graphical browsers support this kind of indentation.

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”>

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.

A not very technical yet fun loving tutorial for HTML!

We know how and why HTML originated in the first place. But we still have no idea what is HTML, what functions it includes and how it works. HTML, as all of you know is a Hypertext Markup Language which has been inspired from another markup language known as the SGML. We normally use this language to create a link between the various documents online and also to design the layout and attributes of a web document. Before going further in this tutorial, we start with the URL which is the uniform resource locator which helps you find the exact document or page. For each document or page there is a unique URL. Now this is not uncommon for the people who are net savvy. You must have definitely used the URL a hundred times. But that is not the point, the main thing you should know is how to navigate from your home page to the other web pages i.e. how it is linked.

<beginning tag> statement< /end tag>

As you can see in the statement above, there is a / before the end tag and you should consider this important. The tags are differentiated as the head tag and the body tag. You also have the HTML tag and the title tag other then the head and body tag. Let us see each tag in some detail and observe how it looks like in a script. HTML tag is to make the program realize where the beginning for the HTML code is. It looks like this. It is not being used by many recently. The Head tag contains special tags like the header of a document. Basically, the body tag gives information about the linking, the documents, the layouts and other such things for your web page.