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.
Oct
27th

How and why you should use META Tags

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

META tags are a very important element of HTML because these can help direct large amount traffic towards your website or you can also hide a certain page from being a search engine. These META tags should be decided intelligently so that your website can be easily searched within a search engine. We can say that META tags are basically used to specify keywords, description and a page’s title. These are of various types and each type has a very important role to play.

The META Description Tag

This is one of the most important META tag and is put for influencing the readers. It generally consists of 200 to 250 characters but only a small part is displayed on the screen. When you search for something on a search engine the first thing you get is a title but this title is provided with certain information and this small description is known as the description META Tag. You are only able to read a small portion of the article and for reading the entire article you will have to click on the title and open that particular webpage. The biggest benefit of creating a META Description Tag is that it provides some control on a number of crawlers. The simplest form of doing it is taking the first sentence of your body copy and using it as a META Description Tag.

The META Keywords Tag

Another very important META Tag is the META Keywords Tag. The META Keywords Tag provides extra text for a number of crawler based search engines. These Tags are normally ignored by most of the crawlers but it can still provide you that slight edge over others. The META Keywords Tag should be decided intelligently in order to get positive results. This can be explained by an example lets suppose you had some page that was all about “car rental” and you have mentioned the same word a few times in the actual page then you should take “car rental” as the META Keywords Tag. If you follow the above mentioned step then the META Keywords Tag will definitely boost the page. On the other hand if your page does not have the words “car rental” then keeping it as a META Keywords Tag is of no use. Hence we can say that this META Tag works in conjunction with the text that you have in the body copy. But there is no guarantee that all crawlers will support it but may be a few will which will help improve the ranking of that very page.

The META Robots Tag

The META Robots Tag is very important as well. This Tag helps you to specify that some particular page should not be indexed by any search engine. You can easily keep out the spiders by adding the text in between the head tags of the page which you don’t want to get indexed. The important thing is that this META Tag is supported by all crawlers and by using it you can easily block any page that you want.


Oct
5th

Using HTML Tag Attributes: How to Correctly Use Attributes and Tags in HTML

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

HTML tags are the basis for web page design. For more flexibility in designing HTML were defined attributes for HTML tags to change the behaviour of a specific HTML tags. There are many cases when designing a web page if you want to change the default behaviour of tags. For example, you could change the background colour of the entire page or a section of the page. You can change the alignment of some text or a unique style for the representation of a tag.

Here are some examples of HTML attributes

HTML tag is used to change the background colour or image for the whole body from a website. Understand that browser displays the contents of the body tag on the greater part of the site. By default, the background of browsers used when the tag <body Begegnung> is white. If you want a background colour other than white, use the bgcolour attribute. The following day will change the background colour of a Web page from the default white to gray <body bgcolour = “gray”>

If you want a picture, including the background to a web page, you can use the following code:
<body Background = / images / background.gif>
This example assumes that you have specified a folder on your Web server images, and in this case, there is an image called background.gif. In the case of an image in the background when the image is not large enough to fill the entire bottom of your Web site, the browser displays the image repeated vertically and horizontally to fill the background.

Link with anchor tag

The World Wide Web, the basic benefit depends on their ability to integrate documents and on the Internet so that users with a fast connection from one side to the other side. Linking documents to HTML via the anchor (<a>) tag. The anchor tag is not in itself sufficient to say, a link to the browser, too.

<a href = http://oursponsorssite.com> Visit our Sponsors </a>
This specific HTML code intimates the browser that the text “Please you should visit our sponsors” is the anchor text of a link. When the user clicks on the anchor text, it is referred to oursponsorswebsite.com URL.

Displaying an image using the image tag

HTML pages would be pretty boring without the use of images. The need to tell the browser to find where an image is a good example of how to use the HTML attributes. The images are included. Insufficient Similar to the anchor tag above example, the tag would be alone. The attribute image tag “src” is necessary to tell the browser where to display the image, as in the following example:

“/ <img src = images / logo.gif” width = “150″>

this block of code tells the browser to place an image in the document. The browser will be directed to the image file logo.gif from the images reach the top level folder for the document. You can also specify the width attribute defined in the day.


Oct
5th

Create a Web page using HTML: Covering the Basics and Bare Minimum

This article describes how to create a web page using HTML (Hypertext Markup Language). You can use the steps outlined here with a simple Web browser and Windows Notepad. However, make sure you register with HTML files. “HTML”. Notepad appends. “Txt” extension

The HTML files contain structures known as tags. Tags, text, particularly left and right hooks around like <html> or </ html>. Note: Normally, there is no space between a colon and the text. However, the rooms will be used in this article. In this way, the tags appear as text and not executed as code from a browser.

<html> mark the beginning of the code and HTML </ html> indicates the end. They can also add tags to add an additional structure. Generally, the “head” and then “body” are mentioned in the section between the tags. Thus, our single file can be written as <html> <head> </ head> <body> </ body> </ html>.

1. Add a title to the HTML file. In general, the HTML files containing a title (Note: This is not the same as the header. “Head will be presented below in step 3). Title defines the text in the “title bar” of the browser display when you make a specific page. Titles are placed in the “head” (that is, between the header and </ head>). For example, one could simply file contains the following titles: <title> this is the title </ title>

2. Add content to the site. In step 1, we set the text in the title bar of the browser window appears. However, to display text in the browser window itself, we need (this text in the body section of the file In other words, between <body> and </ body>) tag. This can be done with the paragraph tag, <p>. For example, for “HTML Web Design is an interesting area. The developer shall install a functional and useful website,” We have <p> HTML Web Design is an interesting area. The developer is required to install a site functional and useful web </ p> in the body section.

3. Add a header. Then we add header content of the paragraph. Text header is usually larger than paragraphs of text. Use the “real” size can be defined by CSS (Cascading Style Sheets). Although not covered here, will be CSS in the Learning mentioned HTML – Part 3 – Basic CSS formatting “section. A header can be added to the lineup <h1>. Thus we can write the following headings : <h1> HTML Web Design </ h1>

4. See code page. In general, sites on the Internet containing the constructs above (together) with a number of other encoding functions. To see the HTML used to generate a page, go for it and the View “> Select Source” or “View>” Source option menu. Using the menu, try <title> research <h1> <p> and tags on a page.

The above are the simple steps to create a webpage with the use of notepad and browser.


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.


May
5th

Getting to know the Basics of HTML: Tags, Elements and Attributes

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

Anyone with extensive HTML experience can easily skip this tutorial. However, novices, and even those who wish to brush up on their basic HTML knowledge, could stand to gain from this section. We will go over and define the various pieces that make up HTML code, including elements, tags, attributes and their uses.

Elements and Tags in HTML

HTML files only consist of text. There are certain characters, all from the regular character supply, for distinguishing parts of the text.

The content of HTML files is placed inside HTML elements.

Here is an Example:

<h1>HTML – the language of the web</h1>

This is how it actually looks:

HTML – the language of the web

Explanation:

The example shows a first order heading. The introducing <h1> tag signals that a first order heading is going to follow. The closing </h1> tag signals the end of the heading. A closing tag begins with a left arrow and a forward slash, like “</”.

Pay Attention to the Following:

With standard HTML, it doesn’t matter if tags are notated in lower- or uppercase. Therefore, <h1> and <H1> mean the same thing in standard HTML. However, in the new HTML variant, XHTML, element names must be written in lowercase. So it is recommendable to always write the element names in lower case, regardless if writing HTML or XHTML.

Another Example:

One line and a manual line break<br>
The next line

Here is what it looks like:

One line and a manual line break

The next line

Explanation:

The <br> at the end of the first line signifies that a manual line break will be entered at that point. (br=break).

Take Note:

If you want to write elements in XHTML correctly, then elements with standalone tags must be notated differently: instead of <br>, they must be notated as <br />. The element name must be written with a closing forward slash. Alternatively, you could also notate the element as <br><br/>, with an introducing and ending tag, but no content. We will go over this more in depth later on in some of our other chapters.

Interlocking Elements

Elements can be interlocked with one another. A hierarchical structure then results from this technique. Complex HTML files contain many interlockings. This is why many experienced HTML programmers talk of structured markup.

An Example:

<h1><i>HTML</i> – the language of the internet</h></p>

Explanation:

The i Element stands for italics. The text between <i> and </i> will be displayed in italics, depending on the font and size of the first order heading.

Attributes in Tags

Introducing and standalone tags can include additional information.

An Example:

<h1 align=“center”>HTML – the language of the web</h></p>

Explanation:

The align=“center” attribute makes it so that text is centred.

There are the following types of attributes present in HTML elements:

  • Attributes with value allocation, where only certain values are allowed. Like with <h1 align=“center”>, for example. Here only the values, center, right, left and justify are allowed.
  • Attributes with free value allocation, but where a certain type of value or convention is expected. Such as with <style type=“text/css”> (this defines the field for style sheets and MIME types are always constructed as type/type below). Or <table border=“1”> (This defines the pixel strength for a table border and a numerical input value is expected.)
  • Attributes with free value allocation without any further conventions, like <p title= “Introduction to HTML”> – an entire text can be entered here if desired.
  • Standalone attributes, such as <hr no shade> (a separator with no shade). Although standalone attributes only exist in standard HTML. If you wish to write in XHTML correctly, then you must notate the attribute as <hr noshade=“noshade”>. We will of course discuss more of the differences between XHTML and HTML later on.

Even though standard HTML allows certain attributes to be written without quotation marks, you should not use this option. It lowers the possibility of mistakes when you fundamentally and always place all values allocated to attributes in quotation marks. Either ‘ or “ can be used, it is only important not to use different types with the same value.

The same holds true for element names holds true for attribute: with HMTL it makes no difference whether you write in upper- or lowercase, but in XHTML all attribute names need to be written in lowercase. The difference in a lower or uppercase value can sometimes be important, depending on the type of value.

Next to attributes, that are only present in certain HTML elements, there are also so-called universal attributes that are allowed in nearly every HTML element.

An Example:

<p id=“Introduction”>Text</p></p>

Explanation:

The example defines a paragraph of text with <p> and </p> tags. A universal attribute is notated in the introducing tag, namely, the id attribute. This allows you to give distinct names for single HTML elements throughout the document. We will go over universal elements in more detail in a separate section.

HTML Parser

A HTML parser is understood as software that recognises HTML and transforms it into structured text. Every web browser possesses a HTML parser in order to even understand HTML to begin with. Unfortunately, such parsers are often confronted with HTML coding mistakes in most websites. Usually the mistakes are small and not too tragic, but some websites’ HTML source code so horribly disfigures the rules of HTML that insufficient is not strong enough of a word. Strong parsers, which check exactly how much a website adheres to the rules, should not display such insufficient websites and instead provide an error message. However, such a parser would hardly have any chance on the open market, because it would barely display a single prevalent website. As a result, today’s parsers are all fairly accepting and most simply digest everything. Internet Explorer has taken this loose parser type the furthest. This allows them to proclaim they “command” HTML the best, while many experts feel their practice is only furthering sloppy and mistake ridden HTML coding.

It has become more and more important to adhere to the rules of HTML in the face of increasing complexity resulting from numerous languages, such as HTML together with embedded CSS, Javascript, PHP, etc. We will describe these important rules in more detail in a separate section.

If you want to see for yourself if your HTML website conforms to all the rules, then a so-called validator is a very useful tool. A validator reads an entire site, determines which document type is given for the site, and then strongly checks how well the site adheres to the corresponding rules.

The oldest offered validator comes from WC3: validator.w3.org. There you have the possibility to either upload a file from your computer, or give the validator a web address to check.