HTML.co.uk

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.

As we know, HTML files consist purely of text. Nevertheless, many websites contain graphics, background graphics, multimedia elements, java applets, flash animations and more. In HTML, such elements are noted in the form of a reference to a specific data source. Even a link to your own website, or another site, is only executable if you name the link destination. Referencing is required in HTML for all these purposes.

There are also places in complement languages such as style sheets or JavaScript, where other data sources must be referenced.

The rules for referencing always stay the same. The reason for this is the central and universal web address system, which functions independently of the syntax from single operating systems and allows one to exactly specify any web address they desire.

Referencing with complete URIs

You must reference with fully complete URIs if you are not referencing data sources from you own website.

A URI (universal resource identifier) is something like http://www.html.co.uk/ or http://www.html.co.uk/12/defining-colour-in-html.html. Both web addresses are also simultaneously URLs (uniform resource locaters). And then there are also – in order to make the confusion complete – so-called URNs (uniform resource names). The last is conceived for distinctly naming data sources that do exist, yet are not accessible online through any known internet protocol. A URI describes both URLs and URNs, where URIs and URLs are typical web addresses, behind which concrete data is contained. URIs and URLs are also technically the same. However, in standard HTML the talk is of URIs.

Examples of URIs:

http://www.html.co.uk/
http://www.html.co.uk/about
http://www.html.co.uk/category/html-tutorials
http://www.example.com:8000/blah/
http://www.example.org/cgi-bin/search.cgi?expression=referencing

Explanation:

A complete URL consists of an internet protocol designation, for example either http or ftp, followed by a colon. Afterwards – depending on the protocol – additional information concerning the network name can be included. This designation is enclosed within two forward slashes “//”. Most addresses do not include such designations, which is why the two forward slashes simply stand there without any content in between.

The online address for the host’s computer, where the data source is located, follows thereafter. This can either be a domain name or a numerical IP address. The domain name in the above example is html.co.uk. The www before is typical for the internet and web servers can adjust the pre-setting for sub domains. A so-called port number can follow the domain name after a colon. This is always necessary when the data source isn’t reachable over the standard port of the entered protocol, such as http, but instead via another port. Port numbers are seldom used, but it is still good to know about them.

Then the local path designation to the data source follows. Regardless of the operating system – directory paths are always separated with a simple forward slash. It is the task of the server software, located on the computer, to correctly produce the path designation. As a result, you need not worry about what operating system the computer you are accessing is running.

One can access as many files and data sources as desired from the computer. The only requirement is that they are accessible from the protocol entered, such as http. Files are not necessarily the only accessible data. With a “#” followed by a name, one can access a specific destination anchor within a HTML file. We will describe later how to define such destination anchors. URIs can also be the execution of CGI scripts with parameters, like in the above search.cgi?expression=referencing example.

Characters, that aren’t contained within the ASCII table code or have a meaning in URIs (such as the forward slash, colon or percent character), must be masked within an URI. This occurs by entering a “%” with the hexadecimal value for the character.

Take Note:

The descriptions above are directed towards HTML learners and make no claims whatsoever to completeness. The concept of URIs is much more complex than has been presented here. If interested in learning more, you can read here for more information on URIs in a World Wide Web context, or here to learn more about the general syntax of URIs.

Reference to a base URL relatively with absolute path designations

You can opt for this form of referencing if the desired data source is located on the same host computer, and if it is accessible via the current protocol and the standard port. This sounds more complicated than it is. Within the complete URI http://www.html.co.uk/category/html-tutorials, the /category/html-tutorials part is an absolute path designation relative to the base http://www.html.co.uk URI. You can work with such path designations within your own website and domain or sub-domain.

An Example:

/
/index.htm
/index.htm#about us
/background.gif
/presentation.pdf

Explanation:

The first forward slash following the base URI stands for the internet service’s root directory. Typically it is not the same as the actual root directory on the computer or hard drive, from which the data is extracted. With web servers, for example, one can determine which actual directory the web directory should correspond to. Everything can follow after the base URI that we just discussed above.

HTML includes the possibility to enter commentary anywhere you please inside a HTML file. The commentary is then ignored by the web browsers and not shown in the presentation. Commentaries make sense to give internal information regarding the author and date, or to make internal notices next to certain areas of text, or to comment on which HTML tags were used.

An Example:

<h1>Welcome!</h1>

<!– Commentary: the above element is a heading –>

<A lot of text</p>

<!–and that is a multi-lined commentary on the text with <p>…</p>
The last line of commentary –>

Explanation:

Commentaries are entered using the <!– order of characters. Afterwards one can enter as much commentary as they desire. You can also notate HTML elements inside a commentary. Everything in between the introductory character combination and the ending –> combination will be ignored by the browser. However, specially marked commentaries, such as so-called conditional comments, are interpreted by Internet Explorer.

Take Note:

The character combination - - already starts and ends the commentary. When you strongly wish to accentuate a commentary and wish to use special characters as a dividing line, then it is best not to use the minus sign -, and instead to use another character, such as the equal sign = or the star *.

While tinkering with your HTML file you will inevitably experiment with and test many different variants. Sometimes it is helpful to not erase previous solutions with a new solution before testing, and instead save the old solution inside a commentary. This area is then deactivated for the browser, but can also easily be reactivated. Then you don’t have to get upset when you overwrite something that was actually better than what you just replaced it with.

Credits

You should pay attention to the following tips if you wish to produce HTML files for the web.

• Declare yourself responsible as the website producer:
  Make sure to note who produced the website. Users have the right to know who is responsible for producing a website.

• Display the date of production:
  Write the date of production in a suitable place in the text. This is especially important with information that quickly becomes obsolete. For example, a price list for PC hardware that hasn’t been updated for over two years, will quickly reveal its usefulness with a clearly displayed date of production.

• Declare your copyrights:
  Declare your copyrights or clearly state what can and cannot be done with your text. You can hardly forbid the copying of text, but you can stop the further dissemination of your text even with changes made to it. Be sure to also specify your copyrights for all graphics, logos etc.

• Allow for the possibility of feedback:
  You could include your email or a feedback form, for example.

Colours can be defined in many different contexts in HTML, for example:

• File wide background colours
• Font colours for blocks of text
• Background colours in tables

Although all these designations have since been characterised as deprecated by the W3 consortium, which means they should no longer belong to the language standard in the future. The reason is that all of these colours can be defined with the help of style sheets. CSS, not HTML, is now the language for graphics. Nevertheless, it is worth learning how to define these colours in HTML, because although the same functions exist in CSS, the language also has many more possibilities. We will discuss the subject from a CSS viewpoint in a later section.

There are fundamentally two possibilities for defining colour in HTML:

• Choose the desired colour in hexadecimal form through designations of RGB values (RGB= red/green/blue)
• Through the designation of a colour name

If you enter hexadecimal inputs, then you work independently of the browser, and you have the total freedom of choosing from 16.7 million colours.

If you choose to simply the enter the colour name, then you bypass the somewhat complicated method of defining a colour in the hexadecimal mode. However, there are currently only 16 standardised colours. Additional colour names exist, but they are browser dependent.

The hexadecimal entry of colours

If you wish to define colours directly in the hexadecimal mode, then you must select the desired colour from designations for the three base colours, red, green and blue.

An Example:

<body bgcolor= “#808080”> <!– dark grey file background –>
<table bgcolor= “#00C0C0”> <!– blue green table background –>
<hr color= “#CC00CC”> <!– violet divider –>

Explanation:

Every hexadecimal colour definition has six digits and follows the formula: #RRGGBB

First notate a “#”. Six characters then follow and define the colour. The first two define the red value of the colour, the second two define the colour’s green value, and the final two define the colour’s blue value.

Hexadecimal Digits:

0 (corresponds to the decimal 0)
1 (corresponds to the decimal 1)
2 (corresponds to the decimal 2)
3 (corresponds to the decimal 3)
4 (corresponds to the decimal 4)
5 (corresponds to the decimal 5)
6 (corresponds to the decimal 6)
7 (corresponds to the decimal 7)
8 (corresponds to the decimal 8 )
9 (corresponds to the decimal 9)
A (corresponds to the decimal 10)
B (corresponds to the decimal 11)
C (corresponds to the decimal 12)
D (corresponds to the decimal 13)
E (corresponds to the decimal 14)
F (corresponds to the decimal 15)

Therefore, a hexadecimal digit can have 16 different conditions.

Take Note:

There are 16 base colours that can be displayed by every VGA compatible screen

There are also 216 colours, which have developed into the internet’s standard colour palette. We will discuss these colour palettes in greater detail in a separate section.

In order to make defining colours easier, colour selectors also exist.

Names for the basic 16 colours

An Example:

<body bgcolor= “black”> <!– black file background –>
<table bgcolor= “aqua”> <!–light blue table background –>
<hr color= “red”> <!– red divider –>

Enter the desired colour names in the place where colour designations are allowed.
In order to get an overview of the available colours, you can enter the example above. The hexadecimal values, that correspond to colour names, will then be shown.

A typical HTML file consists of the following parts:

• The document type declaration (information on which form of HTML is being used)
• Header (Containing the title, for example)
• Body (displayed content, text with headings and references)

The formula:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
<html>
<head>
<title>Site description< /title>
</head>
<body>
</body>
</html>

Explanation:

The first line looks especially confusing for beginners. This somewhat complicated piece of information is a document type declaration. We will describe it in more detail later on.

The HTML file’s entire remaining content is contained within the <html> and </html> tags. The html element is also described as the core element of a HTML file. The introducing tag for the header, <head>, follows the introductory <html> tag. The header information is included in between this tag and the closing </head> tag. The most important header information concerns the title and is marked with <title> and </title> tags. The body text, defined through the <body> and </body> tags, follows below. The file’s actual content, as in what is displayed by the web browser, is notated in the body.

Take Note

If you want to use multiple frames, then the framework in files, where a frameset has been defined, looks different. We will discuss these complexities and advise you only to involve yourself with framesets after becoming more familiar with the basics of HTML.

The fundamental framework of a XHTML file

If you wish to correctly write XHTML, then the fundamental framework looks quite similar. Only the beginning is slightly different.

The formula:

<?xml version=“1.0” ?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/1999/xhtml>

<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>Site description</title>
</head>
<body>
</body>
</html>

Explanation:

The relationship to XML should be defined even before the document type in XHTML files. The first line with the question marks inside the arrows serves to make this distinction. Notate this line just like in the example. It concerns a so-called XML declaration.

A valid document type for XHTML files must be given with the document type declaration.

In the introductory <html> tag, the XML naming space must be given with an attribute named xmlns. Use the information as shown in the example above.

The file is declared as a XHTML using these methods. The following source text is technically only normal HTML, although you still have to pay attention to the differences between standard HTML and XHTML. However, you only need to occupy yourself with these differences after first becoming familiar with standard HTML.

Document Type Declaration

HTML is only one from many in the family of markup languages, although it is the most prominent. HTML itself has a long history and has been developed into many different versions. The document type declaration determines which version and which markup language you are using. A type of reading software, such as a web browser, can then orient itself based on this information.

The rules for HTML have been formulated with the help of SGML, while the rules for XHTML were formulated with help of XML. According to the rules of a SGML or XML based markup language, a HTML or XHTML file is only first valid if it provides a specific document type and then if its source code completely adheres to the document type’s regulations. Every document type declaration comes with document type definitions. These define which elements a HTML document type may include, which elements may be interlocked with other elements, what attributes belong to each element, whether entering this attribute is necessary or not, and so on.

As an HTML novice, you might fail to see the point behind all the attention given to declaring the document type. But it is exactly these document types that precisely define the rules of various languages, and have proved to be a major advance in programming. The concept of files independent from software, that also adhere to rules, is only made viable through document types. Without official rules to fall back on, languages like HTML would quickly fractionalise into various dialects and splits. The same is true with natural languages: without certain grammatical rules, the same written language would eventually diverge in various directions, and be indiscernible from one group to the next. Because software is much less intelligent than humans, and requires much more exact information in order to understand what it is receiving, adhering to rules and standards is all the more important.

An example of document type declaration:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd>

Explanation:

Notate the document type at the beginning of the HTML file before the tag in capitalised letters, as shown above. The exclamation mark follows the first arrow. The information DOCTYPE HTML PUBLIC follows afterwards. This means that the file is referenced to the publicly accessible HTML-DTD type. The information included in quotations marks can be interpreted as such:

W3C is the publisher of DTD. Information such as DTD HTML 4.01 Transitional means that you are using the file in the “HTML” document type, version 4.01 and its transitional variant. The EN indicates the language, in this case English. The piece of information concerns which language will be used to define the elements and attributes, not for the file’s contents.

The document type declaration then includes the web address of the document type definitions. This information is not mandatory. Simply entering:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
is also acceptable. Reading software can use the rules noted in the document type definitions to check the HTML file. However, most of today’s browsers already come equipped with the main document types, so that this isn’t necessary. Because browsers also have to deal with worst language disfigurations imaginable, they also possess the ability to display even mistake ridden HTML pages halfway decently. But with XML document files, it is very common that a parser stops loading the website if rules are broken, and instead only loads an error message. This is already the case with XHTML sites that are completed with the application/xhtml+xml MIME type.

The strict variant for HTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd>

Use this entry if you do not wish to use certain elements and attributes that were used in earlier HTML standards, and have since become replaceable. The interlocking regulations for HTML elements in the strict variant are naturally stricter, and structured more cleanly. For example, in this variant one cannot simply notate text in between the <body> and </body> tags. All content must be included in so-called block elements, such as headings, paragraphs, graphs, etc.

The transitional variant for HTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

You can use this entry if you need to use some of the elements or attributes not allowed in the strict variant. The rules for element interlocking are somewhat milder in the transitional variant. One is allowed to include naked text outside of any element in between the <body> and </body> tags. Moreover, this variant is necessary in order to edit links with target attributes, and correct direct framesets, for example.

The variant frameset for HTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
http://www.w3.org/TR/html4/frameset.dtd”>

This entry is envisioned for special HTML files, in which framesets are defined.

Older document type declarations:

It can become reasonable to refer to older HTML versions in some certain instances. However, this should only be done if the technical circumstances demand it. The following older entries are available:

<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 2.0//EN”>

Use this document type if you wish to refer to HTML 2.0

<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 3.2//EN”>

Use this document type to refer to HTML 3.2.

Some tips for using different document types

If you have become somewhat bewildered through the whole chaos of HTML and XHTML, HTML language variants, XML and document type declarations – you don’t have to be. The clutter has resulted from the large amount of development within the language.

For your first foray into the HTML language, you should only use the first presented fundamental framework as it is notated above. Then learn how to work with additional elements and attributes, as well as style sheets. After becoming a little more familiar with the language, it will make much more sense which document type to choose.