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.
Jul
2nd

Important Information on How to work on HTML Colour Codes

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

It is not easy for the beginners to make sense of the colour codes that are used in HTML. The HTML colour codes are been written in such a way that it has some specific reason. The colour codes of the HTML are been put together and are composed of the six hex numbers which would even represent the possibility of 16.7 million colour combination. The colour codes of the hex are been built on RGB colour model, where R is red, G is green and B is blue. In the typical HTML code it would look like #FFFFFF and it breaks down. Here in ‘#FFFFFF’, the initial two digits would represent the colour ‘red’. The next set of two digits of ‘#FFFFFF’ would represent ‘green’. The final and the third set of the two digits of ‘#FFFFFF’ would represent ‘blue’.

In the general mathematics the hex or a hexadecimal is the numeral system that has the base of the number 16 which is normally written by using the symbols from 0 – 9 and even A – F. the numbers from 0 – 9 would have the same value even in the decimal system but, it would start from the letter A, the value starts increasing till it reaches the value 16. A is equal to 10, B is equal to 11 and this continues till it reaches F, as F is equal to 16. This would be according to the hexadecimal system.

The colour model of RGB would be similar to the colour model of the HTML as it can represent the total of 16.7 million colours. It would vary among the colours green, red and blue. It would be possible for anyone to show the 16.7 million colours. The RGB value would be represented any of the numbers that is between 0 – 255. The set of the RGB values for white colour would be 255, 255, 255 for instance. Here you would also know how to establish the hex numeral system along with the numbers that are ranging from 0 – 16. After this you just need to combine both the hex numbers. You can even represent any numbers that is between 0 – 255. As you could even see that the colour codes of HTML and RGB represents some colour model.

Many years ago the monitors had the capacity to display only 256 colours. But even these monitors were very popular when HTML was put together. It would even be necessary to put the list of colours together as the web designers can also make sure that the given monitor could display it properly. The result of this would be the ‘web safe colours’. This ‘web safe colour’ palate would contain 216 colours. It would always be the good practise to take the standard colours over the board, but now it is not necessary to stick for the ‘web safe colours’. This rule might be excepted while developing the websites for PDA’s and even the mobile phones.


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.