banner
Welcome to HTML.co.uk, the number one resource for all news, information, and happenings regarding HTML.

Updates: HTML.co.uk has just been relaunched. Subscribe to our RSS Feed to stay on top of HTML news and techniques.
Jun
18th

Inserting Tables in HTML Documents

Author: Editor | Files under HTML Tutorials

Tables are used in web pages to present the information in a more useful way. Information about lists, calendar, mark sheets, product catalogue etc. can be easily provided with the help of HTML tables. Tables make it easy for the user to identify the relevant information quickly. If you want to put some details category wise, then tables are the best choice. HTML tables can be created in various designs, sizes, patterns and colors, but there are some common attributes which forms the basic structure of any table. Table can be inserted in HTML using <TABLE>….</TABLE> tags.

The basic elements of TABLE are:

1) TR (Table Row): It is used to enter rows in a table
2) TD(Table Data): It is used to enter data in the table
3) TH (Table Header): It is used to give headings in the table
4) CAPTION: It is used to give a caption to the table

Below is a HTML code used to create a simple table:

<HTML>
<TABLE>
<CAPTION>Content Mantra</CAPTION>
<TR><TH>Sn.no</TH><TH>Services</TH><TH>URL</TH></TR>
&ltTR><TD>1</TD><TD> Blogs </TD><TD>mantrablogs.com</TD></TR>
<TR><TD>2</TD><TD>Content writing </TD><TD> contentmantra.com</TD></TR>
<TR><TD>3</TD><TD>Resume writing</TD><TD>contentmantra.com</TD></TR>
<TR><TD>4</TD><TD>E-book</TD><TD>contentmantra.com</TD></TR>
</TABLE>
</HTML>

The output of the above code is as follows:

Content Mantra
Sn.no Services URL
1 Blogs mantrablogs.com
2 Content writing contentmantra.com
3 Resume writing contentmantra.com
4 E-book contentmantra.com

By default the TH element is marked as ‘Bold’ and it is aligned towards the center and the TD elements are aligned towards the left. Apart form the simple tables you can also create the complex ones having attractive layout and design. Different attributes which are commonly used to design and format the tables are:

1) Align: It is used to set the horizontal position of the table (not its contents). The values used with align are bleedleft, bleedright, center, justify, left and right. If Align is used with the TD and TH elements, then it will affect the contents of the table.
2) Border: This attribute is used to design a border for the table. The thickness of the table can be adjusted with the help of integers.
3) Cellpadding: This attribute is used to give spacing between the cells if a table.
4) Cellspacing: It is used to give spacing between the cells and the data contained in the cells of the table.
5) Width: It is used to define the overall width of the table.
6) Colspan: It is used with the TD and TH elements to specify the number of columns the cell spans.
7) Rowspan: Used with TH and TD to specify the number of rows the cell spans.
8) No wrap: The contents of the cells are not wrapped. It is also used with TD and TH
9) Valign: Used with TD and TH in order to define the vertical alignment of data within a cell. The possible values which can be used with Valign are top, middle and bottom.

HTML code for a Table using different attributes:

<HTML>
<TABLE border=”2” cellpadding=”3 cellspacing=”3”>
<CAPTION>Content Mantra</CAPTION>
<TR><TH>Sn.no</TH><TH>Services</TH><TH>URL</TH></TR>
<TR><TD Align=”center” >1</TD><TD Align=”center”> Blogs </TD><TD Align=”center”>mantrablogs.com</TD></TR>
<TR><TD Align=”center”>2</TD><TD Align=”center”>Content writing </TD><TD Align=”center”> contentmantra.com</TD></TR>
<TR><TD Align=”center”>3</TD><TD Align=”center”>Resume writing</TD><TD Align=”center”>contentmantra.com</TD></TR>
<TR>
4</TD><TD Align=”center”>E-book</TD><TD Align=”center”>contentmantra.com</TD></TR>
</TABLE>
</HTML>

Output of the above code:

Content Mantra
Sn.no Services URL
1 Blogs mantrablogs.com
2 Content writing contentmantra.com
3 Resume writing contentmantra.com
4 E-book contentmantra.com

No Comments
Jun
18th

Virtues and Vices of HTML Editors

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , , ,

As discussed earlier, the HTML editors are those software applications which are used to design, create and manage high end web sites without writing HTML code. With HTML editors like Microsoft FrontPage and Adobe Dreamweaver, anyone can make web pages. From novice to professionals to web experts, everyone is using these editors to effectively mange their web sites. But as every technology has its own merits and demerits, the HTML editors also have its own virtues and vices. Let’s have a look at both the positives and negatives of the editors, as it will lead to better understanding of these kinds of applications.

Advantages of HTML Editors:

1. HTML editors allow you to draft web pages quickly. The most impressive aspect of these editors is that you don’t have to know about HTML codes at all in order to design your web site.
2. HTML editors not only help in creating the web pages, but it also maintains the site map and global structure of the whole web site. Thus, if in future the web site becomes complex you don’t have to face any type of issues while updating and maintaining it.
3. HTML editors help in maintaining consistency throughout the whole web site. If your web site contains large number of pages and if you want a particular element to be displayed on the top of each web page (for example your company logo), then instead of putting the element one by one on each of the HTML document you can simply put it one any one page and the editor will update it on the remaining ones.
4. HTML editors let you to insert complex elements into the web page with ease. For example: you can quickly insert flash animations, fireworks file etc. into your web site.
5. Forms, tables, frames and other important elements can be easily managed via HTML editors.
6. Not only in web designing, but the HTML editor also helps in generating the scripts for the web sites.
7. HTML editors also let you to easily embed DHTML effects into your web page.
8. With the help of HTML editor library, you can easily manage and access the frequently used resources.
9. HTML editors are WYSIWYG (what you see is what you get) applications. So, you can easily know how your web page will finally look like on the web browser.

Disadvantages of HTML Editors:

1. No doubt that HTML editor makes it easy to create and maintain web sites but they are overloaded with lots of features. So, it is difficult for a newbie to first of all understand the working of the editor properly.
2. HTML editors are poor in error reporting. It may not very much effective in telling you about the bugs in the code.
3. The programming style (style of writing the HTML code) of a HTML editor is entirely different than your style. The editors write the code in a complex and professional manner. So, it would be difficult for an amateur web developer to understand it.
4. Due to lots of features, the HTML editors have become overcrowded. It is very difficult to know about all the available features and their usage.
5. No HTML editor is complete in itself. As the web standards are updated, these editors start getting obsolete.


No Comments
Jun
17th

HTML Forms

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , ,

Forms are one of the vital elements of HTML. Today almost all the web pages are dynamic and interactive in nature. They are capable of receiving the input from the user and process it. As the e-commerce gained popularity, it became necessary for web developers to create web sites which are capable of taking the input from each user and update their records. For this purpose HTML forms were introduced. A HTML form is like a console where you can provide all the required information and submit it on the web.

To create a form in HTML, <FORM>….</FORM> tags are used. Below is the different attributes of form tag:

1) Action: It represents the URL which will accept the details of the user via form. If this attribute is not mentioned, then it means that the base URL will accept the form. Base URL is that URL where the form is located on the web server.
2) Enctype: It specifies the media type.
3) Method: It indicates the method that will be used for processing the action script. Method has two possible values. One is ‘get’ and other one is ‘post’. Get is used when the form does not make any changes in the database, hypertext or any other value. On the contrary, Post is used when after submission, the form affects the database, hypertext or changes any other value.

Example of form tag:

<FORM Action=http://www.contentmantra.com/submit Method=”POST”> contents of the form </FORM>

In the above example the Action=”http://www.contentmantra.com/submit” specifies the query program to the server on which the particulars of the form has to be submitted.

ELEMENTS of FORM

Form elements build up the contents, design and layout of the form. The different form elements are: INPUT, SELECT, OPTION and TEXTAREA.

A) INPUT: It is used to take input form the user using variety of tools and options. The INPUT element defines the graphical user interface of the form. Via INPUT the web developer can insert drop down menus, radio buttons, text boxes, check boxes etc. In order to specify the type of input, ‘TYPE’ attribute is used. For example:

• <INPUT type=”text” size=”40” name=”content_mantra”>
• <INPUT type=”radio” name=”radio1” value=”M”> Male
<INPUT type=”radio” name=”radio1” value=”F”> Female

B) SELECT and OPTION: It allows the user to choose one option form a set. It is used to insert drop down menus in the form. The OPTION element is used with SELECT in order to make the list of available options. For example:

<SELECT Name=”select1”>
<OPTION> Bangalore
<OPTION> Delhi
<OPTION> Mumbai
<OPTION> Chennai
<OPTION> Gujarat
<OPTION> Patna
</SELECT>

C) TEXTAREA: This element is used to take textual data from the user. The difference between TEXTAREA and INPUT is that in TEXTAREA the user can enter several lines (like while giving feedback for a product), but in INPUT the user can enter only one line (like his name). For example:

<TEXTAREA NAME=”feedback” ROWS=”4” COLS=”40”></TEXTAREA>

The ROWS and COLS indicate the maximum limit to which the user can write in the text area. Another important thing is that with each HTML form element, ‘NAME’ attribute is used. This is very important because while writing the scripts for the form these names are used.


No Comments
Jun
16th

Cascading Style Sheets

Author: Editor | Files under HTML Tutorials
Tags for this article: , , ,

Cascading Style Sheets (CSS) refer to the language which is used to design the layout and presentation of a web document created in HTML, DHTML, XHTML or any other type of XML document. Via CSS, the designers can define the fonts, colors, styles and overall layout of a web page. CSS improves the web designing work by reducing the complexity. They provide more flexibility and control over the presentation of characters and their style on a web page.

CSS acts as the base platform which is responsible for the format and layout of an HTML document. It allows the same HTML content to be viewed in different styles for different purposes like for print, for web viewing etc. CSS are very useful when the structure of the HTML document is repetitive. For example; if you are making an HTML document in which you have used <Font color=red face=comic sans ms> a lot, then instead of writing this code again and again a CSS can be created in which you can define the type of font you want. This way all the tags and their attributes which helps in designing the appearance and style of the web page such as background styles, borders, character size, heading styles and many more can be defined using CSS. The main advantage of using CSS is that for a single HTML document, multiple CSS can be used. In this way the appearance and layout of the web page can be changed whenever needed in no time. CSS can be used as a separate document or it can be embedded in the HTML.CSS can be created by different people in different styles. It is prepared by both the web authors and the users. The web author makes the CSS having different styles which can be applied to the HTML document. A user prepares a local CSS which is applied to all the documents of a website. CSS are also created in ‘user agent style’ which specifies the default settings for a web browser to display the web page.

Advantages of CSS:

1) CSS allows us to create templates for the HTML documents in which we can predefine different visual styles and appearances.
2) CSS reduces the structural complexity of HTML documents.
3) CSS separates the designing part and the content part of a web page. This leads to the better management and understanding.
4) CSS can be used with any XML language.
5) CSS really helps in managing large websites having a number of interlinked web pages. It assures consistency in the layout and design.
6) CSS can be used to view a web page in different styles depending upon how you will be using the final output. For example; for viewing on web the layout of the web page is different and for printing purposes another layout may be needed.

Apart from these remarkable advantages, CSS suffers from some disadvantages too. There are some issues which creates hindrance while using them. The most common problem is that not all the web browsers support all types of CSS. There are some other issues regarding the expressions and their usage in CSS. Thus, developers are finding more tools and techniques which can improve the functionality of CSS in future. The World Wide Web Consortium (W3C) maintains all the CSS specifications.


No Comments
Jun
13th

Dreamweaver

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , , ,

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.


No Comments
Jun
11th

DHTML

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , , ,

HTML is used to create and design static web pages. It proved to be very useful and easy to understand and soon after its evolution it gained world wide popularity rapidly. But with the growth of internet and its related applications the internet users demanded something more in the websites. Web surfers were vigorously expecting more interactive, entertaining and exciting web content. Thus DHTML was introduced. Some people call DHTML as an advanced version of HTML, but some did not consider it a language or a new specification of HTML. Rather, they perceive DHTML as a new way of controlling the HTML commands and functions. DHTML is basically an amalgamation of four different techniques i.e. HTML, Scripting, Cascading Style Sheets (CSS) and Document Object Model (DOM). Using all these tools we can create more interactive and animated web pages to arrest the attention of the internet users. DHTML is used to insert special effects to a website such as mouse rollover effects, drop down lists, animations, advanced marquee effects etc. It allows you to control the HTML elements and change them.

The four techniques which are harmonically used in DHTML are:

1) HTML: DHTML uses the standard HTML code as its base.
2) Scripting: A client side scripting language such as Java Script is used to control the elements in DHTML
3) CSS: Cascading Style Sheets are also used to define and manage the style and layout of the web pages.
4) DOM: Document Object Model allows you to access any portion of a DHTML document and change its properties.

DHTML adds life to static HTML pages. The user feels that he is interacting with the website in real time. DHTML can add an effect with any event. For example when you click on an image, it background changes. In this the effect is related with the mouse click event. Similarly a lot of events such as mouse rollover, drag n drop, scroll etc. can be associated with one or more DHTML effects.

The four properties of DHTML are:

1) DHTML is used to modify and control the standard HTML tags and their attributes.
2) DHTML gives you real time interactivity with the web page. It can position different objects, images and text dynamically within the web page.
3) DHTML is also used dynamic fonts. Only Netscape Navigator supports this function.
4) Another important feature of DHTML is Data Binding. With the help of this property the web surfer can easily access databases from the websites. This feature is only supported by Microsoft’s Internet Explorer.

It is clear from the above discussion that DHTML has many advantages and some disadvantages too. DHTML is more complex than HTML. The DHTML editors are very costly. Apart from this some of the features of DHTML are browser specific but still DHTML is used worldwide as it has proved itself a great utility to enhance the quality and usability of web pages. Anyone can use DHTML in any form. From a small piece of creativity to large complex codes, DHTML can be used to make web sites better than ever before.


No Comments
Jun
10th

Applets

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , ,

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.


No Comments
Jun
10th

Different types of URLs used in Hyperlinks

Author: Editor | Files under HTML Basics, HTML Tutorials
Tags for this article: , , , , ,

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.


No Comments