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.
Sep
5th

HTML Frames

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

One of the most basic elements of the HTML document is the frame. A frame is basically a device which allows you to open two or more pages in the same window. Mostly the frame concept is used in cases where you wish to split the window. As is the case with many websites, the left hand side is like a navigation strip, a separate page which is a tabulated list of the topics with the relevant links, while the right hand side shows the content related to those topics.

Reading this you might be misled into believing that there are two pages in the window but there are in fact three pages. One tends to forget there is one page which is holding both the pages. This page is called the ‘container’ page, which contains both the pages. All we need to do is open this page and both the other pages automatically open in this page. The format of this page is similar to any other pages.

The HTML frames concept is generally regarded as quite complicated and very hard for new users to grasp. There is an on-going debate among the champions and critics of frames. The critics feel that frames are associated with a few problems, which is why they wish new users to avoid them.

One popular opinion is that they interfere with the basic concept of the web. The web is ideally supposed to be a group of pages, each page with a separate URL and these pages are simply interlinked. On the other hand, frames allow number of pages to have the same URL and when one bookmarks any of these pages, they end up with the URL of the container page.

A second problem with the frameset pages is that they are not browser friendly. Although not a problem now but a bunch of earlier browsers could not access the framed pages. Even now, when such pages are opened on devices other than computers, like palmtops or phones, they do not allow the browser to resize them which makes page viewing cumbersome. Similar to the resizing issue is the printing problem. Browsers find it hard to print such pages and the prints are never satisfactory. There is also the general overall feel that such pages are hard to code especially be novice coders.

Arguably the biggest problem with frames is that they are not search engine friendly. Even search engines like Google do not go through the content of the internal pages and only read the content of the container page.

The champions of frames on the other hand feel the benefits they create are worth a few hassles and they mostly cite the example of inline frames. Inline frames are special frames which circumvent most of the aforementioned problems. Inline frames are also called floating frames. The basic difference between these and the conventional frames is that these pages open in your container page like images or tables would. The coding for these is also quite easy and they present no obvious problems.


No Comments
Jun
20th

META Tags

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

META tags are very important nowadays because modern web sites are optimized for search engines. Today SEO (Search Engine Optimization) has become a critical strategy to drive the web traffic towards the web sites. Thus it has become necessary for web developers that they design and create the HTML documents in such a way that it gains higher rankings in the search results. While creating a search engine friendly web site, the ‘Meta Tag’ of Hyper Text Markup Language (HTML) plays a vital role.

The Meta Tag is a special tag which is used to insert the description and keywords for the web pages. The content of these tags is not displayed in the web browser. It is only used at the backend by the search engines and web crawlers in order to prepare their indices. Unlike the other tags, Meta Tag does not affect the visual appearance of the web page. It does not format the characters, tables, forms etc. META tag does not have an ending tag with a slash ‘/’ too. These are only used to provide information about the website to the web crawlers and make them understand what the web site is all about. Meta Tag is inserted within the <HEAD>……</HEAD> tag.

There are different types of Meta tags which can be included in the HTML document. Each of them is used to provide different type of information which the search engines may use to rank the web page. Meta tags can be used to give information about page title, page description and page keywords. For the purpose of search indexing, the ‘Keyword’ Meta tag and the ‘Description’ Meta tag are the most important ones. The Keyword Meta tag contains all the keywords which are relevant to the web site. The Description Meta tag contains a short, best possible description of the web page. One thing which should be kept in mind is that keywords and description in the Meta tags should not be too short or too long. If it’s too short it will not be very much effective in getting your web page a good rank and if its too long, then it will be considered as a spam and the website will be blacklisted by the search engines. In order to avoid spamming make sure that the keywords are not repeated again and again. To increase the effectiveness, one must use those keywords which are commonly used by the web users while searching for web pages via search engines.

Example of Meta tag:

<HTML>
<HEAD>
<META name=”description” content=”Information about the deployment of meta tags.>
<META name=”keywords” content=”metatags,keywords,search engine,marketing”>
</HEAD>
</HTML>

In the above example, there are two META tags used. One is used with the description attribute and it will be useful in introducing the web site to the search engines. The second META tag is used with the keywords attribute which have metatags, keywords, search engine and marketing as the keywords. Now whenever any inter user will type any of these keywords during a web search, this HTML document will be taken into consideration by the search engine. How it is ranked, depends upon the web site content and search engine algorithms. If wisely used, the Meta tag can earn a good ranking for your web site.


No Comments
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