html, css, jQuery, PHP, mySQL

Archive for the ‘Tutorials’ Category

HTML5 Canvas and arcs of a circle: it’s a piece of Pi.

Monday, August 29th, 2011

This post is for all those confused about the use of radians when drawing circles, and arcs of circles, using the new html5 canvas element. I hope to shed some light on the subject, and give you the knowledge that you need to make use of this exciting new capability. Radians The radian is a […]

Tags: , , , , , , , , , , , , , , , , , , ,
Posted in HTML, JavaScript, Tutorials | 3 Comments »

CSS Gallery with z-index zoom on :hover.

Monday, August 29th, 2011

In this simple version of a CSS Gallery, an unordered list is used to contain anchor tags with thumbnails as background images. On hover, the images change to larger versions of the same files, overlying the rest of the list. First, mark up a simple unordered list. <ul> <li></li><li></li><li></li> </ul> Now add anchor tags inside […]

Tags: , , , , , , , , , , , , , ,
Posted in CSS3, Tutorials | 1 Comment »

HTML and CSS From Scratch. 10:1 Design Principals

Thursday, August 25th, 2011

So now you know how to create a web site using HTML and CSS, but how do you make it beautiful and useful? This is an important aspect of web design. In other posts I have described how bad design causes stress and makes users more likely to leave your website, and the colour associations […]

Tags: , , , , , , , , , , , , , , , , , , ,
Posted in Tutorials, web design | No Comments »

HTML From Scratch. 9:2 Special Characters.

Wednesday, August 17th, 2011

HTML allows the use of characters Aa-Zz and 0-9, together with ! and ?. The only quotes available for use in text are straight quotes. All other characters are known as ‘Special Characters’. So how do you include Special Characters? HTML Character Encodings. All HTML Character Encodings begin with an ampersand (&) and finish with […]

Tags: , , , , , , , , , , , , , , ,
Posted in Tutorials | No Comments »

HTML From Scratch. 9:1 Forms

Saturday, August 13th, 2011

It can be very useful to have a form on your website. Forms allow users to send feedback, contact information for newsletters, or buy products. Some forms allow users to upload content to the website: for example, an avatar on a social networking website. Most web forms are processed by scripts on the server written […]

Tags: , , , , , , , , , , , , , , ,
Posted in Tutorials | No Comments »

CSS From Scratch. 8:3 Fancy Boxes

Wednesday, August 10th, 2011

How do web designers manage to get those cool effects, like overlapping boxes, shadows and rounded corners? Well, it used to be fairly tricky to do, using extra <span> elements with background images (for rounded corners) and extra divs with darker backgrounds (for box shadows). Don’t even mention drop shadows on text: the only browser […]

Tags: , , , , , , , , , , , , , , , , , ,
Posted in Tutorials | No Comments »

CSS From Scratch. 8:2 Background images.

Wednesday, August 10th, 2011

Many experts agree that it is best to include images in your web page using CSS. This makes it easier to edit them later, and maintains the separation of concerns (CSS used only for appearance, HTML used only for semantic markup). Others disagree, and say that it is better for accessibility to use HTML <img> […]

Tags: , , , , , , , , , , , , , , , , , ,
Posted in Tutorials | No Comments »

CSS From Scratch. 8:1 Pseudoclasses

Wednesday, August 10th, 2011

The commonest use of pseudoclasses is to add styles for different states of an anchor (link) element. This includes the hover state – when the mouse hovers over an element, the style changes. Internet Explorer only recognises hover on an anchor tag, but other browsers may allow hover states on any other elements. The basic […]

Tags: , , , , , , , , , , , , , , , ,
Posted in Tutorials | No Comments »

HTML From Scratch. 7:3 Meta tags

Sunday, August 7th, 2011

We already used a meta tag in the head of our html code: <meta charset=”UTF-8″> Meta tags add extra information in the head of the html, for use by the browser or by web crawlers. The attribute name can take any value, so the following are all valid: <meta name=”author” content=”Fred Bloggs”> <meta name=”favourites” content=”chocolate, […]

Tags: , , , , , , , , , , , , , , , ,
Posted in Tutorials | No Comments »

HTML From Scratch. 7:2 Tables

Sunday, August 7th, 2011

Before CSS, HTML tables were often used for layout and positioning. This is still a common practice, although frowned upon as the code can be hard to alter later. Using HTML tables for layout is also not semantic code, and therefore does not represent best practice. The semantic use of an HTML table is for […]

Tags: , , , , , , , , , , , , ,
Posted in Tutorials | No Comments »