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
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
20th

HTML: Navigation within a Document

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

With HTML things have changed drastically and definitely for the good. Just imagine when at one point people just could not afford the communication cost, HTML has changed the communication technology. It did not do the whole changing but it definitely played a major part in the revolution. Without the development of HTML, things would not have been what they are at present.

So far we have seen how HTML was initiated and what all happened in its development stage. How many versions have been there and what were the changes made in each version. The basic HTML structure, the meaning of tags, what role they play in HTML designing. We have gone through the basic reason for developing HTML. Now sharing and linking being done, we still have to scroll through the topics. Many web pages have something like hundred topics on one page and scrolling to each topic can be laborious and useless. You feel times have changed but still there are many dreading jobs which can be avoided but how you don’t know. Well for those who put up a hundred topics on one page and cant afford another page for the topics should make way for navigating from one topic to another. This makes life easier and saves a lot of time used up by unnecessary scrolling. But before we proceed with the linking in the same document we need to know something about linking. A link, hyperlink or web link, forms the basis of the HTML language. There are two ends to a link- called anchors and a direction. A Link starts at the source anchor and destination anchor. Let us see how this scripting is done in HTML.

<H1>Table of Contents</H1>
<P><A href=”#section1″>Introduction</A><BR>
<A href=”#section2″>Some background</A><BR>
<A href=”#section2.1″>On a more personal note</A><BR>
…the rest of the table of contents…
…the document body…
<H2><A name=”section1″>Introduction</A></H2>
…section 1…
<H2><A name=”section2″>Some background</A></H2>
…section 2…
<H3><A name=”section2.1″>On a more personal note</A></H3>
…section 2.1…

Without going into the technical details, here we have seen how the source and destination anchors are used and what exactly their purpose is. Now similarly we can also navigate from one part of the document to the other part. There are some steps involved in doing so. We have described the method in the next few lines. You can use the normal anchor tag here to navigate from one part of the document to another. Here instead of using name of another page, you can use the same portion of the document. You can name the area of the document you are interested in navigating in the bracket named area. This code looks something like shown below.

name=”name_of_area”>text</a>

you can call a link to the place you are right now to go to the area you want to you can use a statement given below.

href=”#name_of_area”>text</a>

HTML has definitely improved the way a web page works. It has given various features over its development stages. We always find some new addition or unwanted deletion in the new versions.


No Comments
May
19th

From the beginning…the basics!

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

A not very technical yet fun loving tutorial for HTML!

We know how and why HTML originated in the first place. But we still have no idea what is HTML, what functions it includes and how it works. HTML, as all of you know is a Hypertext Markup Language which has been inspired from another markup language known as the SGML. We normally use this language to create a link between the various documents online and also to design the layout and attributes of a web document. Before going further in this tutorial, we start with the URL which is the uniform resource locator which helps you find the exact document or page. For each document or page there is a unique URL. Now this is not uncommon for the people who are net savvy. You must have definitely used the URL a hundred times. But that is not the point, the main thing you should know is how to navigate from your home page to the other web pages i.e. how it is linked.

<beginning tag> statement< /end tag>

As you can see in the statement above, there is a / before the end tag and you should consider this important. The tags are differentiated as the head tag and the body tag. You also have the HTML tag and the title tag other then the head and body tag. Let us see each tag in some detail and observe how it looks like in a script. HTML tag is to make the program realize where the beginning for the HTML code is. It looks like this. It is not being used by many recently. The Head tag contains special tags like the header of a document. Basically, the body tag gives information about the linking, the documents, the layouts and other such things for your web page.


No Comments
May
14th

HTML: Extended Fonts and Text Colours

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

HTML has successfully initiated the web language era. It all began with Lee’s attempts i.e., the new era of web based services. Lee tried to share documents between two computers and for that purpose he developed the HTML language. A language developed solely for sharing purposes has come a long way and is the most widely used to link documents on your web browser and determine the documents’ attributes and layouts.

HTML is not the only language used for this purpose, but is the main tool for web page designing and linking. Its competitive features and user friendly approach have made it a hit with all programmers involved in designing. Once you get the feel of this language, you too will find it easy to use. We already know a many things about the HTML language. Here we will solely discuss the fonts and colours used in the HTML language. You can add some fonts to the web browsers other than the ones normally used. Many web pages do not support the use of extended fonts or colours i.e. there is no option for font or colours in the web page. You can even add a font or colour tool to the web page. In this way you can change the font type or the colour of the font. Now this can be done using a simple code.

FACE=&quotfont_name”
Let us check out a few examples of how you can have your own extended font on the web page.

Verdana font. For this simply use this code: <font size=+2 face=”Verdana”>Verdana</font>
Arial font. For this simply use this code: <font size=+2 face=”Arial”>Arial</font>
Helvetica font. For this simply use this code: <font size=+2 face=”Helvetica”>Helvetica</font>
Comic Sans font. For this simply use this code: <font size=+2 face=”Comic Sans MS”>Comic Sans MS</font>
Font impact. For this simply use this code: <font size=+2 face=”Impact”>Impact</font>

You can clearly understand the structure from one code itself. The necessity for so many examples is that you need to understand that there is a basic similarity and what it is. You just need to change the name of the font for the type of font you want in the tool bar. Otherwise the code remains the same whatever the font you are interested in.

Now that is simple isn’t it? No wonder most people prefer using the HTML codes for scripting for web pages instead of any other language. You should also remember that for you to see the above fonts or the fonts you want, the web browser you use should support the fonts. Now that we have seen the fonts, why don’t we move on to the colours? You can change the text colour too if you so desire. All you need to do for that is use COLOR=”font color” in the tag. With this code you can change the colour according to your choice. E.g. If you want your font colour to be yellow all you need to do is write Hey I’m Yellow! and font colour is yellow.
Simple , isn’t it?


No Comments
May
13th

An Introduction to HTML

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

HTML is a short form of Hypertext Markup Language. A markup language provides a means to describe the structure of both text-based information and extra information on the web page.

Basic Requirements:

To start with your HTML programming, you should have a web browser and a text editor. Since HTML is a text-only document, a program such as Notepad is perfect.

Tags:

In the case of HTML, the markup information is contained in “tags,” which are easily recognizable by the < > symbols. To format a web page, “tags” are used at the beginning of a section, called opening tags, and end of a section, called closing tags. An opening tag always has “<” and “>” and a closing tag always has “</” and “>”, which occur in begin-end pairs. The first and last tags in a document should always be the HTML tags. These pairs are in the form

<tag> … </tag>.

Document Tags

  • HTML
  • HEAD
  • TITLE
  • BODY
  • Comment Tags

Creating and Viewing HTML Documents

Every file with the .html is usually opened by default with a web browser. If you are placing the file on a server that is visible from the WWW, type the name of the file after the address of the server.

Structure of an HTML Document

Every HTML document consists of two basic parts: the “head” and the “body.” The head starts with the <head> tag and ends with the </head>, for the body the <body> tag is used in a similar manner. Both the head and the body must be enclosed in <html>….</html>.

Structure of the HTML Docs
<html>
<head>
<title>Title bar text<title>
</head>
<body>
<p>Look, I’m not an Alien!</p>
</body>
</html>

Formatting Text

Valid specifications of the language allow for formatting of text and design using HTML tags, without any CSS. Headlines need to be inside dedicated H tags, while regular text goes in paragraphs and with the appropriate line breaking applied. The three most common text decorations are bold text, italic text, and underlined text. There are six types of headline tags, or headings, defined with the <h1> to <h6> tags.

HTML Lists:

  • Unordered Lists
  • Ordered Lists
  • Definition Lists

There are three types of lists: unordered lists, ordered lists, and definition lists. In case of ordered list, any number of items is listed by using numbers. Whereas in unordered list, bullets are used to list any number of items. Definition lists are based on term-definition pairs, not on list items.

Metatags:

While offering no visual advantage on your pages, META tags work behind the scenes for search engine optimization. These tags are placed after the tags at the beginning of your HTML document. Keywords, which can identify your website, are placed after meta tags section. Search engines use these words to compare to what users enter in for search results. The “description” section is what will appear on the search engine when someone searches for your site. By coming up with a description, you can immediately let the user know what kind of site you are offering.

Growth of HTML over the years:

Developed by Tim Berners-Lee, HTML has now become an internationally accepted standard, now maintained by the World Wide Web Consortium. Starting with loose syntactic rules, HTML was effectively improved, overtime, by creating increasingly strict language syntax. The original HTML specification described 22 elements, and 13 of those are valid even today.


No Comments
May
13th

Defining Text Paragraphs

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

Paragraphs serve the text’s optical construction. When producing HTML files, it is not enough to only add a break in the editor. Internet browsers ignore such breaks.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Defining Text Paragraphs</title>
</head>
<body>
<h1> Defining Text Paragraphs </h1>
<p>A new paragraph begins here, and ends here</p>
<p>A new paragraph begins here, and ends here</p>
</body>
</html>

Explanation:

<p> (p = paragraph) introduces a paragraph of text. </p> ends the paragraph of text and stands at the end of the paragraph.

Take Note:

The </p> end tag is optional in HTML, which means it doesn’t necessarily have to be included. On the other hand, in XHTML it is required. Moreover, it is also good HTML style to include the closing </p> tag. It also makes the meaning of such a tag clearer: It surrounds a block of text – it does not stand for the space in between two paragraphs. If you format the <p> element with style sheets, then that means you already have to write a <p> before the first text block in order for all the paragraphs to have the same formatting.

The <p> element cannot include any block producing elements such as headings, paragraphs or lists. For HTML this means: the paragraph will be implicitly closed (with an internally included </p>) at the first appearance of a tag that is no longer allowed in the current paragraph (such as <ul> or <table>) – an eventually later following </p> will then be alone without any start tag and therefore a mistake. In XHTML the </p> must come before any block producing elements.

The rules regarding the character set, special characters and HTML characters apply to the paragraph text.

Aligning Paragraphs

Paragraphs are aligned left by default. But you can also align a paragraph to the right or centre. Justifying the text is also possible.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Aligning Paragraphs</title>
</head>
<body>
<h1>Aligning Paragraphs</h1>
<p align=”center”>This is a paragraph that has been centred</p>
<p align=”right”>This is a paragraph that has been aligned to the right</p>
<p align=”left”> This is a paragraph that has been aligned to the left</p>
<p align=”justify”> This is a paragraph that has been justified</p>
</body>
</html>

Explanation:

With the align=“center” in the introductory <p> tag you centrally align the paragraph text. With align=“right” the paragraph is aligned to the right. With align=“justify” the paragraph text is justified. With align=“left” the paragraph is aligned to the left as usual.

Take Note:

Not all browsers interpret justifying. Justifying is not suited for small passages of text, because here the relatively large distance between words disrupts the reading flow.

align has been classified as deprecated in the HTML-4 standard. Instead it is recommended to use style sheets in such a manner for example:

<p style= “text-align:center”>…</p>

Formatting Paragraphs with CSS

HTML has no influence on how exactly a paragraph text will be displayed. The browsers use default formats in order to display the texts. However, with style sheets you can format the paragraphs in any way you please. When using style sheets you must then know how to define CSS formats. Then you will be able to use CSS attributes.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Formatting Paragraphs with CSS</title>
</head>
<body>
<h1>Formatting Paragraphs with CSS</h1>
<p style=”font-family:Arial,sans-serif; font-size:18px; color:blue”>A formatted paragraph </p>
<p style=”background-color:yellow”>Another formatted paragraph</p>
</body>
</html>

Explanation:

Two paragraphs are defined in the example. The first paragraph is defined to be displayed in Arial font, 18 pixel font size, and in the colour blue. The second paragraph will receive a yellow background.


No Comments