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

Meta Elements: Part 4

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

Here we continue our section on Meta elements and the following topics more closely: using Meta elements for preventing your HTML file from being indexed by search engines, defining the file’s encryption, defining the script and style languages and ensuring files are loaded from their original address.

Allow or forbid your file from being searchable and indexed.

Most search engines take the following elements into consideration.

If you offer a HTML file online, but still want to prevent it from being reachable using public search engines, then you can note the necessary instructions for the search engine in the Meta elements. Of course, you can also signal to the search engine that you expressly wish for your site to be indexed and searchable.

An Example:

<head>
<meta name= “robots” content= “noindex”>
</head>

Explanation:

With <meta name= “robots” content= “noindex”> you forbid a search engine from transferring content from your HTML file to a search databank.

The following elements are also additionally possible.

<meta name= “robots” content= “index”>. With this you expressly allow the search engine to transfer content from your HTML file to its search databank.
<meta name= “robots” content= “nofollow”>. With this you forbid the search engine from visiting other files that you link to in your project. In order to forbid this as well, you could write <meta name= “robots” content= “noindex, nofollow”>.
<meta name= “robots” content= “all”>. With this you expressly allow the search engine to visit other files that you link to, and index them accordingly.

Take Note:

For those interested in the controlling of robots, we will dedicate a separate section to the topic later.

Elements for Encryption.

With the help of Meta elements, you can determine what encryption the HTML file uses. This piece of information is especially important for web browsers, because it tells the browser which encryption should be used to transfer the bytes into characters.

An Example:

<head>
<meta http-equiv= “content-type” content= “text/html; charset=ISO-8891-1”>
</head>

Explanation:

The element for the encryption is defined with http-equiv= “content-type”. This verifies that a designation is being made that normally is sent from the web server to the web browser in the HTTP header Content-Type. Then enter the MIME type for content, which is in the form text/html for HTML files. Then the information regarding the encryption follows, separated with a dash, in the formula of charset together with the unique encryption name. In the upper example we give the ISO-8859-1 encryption for West European languages. Encryption values are allowed as they are defined on the following web address: http://www.iana.org/assignments/character-sets.

Take Note:

You might ask why the element for encryption is actually charset. For historical reasons, in many technical standards, including HTTP, the term “Character Set” is used instead of “Encryption”.

Elements for the Default Languages for Scripts and Style Sheets

HTML offers the possibility to directly note formatting and script codes in single elements with the event handler and style attributes. Even if CSS is the usual style language and JavaScript is the usual script language, the HTML standard leaves it open which complementing languages can be noted in these attributes. So that a web browser knows exactly which script language you use, you can specify what languages you use within the HTML file.

An Example:

<head>
<meta http-equiv= “Content-Script-Type” content= “text/javascript”>
<meta http-equiv= “Content-Style-Type” content= “text/css”>
</head>

Explanation:

The elements for the default script language and default style language have a uniform construction. You introduce the information for the preferred script language with <meta http-equiv= “Content-Script-Type”, and the information for the preferred style language with <meta http-equiv= “Content-Style-Type”. With the content attribute you have to enter the MIME Type of the desired language. For example, text/css is for style sheets and text/javascript is for Javascript.

If the elements for the style language are missing and you still use the style attribute, then the browser must assume CSS is the style language. So specifically stating the style language is not usually necessary. The browser behaves differently with script languages and event handler attributes: a browser may strictly not accept Javascript, unless it has been instructed to. The default script language must be given, according to the HTML standard, as soon as you use event handler attributes.

Loading Files from Original Addresses

Any website that is frequently visited online is saved in between a so-called proxy server. That is then a so-called proxy cache. Browsers also save loaded internet websites on the user’s computer. This is termed a browser cache. In many instances the cache storage saves resources and time. There is one disadvantage; namely, the user can likely be shown information that’s no longer up to date, because new data exists on the original site in the meantime. With the help of Meta elements you can force the data not to be loaded from a cache, but instead from the original server. This element is recommended if you frequently change content in your HTML file and load it online.

An Example:

<head>
<meta http-equiv= “expires” content= “0”>
</head>

Explanation:

With <meta http-equiv= “expires” content= “0”>, you ensure the HTML file will always be loaded from the original address.

With content, instead of a 0, you could also enter a specific date or time. Doing so ensures the file will be always be directly loaded from the server after the entered time period. The date and time must be entered in the international format. For example, as content= “Sat, 5 May 2008 12:00:00 GMT”. Mon, Tue, Wed, Thu, Fri, Sat, and Sun are allowed as abbreviations for the day, while Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, and Dec are acceptable abbreviations for the months.

Instead of 0, you could also enter a number. This number then refers to the number of seconds, after which the browser loads a file in its cache from the original address. With content= “43200” you enter a value of 12 hours.


No Comments
May
9th

Meta Elements Part 3: Dublin Core Metadata

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

An international group of experts, united under the name Dublin Core Metadata Initiative, has developed a general system for Meta elements. Through which it is not only possible to express information about HTML documents, but also pictures, films, dates, and even physical objects. The system is easy to use and takes into consideration all the important information that can be conferred about an internet document. The Meta elements from Dublin Core have also been greeted warmly by the W3 consortium, who use them heavily with their RDF project.

Dublin Core primarily defines 15 attributes, or so-called elements, which can be assigned values. Additional sub-elements allow for special Meta elements. You will find a full list and description of the elements under the DCMI Meta data terms. The Dublin Core standard proposes some instructions for suitable schemata, including for media types, language abbreviations and information regarding the date.

The specification expressing Dublin Core in HTML/XHTML Meta and link elements describes how you should use certain Meta elements in your HTML file: The element name should be placed in the name attribute of the Meta tag, while the associated value should be placed in the content attribute. You can optionally enter the corresponding data format in the scheme attribute.

An Example:

<head profile=http://dublincore.org/documents/dcq-html/>
<link rel=“scheme.DC” href=http://purl.org/dc/elements/1.1>
<link rel=“scheme.DCTERMS” href=http://purl.org/dc/terms/>
<meta name=“DC.title” content=“SELFHTML: Meta elements”>
<meta name=“DC.creator” content=“Thomas Grady”>
<meta name=“DC.subject” content=“Meta elements”>
<meta name=“DC.description” content=“established Meta elements in HTML today”>
<meta name=“DC.publisher” content=“Thomas Grady”>
<meta name=“DC.contributer” content=“Ryan Howard”>
<meta name=“DC.date” content=“2008-5-8” scheme= “DCTERMS.W3CDTF”>
<meta name=“DC.type” content=“Text” scheme= “DCTERMS.DCMIType”>
<meta name=“DC.format” content=“text/html” scheme= “DCTERMS.IMT”>
<meta name=“DC.identifier”>
content=“http://www.html.co.uk/21/meta-elements-part-2.html”
scheme=“DCTERMS.URI”>
<meta name=“DC.source”
content=”http://www.w3.org/”
scheme=“DCTERMS.URI”>
<meta name=“DC.language” content=“en” scheme=“DCTERMS.RFC3066”>
<meta name=“DC.relation” content=http://dublincore.org/ scheme=“DCTERMS.URI”>
<meta name=“DC.coverage” content=“London” scheme=“DCTERMS.TGN”>
<meta name=“DC.rights” content=“All rights lie with the author”>
</head>

Explanation:

For programmes like search engines you can specifically define that your document is using the Dublin Core specification for embedding Meta elements in HTML.

With Meta elements, that belong to a certain public system, the name of the Meta element will be presented to the system as a short description. This prefix is DC for the 15 most commonly used elements with Dublin Core, and you must note DCTERMS for the sub-elements and schemata. The element name, or data format description, follows separated by a period. To clearly verify that all Meta elements with this prefix belong to the Dublin Core system, links are provided to the so-called naming space for Dublin Core. That way the uniqueness is ensured, even if other Meta data systems also operate with the same abbreviations.

With <meta name=“DC.title” content=“Title”> you can enter a title for the file, similar to the title element in HTML.
With <meta name=“DC.creator content=“Name”> you can reference the file’s original
creator.
With <meta name=“DC.subject” content=“Text”> you can specify the file’s topic.
With <meta name=“DC.description” content=“Text”> you can give a short description of the file’s content.
With <meta name=“DC.publisher” content=“Name”> you can enter who is responsible for the file’s publication. This can be the author themselves, or a publishing house, or a relative of a dead author.
With <meta name=“DC.contributor” content=“Name”> you can enter the co-authors or people who, next to the author, are responsible for the file’s content (such as translators, graphic designers, musicians etc).
With <meta name=“DC.date” content=“date”> you can enter when the file has been published. The date should adhere to a prevalent time and date format. You can specifically state, using the attribute= “DCTERMS.W3CDTF”, that the time entry adheres to such a system.

With <meta name=“DC.type” content=“Type”> you state the type of content you are making the Meta tags for. The following types are allowed:
Collection: If the content is a directory with links to sub-domains and the Meta elements are intended to describe the directory’s content.
Dataset: If the information is contained within a data set, such as a table.
Event: If the content is for an occurrence at some point in time, such as an exhibition or wedding.
Image: if the content is a visual representation, such as a photo, film, sketch or animation.
InteractiveResource: If the purpose of the site is based on interaction with the user, such as a registration form, embedded Java applet, or chat site.
PhysicalObject: If the site’s content concerns any physical object. Because this isn’t possible with HTML files, it makes little sense to specify it here. IF it is a visual representation of an object, choose image, choose text if it is a textual description, and sound if it is a sound description or effect.
Service: if the site performs a service, such as an online banking service.
Software: if the content offers software, for example, downloadable software and the Meta elements reference the software.
Sound: if the content is primarily acoustic, for example an embedded MP3 file or a streaming radio station.
Text: if the content is text oriented – regardless if it concerns literature, jokes, news scientific text or any other type of text.
Use the attribute scheme=“DCTERMS.DCMIType” in order to clearly specify that you are using these predefined types.

With <meta name=“DC.format” content=“Type”> you can state the file’s data format or media type. You can enter a MIME-Type for a value. The MIME-Type for HTML is text/html. You can make it clearer that the information concerns a media type in accordance with the official scheme using the scheme= “DCTERMS.IMT” attribute.

With <meta name=“DC.identifier” content=“value”> you can enter a unique number or address for the file. With websites, for example, this is the original URI. With the addition of scheme= “DCTERMS.URI” you make it clear the value is a valid URI.

With <meta name=“DC.source” content=”Source”> you can name the source from which the current file is drawn from or based on. In the example above we use a website as the source. However, you could name an offline publication or title. That would be the case if, for instance, the HTML file came from a book. If the source stems from an URI, then you can accentuate that with the scheme=“DCTERMS.URI” element.

With <meta name=“DC.language” content=“Language” you can enter the language in which the HTML file is written. A language abbreviation according to RFC 3066 is expected as a value for content.

With <meta name=“DC.relation” content=“Source”> you can enter what relation the current file has to any other projects it might belong to. The word in content should describe what type of relation.

With <meta name=“DC.coverage” content=“Text”> you can enter a geographical reference, or reference a point in time, for the file’s content. For geographical entries it can either be the location, longitude and latitude, a region, and the time reference can either be a date, or an age. We use a city name from the Ghetty Thesaurus of Geographical names as an example. The data format is noted as scheme=“DCTERMS.TGN”.

With <meta name=“DC.rights” content=“Text”> you can enter information regarding the file’s copyrights. You may also enter a URI where the exact legal conditions are specified. If you choose to reference a URI, then note the scheme=“DCTERMS.URI” attribute to ensure it is clear the value is a URI.

Take Note:

You do not have to use all of the Dublin Core Meta elements. It’s no problem if you only note the elements that make sense. Even noting the data formats with the scheme attribute is not completely necessary, but it is still recommended as long as the schemas exist.

Although the Dublin Core represents a well known and carefully worked through Meta data system, the practical uses of such Meta elements appear minute at first glance. The leading search engines completely ignore them, as a reaction to their previous misuse. So the use of Dublin Core Meta data is envisioned more where processing programmes can trust the Meta elements. Such Meta elements are well suited for the internal governing of large web sites, dynamically generating content directories, or internal website search functions, for example.


1 Comment
May
9th

Meta Elements: Part 2

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

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.


No Comments
May
8th

General Information regarding Meta Elements: Part 1

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

You can notate various types of useful information for web servers, web browsers and search engines using Meta elements. Meta elements can include information regarding the file’s author and content. They can also include HTTP orders, such as automatically forwarding to another address, for example.

Meta elements are not designed for personal commentary on the source text of a HTML file. Commentaries already exist for such information.

Since the HTML standard version 4.0, no one writes concrete Meta elements, instead they only define the fundamental construction of a Meta element. The W3 consortium is working on a language entitled Resource Description Framework, for standardising Meta elements. More information regarding the Resource Description Framework is found on the consortium’s website.

Be sure to note a Meta tag in the HTML file’s header for every Meta element. It is no problem whatsoever to notate multiple Meta tags.

Examples:

<head>
<meta name=“author” content=“John Smith”>
<meta http-equiv=“expires” content=“Sat, 01 Dec 2007 00:00:00 GMT”>
</head>

Explanation:

A Meta element exists in a standalone tag named Meta. Every Meta tag has two attributes. The attribute is either the name or http-equiv, while the second is always content. The two attributes produce typical configuration data of the type “attribute=value”. In the above example, the name was given the attribute “author”, while the content was given the value “John Smith”. In the second Meta example, the attribute named expires was given the value Sat, 01 Dec 2007 00:00:00 GMT. However, in the second example the attribute was defined with a http-equiv.

Attributes that are defined with name, are directed primarily towards reading client programmes, as in web browsers, but also towards search engine robots, which scan websites to feed their search engine data base.

On the other hand, attributes that are defined with http-equiv, were originally thought out for web servers. The idea behind it is when the web server receives the request from a web browser to transfer a HTML file, the web server first reads the Meta tags and information defined with http-equiv, before sending the file to the browser. This makes it possible for the file author to influence the communication between the web server and web browser. However, instructions of this type rarely achieve their desired effect, because most web servers do not read the data before sending the file to the browser. So it is then the web browser’s responsibility to interpret Meta instructions, such as the HTTP header.

Take Note:

Unfortunately, many people misuse Meta elements. Because most Meta elements have no apparent effect on the screen and are also involved with search engines, there are many ambitious people who feel they can somehow tweak with the Meta elements to get their site at the top of a search engine’s search results. After website developers used paradoxical and misleading Meta elements, the major search engines decided to no longer give any special attention to Meta elements. They instead place value on content and calculate the relevance of the site in terms of how many foreign sites link to it. Therefore, a homepage will not become successful through misleading Meta elements. A clean homepage includes the reasonable use of Meta elements.

If you work in the XHTML standard, then you must characterise the Meta elements as content less. To do so, notate them in a standalone tag in this form: <meta name=“Attribute” content=“Value” />.

Description, Author, Keywords, and Date

The Meta elements described here are the most prevalent, and they are read by nearly every search engine. Today’s popular search engines even still take them into consideration to a certain degree. The information is still important, especially for internal search programmes that need to rely on the accuracy of Meta elements.

You can notate your authorship, briefly describe the content, specify keywords and the date of publication. The short description, especially, is displayed by many search engines in the search results. It is therefore wise to include these Meta elements in all relevant HTML files and produce them just as carefully as you would the full bodied text to be displayed in the web browser.

An Example:

<head>
<meta name=“description” content=“this description should appear to a user when finding this website as a search result.”>
<meta name=“author” content=“Jim Jones”>
<meta name=“keywords” content=“HTML, meta information, search engines, HTTP protocol”>
< name=“date” content=“2008-5-8”>
</head>

Explanation:

With <meta name=“description” content=“description text”>, you determine the description text.

With <meta name=“author” content=“Author Name”>, you show who the HTML file author is.

With <meta name=“keywords” content=“list of keywords”, you determine the file’s tags or keywords for a search engine. A user, who searches using the same keywords as the ones specified in the Meta element, should have this website appear as a preferred result. Separate the keywords with a comma. A keyword can consist of two separate words or one word. However, entire sentences, or even half sentences, do not belong here, because that is what the descriptive text you notate using the name= “description” is for.

With < name=“date” content=“the date”>, you enter when the file was published. The time entry should follow a specific formula. In this case it begins with the year, 2008, followed by the month, May, and finally the date, the 8th. We have still only scratched the surface of Meta elements, but in the interest of organisation, we have decided to separate the tutorial of Meta elements into multiple parts. The next section follows after this one.


No Comments
May
7th

The HTML File Title

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

Every HTML file must include a title. This is especially important for the following reasons:

  • When the web browser opens the page, the file title will be shown on the page’s title headline.
  • When the web browser opens the page, the file title will be shown in the web tabs.
  • The file title will be used by the browser for setting bookmarks.
  • The file title will be shown in the web browser’s list of previously visited sites.
  • The file title serves as an important piece of information for many online search engines. If the file appears as a search result, then search engines often present the file’s title as a clickable link.

An Example:

<head>
<title>Tutorial for HTML Beginners</title>
</head>

Explanation:

The title is notated inside the file head in the ground framework of a HTML file. The <title> tag introduces the information regarding the title. Then the title’s text follows. The title entry is closed with the ending </title> tag.

Take Note:

The title should not be too long. We will go over descriptive file designations in a separate section on meta elements.

All the rules for the character set, special characters and HTML unique characters, apply for the title as well.


No Comments
May
7th

Searchability for Server Communication

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

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 … />.


No Comments
May
7th

Good HTML Style

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

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.


No Comments
May
6th

Separating Information and Organising the File

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

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.


No Comments