HTML.co.uk

Just like Microsoft FrontPage, Dreamweaver is also a WYSIWYG (what you see is what you get) web development software. It was originally created by Macromedia, but later on in the year 2005 it was owned by Adobe systems. Thus Dreamweaver is now known as Adobe Dreamweaver. This application is used for developing high quality web pages without getting involved in HTML coding. All the designing can be done in the design mode easily.

If we look at the sole objective, there is no difference between FrontPage and Dreamweaver. Both of them offer excellent tools to create exciting web sites. But still, some people prefer Dreamweaver as they find it more interesting, easy and rich in functions than FrontPage. Dreamweaver allows viewing websites in many popular browsers. It has got a variety of tools and functions which can be used to add multimedia in the web pages. For example tools like flash tool, real player tool, windows media player tool and quick time tool can be used to embed and watch movies in different formats on the web sites.

One unique feature of Dreamweaver is that you can configure it to write the HTML code in the way you want. For example; if you want that all the tags should be in bold, then you can configure the Dreamweaver to generate the code in that way. Dreamweaver also supports syntax highlighting for the codes. It makes it easy to use java scripting and DHTML to control the behavior of different objects. There is a library which makes it comfortable to use and modify an HTML element which has been repeatedly used in different web pages of a web site. For example; suppose you need to use and design a navigation table on every page of your web site. In that case instead of putting the formatting the table on every page, you can define it in the Dreamweaver library. Once added in the library, you need to put the table and design it on any one page of the web site and it will automatically get added and updated on the rest of the web pages.

Apart from this, Dreamweaver supports a lot of other useful functions such as CSS, templates, forms, tables, automatically updatable hyperlinks, interactive frames, rollover images and much more. Adobe Dreamweaver can be used on both Macintosh and Windows operating systems. The recent version of the application has been improved to support CSS, java scripts, ASP.NET, ColdFusion, java server pages and PHP. Overall, Dreamweaver is fully power packed with captivating features. This program is used worldwide and is a real head turner. It is a mighty competitor of FrontPage.

The whole look and design of Dreamweaver is better than any other HTML editor. FrontPage 2003 supports Dreamweaver compatible web templates. You can use both of them creatively to make stunning web pages. Dreamweaver has been improved to work hand in hand with Microsoft Word and Excel. The latest version of Adobe Dreamweaver, Dreamweaver CS3 is fully loaded with high end features such as fireworks, spry effects, browser compatibility check, CSS management and lots more. No doubt, Dreamweaver is all time favorite of most of the web designers and HTML professionals.

An applet is a small piece of software code, which runs in the web browser. It is developed to perform a very specific function. An applet cannot run independently; it proves to be useful only when it is used with some other applications such as HTML, DHTML etc. Applets are written in Java language and they can be embedded within the HTML page. To execute the applet web browsers use a virtual engine known as Java Virtual Machine (JVM). Applets should not be confused with general programs written in different programming languages.

They are different from the programs. The major difference between the two is that unlike the applets, the programs can run independently. An applet is written in a different language. It is used with the HTML documents and other programs but is not written in HTML or any other language. HTML only provides static web pages and with the help of scripting it can be enhanced a little more. But this does not result in the state of the art web sites, which we see today. The web pages have changed a lot since their evolution. Everyday the Internet users are expecting the websites to give them more interactive features and options. The use of websites is now far more than just e-mailing and reading information on them. A lot of multimedia components such as streaming video, audio, dynamic pages, sounds, slideshows, smileys etc are used to make the web pages more useful and captivating. These multimedia components are invoked with the help of applets. For example, java applets, flash movies, fireworks, shockwave, windows media player applets etc. are used to embed a variety of real time animations and videos that are rich in colors and sound effects in the web pages. Applets are helping professionals in different fields. Applets can be used for creating 3D simulations of an object. They make it possible to give a 360o view to the end users which helps them to understand the product features more efficiently by rotating and zooming in or out. Not only the programs, but most of the online games are also using applets to increase its performance.

Some more advantages of the applets are:

• As the applets run independent of the platform, thy can be used on different operating systems such as Windows, Unix, Linux and Mac OS.
• Applets are supported by a number of different web browsers like Microsoft Internet Explorer, Apple Safari, Mozilla Firefox and Netscape Navigator etc.
• Applets shift the work load from server to the client. Thus they are helpful in increasing the performance and scalability of the web servers.

Applets have changed the whole look and end user’s perception about the Internet. They have become inseparable elements of web surfing now a days. The only major issue with the applets is that they need Java plug-ins and Java Virtual Machine (JVM) to operate. Applet cannot work without JVM, and JVM itself takes time when started for the first time. Companies are considering these issues and are trying to improve and reduce the latency time of JVMs. In the near future, the applets will extend the dimensions of entertainment on the web.

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.

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.