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.
Jul
6th

HTML Tags and Attributes

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

HTML tags are the basic building blocks of a web document. All the elements which make up a HTML page itself are made of a starting tag and an ending tag. Without the tags no web site can be created. In fact all the HTML editors such as Microsoft FrontPage, Adobe Dreamweaver etc. use tags while generating automatic HTML codes for the websites. Tags are the heart and brain of an HTML document.

Tags have all the powers which design, control, maintain and edit a web page. A simple notepad file is transformed into a web page just because of the tags <HTML>…..</HTML>. Tags describe the nature of your document. It affects both the visual appearance as well as the background processing a web page. In order to increase the functionality, most of the tags also have their attributes. Attributes precisely defines the nature, behavior and the appearance of the text enclosed within a particular tag set. Different types of tags have different possible attributes. For eg: the tag <FONT>……</FONT> have some attributes like face, color, size etc, but the tag <B>…</B> does not has any attribute. Attributes are always used with their tags, not alone. However, the tags can be used without its attributes. In order to use the attributes you have to start a tag and within its starting section the attributes can be used.

Every attribute must be provided with a value. Without the values an attribute cannot determine what to do and to which extent. Like the attributes, their values are also used within the tags. They are separated from the attributes by a = sign.

For example:

<FONT Face=”Comic Sans MS” Color=”Red” Size=”10”> Content Mantra is the one best solution for all your writing and editing needs. </FONT>

In the above HTML code <FONT> and </FONT> are the main HTML tags. The Face, Color and Size are its attributes which have Comic Sans MS, Red and 10 as their values respectively. One important thing which is to be noted is that whatever content written inside the tags is only meant to format the HTML document and it is not displayed on the web page as the final output. Only the portion between the start tag end the end tag is viewed by the internet user.

HTML tags are of different types. Some tags are used to format the visual appearance of the content of the web document, some are used to define the behavior of the HTML elements and some are used to control the HTML scripts. The syntax to be followed while using different tags can be the same or different from each other. Some tags have an end portion prefixed by a / while some of the tags don’t require an end. Like the <FONT> tag do have an end i.e. </FONT> but the <BR> tag does not have any end.


1 Comment
Jul
2nd

Different Controls used in HTML Forms

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

The end user interacts with the HTML forms via various kinds of controls such as text boxes, command buttons, option lists, checkboxes etc. Each and every option is intended to execute a specific type of command and generates the relevant output. The functions of every control is different form one another. Web developer can use only few of them or all of them depending upon his needs and keeping in mind the ultimate objective of embedding the form in the web site.

Every control is given a name so that the scripts can easily identify it. There are two types of values of the controls. One is the initial value which indicates the default status of the control at the time the form is loaded and the other one is current value which determines the current status of the control. For example: The initial value of a text box is blank, but when the user will enter his name into it its current value will change. These two values are important as they tell the scripts that whether the form has been modified or not. Every time the user resets the form all the control’s values get changed into their initial state.

Different types of controls used in the form are:

• Command Buttons
• Check Boxes
• Radio Buttons
• Drop Down Menus
• Text Boxes
• File Select
• Hidden Controls
• Object Controls

Command Buttons: Command buttons are used when the user wants to submit the information or he wants to reset the values embedded in the form. There are three types of command buttons i.e. submit button, reset button and push button. The submit button is used when the user wants to submit the details entered into the form. Reset button is pressed when the user wants to set all the values to their default state. Apart from these there can be other types of command buttons also which can be used for specific purposes. Those buttons are called push buttons.

Check Boxes: Check boxes are squared shaped boxes which are used to select one or more than one options simultaneously.

Radio Buttons: Radio buttons are circle shaped buttons which unlike the check boxes allow you to select only one option at a time within a given set of alternatives.

Drop Down Menus: These menus are used as alternative to radio buttons and check boxes. If the list of the options is very long, then using check boxes and radio buttons will take large space and the look of the web site will deteriorate. In order to solve this drop down menus is used in which infinite countless number of options can be accommodated without increasing the size of the menu.

Text Boxes: Text box is used to enter some textual data in the form such as your name. Text box cannot contain various lines of text. It is limited to a certain number of characters. If you want to give the user more space to write then the ‘TEXTAREA’ option can be used.

File Select: This control allows the user to select files so that their contents may be submitted with a form.

Hidden Controls: These kinds of controls are not shown to the end user. It is only in the background to facilitate data exchange between the client and the server.


No Comments
Jul
2nd

Web Publishing

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

After creating the most fruitful and advanced HTML documents, the next important task to do is putting them on the World Wide Web so that it can be visible to general public for use. The practice of hosting your web site on the internet is known as web publishing. Publishing your web site is very important because until you do that there is no use of creating the HTML pages. Web publishing or web hosting makes your web site go live on the internet. There are several companies which provide web publishing services. All you have to do is purchase a domain name and also pay an amount for the maintenance and updating of the site to these companies.

Before you can upload your HTML documents on the internet there are three main things which are needed:

1) Space on the web server
2) Procedures for uploading the file
3) Software for uploading the file

Some ISPs (Internet service Providers) may offer you a definite amount of space on the web and charge you for that on monthly basis. In fact you can purchase some megabytes on the web server to upload your HTML documents on that. Another alternative is to contact the companies specializing into web hosting if you want to get gigabytes of space on the web server for your web site. These companies have different types of flexible plans in which you may also get the maintenance and regular up-gradation of the site. You can subscribe to any of the plan according to your budget, needs and aspirations.

If you know about technical nitty gritty of web publishing then you can also set up your own web server but this will require a lot of efforts on your part and demand large amount of finance and time.

Components of web Publishing:

The vital components of web publishing are web browser, web cookies and web server. Web browser is needed to view the web site once published. A web server is required in order to publish your web site. It is responsible for replying to the web browsers and sending them the web pages requested. All the HTML files reside on the web server if published. Finally, the web cookies are also needed in order to surf the internet smoothly. Web cookies allow the web site to store the important information about the user on his computer which can be used in future. Web cookies also track the number of visits to a particular web site.

The most convenient way to publish your web site is to use CuteFTP. In order to use it you must ensure that all the HTML files are saved in a folder. After that you can upload the files form your folder to the folder which you will get on the web. One thing which should be noted is that you must buy a domain name and give your web site a unique URL while uploading it.


No Comments
Jun
30th

Working with Ordered/ Numbered Lists in HTML

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

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>


No Comments
Jun
27th

Working with Unordered/ Bulleted Lists in HTML

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

Like the ordered lists, the unordered or bulleted lists are also used to present the data in a more meaningful, readable and understandable way. Unlike the ordered lists the unordered ones puts a bullet instead of a number or alphabet in front of every list item. The HTML tags used to create the unordered lists are <UL>…</UL>. Unordered lists can also be used in a variety of styles. By default most of the web browsers use bullets to delineate unordered list items. Some text browsers such as Lynx put an asterisk sign before the unordered list item.

Example code for creating an unordered list:

<UL>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</UL>

The output of the above code will be as follows:

  • Content
  • Resume
  • E-Book
  • Blogs
  • SEO
  • SMO

Instead of simple bullets we can also use other symbols as far as they are supported by the web browser. In order to accomplish this we have to use ‘TYPE’ attribute with the <UL> HTML tag. For example:

<UL TYPE=”SQUARE”>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</UL>

Using the above HTML code we will get the following output:

  • Content
  • Resume
  • E-Book
  • Blogs
  • SEO
  • SMO

We can also use different types of symbols in the same unordered list and ordered list with the bulleted one. A sub-list under a main list can also be created. This process is popularly known as nesting of lists and such kind of lists are called ‘Nested Lists’. Below is a comprehensive example of a nested list which consists of both the numbered and bulleted styles.

HTML Code:

<HTML>
<OL TYPE=”I” START=”V”>Guess what we will be discussing today?
<OL TYPE=”1”>
<LI> Its all about vegetables </LI>
<OL TYPE=”A”>
<LI> Carrot
<UL>
<LI> Its red in color </LI>
</UL>
<LI> Tomato </LI>
<UL TYPE=”CIRCLE”>
<LI>Its also red in color </LI>
</UL>
<LI> Potato </LI>
<UL TYPE=”SQUARE”>
<LI> It’s the odd one out as it is brown in color </LI>
</UL>
</OL>
</OL>
</OL>
</HTML>

In this way we can try infinite combinations of tags to design our lists. Nested lists can be made more beautiful if non-breaking spaces i.e. < & nbsp > is used. It will increase indents and the sub-lists will be easily presented under the main ones.


No Comments
Jun
25th

World Wide Web Consortium (W3C)

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

World Wide Web Consortium, popularly known as W3C is an international organization which formulates policies and lays down the standards for World Wide Web (WWW or W3). W3C is in fact a consortium where all its members work together towards the development of WWW standards.

Why W3C was formed?

W3C was formed by Tim Berners-Lee in October 1994. It was created to develop universal standards for developing HTML documents. Before the evolution of the consortium, every vendor was providing a different version of HTML documents. This lead to web page incompatibilities and the purpose of Internet (that everybody should be connected) was getting into somber. Thus, there was an immediate need to standardize the process of web site creation. Now a days W3C develops interoperable technologies, specifications, guidelines, software and tools with an aim to enhance and utilize the web in a best manner.

W3C Members:

W3C is an international organization having a large number of members who are dedicated to manage and design the specifications for web. These efforts are made in order to ensure that people form different backgrounds and cultures can access the utilize the web easily. W3C is hosted by three universities:

1) Massachusetts Institute of Technology, U.S.
2) The French National Research Institute, Europe
3) Keio University, Japan

There is no individual or a single organization or a group of organizations which own W3C. Every member of the consortium holds equally important position. Some of the well known members of this consortium are IBM, Microsoft, America On Line (AOL), Apple, Adobe, Macromedia, Sun Microsystems and much more which includes a large number of software vendors, content providers, telecommunications companies, corporate users, networking companies, international carriers like AT&T, academic institutions, research laboratories, government bodies, electronics and hardware companies etc. In total, there are 425 members of W3C till date (June 2008).

Goals of World Wide Web Consortium or W3C:

As mentioned above, the W3C is continuously engaged in the development of standards for the web. These standards are developed keeping in mind certain long term objectives. Following are the goals which form the basis of the standards developed by W3C:

1) Web for Everyone: W3C believes in non-discrimination and aims at giving equal opportunities to all the human beings irrespective of their caste, sex, religion, and their social and ethnic values. Thus, this consortium lays down some standards which make the web pages easily accessible to all the people.
2) Web on Everything: With the growth of telecom sector and communications technology now apart from the PC, there are a large number of devices which can support internet surfing. W3C develops standards and protocols to support the internet on these kinds of devices such as PDAs, Smart phones, Tablets etc.
3) Knowledge Base: W3C aims at enhancing the web content and its processing via databases and scripts so that people can use the internet as a useful knowledge source.
4) Trust and Confidence: W3C also lays down the standards for internet security and privacy so that people can confidently involve into activities like e-commerce.

Apart from creating the new ones, W3C also updates its existing standards whenever required and it is recommended that the web developers conform to these standards while creating HTML documents.


No Comments
Jun
24th

Working With Glossary/Definition Lists

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

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.


No Comments
Jun
23rd

Inserting Checkboxes and Radio Buttons in the Forms

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

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.


No Comments