HTML.co.uk

HTML better known as Hyper Text Markup Language is a tool for writing scripts to develop web pages. It has come a long way since it came into existence for the first time in 1991.

Web designing does still use HTML but it is not the only language used for scripting. A quick glance at the history of HTML will tell you that HTML was the first language used for scripting to build a web page. It was the start language for sharing documents online. The brain behind the idea for developing a system to share documents and pages was Tim-Berners Lee. This name is still famous for the HTML tags which started the internet tour and helped make communication easier. The HTML tags consisted of a simple design for HTML. The 22 elements that were introduced in the HTML then have lost some 9 elements on its way to upgradation. The fourth version of the HTML named HTML four consists of 13 elements of the first version.

HTML is inspired from the SGML language which is Standard Generalized Markup Language. Though a little technical it is definitely good to understand SGML because it started up the whole project of W3-World Wide Web. A SGML is normally termed as a metalanguage where you are free to use various markup languages. In the basic HTML too SGML tagging was used in the initially stages but later HTML never came up to be a proper SGML document and it was preferred not to use SGML tagging any further. Upgradation did not support the SGML. Right now if you go in for programming HTML scripting is considered a baby and anyone is able to learn it. But the Lee HTML disappeared in the wind and a new HTML was created by the IETF. This HTML was the HTML working group which concluded to be the HTML 2.0 version. Now here is where we get the standard HTML on which further upgradation to make it better were made. Not many of us are aware of this history, but it is certainly interesting. Well as a matter of fact you should also know that there was no HTML 1.0 as such. There were some previous HTML and its drafts which were different from the HTML 2.0. To create the difference a version number was given and what is better then 2.0. For better results and develop a web environment suitable to all, the version 2.0 was not sufficient. Some additions were needed in this version. So additions, changes and more such work was done on the version 2.0 under the guidance of IETF for this. The version released in 2000 by the W3C is known to have an international standard which was the version 4.0. The current version running in the markets is HTML 5.0. HTML has come a long way since its inception in 1991. A lot many versions have been developed since its initial dismissal and each version found something new to exhibit to the users. The final version has made things user friendly and people definitely find HTML easier to use then any other programming language for the web designing.

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?

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.

Yesterday while surfing the net, an unusual observation made me wonder about a few things. Namely, how easy it was to establish communication to transfer our data. 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 who/what is the mastermind behind all this. Well it is ‘programming’ and it is as simple as that. It’s the human mind which is the centre for such easy communication and no miracle thankfully.

When Tim-Berners Lee wished to share documents between two computers, he did some programming and created a language which enabled him to share the documents. This language, he called HTML tags which were but simple a design 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 an 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 the W3C. After this, HTML 4.0 came into existence straight away in the year 1997. This version contained certain flavours 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 particularly has undergone a lot many changes in the period of 17 years. Yet, it has survived in spite of its initial dismissal.

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.

HTML differentiates between 6 levels of headings, in order to create hierarchical relationships in the document.

An Example

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Defining Headlines</title>
</head>
<body>
<h1> 1. order heading</h1>
<h2> 2. order heading</h2>
<h3> 3. order heading</h3>
<h4> 4. order heading</h4>
<h5> 5. order heading</h5>
<h6> 6. order heading</h6>
</body>
</html>

Explanation:

<h(1-6)> introduces a heading. The number stands for the heading level. 1 is the highest level, 6 is the lowest. Afterwards the text in the heading follows.
</h(1-6> ends the heading and should be at the end of the heading text.

Take Note:

The numbers for the beginning and closing tags must be the same.

Every heading is its own paragraph, which means no paragraph spacing is necessary before and after headings. The rules regarding the character set, special characters, and HTML specific characters all apply for the heading text.

Aligning Headings

Headings are aligned on the left, if not instructed to do otherwise. You can also align a heading centrally or on the right. Justifying is possible too.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Aligning Headings</title>
</head>
<body>
<h1 align=”center”>centred 1. order heading </h1>
<h2 align=”center”>centred 2. order heading </h2>
<h3 align=”center”>centred 3. order heading </h3>
<h1 align=”right”>right aligned 1. order heading</h1>
<h2 align=”right”>right aligned 2. order heading</h2>
<h3 align=”left”>left aligned 3. order heading</h3>
<h1 align=”justify”>Very long justified 1. order heading, which is only visible after there are multiple lines of text <h1>
</body>
</html>

Explanation:

Through the align=“center” element in the introductory heading tag, you make it so that the heading is centrally aligned. The align=“right” element aligns the heading on the right. While the align=“justify” justifies the heading, and the align= “left” element aligns the heading in its normal place on the left.

Take Note:

Not all browsers can interpret justified text. Justifying together with headings is not always practical, because justified text is only noticeable with multiple lines of text.

align has been classified as deprecated in the HTML 4 standard. Instead we recommend using style sheets, for example: <h1 style= “text-align:center”>…</h1>.

Formatting Headings with CSS

HTML has no influence on how a heading will be presented by a browser. The browsers use default formatting in order to display headings. However, you can format headings in any way you please with style sheets. 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 Headings with CSS</title>
</head>
<body>
<h1 style= “font-size:300%; color:red”> 1. order heading</h1>
</body>
</html>

Explanation:

The 1. order heading is defined with a 300% font size and red colour in the above example.

You can allow background music to be played every time an HTML file is accessed. There are two methods to do so. Both of the solutions described here – one for Microsoft’s Internet Explorer and the other for Netscape – are proprietary. As in both solutions do not belong to the HTML standard.

Moreover, if you wish to embed background music, you should know that it only annoys most users and will cause them to leave your website more quickly.

An Example:

<html>
<head>
<title>Background Music</title>
<bgsound src=“background.mid” loop= “infinite”>
</head>
<body>
<embed src=“background.mid” autostart=“true” loop=“true” hidden=“true” height=“0” width=“0”>
<h1>Page Content</h1>
</body>
</html>

Explanation:

With <bgsound …> you determine the background music in the HTML file header according to the Microsoft syntax for displaying the site. You achieve the same thing for Netscape with <embed …>. In both cases the src attribute determines the desired music file. The files should really be in either MID, AU or WAV formats. In order to prevent a visible display of the music player, the elements hidden= “true” height= “0” are necessary for the Netscape syntax. The automatic music start also has to be explicitly stated in the Netscape syntax – through autostart= “true”. Then you can determine if the music plays only once, multiple times, or continuously. You can also achieve an endless effect in the Microsoft syntax through loop= “infinite”. If you wish to limit the amount of times the music file is replayed, then replace infinite with this number. With the Netscape syntax you only have the choice between endless loop and no replay. In order to produce an endless loop, write loop= “true”. Otherwise you can simply do without the element.

Take Note:

In the upper example it is required that the music file is found in the same directory as the HTML file. If the file is another directory, then you must enter the relative or absolute path name. This works in the same way as embedding graphics.

Playing background music sets certain requirements for the visitor (such as having the right hardware, or speakers). Moreover, the web browser must also have the ability to control the music file playback.

Please use the HTML attributes described here only in the case of justifiable exceptions – this is why we are only touching upon the subject superficially. These attributes have never belonged to the HTML standard and are a typical example of the type of chaos that results when a browser is allowed to do its own thing. You should definitely instead use style sheets to define side borders.

An example:

<html>
<head>
<title> Side Borders</title>
</head>
<body marginwidth= “50” marginheight= “100” topmargin= “100” leftmargin= “50”>
<h1>Text</h1>
A lot of text and so on.
</body>
</html>

Explanation:

The elements for side borders follow after the introductory <body> tag in the HTML file. The leftmargin attribute determines the distance between the left and right window border and the file’s content for Internet Explorer. The topmargin determines the distance in between the upper and lower window border and the file’s content for internet explorer. Marginwidth and marginheight determine the distances for Firefox. All values are in pixels. The left and right borders are always the same size, just like the upper and lower borders.

Take Note:

The defined side borders only apply to the HTML file for which they are defined. If you wish to produce a document from multiple HTML files, with consistent side borders among them all, then you will have to individually set the side borders for each file.

Side Borders with Style Sheets:

Here is another example on how you can achieve the same side borders in the example above using style sheets:

The Example:

<head>
<style type= “text/css”>
body { margin-left:50px; margin-right:50px; margin-top:100px; margin-bottom:100px }
</style>
</head>

Explanation:

You achieve the same effect using the elements above in the HTML file header. These elements are interpreted by Firefox and Internet Explorer. Moreover, the elements have also been standardised by the W3 consortium.