HTML Layout

A Web Page Layout is likey to be the layout of the pages in a newspaper. HTML columns are used to present the contents of a web page. HTML columns are created by using tables to design the layout.

This can be done simply by dividing a HTML page into columns using tables without borders. We can also use background colours and some amount of cellspacing and cellpadding to the contents for a better representation of the page layout.

Following is an example -

<table width="100%" border="0" cellspacing="1" cellpadding="10">

<tr>
<td colspan="2" bgcolor="#EAF0FF">HTML Layout of Web Pages</td>
</tr>

<tr>
<td bgcolor="#EAF0FF" width="40%">
<p>A Web Page Layout is likey to be the layout of the pages in a 
newspaper.</p>
<p>HTML columns are used to present the contents of a web page. 
HTML columns are created by using tables to design the layout.</p>
</td>

<td bgcolor="#EAF0FF" width="60%">
<p>This can be done simply by dividing a HTML page into columns
using tables without borders.</p> 
<p>We can also use background colours and some amount of cellspacing
 and 
cellpadding to the contents for a better representation 
of the page layout.</p>
</td>

</tr>
</table>

In the browser, the layout of the web page will be like -

HTML Fonts

In HTML, the <Font> tag is used to specify the Size, Color and Type of fonts used for text display. As for example,

<p>
<font  size="3" face="verdana" color="red">
Font type for the text of this paragraph is "Verdana".<br/>
The colour of the font is "Red" and its size is "3".
</font>
</p> 

<p>
<font  size="3" face="courier" color="blue">
Font type for the text of this paragraph is "Courier" with 
size "3".<br/>
The colour of the font is "Blue".
</font>
</p>

<p>
<font  size="5" face="courier" color="green">
Font type for the text of this paragraph is "Courier" with
 size "5".<br/>
The colour of the font is "Green".
</font>
</p>

In the browser, it looks like -

However, in the recent versions of HTML, the use of the <Font> tag is deprecated. Instead of it, the use of style sheets (CSS) has been recommended by W3C. We will discuss about style sheets later in this tutorial.

HTML 4.0 Why

When HTML was invented, the markup tags were not used for formatting of the documents. They were only used to define the HTML elements. As for example, <p> tag to define a Paragraph, <h1> tag to define a heading etc. But later some tags are introduced to format HTML documents like <u> tag to make a text bold, the <Font> tag to modify the font type of texts, their size or colour etc. It produced great difficulty for the web developers of many large web sites as a large web site is incorporated with a great amount of font and colour information, almost in each and every page. Such formatting of the documents had to be done for each page and it became a tideous, lengthy and expensive and unfashionable process.

To overcome this problem, in the later versions of HTML (HTML 4.01), the Cascading Style Sheets (CSS) have been implemented. Style sheets have seperated the presentation task from the documantation making development of web pages easier. Now, presentation style of the documents can be defined in a seperate external style sheet and the same style sheet can be used for several web pages simalteaneously and two or more style sheets can be used interchangeably for a single web page whenever needed.

In HTML 4.01, the W3C has deprecated the use of some formatting tags like the <u> tag, the <Font> etc., and the use of Style Sheets has been recommended strictly.

HTML Head

The Head element in HTML is important because it contains meta-information (meta: information-about) of a certain document. In general, the information contained in the Head element is not displayed in the browser. You have learned in the beginning of this tutorial that the Title of a HTML document is contained in the Head and displayed in the Header of the browser.

The standard tags that are allowed inside the Head element are <title>, <meta>, <base>, <style>, <link> and <script>. Use of other tags like a <p> tag or a <h1> is not recommended in the Head but some browsers allow this and display the contents of such tags in the body of the document.

We describe briefly the use of the standard tags of the Head element as follows -

Title:

To give a title to a document, we use the <title> tag inside the Head of the document. For example,

<html>

<head>
   <title>My Home Page</title>
</head>

</html>

The Title will be shown in the Head of the web page when it is opened in a browser.

Meta:

It contains the keywords for search engines based on which a search engine searches for relative information.

<html>

<head>
 <meta name="keywords" content="HTML, XML, XHTML, CSS, JavaScript"/>
</head>

</html>

You will learn about the Meta element later in this session.

Base:

This is used to define a base URL for all the links contained in a document. For example -

<html>

<head><base target="_blank"/></head>

</html>

This will open all the linked web pages specified in the document in a new window (target="_blank").

Let us consider another example -

<html>

<head>
   <base href="http://www.roseindia.net/html/tutorials/image1.jpg/"/>
</head>

</html>

Suppose we are inserting an image in the above page and the relative url of the image is given as <img src="image1.jpg">, then the browser will search for the image in the url specified in the "href" attribute of the "base" element.

Style:

The Style tag is used in the Head element to define the formatting style of the document. For example, 0

<html>

<head>
   <style type="text/css">h3 {color: red}; p {color: green}</style>
</head>

</html>

In the browser, it looks like -

The text of h3 heading becomes red and that of the paragraph green as specified in style in the head. We will describe you about styles in details later in this tutorial. 1

Link:

The Link element of Head of HTML document defines a relationship of the current document with another linked document. For example,

<html>

<head>
   <link rel="stylesheet" type="text/css" href="link.css"/>
</head>

</html>

The "href" refers to a stylesheet document "link.css".

Script:

The <Script> tag is used in the Head to add a script (e.g., javascript) to HTML which makes a web page more dynamic. For example, 2

<html>

<head>
   <script type="text/javascript"/>
         function_name ()
           {
             Action
           }
   </script>
</head>

</html>

Here, the use of javascript is defined. We will describe about javascript in details later in this tutorial.

HTML Meta

The Meta element in HTML is used in the Head of a document. It contains meta-information about the document. For example, the meta element may contain a description of the contents of the document that is relevant to search engines or web browsers. For example,

<head>
   <meta name="description" content="HTML Tutorials"/>
</head>

The basic attributes of the meta element are described in the following table - 3

Search engines generally use the "name" and the "content" attributes in indexing of the web pages. For example,

<head>
   <meta name="keywords" content="JSP Tutorials, EJB Tutorials, 
    Spring Framework Tutorials"/>
</head>

Search engines will use the keywords for making an index of RoseIndia documents for relative search on WWW for the contents containing JSP Tutorials, EJB Tutorials, Spring Framework Tutorials etc.

In case the url of a web site has been changed and an user is searching it for the old url, then the automatic redirection of the page can be done by using http-equiv attribute. Let us consider the following example - 4

<head>
   <meta http-equiv="Refresh" content="15; 
                 url=http://www.roseindia/net"/>
</head>

It will redirect a user to the new RoseIndia website in 15 seconds as specified in the content attribute.

HTML URLs

When we have to visit a web page over internet, we use Uniform Resource Locator (URL)s. It contains the complete address of the web page we are searching for. Again, in a web page we can find links to go to other related web pages through hyperlinks. In HTML, these links are created specifying the URL of the page to be linked to; using the href attribute.

The syntax for an URL can be written as follows: 5

scheme://host.domain:port/path/filename.

The scheme name is generally HTTP or FTP. It depends on the type of service the user wants to access. HTTP is the mostly used scheme.

Host is the internet hostname of the machine where the server runs that contains the resource the user is looking for, e.g., WWW. 6

Domain indicates the domain name, e.g., roseindia.net.

Port is optional, the default port is the one which is used for the scheme. It is 80 for HTTP.

Path refers to the directory path of a resource. If it is absent, then the resource is searched in the root directory. 7

Filename is the name of the resource document. It may be a .html or a .asp file.

An example of an URL is http://www.roseindia.net/html/introduction-html.shtml which will return a page named introduction-html.shtml from the RoseIndia website.

Fragment URls and Relative URLs:

A fragment URL is one which refers to a location within a resource document, i.e., to the anchors (links) within the resource. A fragmant URL is defined by a # sign followed by an identifier. For example, 8

http://www.roseindia.net/html/introduction-html.shtml#session_4.

A relative URL is the part of the complete URL for a resource. It does not contain any scheme or host data. A relative URL refers to a HTML document in the directory where the current resource exists. Fragment URLs are relative URls. The complete URL from a relative URL can be derived by adding it to the base URL defined generally in the meta element of the Head. For example,

...introduction-html.shtml may be a relative URL which can be found in the directory "html" in http://www.roseindia.net thus resoving the complete URL as http://www.roseindia.net/html/introduction-html.shtml. Again, if the base URl is defined in the meta element as http://www.roseindia.net/html and the relative URL is given as introduction-html.shtml, then also the complete URL will be http://www.roseindia.net/html/introduction-html.shtml. 9

Mailto URLs:

A Mailto URL is one which sends e-mails to a definite e-mail address contained in the URL. The syntax for such an URL can be written as: mailto:email-address.

For example, <a href="mailto:[email protected]">Send e-mail to Arnold</a> will create a link as Send e-mail to Arnold clicking on which will open an e-mail program with the address [email protected] in the "To:" field.