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.
May
29th

Protocols used in HTML

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

Protocols are set of rules which define how the two computers will communicate with each other. Technically speaking, protocols define the procedures and standards which form the basis of transferring the data between two computers. In HTML protocols are used in order to tell the web servers and clients how to upload and download the data between each other via internet. Different types of protocols are used in HTML depending upon the type of file and its usage. The most common protocol used in HTML is HTTP which is short for Hyper Text Transfer Protocol. HTTP represents the basic information about the contents of the HTML documents according to their file name extensions. For eg. A file with .gif extension tells the web browser that its an image file and the browser processes that file as an image.

HTTP browsers don’t maintain a session with the web servers permanently. They retrieve a particular document from the web server via HTTP and then get disconnected. This means that while you view a web page, your web browser is not connected to the web server. When you enter a new URL or click on a link on the existing web page, the browser again connects itself with the web server, downloads the information and disconnect the session again.

HTTP was basically developed for handling hyper text pages over the internet. When HTTP is used, a series of operations is initiated to retrieve the information form the web server. Initially, when you type a URL in the address bar and hit Enter/Go button, the HTTP client (the web browser) makes a request to the web browser via internet connection. This establishes a Transmission Control Protocol (TCP) connection to a particular host on port 80 (because by default http service runs on port 80). The HTTP server listens to the client’s request on this port and provides the web page which is to be viewed.

HTTP uses TCP because a lot of data has to be transferred from the HTTP server to the client every now and then, and TCP gives surety of error free transmission of data. Besides HTTP there are other protocols also which are used over internet. Below is the list of protocols used for web browsers:

1) http:// It is used to retrieve HTML documents and associated files which
resides on the web.

2) file:// It is used to retrieve the documents which resides on the local
hard drive.

3) ftp:// It is used to upload and download the documents on an FTP
server.

4) gopher:// It is used to retrieve documents on a gopher server.

5) wais:// It is used to connect to a Wide area Information server (WAIS)
database.

6) mailto: It is used for sending e-mails to a specified address. It is not a
standard but it is supported by most of the web browsers today.
There is no need to put // with mailto:

7) news: Used to connect to a newsgroup or a specific article in the group.


No Comments
May
29th

Working with Images in HTML

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

A single image speaks more clearly than a thousand words. Images add spice to the web page. They make a website interactive and user friendly. In fact, images are the most vital element of a web page, especially those designed for children. In the absence of images nobody will enjoy web surfing. Today almost every web page contains images in order to increase its worth. So, it would be useful to have a look at the different aspects of an Image in HTML.

HTML basically supports two types of images i.e. .Gif and .Jpg image. While .Jpg images are static, the .Gif images can be both static and dynamic. tag is used to put an image on a web page. This tag has lots of attributes which are used to align an image, define its size and position etc. To add an image there are some basic attributes which should be used.

1) <IMG> tag is necessary
2) Then SRC attribute must be there to tell the document the source from where it will get the image.

For example:

<HTML>
<IMG SRC=”d:\images\hello.jpg”>
</HTML>

In the above example the <HTML> and </HTML> tags represent that this document is a web page. The IMG tag is representing the addition of an image in the web page. The SRC is the attribute of IMG which tells that from where and which image is to be inserted .There is no need to close the <IMG> tag with </IMG>.

One thing which should be noted is that you can give the full path to an image as well as only name of the image with the SRC attribute. If you are using an image which is not in the same folder where your HTML document resides, then you have to give its full path like d:\images\hello.jpg. In contrast if the hello.jpg file is in the folder where your HTML document and files are saved then you can mention only its name as like <IMG SRC=”hello.jpg”>. Another point which should be remembered is that you have to mention the full image name including its extension like hello.gif or hello.jpg otherwise the image will not be displayed. You can adjust the aliment, height, width and border of the image. If you set the value of border=0 then the border will disappear. In contrast, you can start increasing the value of height, width and border as per your requirements.

For example:

<IMG SRC=”d:\images\hello.jpg” ALT=”Hello” HEIGHT=”200” WIDTH=”600” BORDER=”6” >

Below are the different attributes and their explanations which can be used with <IMG>

  1. ALIGN: It is used to set the alignment of the image. You can use it as ALIGN= TOP, ALIGN= MIDDLE, ALIGN=CENTER, ALIGN= LEFT and ALIGN= RIGHT.
  2. BORDER: It is used to set the size of the border of the image.
  3. WIDTH: It is used to set the width of the image
  4. HEIGHT: Used to set the height of the image
  5. HSPACE: Represents the amount of space to the right and left of the image.
  6. VSPACE: Represents the amount of space to the top and bottom of the image.
  7. ALT: It represents the text which is to be displayed in place of image in case the web browser is unable to display the image.

No Comments
May
28th

URLs in HTML

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

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 takes you to the home page of yahoo. Whenever you click on a link on a web page, it takes you to another web page. Technically speaking it redirects you to a new URL. Therefore we can say that every hyperlink is associated with a URL. Generally what we type in the address bar is like yahoo.com and then the Yahoo website opens in our web browser. It does not show any errors because the DNS resolves yahoo.com in its full format automatically. Actually yahoo.com is not the complete URL. A complete URL consists of different sections each indicating important information about the web page.

Let us take a comprehensive example of a URL such as
http://www.3seas.com/html/introduction.htm.

This URL has different sub sections which are described below:

  1. Scheme: It defines the type of protocol which has been used in a particular URL. For eg; the http is the scheme which defines the type of internet service used.
  2. Host: It defines the domain host. The default host for http is www
  3. Domain: It defines the domain name which has been registered online. 3seas.com is the domain name.
  4. Port: It defines the port number on which the http service is running. It is not displayed in the URL.
  5. The default port number for http is 80. However, this port number can be changed by the IIS administrator.
  6. Path: It shows the complete path of the directory located at the web server.
  7. File Name: It tells the name of the document whose contents are being displayed on the screen. In our example, introduction.htm is the file name.

Thus, technically we can split a complete URL as:

scheme://host.domain:port/path/filename

The domain part of the URL can also be split into logical parts. In http;//3seas.com/html/introduction.htm, The 3seas.com is the domain name out of which 3seas defines a unique entity on world wide web (also known as 1st Level domain). The .com represents the top level domain. This is used to describe the type of website. There are predefined standards which indicate the top level domains and their corresponding meanings. Some of the popular ones are:

COM It shows that the web page is intended for commercial business
2) .ORG It represents a non commercial community website
3) .NET This is used by ISPs (Internet Service Providers)
4) .MIL It is used by Military of United states only.
5) .GOV Used only by government agencies

Apart from the top level domain and 1st level domain, a domain name can also have various sub domains arranged in a hierarchy. All of them are separated by a period ‘.’ The left most represents the lowest level in domain hierarchy and the rightmost represents the top level domain. A typical example of domain name hierarchy is:

www.india.asia.nokia.com

Where india represents the lowest level in the domain hierarchy and .com represents the top level domain.

In HTML coding the URLs to a link are defined with the help of <a> tag. For eg:

<a href=””http://www.yahoo.com””>Click Here</a></p>

According to the above example you will be redirected to yahoo.com if you click on Click Here text on the web page. Although you will not find any difference whether you type the URL in upper case or lower case because the DNS server resolves that automatically, but it should be noted that the URLs are always case sensitive.


No Comments
May
27th

Elements of HTML

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

Elements are those building blocks, which define the structure of an HTML page. Whatever we see on a web page is defined by the different elements of HTML. Elements decide the layout of a web page, its contents, the properties of the content and the position and behavior of every character that may or may not be displayed on the web page. Elements contain everything such as Headings, Paragraphs, Embedded Media, Sound, Images, Hyperlinks, Lists, Fonts and a variety of other structures that are used to build a web page. Each element in HTML can be defined using the Tags. Tags define the properties of the elements. To construct an element in a particular style we generally require four things:

A start tag
Any attributes and associated values of the start tag
The actual content which has to be displayed on the web page
End Tag

Most of the elements require all the four things mentioned above, but some of the elements require only a part of them. The use of attributes and associated values of the start tag is completely optional and it is used only when we want to add some extra effects for the characters. Some of the elements do not even require an End Tag. As you gain experience and in depth knowledge and expertise in designing HTML pages, you will get to know a large number of Elements some of which require all the tags and some, which do not.

HTML Elements are classified into two broad categories:

Block level Elements
Text level Elements or Inline Elements

Block level Elements are responsible for the construction of an HTML page as a whole such as Headings, Paragraphs etc. These elements contain several Text Level/ Inline elements and other Block level elements. Inline elements are contained under the block level elements and are used to format small chunks of data. For e.g. Images and Hyperlinks.

Various Block level and Text level elements can be used together to format the data/text to be displayed on the web page. Although you can use more than one inline elements in any order but it is not recommended. As per the standards the elements must be closed in the reverse order. For eg.

<B><U><I> Introduction to Elements</I></U></B>

The above order is correct. The elements B, U and I are closed in the reverse order i.e. last In first Out. Below is an example of incorrect style of defining the elements.

<B><U><I> HTML is good. </U></B></I>

The elements can be used more complexly according to ones need. Several different elements can be nested within each other if required because there is no maximum limit for using the elements. Below is a comprehensive example of nested elements. Just note their starting and ending order. The first one has been closed in the last.

<Body bgcolor=red><P><B>Welcome to HTML.</B> <I> For more info</I><a href=”html.com”>click here </a></P></body>

In this way the elements can take a form of different hierarchies and sub-hierarchies depending upon the structure of your web page.


No Comments
May
26th

HTML: Links and Images

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

Links and images make the page come alive. For this you need to know about the common tags and the character tags along with their key features such as formatting tags. Before doing the tags one has to know about links and images. A basic knowledge of these is needed in order to make your page reveal your persona with the links and images on it .Let us first go through what are tags related to links and images

Links are the basic hypertext constructs, which help you to navigate from one resource to another either on the same page or between two pages. Images on the other hand are basically used in the background of the document or in the web page and maybe sometimes even in the logo. So the need arises to format this image or even add a new image. For all these purposes we need some tags related to images and links. When you use the tag <BODY> and </BODY> as tag then you are referring to the body of the text document. To change or edit the visited colour code you use the tag

VLINK=”#Colour Code” and

For unvisited colour code, you can use the tag

LINK=”#Colour Code”.

<A Name = “Label”> moves to the other portion of the web page. This link tag helps in navigating between web pages. <A HREF=”Item Location> helps you go to the destination marked by this link. So links are basically used to get two items or pages linked. This way documents are shared on the web.

You can use similar tags for the images too. Let us study each tag one by one. This is indeed a fun way of learning the HTML tags. You don’t need to be a master to understand this. Even basic computer knowledge is helpful to understand the tags. When you wish to import an image from its location, you need to use the tag
<IMG SRC =”Image Location”>. You can either align the text at top middle position and bottom middle or align it left, right and center. For this you use the tag

ALIGN=”Left, Right” and ALIGN=”Top, Middle, Bottom”

For alternative text you use the tag ALT while for bordering the image use the tag border. You can even change the width of the image in pixels by using HTML by using the tag WIDTH. Similarly, the height can also be changed by using HEIGHT. You may also decide the amount of horizontal and vertical space you require around your image by using the tags VSPACE and HSPACE. Now this is easy and you don’t need to be afraid of HTML programming anymore. Not that tags form HTML programming but they are definitely the basis for this programming and without understanding this you cannot move ahead.

Let us see how to add an image to your web page. You need to use the following command to add the image:

<img src=” . . . “>.

In the area marked by dot, as shown above, you need to place the name of the file containing the image you are planning to use to add the image.


No Comments
May
23rd

HTML: Adding Sounds to Web Page

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

You can make the web page interesting with Graphics and texts and construct an interesting web page. Then the question is, what makes the difference between any two web pages, when the input for page construction-Graphics and Text-are the same. In other words, what is the basis of considering whether a particular page is good or bad?

Surprisingly, it is the same resource-Graphics and Text-that make the difference. For example, images are used to give a different look to the overall design of the page. But the visibility or clarity of the image makes the difference. To give a classy look, the image must be clear. Once that is done, you need to put in good pieces of information because it is the quality of content that pulls visitors.

There is another way to make the web page interesting. All you have to do is ton add some music and sound to it.. These days a lot many websites are doing this to attract people to browse them. It is wonderful for when you open the site, the musical sound automatically turns on and when you navigate, it runs off. This is called adding different sounds to different pages. This is not difficult at all to add sound to your page using html programming. The following 2 options are there and they both are simple and easy.

1. Link a sound file in your computer to the web page. The people visiting the web page will download this file and then it will play
2. Embed the sound you want to play into the page itself.

We will go through both the options to see their functionality with HTML. Sounds cool, well let us go ahead to analyze the first option of linking the sound file to the web page. Now you will have a practical go at your tags. Remember the tag HREF which is used for the link. Well here we will use the same tag to link the sound. The command will look something like this.

<a href=”http://www.pageresource.com/sounds/mattdum.mid”>A Cool MIDI Song</a>

When a person clicks on this link he will be given an option to download by the browser and he can get the sound onto his computer. This is quite simple to use. So now even you can add sound to your web page. Well here MIDI type file is used. But if your sound file is of .wav, .aud or some other extension type then you can use that and create the link. Now let us see the scene when you download the song. You will be allowed to play in the player, which uses the particular extension. Once the player is run online, you have the tools present on it to start or pause the sound. This way all the controls for the sound are present with you along with the sound itself.

Next, let us see the other method of adding sound to the web page i.e. embed method. Well in the embed method you need not produce a link. You just need to embed it to the page that is the sound will play as soon as you open the page and it can be repeated all over again if you wish to. This is another cool and better way of adding sound. Here you need to specify the source of the file and other commands.

The command used for embedding the sound into your web page.

<embed src=”http://www.pageresource.com/sounds/mattdum.mid”></embed>


No Comments
May
23rd

The history of HTML

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

HTML (Hyper Text Markup Language) was developed in the year 1991. This language is used to write scripts to construct the Web pages. Though, today we have a lot of tools that are used for scripting to help in web designing the history of HTML goes back to 1991 when this was the only language for scripting to develop a Web page. The language could also be used to share documents online. This idea of sharing documents and pages was proposed by Tim Berners Lee. He is still eulogized for introducing HTML tags, which were responsible for initiating the Internet ride, ultimately helping in better communication. Initially, 22 elements were introduced in HTML, out of which 9 elements have been frozen due to upgradation. Now, we have the fourth version of HTML, which is referred to as HTML Four. The initial version of HTML Four consists of 13 elements.

HTML has its origin from SGML (Standard Generalized Markup Language). SGML is a little heavy on the technical side, but it’s good to know it because it initiated the whole project of W3-World Wide Web. An SGML is usually described as a Meta language, which gives you the liberty to make use of a range of markup languages. Initially, when HTML originated, SGML tagging was used in the basic HTML, however, in the advanced stages, SGML tagging was not given any preference, as HTML could never be an appropriate SGML document.

If you wish to learn the HTML scripting, it can be learned easily and is very interesting. Continuing with the history, Lee HTML was withdrawn and a new HTML was created by the IETF. This was described as the HTML working group, which brought about a formation of HTML 2.0 version. For a difference 2.0 is the version number, which is given to this. But this 2.0 is not up to the mark for the development of a web environment, which is suitable to everyone and gives a better result. This addition requires some changes. Earlier in this 2.0 version changes were done under the guidance of IETF. In 2000 a version was released by W3C that is well known, as it possess those international standards the same as version 4.0. Presently HTML 5.0 is in demand in the market. HTML has come a long way since 1991 and it has launched many versions in the past years and from every version users have received something new to exhibit. When HTML came up with its final version, users found this version more easily applicable as compared to any other programming language, which is used for web designing.


No Comments
May
21st

HTML: Its Progression over the Years

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

Yesterday while surfing the net, an unusual observation made me wonder a few things. I marveled at how easily communication can be established now and our data transferred. What used to take something like ages in the past is now done in minutes. With technology growing rapidly, people seem to have been able to make things simpler for everyone to grasp. Definitely getting information, being able to communicate with a pal somewhere and also applying for a job has become easier thanks to the net. But have you ever wondered what/who masterminded this? Well programming and the answer is as simple as that. It’s the human mind which is the center for such easy communication and no miracle thankfully.

When Tim-Berners Lee wished to share documents between two computers, he did a small programming and created a language which enabled him to share the documents. This language, he called HTML tags which were but simple designs then. With time, the HTML drafts by Lee and his team faded away. IETF a new team on the block, worked on these dead drafts and got a whole new HTML developed which became the version 2.0. This version was made in the year 1995. Over the years from 1991 to 1995 a whole team worked day and night to come up with something good for technology. But version 2.0 was not the end of HTML.

During the period between the version 2.0 and the building of the other versions a request was sent by IETF for comments on various factors like form based file upload, client side image maps, tables and internationalization. All this was given to the IETF in the year 2000. A certain Dave Raggett of the IETF, came up with the version 3.0 which contained all the elements mentioned in his proposal like tables, text flow around figures, and the display of complex mathematical elements. At the time it came into existence, it was too complicated from implementation point of view and so nobody took the project ahead. But the interesting fact is that instead of proposing a 3.1 version, a 3.2 version was proposed and many of the features of version 3.0 were removed due to the complexity.

Now at the time when 3.2 came into existence, IETF had closed down and it became officially declared by the W3C. After this straight away HTML 4.0 came into existence in the year 1997. This version contained certain flavors which were strict, transitional and frameset. It adopted browser specific attributes and removed some that were of no use. In 1998 the version 4.0 was re-released with some minor additions. This version too contained the same flavors but had some more additions. Version 4.01 came into existence in the year 1999. The latest version released in 2008 is the version 5.0. This shows that HTML has particularly undergone a lot many changes in the period of 17 years. It has survived in spite of its initial dismissal.


No Comments