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

Defining Headings

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

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.


No Comments
May
13th

Embedding Background Music

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

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.


No Comments
May
12th

Defining Side Borders

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

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.


No Comments
May
12th

Embedding Wallpaper

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

While displaying an HTML file you can set the wallpaper. The picture will then continuously be repeated throughout the display window, so that the wallpaper effect results. Relatively small graphics, that represent some abstract model, are especially well suited for wallpaper effects. We will offer some typical examples in a separate chapter regarding graphics.

The background graphic should be saved as a graphics file in either the GIF or JPEG format.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Embedding Wallpaper</title>
</head>
<body background=”background.jpg” text=”#990000″ link=”#0000CC” vlink=”#000066″ alink=”#000000″>
<h1>Text</h1>
<a href=”http://www.yahoo.com/”><b>Link to Yahoo</b></a>
</body>
</html>

Explanation:

The elements for embedding wallpaper result from the HTML file’s introductory <body> tag. With the background attribute you define graphics files as background pictures. The entire HTML file will then be displayed on the background picture shown here.

Take Note:

The background attribute has been characterized as deprecated and should be avoided in the future. You can achieve the same effect using style sheets, like so:

<body style= “background-image:url(background.jpg)”>

When general rules for referencing in HTML apply when entering the URI for the wallpaper.

The background picture applies for the HTML file, in which it is defined. If you produce a document from multiple HTML files, that all need to have a unified background image, then you must repeat the element in every file.

With text oriented HTML files you should use more low-key backgrounds so that nothing interferes with the reading. Attention grabbing background images should only be used if the entire site is constructed graphically and the graphics in the foreground fit with the background graphics.

Web browsers also interpret animated GIF graphics as wallpaper.

Internet Explorer knows an additional attribute, bgproperties= “fixed”, in the introductory <body> tag, with which you can produce unmoving background images. However, this attribute has never belonged to the HTML standard and can also be replaced with a CSS element, for example: <body style= “background-image:url(background.jpg); background-attachment:fixed;”>


No Comments
May
12th

Colours for the Background

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

You can determine a colour for the display window’s background. The entire HTML file will then be shown on this background colour.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html14/loose.dtd”>
<html>
<head>
<title> File Wide Colour for the Background</title>
</head>
<body bgcolor= “#CCFFFF”>
<h1>text, links, graphic references etc. </h1>
</body>
</html>

Explanation

The elements for the background colour in the HTML file are carried out through the introductory <body> tag.

With text you define a colour for the text.
With link you define a colour for links to already visited sites that have not been visited yet.
With vlink you define a colour for links that have already been visited.
With alink you define a colour for links that have just been activated.

Take Note:

All of these attributes have been classified as deprecated and should be avoided in the future. You will achieve the same effect with the help of style sheets, placed in the file header in between <head> and </head> using the following source text, for example:
<style type=“text/css”>
body { background-color:#663333; color:#FFCC99; }
a:link { color:#FF9966; }
a:visited { color:#FF9900; }
a:active { color:#FFFFFF; }
</style>

The defined text foreground colours should contrast with the background colours. If, for example, you define a dark background colour, then you should choose a bright foreground text (such as white, yellow, light green and light blue).

Additional Possibilities

When using style sheets you must then know how to define CSS formats. Then you will be able to use CSS attributes which we will describe in depth in later sections.


No Comments
May
12th

Logical Relationships to Other Sources

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

A tip for HTML beginners: the element we are describing here has nothing to do with normal, clickable links inside an HTML file. Such links are described in a separate chapter.

The possibilities described on this page do belong to the stone age of HTML (1995), and are unfortunately not supported by all popular browsers today. Nonetheless, they offer one the amazing possibility to explicitly declare internal hypertextual dependencies of an HTML file, such as the previous or next page, or the sub-page and more. Search services or software can then produce entire “Site maps” of your HTML project, as in graphical representations of the site’s layout.

Web browsers should, if you find such tags in an HTML file, display a button or similar user element for the tags. By clicking the buttons, the user should be able to jump to the linked destinations. Microsoft has yet to adopt this reasonable navigation possibility, while other browsers, such as Opera, have long used it. Firefox has economised the navigation possibility with an individually installable extension (Firefox Add-ons).

You can write tags such as home page, index, glossary, help, first, previous, next, last and so on for every HTML file. However, you can also only use the tags you require. The following example shows link elements defined for this page.

<head>
<link rel= “author” title= “About Us” href= “http://www.html.co.uk/about”>
</head>

Explanation:

With <link rel you introduce a logical file relationship. Afterwards the type of file relationship follows. The following are recognised attribute values:

rel= “contents” relates to the contents.
rel= “chapter” relates to the chapter.
rel= “section” relates to the section.
rel= “subsection” relates to the sub-section.
rel= “index” relates to the index.
rel= “glossary” relates to the glossary.
rel= “appendix” relates to the appendix.
rel= “search” relates to the search function.
rel= “author” relates to the author.
rel= “copyright” relates to the copyrights.
rel= “next” relates to the next file in the “guided tour”.
rel= “prev” relates to the previous file in the “guided tour”.
rel= “first” relates to the first file in the “guided tour”.
rel= “last” relates to the last file in the “guided tour”.
rel= “up” relates to a higher level chapter page in the domain.
rel= “top” and rel= “start” relate to the starting page or home page.
rel= “help” relates to the help section.
rel= “bookmark” relates to a general point of orientation.
rel= “stylesheet” relates to a file with style definitions that are used to display the site.
rel= “alternate” relates to files with the same content as the current site, but in a different document version.
rel= “alternate stylesheet” relates to a file with alternate style definitions, which can be used for displaying the site if the user so wishes.
rel= “shortcut icon” relates to the icon shown for the site in the favourites.

You can also write multiple link elements with the attribute values chapter, section, subsection, appendix, bookmark, alternate, stylesheet, and alternate stylesheet if desired.

The href attribute serves to ensure where link with a destination should lead to. The same rules apply with value allocation as with regular links.

You can define the caption used by the browser when displaying the link button with the title attribute. The information should describe the link destination.

The following possible attributes inside a <link> tag are:
media for determining the export medium.
target for information on the destination window, that the link should direct to. With frames it can be one of the defined frame windows. But a reserved window name can also be entered: target= “_blank” opens the link in a new browser window, target= “_top” opens the link in the entire browser window and prevents the display of all eventually displayed framesets, while target= “_parent” opens the link in an upper level frameset and frees the display from the inner frameset.
hreflang allows you to enter the link destination site’s language using the language abbreviations.
charset allows you to specify the encryption the link destination uses.

The link element can also have universal attributes.

Take Note:

Next to the effects of the link elements in HTML, there are also additional elements that serve to define certain downloadable fonts.

An example:
<link rel= “fontdef” src= “http://www.meine.com/fonts/chianti.pfr”>
That way you define the font called chianti.pfr inside the HTML file. We will examine the topic of downloadable fonts more closely in a separate section.
If you work in XHTML standard, then you must write the link element as content less. Write the standalone tag in the <link … /> form to do so.

Backtracking Relationships

Backtracking relationships are envisioned for “bidirectional” relationships between two HTML files. This is the case if document A links to document B and B also links to A, if both are logical linking targets for the other.

Just like the logical file relationships, backtracking in button form should also be possible, although the main browsers remain silent on this option. Search engines can reach interesting conclusions regarding a project’s hypertext structure with backtracking relationships.

An example from file_1.htm:

<head>
<link rel= “alternate” href= “file_2.htm” title= “second reading method”>
</head>

An example from file_2.htm:

<head>
<link rev= “alternate” href= “file_1.htm” title= “first reading method”>
</head>

Explanation:

With <link rev you introduce a backwards relationship. Otherwise the functionality is identical with <link rel used for the logical relationships to other sources. The same attributes are also possible. In the example above you can see how two HTML files, whose supposed content concerns the same topic from different points of view, can logically be linked with one another through backtracking.


No Comments
May
12th

The Address Base and Window Destination Base

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

You can write the internet wide and unique URI inside an HTML file loaded onto an internet server. A web browser that processes this information can then better access referenced or linked files. The base defined here functions as a suitable model for links to other HTML files or references to graphics and multimedia.

An Example:

<head>
<base href= “http://www.html.co.uk/”>
</head>

Explanation:

The file base element consists of <base href= …> and the exact file URI.

If graphics such as the following exist in the file:
<img src= “/src/logo.gif”>
The web browser then determines an absolute URI for this graphic:
<img src= “http://www.html.co.uk/src/logo.gif”>.

Take Note:

If it is important for you that your project remains easily transferable to other server computers in different directory structures, then you should refrain from defining an address base. Because with an element linking to a unique internet address, the web browser will continually attempt to load graphics and link destinations for the entered address. This makes testing a file on your local PC impossible!

On the other hand, the address base element provides a certain level of protection for the HTML illiterate who wish to save a HTML file locally or search the cache directory of their web browser. While locally accessing a HTML file, the web browser will always demand an online connection and then load the file from the address entered.

If you work in XHTML standard conform, then you must describe the base element as content less. Use the standalone tag in this form to do so: <base … />.

Window Destination Base

This element is useful in conjunction with frames, for example. It can determine for an HTML file, that is shown inside a frameset in a frame window, that all of the links within the file should be shown in a different frame window, as long as the link does not demand any other type of frame window. Because many link destinations in a file, which is shown in a frame window, actually should be displayed in a different window type, this one time element in the file header saves a lot of typing work and makes the file more manageable.

An Example:

<head>
<base target= “RightWindow”>
</head>

Explanation:

With <base target= … > you determine the default window in which the link destination should be displayed. The requirement for the above example is that the frameset is defined with window frames. You must determine the desired frame window by entering the window name with the name attribute in <base target= … >.

Instead of assigning a window name on your own, you can also use the following predetermined elements which are also useful for more than just framesets.
<base target= “_blank”> opens every link within the file in a different browser window.

<base target= “_top”> opens every link inside the file in the entire browser window and prevents all other framesets from being displayed.

<base target= “_parent”> opens every link inside the file in a upper level frameset and prevents the display of inner framesets. _parent and _top distinguish between each other when a window again contains a complete frameset.


No Comments
May
12th

Meta Elements Part 5: Forwarding, PICS, and more

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

This element has become quite commonplace, which is why we are also describing it here in out tutorial. Automatic forwarding of this type is often criticized based on the argument the destination site is unreachable for some visitors. Most browsers support such forwarding, however, depending on the settings, some might ignore it. Likewise, many search engine robots do not follow the forwards either. Another problematic area is the amount of time the web surfer must wait before being forwarded to another site. If the site contains another explanatory instruction along with the forwarding, then the user requires a certain amount of time before they will be forwarded. In many instances without such additional instructions, the waiting time is set to zero, so that the forwarding occurs immediately. This is especially problematic, if the visitor tries to use the back button, as they will still only be catapulted forward. Then the user is stuck at the website.

In practice, automatic forwarding is often used to direct a visitor from the old site of a web project, to the new site. However, in most cases it is more advantageous to use a “real” forwarding with HTTP status codes, although this is only possible with server side technology.

An Example:

<head>
<meta http-equiv= “refresh” content= “5; URL=http://www.html.co.uk/”>
</head>

Explanation:

With <meta http-equiv= “refresh” content= “…”>, you prompt the forwarding to another address. With content= “5, you determine in how many seconds the forwarding should start. So the 5 in the example means that the current site, after it has been loaded, will be displayed for 5 seconds. Afterwards the web surfer is directed to the URL entered in url=…”. Write the entire element, including the somewhat unusual placing of the quotation marks, just like it is written in the example above. Enter your desired display time and forwarding address. With local addresses on the same server you can write absolute or relative paths without entering http:// and the domain. The file name alone suffices for forwarding to files in the same directory. With a waiting time of 0, the forward destination website will be loaded immediately.

Take Note:

Do not assume that these elements will always work. If you have forwarded to a new address, it is best to also include a link on the original site to the new address. That way, users, for whom Meta elements do not work, will also find their way to the new site. Also be sure not to enter a waiting time that is too short. Finally, forwarding via HTTP, instead of using these meta tags, is essentially the optimal method.

Elements for PICS

PICS stands for “Platform for Internet Content Selection”. It concerns a standardised method of describing internet content. The formula exists in order to distinguish adult internet content from the rest. There are so-called PICS labels for this purpose. Web site developers can either voluntarily use PICS labels, or – and this is the more reasonable alternative – they settle on a PICS service that distributes PICS certificates for content.

We will not go into details regarding PICS systems. For more information you may visit the W3 consortium’s page on PICS. Modern browsers can recognise PICS content. Certain software side settings can be undertaken in order to allow the browsers to do so, by parents wishing to oversee their children’s internet surfing, for example. By comparing the PICS label of a site to the current configuration, the browser can then decide whether or not to display a certain site.

An example:

<head>
<meta http-equiv= “PICS-label” content= ‘ (PICS-1.1 “http://www.gcf.org/v2.5″
labels on “2004.14.05T08:15-0500″
until “2005.12.04T23:59-0000″
for “http://w3.org/PICS/Overview.html”
ratings (suds 0.5 density 0 color/hue 1))’>
</head>

Explanation:

Through the meta element http-equiv= “PICS-Label”, you can write a PICS label for a HTML file. The PICS label follows after content. The entire label is placed inside simple quotation marks. The syntax of the PICS label is then included with the parenthesis. Then the necessary information detailing the PICS version and the URI, where the content categorisation is defined, is included therein. The elements on, until and for are all optional. The ratings element is definitely critical, in which the actual content categorisation is written. The categorisation is then again surrounded by parenthesis. The PCS service, that distributes the PICS certificates, must determine what information is entered for the categorisation inside the parenthesis.

Diverse Meta elements

The following Meta elements are various collector pieces. They are often elements, which function with certain web servers or browsers, or are incorporated with editing software. Sometimes they are only the inventions of people who believe their HTML files possess magical powers. Here is a small selection of such meta elements.

<meta name= “generator” content= “MS FrontPage 2000”>
<meta name= “generator” content= “Netscape Composer”>
This element is included by HTML editors, especially WYSIWYG editors, without the knowledge of the author. That way software manufacturers can easily search the web and determine who is using their software.

<meta http-equiv= “set-cookie” content= “cookiename=cookievalue; expires=Sun, 01 Jan 2008 00:00:00 GMT; path=/;”>
Let’s you set cookies.

<meta http-equiv= “cache-control” content= “no-cache”>
Instructions for the browser not to use a cache, but instead load from the original site.

<meta http-equiv= “pragma” content= “no-cache”>
Instructions to the proxy agents not to save the file on a proxy server.


No Comments