HTML.co.uk

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.

Scripting is used to make the web pages capable of processing the data in real time. HTML documents support client side scripting. The scripts can be developed in separate files or it can be directly embedded in HTML documents. Scripts are very necessary for a web page. Scripts invoke life into the static HTML pages. With the help of scripts HTML pages get power to process the information supplied by the user in real time and produce output for the same. HTML pages are static in nature. Scripts make them dynamic and intelligent so that they can respond to the user queries. With the help of scripts, the HTML pages can be tailored more precisely to perform special tasks. The web pages can work with different plug-ins to perform better.

By using scripts, HTML can communicate with the QuickTime browser plug-in or with the ActiveX control when displaying QuickTime-compatible content or related components in the web browser. It will let the user to control the attributes of the object being displayed such as image scaling, audio volume, auto play, looping, linking a series of movies, launching media player, opening a specified URL when the user clicks the movie etc. Various types of dynamic objects and elements can be integrated and modified in the HTML documents by writing the appropriate script. The web authors can create compelling and powerful web content once they know how to write an appropriate script. The client-side script is like a program which gets executed on the client’s machine when a web document gets loaded or when a link is activated. One of the major advantages of HTML is that it supports scripts independent of their languages. Thus, the web developer can design the scripts in the language he knows. Via scripting the web authors can extend HTML documents in highly active and interactive ways. Some of the prominent benefits of using scripts in HTML are:

1) Scripts can be run as soon as the web document is loaded to change its contents dynamically.
2) Scripts are used to process the input in the forms provided by the user. Scripts are also used to verify whether the inputs of the form are correct or not. Developers also use the scripts to automatically and dynamically fill out some data in the form according to the inputs provided by the user.
3) Scripts are often linked to the graphical objects on a web page such as buttons, check boxes, option buttons, drop down lists etc. in order to control them and optimally the Graphical User Interface (GUI).
4) To make the web page more interesting and exciting, scripts are written to influence the behavior of the scrolling, mouse cursor movements, marquee and static text and a lot of other elements.

Two types of scripts can be used by the developers. One which are executed only one time when the web page gets loaded. The other type of scripts are those which get executed every time an event occurs such as a mouse click, a scroll etc. As per the requirements, either or them or both types of scripts can be used in order to make the web page full of fun and excitement.

As discussed earlier URLs (Uniform Resource Locators) are the addresses of all the links and resources which are globally hosted on the World Wide Web. A web page address like http://www.yahoo.com is a URL. It shows you the home page of Yahoo. In other words, it redirects you to a new URL. URL is one of the most vital elements of HTML. Without URL we cannot access any website. Every URL on the world wide web is unique and different from other to avoid confusion and clashing between the web pages of different companies. The URL consists of all the necessary information required to find out a particular web page on the internet. In HTML whenever we create a hyperlink, we associate a URL with it so that whenever a person clicks on that link, he can be redirected to the intended web page. The URLs are inserted in the HTML codes with the help of anchor tag. We can either specify an Absolute URL or a Relative URL depending upon the circumstances. Let’s have a look on how these two types of URL differ form each other.

Absolute URLs: Absolute URLs are those URLs which do not depend on any kind of relationship. These URLs directly point towards the directory of a file. It represents the whole path to a filename. Thus, there is no confusion about the location of that file on the server. For example:

http://www.contentmantra.com/design/ urls.php3

is an absolute URL which specifies the whole path to the urls.php3 file which is stored in design directory. The main disadvantage of these URLs is if you move the urls.php3 file to another location, then this URL will not show you that file. Thus, the flexibility to change the structure of the web pages diminishes. Absolute URLs are used when we want to link two files which reside in different root directories.

Relative URLs: These URLs point towards a file or directory in relation to the current file and directory. The relative URLs don’t tell us about the full path to a file name. These URLs simply redirects you to the another web page which is in relation to the previous one. Thus, they are called relative URLs. These types of URLs can be used to link different files which are in the same root directory. In other words these URLs are used with those links of a web page which redirects you to another web page of the same website. If all the files are stored under the same parent directory, then both absolute and relative URLs can be used but conventionally relative URLs are used because they are short and reduce the chances of typographic errors. Apart from this, relative URLs are easy to remember and save time while designing the HTML page.

For example; suppose there is a parent directory in c:\my folders\HTML which contains two files named as Summer.html and Winter.html respectively. Now in order to link these two files we don’t have to give the full path. We can simply write as:

<a href=”winter.html”> go to Winter Page</a>

Instead of:

<a href=” c:\my folders\HTML\winter.html”>got to winter page</a>

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.