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

CSS Line Spacing is Obtained using the CSS-Line Height Property

CSS line spacing is obtained by using CSS-line height property. This has five different values

Normal – a browser will determine the value of the line spacing that will be related to font size. Usually, this is same as that of the font size or it is slightly larger

Inherit – line spacing must be taken from parent’s elements line spacing. Therefore, if you set up the line-height of the body tag to about 30% larger than that of the font size and paragraphs tags inside will inherit and then they will have line height of 30% larger than that of the font-size as well.

A number – if these line height values doesn’t have u nit of measure, then would be considered as the font size for line height.

A length – if these line height values has unit of measure then that will be the exact amount of space, which should be there between the lines.

A percentage – if line height is percentage, then that percentage would be the font size percentage. Therefore, if a line height were 125% then it would be 25% larger than that of the font size.

Which is the value that should be used for CSS Line Spacing?
In the majority of the cases, one of the best choices for the line spacing is to set up the default spacing or normal. The default or normal are generally readable and it doesn’t require any special things to be done. However, if the line space is changed, it gives different look to the text.
If the font size is defined as the percentages or ems, then the line height should be defined in the above stated way.
Set up the height for the print style sheets along with a point value. Print measure is the point and the font sizes should be in points.
Few people do not make use of number choice, as it is confusing to people. Most of the people think that number is perfect size and because of that they make it large.

How much space must be used for the line spacing?
As it is mentioned above, it is always recommended to use the default size in line spacing and if you want to change the line spacing, you should have some specific reasons to do. There are different affects while changing the line spacing
It is difficult to read the text that is too tight together. However, the mood of the text will be affected by the small line spaces. If the entire text is crunched altogether, then it is able to sense the text tenser or seem darker.
It will again be difficult to read the text, which is farther apart. However, if there are wide line spaces, then the text seems to flow.
Changing the line space will be able to make the text otherwise would not fit in the space be compact or would take large space in the designs.
If you want to see what will happen in the various line spacing options, you have to check the examples of CSS Line Spacing.


Jul
17th

Guide to Dynamic HTML attributes

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

When setting out to write the dynamic HTML, you’ll need to understand various ways where you will be able to impact the elements on pages. Normally, elements will be able to have one more of following attributes that will indicate an action moment in referencing the page. Once you have decided on when you will want to make the dynamic action to occur, you can add up your scripting language to anyone of these attributes and make the element more dynamic.

Some Notes
The common way to write all these attributes is with the mixed case but with the XHTML, the attributes must be written in lower case. This will mean that OnClick and onclick means same thing but in XHTML, onclick is valid.
Finally, all these attributes are very much valid but not all the browsers will support them in same ways, so you have to be sure to test your own scripts just before releasing them.

Event that are mouse related.
Onclick
Onclick attribute is the one which is commonly used DHTML attributes. This will tell browser to implement all the scripts when element is clicked rightaway with the mouse or with the pointer.
The onclick attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Ondblclick
Just like onclick attribute, this ondblclick attribute will take effect when element is double clicked. This not commonly found on the web pages but will give your WebPages the same functionality as that of OS icon.
The ondclick attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Onmousedown
When the pointer or mouse button is pressed down the element, the onmousedown attribute will activate.
The onmousedown attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Onmouseup
When the pointer or mouse button is released down the element, the onmouseup attribute will activate.
The onmouseup attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Onmousemove
When the pointer or mouse is moved within that element, then the onmousemove attribute will be activated.
The onmousemove attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Onmouseout
When the pointer or mouse is moved off from the element, the onmouseout attribute will be activated.
The onmouseout attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Onmouseover
When the pointer or mouse is moved on to the element, the onmouseover attribute will be activated.
The onmouseover attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet


Jul
15th

Beginners Introduction to DHTML references

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

When anyone says that they use DHTML (Dynamic HTML), what does that mean really? The DHTML is basically made of 4 things and they are

1.Valid HTML or XHTML
2.Cascading Style Sheets (CSS)
3.JavaScript
4.DOM (“The Document Object Model”)

If you use the JavaScript in order to interact with the customers, you might have created the dynamic page but you will really do not have DHTML until and unless you use all the 4 parts into it. Interaction between the 4 elements will give your readers an experience that will use all the powers of the 4.0 browsers.

One of the best sources to learn the DHTML is by the books that are written by some of the experts. The books written by the experts will let you know on all the things such as DOM, JavaScript, CSS, and HTML

HTML 4.0 References
The very first thing that you must learn while starting off with the DHTML is the XHTML or HTML 4.0. Both the XHTML and HTML 4.0 are optimized for the DHTML and have the hooks built inside it in order to interact with DOM more seamlessly.
The structure of HTML 4.0 document from Web Design Group
This document will definitely give you a good overview on how the HTML 4.0 document will work exactly, that includes the structure of tags, on how to escape from the special characters, and at the end an HTML 4.0 validator as well.

JavaScript for the DHTML References
The JavaScript will be tricky as well but is an essential part of the DHTML pages.

CSS (“Cascading Style Sheets References”)
Along with the HTML coders who have designed HTML at their heart, CSS is the best tool that has ever come up with it.
The “Style Sheet Dependence” from Web Design Group
While most of the people are making use of the modern browsers, if at all you miss use the CSS, then you will be able to get some of the pages which will be pretty awful and this article will show on how to avoid this to happen.

DOM (“Document Object Model References”)
The DOM or “Document Object Model References” is one of the newest members of HTML family and also it is one of the hardest to master as it is very much stiff enough. You will definitely understand Dynamic HTML if you understand the DOM as it will be very much useful and important as well.
The DOM (“Document Object Model References) from W3
If at all you would want to start to learn the DOM, you must start at from the source.

Learning the Dynamic HTML
One of the best ways to learn the Dynamic HTML is by playing with it. You will be able to use the tools such as FrontPage or Dreamweaver in order to get started with coding but if you really want to know on what the Dynamic HTML is based on, then you should jump into learn the JavaScript and HTML.


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.


Jun
14th

Guide and Introduction to the HTML Colour Code Set

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

Have you wondered ever on how the HTML colour code set will work together? Just for the beginners, it will look like several letters and numbers will not make no sense. The fact is that the HTML colour codes are very much written in the way for the specific reason that we will be looking below in this article.

Introducing the hexadecimal system
The hexadecimal system is just a numeral system with the base of 16 that is usually written using from 0-9 and A-F. Numbers from 0 to 9 have exactly the same values in the decimal system but they will start with the letters starting from A and going up to the value of 16. Here, A is worth 10 and it goes up to F which has value of 16.

How the colour codes are put together.
The HTML colour code is composed of 6 hex numbers that will be representing around 16.7 million colour combinations. These hex colours are built on the model of RGB. Here, R is for Red, G for Green and B stands for Blue. The typical HTML code looks like this: FFFFFF breaks as follows. The first 2 digits #FFFFFF will represent the colour red and the second set #FFFFFF stands for green and the third set #FFFFFF will stand for Blue.

Overview of RGB model
The RGB model like that of HTML colour model will represent more than 16.7 million colours. Just by varying the amount of Green, Red and Blue, you will be able to come up with any of the 16.7 million colours as well. Here the RGB is represented by the values from 0 to 255. So the value for the colour white will be somewhat 255, 255 and 255.

Putting the RGB and HTML together
Whenever you combine the 2 hexagonal numbers, you will be able to represent any type of number between 0 and 255. As you will be able to see that, the HTML and RGB colour codes will represent the same model of colour.

Colour Palette of Websafe
In the past, monitors used to display only 256 colours. When HTML was put together, the monitors with the 256 colours were very much popular. As it was very much necessary to put up the list of colours that the web designers could have to be sure that any given monitor could display properly as a result of this Websafe are colours. This Websafe colour palette is made of totally 216 colours.

Always it is a good practice to pick up the standard colours all across the board but it will not longer be necessary to stick up with the Websafe colours. By doing so it is now used for more purposes for holding to standard than it is for the necessity. One of the exceptions for this rule is developing the websites for the PDA’s and mobile phones. Now all the devices are crossing all the barriers that were used to be in the past.


May
28th

Why should you learn HTML? Here are some important Reasons

Author: Editor | Files under General Website Information
Tags for this article: , , , , , , ,

In today’s modern world, all the works are governed by internet and each and everyone wants to build their own Website and one of the major questions that come in mind is how to build? At this time the research begins. During the research, most of the times you will be on the same media and at last you will end up with more number of questions than answers. So how will handle all the information that you gather? This might happen because you have to know the answers to the question such as “just use WYSIWYG Editor or else should i lean HTML code? What will be better for me?” Answers for these questions will depend upon all your expectations, intentions and needs as well. In order to clear all the things, you have to know the difference between WYSIWYG and HTML editors.

Time to learn

Learning WYSIWYG editors is the biggest advantage as using this it is easy to build any Website. For the people who write a letter in their text editor or draw the image in their picture will know what it is all about. On the other hand, writing in the HTML language tends to be complicated although it is an easy language. HTML is just a markup language and one of the reasons why it is easier then many other languages is because the resulting Webpage is interpreted by the codes. Learning HTML will give you long time advantages.

Time to build

While building a Website, time is one of the diffuse points. During the building of a website, the time will depend upon the expertise of the designer and most probably, the Website can be finished faster by using WYSIWYG editor.

Portability

HTML codes can be written in any of the text editor but you will not be able to build a website using WYSIWYG editor.

Code properness

when you’re using the WYSIWYG editor, the Webpage that is created should be in the visual way that is translated into the HTML code by the editor itself. When using the language of HTML, designer is the person who will be deciding on the codes which are to be used and which are not to be used.

Reach

The WYSIWYG editors that are available today brings you the advanced and easy solutions to all the designers incorporating the server side languages, markup languages, plug-ins, client side language and many more.

On the other side, HTML is just an HTML, but if you are a visionary then you will see that the HTML as the doorway for further learning.

Credibility

If you are trying to get a client or else you are working for a client already, it will not be the same to say that you know how to handle HTML and it will just say that you know to handle WYSIWYG editors only. By learning HTML, it gives additional point that is credibility.


May
11th

What is DHTML? (Dynamic HTML)

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

DHTML is really not a new pattern of HTML, but quite a new way of looking at it and controlling the standard HTML commands and codes.

When you’re thinking of DHTML, you should remember the qualities of the standard HTML and it should be remembered especially when once a page is loaded from a server and it will not be changed until and unless another request comes to that server. DHTML will give you additional control over the standard elements of HTML and also allows the user to change it any time even without returning to the main Web server.

There are actually 4 parts to DHTML:
Scripts
XHTML
CSS (Cascading Style Sheets)
DOM (Document Object Model)

DOM
Document Object Module (DOM) is the one that allows you to get the access for any part of the Webpage and to change the Webpage using the DHTML. By DOM, all the parts of the Webpage are specified and you can even access and also change their properties by using its consistent naming conventions.

Scripts
Scripts that are written in either ActiveX or JavaScript are the two common writing or scripting languages that are used to activate DHTML. In order to control the objects that are specified in the DOM, these scripting language are used.

CSS (Cascading Style Sheets)
Cascading Style Sheets are used in Dynamic HTML in order to control the feel and look of the Web page. These Style sheets will define the fonts and colors of the text, the images and background colors and also the placement of objects in the page. Using DOM and the scripting, you can even change the style of different elements.

XHTML
XHTML4.x or XHTML is used in order to create page for itself and also to build some of the elements for the DOM and CSS to work with. About XHTML for DHTML there is nothing more special– it is even more important to have a valid HTML, because there are more things to be worked on from it just more than the browser.

The Features that are included in DHTML
Actually there are 4 primary features of DHTML:
Data binding (Internet Explorer)
Changing the properties and tags
Dynamic fonts (Netscape Communicator)
Real time positioning

Changing the properties and tags
Changing the properties and tags are the most common uses of DHTML. DHTML will allow you to change the HTML qualities of tag depends on the outside event of the browser. You can even use DHTML to preload information into a page, and not to display the information until and unless the reader clicks on that specific link with the intention of clicking.

Real-time positioning
This DHTML will also allow you to play some of the games that are interactive with your readers or else animate some portions of your system screen.
Dynamic Fonts
Along with some dynamic fonts, the fonts can be encoded or downloaded with the page, so the page looks so stylish.
Data binding
This is a feature used in IE only. Data binding was developed by Microsoft in order to allow getting the databases from Web sites.


Apr
29th

Detailed Guide to Building an External Style Sheet

Advantages and disadvantages of using the external style sheets
The finest things that cane be done using this Cascading Style Sheets is that it would help you to keep your site in consistent. The simplest way to keep the site in consistent is to import an External Style Sheet or link the site. If the same external style sheet is used for each and every page of the site, it is sure that all the fonts of the site will be same.

Advantages of using the External Style Sheets
At once you can control the feel and also the look of many documents.
If you work with a team of people to create a Website, especially the External sheets is very much useful. Several style rules is pretty difficult to bear in mind and if you might taken a printed style guide and it is tedious and inefficient to be continuously go on flipping through out in order to determine if at all a example text has to be written in 14 point courier and 10 point Arial font.
You can even create classes of more styles that can be used on with various HTML elements as well.
If you want your fonts to be more efficient, you can easily group it.
All of the grouping methods that are used in CSS also can be used in this External Style Sheets as well and also this even provides you more flexibility with on your pages.

Disadvantages of using External Style Sheets:
If these External style sheets are very large, the download time will be increased.
They can increase the proximity of the site if there are small numbers of font styles.
These External style sheets get larger pretty quickly as it’s very hard to tell whether and when a style is no longer in use as it is deleted when the page s shut down or closed.

Creating an External Style Sheet
These External style sheets are produced or generated with a related syntax to the document level style sheets. Though all of the things that you need to include are the declaration and selector the syntax for the rule is and it is just like the document
Selector (property: value ;}
This rue has to be saved into a text file along with the extension of .css. Actually this is not required, but having this habit is good. By using this, you will be able to immediately recognize your style sheets.
You can link the style sheet documents in 2 different ways.

Linking
to link a style sheet document, use the HTML tag

Importing
Within the document level of style sheet, you can import the style sheet and with this you can import any URL and continue the style attributes of the External Style Sheet even without losing any document.