HTML.co.uk

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.

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.

This section is a continuation of the previous section on Meta Elements. Here we will go over multilingual Meta elements, Meta element profiles in separate files, and a scheme for Meta elements.

Multilingual Meta Elements

You can notate multiple Meta elements of the same type and only differentiate between them by language. Keywords, or short descriptions, especially, can be written in multiple languages.

Here is an Example:

<head>
<meta name= “keywords” lang= “en-us”content= “vacation, Greece, sunshine”>
<meta name= “keywords” lang= “en” content= “holiday, Greece, sunshine”>
<meta name= “keywords” lang= “fr” content= “vacances, Grèce, soleil”>
</head>

The example shows the same keywords being defined in American English, British English, and French. The attribute lang is used in order to define the language. An abbreviation for the language is allowed as a value, for example, en for English, fr for French, es for Spanish, it for Italian, and so on.

Take Note:

The lang is one of the universal attributes in HTML. If you work in XHTML, then you will have to add the xml universal attribute like so: xml:lang.

A profile for Meta elements in a separate File

You can enter an external profile or formula for Meta elements, which you then follow. It could be a well known public profile, with certain internet addresses as its homepage. But it is also possible to enter your own profile with your own Meta definitions.

An Example:

<head profile= http://example.org/profile.html>
<meta name= “Category” content= “A.1.B.”>
</head>

Explanation:

In order to draw in a profile, you need to notate the profile attribute in the introductory <head> tag. Enter the URI for the profile file as the value. It is not prescribed how exactly this profile should look. Typically, a HTML file is entered that lists and defines the Meta attributes in a table. The W3 consortium would prefer to think of the entered address as a unique global name. In this manner, web browsers or search engines that already recognise the corresponding profile, do not need to read anything, as they already know how the following Meta elements should be interpreted according to the profile.

In this example we define a profile that is saved at the http://example.org/profile.html internet address. We assume that a Meta attribute, with the name category, is defined in this profile. This attribute can be used with <meta name= “category” content= “…”>

Take Note:

You cannot actually outsource the Meta elements themselves, only the scheme the elements follow.

A Schematic for Meta Elements

So that your Meta elements can be automatically processed, the values that notate the content attribute of a Meta element should be written in an established format – assuming of course a fitting format exists. You can enter such a scheme with help of an additional attribute.

An Example:

<head profile= “http://example.org/profile.html”>
<meta name= “Type” scheme= “MIME-Type” content “image/svg+xml”>
</head>

Explanation:

A profile is given, that is loaded onto the http://example.org/profile.html internet address. We assume that an attribute with the name Type exists in the profile. This attribute can be characterised in a Meta element with name= “Type”. The scheme attribute presents the attempt to give the reading software instructions on how values, belonging to the content attribute, should be read. In the example, the scheme= “MIME-Type” attempts to tell the software the value for content is a MIME Type.

Take Note:

This way of linking to a scheme is not strictly defined. The problem, which the scheme instructions should solve, actually arises from the scheme attribute itself. Modern Meta data profiles, such as the Dublin Core, do not only define attributes, but also give descriptions for possible schemata at the same time. We will go over the Dublin Core in more depth in our following section.

This element no longer plays an actual role, because modern browsers allow for one to comfortably and quickly search for text within a displayed HTML file. This element has since been classified as deprecated and soon will no longer be part of standard HTML. The following information has more of a historic character.

A HTML file can be a searchable file. This means that its content can be indexed on the server computer. However, it only makes sense to describe a file as searchable, if its content actually exists on the server computer in the form of a search index file.

With a HTML file that has been defined as searchable, an entry field appears at the beginning after loading the page in a web browser, which allows the user to enter a search keyword.

An Example:

<head>
<isindex prompt= “Please enter a search term: ”>
</head>

Explanation:

You declare a HTML file as searchable with the isindex element. You determine a text for entering a search term with the prompt attribute. The text must be inside the quotation marks.

Take Note:

If you work in XHTML standard, then you have to mark the isindex element as content less. To do so, notate the standalone tag in this format: <isindex … />.

There are not definitive guidelines for “proper” HTML. But there are rules on how a valid HTML document should look. It is definitely recommendable to orient yourself with the W3 consortium’s HTML language standards. The W3 consortium has since also recognised that their work does not only consist of elaborating on technical specifications, but also in communicating these specifications to normal laymen users, who lack an extensive background in programming. If you intensely and regularly produce websites, then it is worth checking in on the consortium’s website periodically for the latest happenings and developments.

The W3 consortium also offers a service for HTML authors, with their so-called validator, that checks how correctly HTML files are produced. If your website is reachable online, then you can simply enter the address into the validator to check the website’s syntax.

In terms of what is classified as “good HTML style”, it really is better to begin with what should not be done under any circumstances.

Do not write for specific browsers

If you wish to place data online, then you should use more than one web browser to test your data. Use the prevalent Firefox and Internet Explorer browsers, in multiple versions if at all possible, and also try to use a third browser such as Safari or Opera. If you have the possibility to test on multiple platforms (Windows, Mac OS, Linux), then do so. And maybe even view your website on a handheld computer or with glasses, so that everything looks blurry.

Of course, no one can prevent you from writing HTML that is only correctly viewed by Internet Explorer. But if you upload such sites online, then you should know that you are only damaging your own image.

Do not write for certain screen resolutions.

Extorting specific widths by using interlocked tables and blind pixels has since become so widespread in the web, that some website designers do not even know regular HTML produces text that automatically adjusts to the browser’s window size. There is no point in completely corrupting and forcing minimum widths. Tables with multiple columns and the corresponding content require only a certain width. If you ask the question of whether you should “optimise” your website for a 1024 or 800 resolution, then you are asking the wrong question. Many users surf with multiple windows open and continuously open links in new windows. These windows are then often not displayed in full screen mode. Many users also have programs open that fundamentally take up a portion of the screen and are always displayed, such as instant messaging programmes. All these users do not make the extra effort to show your site in with the maximum screen size. Do not bother with the maximum value screen size resolution. You can require a few hundred pixels (a very inexact amount) for the width, but that is all.

Use tables and frames only sparingly and instead opt for width and height values in percentages. Absolute pixel values only make sense when the first column of a blind table is supposed to be located on a colour background picture split in two. Otherwise, you should not occupy yourself with such notions. Just because it looks good for you, doesn’t mean it looks good for others, in fact, it could even appear very bad.

Do not use HTML elements for purposes they are not designed for

Especially do not use the logical and semantic HTML elements for certain formatting effects. For example, some people use the blockquote element in order to indent paragraphs, only because most browsers display text within the <blockquote>…</blockquote> as an indented paragraph. However, the blockquote element is purely conceived for quotes and should only be used as such.

People are more frequently using tables and headings in a sloppy manner. Headings are not there to make text big and fat, but instead to mark a logical hierarchical relationship between the blocks of text. Tables should be used to view table data and not for any layout purposes. If you wish to format or position text in a certain way, then you should use style sheets.

Use honest and meaningful linking text

This rule generally applies: the link destination should include what the link promises. This means that when constructing a link, the link text should neither promise too much, nor too little. For example, if you offer information about a piece of software, without offering the opportunity to also download it, then it is unfair to link to the information and suggest the user may immediately download the software.

In HTML, links can be set up at any desired location in the text. However, if you read a text, where every second word is a link, then you will clearly realise this disturbs the reading flow. The links continually draw the same amount of attention and prevent the reader from actually understanding the text’s content. This makes it even more important for links inside the text to be clear and not pose any riddles.

Therefore, only enter a link inside text when the link text makes sense. And structure the sentences, which contain the link, in such a way that the link is also meaningful.

For example, do not write:
“For further information click here.”

But instead:
“Additional information is also available”.

Use Graphics correctly

If you are not in the middle of producing a huge art exhibition in HTML, then you should first keep your distance from large graphics files. Think about how many users will not be thrilled over the long loading times with the files that you produce for the web.

Instead, use smaller, better placed graphics. 16 colours often suffice, instead of 256 or even 16.7 million. That makes the graphics much smaller.

On the other hand, you should not at all do without any graphics. Pure text on the computer monitor is more tiring to read than on a handheld book, for example. That’s why you should try to structure long texts as richly as possible and with a lot of variation. Graphics are one means of doing so.

Small icon sized graphics are ideal. The load quickly, and you can reference loads of them without a second thought.

Small graphics can also assume certain corporate identity or orientation functions. The advantage of using such graphics more than once, is that the browser need only load them once and then keep them saved.

HTML stands for Hypertext Markup Language. The user should be able to navigate through information they find interesting. For those who are interested in investigating this subject more closely, we will provide a detailed examination of hypertext in another segment.

With the hypertext information layout, it is necessary that the information is separated into smaller and closed units of information, which are interlocked with each other in an understandable and clear manner.

If, for example, you wanted to display your favourite football club online, then you would need the typical homepage with links to subordinate pages. Each of the subordinate pages should also include a link back to the homepage. You could easily use a subordinate page for the club’s standings, history, roster or schedule, for example. The roster page could then link to other subordinate pages for individual players. With such a subsidiary of a subsidiary page, it is wise to have a link going back the next highest page, as well as a link to the main page. More intersecting links from the standings page to the goal scorer’s page, for example, are also quite reasonable. A network of information then results. Additional links should then help complement the navigational possibilities. In many instances, it is also reasonable to offer so-called guided tours, or a succession of pages that the user can comfortably skim through. Regardless of which project you are undertaking: you should always keep in mind the notion of structure and linking that we explored here.

What we describe here as a page or subsidiary page, should also be a HTML file in a web project. Do not be overwhelmed by the amount of resulting files. The clear structuring of information should always remain the highest priority.

We will examine methods of linking more closely in a separate section and also provide more tips for producing web projects later on.

File Organisation

With every somewhat large project you will soon quickly realise how many HTML, graphics and all kinds of files you end up amassing. In order to keep everything in view, you should either consider a clever filename scheme or create separate subdirectories sorted by topic or area. If you wish to release your project online, then you will have to find out beforehand if you have the right or possibility to load subdirectories onto the web server, where you eventually plan to upload the project. Because in this case you will have to produce the same directory on the server computer as you produced locally, in order for all the references and links to function correctly.

Most server computers in today’s internet have either a Unix or Unix led operating system. Unix distinguishes between upper- and lowercase in filenames. Anyone who produces their web project in a Windows environment, for example, can become bitterly disappointed when their locally functioning graphic references and links suddenly no longer work after being uploaded onto the server computer. One reason for such a case would be if the destination link is written in lowercase in the HTML file, while the Windows system has transferred the file names in uppercase.

In such a situation there is almost no other option, aside from renaming the files on the server computer using FTP commands, or to adjust the links and graphics references so that the referenced destinations are found correctly. If you work with a system where upper- or lowercases in the file name only make a graphical, not internal difference, such as Windows, then it is best to only produce document names in lowercase. It is also best to write everything in lowercase for links and graphics references.

Filenames in terms of Compatibility

If you are producing your web project solely for internet use, then you have to make sure the files will be accepted by the server computer. With modern Unix systems, as most web servers use them, filenames of up to 256 characters long are accepted. The “_” character is allowed as a special character, otherwise all special characters should be avoided. Question marks “?” and stars “*” should definitely be avoided, because these characters have a special meaning with nearly all systems.

File Endings

Here the general rule holds true: stick to the usual and standard file endings unconditionally. The web server must determine, based on the file ending, which MIME type it sends the browser. And the browser decides how to treat the file depending on the MIME type.

• Typical HTML files either include the ending .htm or .html
• HTML files containing server side endings possess the .shtml and .shtm endings
• HTML files with PHP sections have the ending .php
• While HTML files with ASP sections have the ending .asp

Default File Names with Web Servers

Most of today’s web servers see one or multiple file names as the file for the “Home site”. Most of the time the home page has the name index.html or index.htm, but sometimes it also uses welcome.html or welcome.htm or default.html or default.htm. Some providers allow you to choose your own filename as the default filename.

Default filenames have the advantage of making it so the web addresses becomes shorter, as they no longer require any other HTML file names. Many web addresses simply consist or http://www.example.org/ or http://www.example.org/directory/ - without any other information regarding a specific HTML file. A certain HTML file is nevertheless uploaded when loading the web address, because the filename is already saved by the web server as a default filename.

You may ask your provider if they offer default filenames for directories, and if so, then which. Construct your project in such a way that your home page has one of these filenames and that the subordinate pages refer back to it.