HTML.co.uk

When you are starting new designs, it is of no matter which design methodology you use but you have to start with a blank page. Initially your WebPages will be having nothing, so you have to put something into that.

If you want to make your WebPages have good designs, you shouldn’t allow the placements and positions to occur randomly and to have to think of things like

What is an element?
How these elements are related to page goals?
Where do the elements fit with other elements in your page?

What is the element that you are going to place?
In a Webpage, there are several common elements such as navigation, headlines, textual content, images and administration. You should know what type of element that you are going to place because it is important to place it at the correct position.

How do these elements relate to your page goals?
If you know your goals and your page’s goals, these goals will be the key for placements. If your goal is to make people click and want to take notice of them, you have to place your elements at the place where people often look at.

Where should be the other elements be placed?
It is the most important part of your design. If you have your logo on the upper side of your page and if you don’t have content, it will not have any meaning. So, you should also think of placing your content at the right positions.

The place where you place your elements will make you feel the difference
As the people in real estate say that location, location is the important factor. Instead of keeping the paintings of Michelangelo in museum, if it is put in your garage does it have any value? So you have to place your elements in an effective place and if you place your element in an effective place it provides structure and visual hierarchy to your Webpage. Your work will be half done if you have engaged your customer via compelling and interesting design.

Place your elements in the center of your Webpage
One of the simple design techniques is to place their elements at the center of the Webpage. This technique is used by new designers as their goal. Placing in the center appeals to most of the people because it is very simple.
Centering might appear boring and on the screen it might look flat but it is rarely done. Centering is done because it catches the people’s eye immediately.

In your Webpage find the point of interest.
The focal point of design is the place of interest and this is the place where you eyes are drawn. If you change the spacing styles in those places, you will come to know how the items are viewed in your page.
If you make certain small changes to the positions where your elements are going to be placed like putting up of margins around your images, then your resulting image layout will be more visually appealing.

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>

Glossary lists are those lists which are used to represent main terms along with their definition in HTML documents. These kinds of lists are used to make glossaries also. Glossary lists (also known as Definition lists) are different from the ordered lists as well as unordered ones in a way that it formats the content in a special way so that it looks like a list of items along with their description.

Glossary Lists have two main parts:

1) The Term
2) The Term’s Definition

The term is the main entry and the term definition is the description of that entry. In order to make a glossary list the <DL>…….</DL> tags are used and to insert the term and term definition <DT>…</DT> and <DD>…..</DD> tags are used.

Sample Code for creating Glossary lists:

<DL>

<DT> Natural Language Search Engines </DT>

<DD> These search engines allow the users to submit search phrases in natural languages such as English, Hindi, Japanese, Chinese, French and German etc. </DD>

<DT> Subject Directories Search Engines </DT>

<DD> These search engines present the results of searches in hierarchical subject categories instead of listing them in any order by how relevant the search engine thinks the site is to the search. </DD>

<DT> Subject Guide Search Engines </DT>

<DD> These search engines contain links of many important resources on a topic. They differ from subject directories search engines in the same sense that their search request interface has forms that contain databases of sites on many subjects, organized into a subject classification scheme. </DD>

<DT> Meta Search Engines </DT>

<DD> These search engines do not create their own databases but make use of the databases of other search engines. They quickly process the user’s search request by invoking several individual search engines at once and return the results complied into a convenient format. </DD>

</DL>

The output of the above code is as follows:

Natural Language Search Engines
These search engines allow the users to submit search phrases in natural languages such as English, Hindi, Japanese, Chinese, French, and German etc.

Subject Directories Search Engines
These search engines present the results of searches in hierarchical subject categories instead of listing them in any order by how relevant the search engine thinks the site is to the search.

Subject Guide Search Engines
These search engines contain links of many important resources on a topic. They differ from subject directories search engines in the same sense that their search request interface has forms that contain databases of sites on many subjects, organized into a subject classification scheme.

Meta Search Engines
These search engines do not create their own databases but make use of the databases of other search engines. They quickly process the user’s search request by invoking several individual search engines at once and return the results complied into a convenient format.

We can also use the ‘COMPACT’ attribute of

tag in case the definition terms are very short. List nesting can also be done in glossary lists with the help of ordered and bulleted lists within it.

Both the checkboxes and radio buttons are generally used when we create forms in HTML documents. Checkboxes are small sized squares and the radio buttons (which are also known as option buttons) are small sized circles. The main difference between the checkbox and the radio buttons is that the former is used to select one or multiple options simultaneously while the latter is used to select only one option at a time from a given set of alternatives.

Inserting the check boxes:

In HTML documents, the checkboxes can be inserted with the help of <input /> with appropriate attributes. For example:

<INPUT TYPE=”checkbox” NAME=”food” VALUE=”potato”> Potato
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”tomato”> Tomato
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”carrot”> Carrot
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”soup”> Soup
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”sweets”> Sweets
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”salty”> Salty

The user can choose any one of the above choices or it can select more than one. The TYPE=”checkbox” tells HTML that there should be a checkbox. The NAME and VALUE attribute is used at the time of scripting. Name also indicated that these options are of same category i.e food. All the options of the same category should have the same NAME.

Inserting the radio buttons:

For the radio buttons also we have to mention the type with the input tag. For example:

<INPUT TYPE=”radio” NAME=”clothes” Value=”western”> Western
<INPUT TYPE=”radio” NAME=”clothes” Value=”Indian”> Indian
<INPUT TYPE=”radio” NAME=”clothes” Value=”fusion”> Fusion

The user can select any one of the above option. Note that in the HTML code the NAME of all the options are same i.e. clothes. This tells the HTML that these options are under the same category and only one of them can be selected at a time. If the name is differs, then HTML will consider each of the options under different categories and the user will be able to select all of them. Thus, the naming should be carefully done. Each option under the same category must have a same name and two different categories should not have the same name.

The SELECT Tag:

So far we have seen that how the checkboxes and radio buttons can be used to provide the user with an array of different options to choose from, but the main disadvantage of checkboxes and radio buttons is that both of them occupies a screen space as per the number of options. Imagine if there are hundred options then how much space the checkboxes or radio buttons will take? It will ruin the look of the web page. In order to solve this issue there is one more option which we can use and i.e SELECT tag. It inserts a drop down menu in the web page which can contain infinite number of options without affecting its size.

HTML code for using SELECT Tag:

<SELECT NAME=”drink”>
<OPTION> Coke
<OPTION> Pepsi
<OPTION> Mirinda
<OPTION> Sprite
</SELECT>

The <OPTION> tag is always used with the SELECT in order to list the options in the drop down menu. There is no need to close this tag with a / sign.

As discussed earlier, Hyperlinks are those elements of HTML which makes it possible for us to navigate through different web pages or to different locations within a single web page. They are also used for adding e-mail support in the HTML document. In fact, hyperlinks act as the backbone of a website. As these links are used to fulfill different types of needs and demands, the way they are defined in the HTML document varies according to the circumstances. Every hyperlink needs an address to the location where the hyperlink is intended to redirect us. Technically speaking, each hyperlink needs a URL in order to point towards another location. External hyperlinks points towards a webpage of a different website on the same web server, whereas internal hyperlinks point towards a location on the same web page or to a different webpage of the same website. He structure can be more complex if a hyperlink is intended to point towards a web page of different website on the different web server. In each of the cases the way a URL is defined differs. It is very important to understand and learn the different ways to write the URLs because each type of URL changes the meaning of the hyperlink. The syntax of the URLs decided whether a hyperlink is internal, external or it is an e-mail link. Below are some examples of most common ways to write the URLs, each changing the intended meaning of the hyperlink.

1) <A NAME=”bottom”>Bottom</A>

<A HREF=”#bottom”>Go to bottom</A>

This is an internal hyperlink which is redirecting the user at the bottom of the same web page which he is currently viewing. To make this hyperlink an internal one, note the way the URL is written after the HREF attribute of anchor tag. There is no file name or path to a file name before the # sign. This makes the hyperlink an internal one.

2) <A HREF=”welcome.html#hi”>

This is an example of a hyperlink which redirects to a different document of the same folder. This means that both the linked documents are contained under the same parent folder.

3) <A HREF=”hello/welcome.html#hi”>

This is a hyperlink which points towards a different document residing in a different folder. But, in this case both the folders whose web documents are linked with each other are on the same web server.

4) <A HREF=”http://www.yahoo.com/good/hello/welcome.html#hi”>

The above example represents a hyperlink which is pointing towards a different web document which resides in a different folder on a different web server. This makes the hyperlink completely an external one.

5) <A HREF=”mailto://queries@content mantra.com”>

This type of URL consisting of ‘mailto:’ protocol indicated that the hyperlink is linked to a mail server.

So, the way URLs are used, changes the purpose and functioning of the hyperlinks. In fact, how much information you should include in the URL of a hyperlink depends upon where the hyperlink is redirecting the user i.e. where the linked resource is is located.

Hyperlinks play an important role in HTML. We always need to jump from one web page to another several times while surfing the internet. Hyperlinks make this task practically feasible. They redirect us to another location on World Wide Web once clicked. All the textual links on a web page which we click to go to another web page are hyperlinks. The most common attribute of hyperlinks is that when we roll over our mouse cursor on them, the cursor transforms into a hand with a pointing finger towards the hyperlink. Hyperlinks are also known as anchors. They mark textual data and images as a point which, when clicked, redirects to another web page, text or image. There are two types of hyperlinks in HTML:

1) External Hyperlinks
2) Internal Hyperlinks

External hyperlinks are those which points to another web page. On the other hand, internal hyperlinks are those which points to a different location on the same web page. Both the links are created by using <A> (anchor) tag. We can create the hyperlinks with the help of three attributes:

a) <A>, the anchor tag
b) HREF=””, which is used with the <A> tag
c) URL, which is used with HREF to tell the link where to redirect the user.

For example: to create an external hyperlink we can write the HTML code as:

<A HREF=”http://www.yahoo.com”>Go To Yahoo</A>

According to the above example, if you click on ‘Go To Yahoo’ text, you will be redirected to http://www.yahoo.com URL which is mentioned with HREF attribute.

Sometimes, we also need to jump to a specific location on the same web page instead of going to another web page. In these circumstances, internal hyperlinks are used. To create internal hyperlinks we have to decide the location and its name. Then, the name of that location will be used to jump to that location. When a particular location is identified, then to assign a name to it the ‘name’ attribute is used with the <A> tag. For example:

<A NAME=”bottom”>BOTTOM</A>

<A HREF=”#bottom”>go to the bottom </A>

In the above code, first of all we have assigned a name to the text BOTTOM as bottom with the help of NAME attribute. This text is written at the bottom of the web page. Then, in the next code we have specified that name after the HREF which will take us to the bottom of the page. One more thing which is to be noted here is that there is no filename before the # sign. This indicates that the link is pointing towards a location on the same web page.

Apart from external and internal hyperlinks, we can also insert e-mail links in the HTML documents. For this purpose, ‘mailto:’ protocol is used instead of http. For example:

<A HREF=”mailto://query@contentmantra.com”>Post your Queries</A>

According to the above example, if somebody clicks on the Post your Queries text, then the query will be submitted to query@contentmantra.com. For this purpose, after clicking on the link Microsoft outlook will get opened by default if it is installed on the system.

Images are an important part of web pages nowadays. There is hardly a website which does not contain at least one image. Images describe the idea and the concept in an easy way and more beautifully. They are used to enhance the user interactivity with the web page. Good images arrest the attention of the user and boost his interest in the website. Images can be used to say something, to make the website creative, to attract the user etc. One of the important ways the images can be used in a website is in the form of hyperlinks. Images can be linked to hyperlinks, they are used as hyperlinks and they can be used as the download links so that the user can download them via internet. When we use an image as a hyperlink, it redirects us to a new location, or a new web page or to another image. To use an image as hyperlink, first of all we have to insert an image in our HTML document by using the <img alt=”" /> tag. We can set the border, height, width and other attributes of the image as required. Once the image code is written, just add <a> tag before it and at the end of the code put </a>. This will transform the image into the hyperlink. For example:

<A HREF=”URL”><IMG SRC=”d:\my folder\image1.jpg” WIDTH=”300” HEIGHT=”100” BORDER=”10” ALT=”This is the main page”></A>

The URL specified after the HREF attribute will tell the hyperlinked image where to redirect the user when he clicks on it. This URL can be a path to a .html document or it can be the name of an image file also.

For example:

<A HREF=”image2.html”><IMG SRC=”image1.html”></A>

Or

<A HREF=”http://www.yahoo.com”><IMG SRC=”image2.html”></A>

We can also make a hyperlink to point to an image. It means that when the user will click on the hyperlink it will be shown the image associated with that hyperlink. The code for this can be written as:

<a href=”http://www.contentmantra.com/image1.jpg”>Click here to display image</a>

Whenever the user will click on the ‘Click here to display image’ text, he will be shown image1.jpg located at http://www.contentmantra.com. After the image is displayed, you can right click and save it to your computer’s local hard drive. You can also use the target attribute of anchor tag to tell the web browser where to open the new image. The most commonly used predefined values of target are _blank, _self, _parent, and _top. Each of them will open up the image or the document associated with the hyperlink at different locations. The details of all the four values are as follows:

1) _blank: This will open the linked image/document in a new browser window with no name.
2) _self: This will replace the current html page to show the linked image/document. If the original document which has hyperlink on it is in a frame or frameset, then the _self will open up the linked image/document within that frame.
3) _parent: It will replace the html page it came from.
4) _top: This will load the linked image/document in the current browser by replacing anything within the browser.

The use of the targets is not mandatory. They are optional attributes which may or may not be used with <A> tag.

Elements are the building blocks of any HTML page. Without elements no HTML page can be designed. Paragraphs, hyperlinks, sounds, images, embedded media, lists, font, headings and many others are the elements of HTML which help us to define the structure and appearance of the actual content to be displayed on the web page. All the elements can be classified either as Block level elements or as Inline elements/Text level elements/Phrase elements. In this article we will turn our heads towards the nitty-gritty of Inline Elements.

Inline elements are of two types: Presentational elements and Structural elements. The presentational tags define the actual appearance and design of the text. These tags describe how the text will look in the browser. On the other hand, structural tags are meant to define the structural markup of the text. Below are the some examples of both the Presentational as well as structural elements.

Presentational Elements:

1) <i>…</i> It displays the text in italics.

2) <b>…</b> It displays the text in bold

3) <u>…</u> It underlines the text

Structural Elements:

1) <em>…</em> Tells the browser to emphasize the selected text

2) <strong>…</strong> Tells the browser to strongly emphasize the selected text

3) <code>…</code> Tells the browser that the selected text is a computer code

Structural elements basically define the text functions on the web page rather than representing the appearance of the text. The way in which text will be displayed is up to the web browser. Thus, the structural elements are platform independent. This is in contrast to the Presentational elements as they actually influence the appearance and visual style of the text.

Inline elements are meant to format small chunks of data/text. All the inline elements are nested within the block elements. Below is a list of some of the frequently used inline elements:

1. a – Anchor, used to create a link to another page in HTML.
2. abbr - Represents an abbreviation.
3. acronym - Denotes an acronym.
4. b – Makes the text bold
5. br – Break, it is similar to a carriage return
6. code - Denotes computer program code.
7. dfn - Denotes a definition.
8. font – Used with various attributes to change font color, size, face etc.
9. i – Change the text into italics
10. img - Allows placement of a graphical image in the page.
11. input - Form input
12. kbd - Denotes information typed from the keyboard.
13. param - Used to add additional parameters to the object.
14. q - Used for short quotations
15. s - Strike through text
16. samp - Denotes a sample.
17. span - Used to set special style to specific areas of the page.
18. strike - Sets text to have a line struck through it.
19. strong - Denotes strong emphasis which is basically bold
20. sub - Subscript
21. sup - Superscript
22. textarea - A form for multi line text input.
23. tt - Sets text style to monospaced teletype
24. u – Underlines the text
25. var - Denotes a variable in a program.