html, css, jQuery, PHP, mySQL

Posts Tagged ‘element’

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 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. 6:4 The float property.

Sunday, August 7th, 2011

It is useful not to need to position each element separately when the intended effect is to place elements side by side. This is especially true when creating a horizontal list, for example for navigation links. Perhaps the final number of links is unknown, as more pages may be added later. You can achieve this […]

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

CSS From Scratch. 6:2 Family Relationships

Sunday, August 7th, 2011

When positioning elements with CSS it is useful to understand that nested elements have relationships with each other. The terms used to describe the various nesting relationships are borrowed from family descriptions. Thus, there are parents, children, siblings, grandparents and grandchildren. These are not words that you need to use in the CSS itself, but […]

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

CSS From Scratch. 5:4 The Box Model Introduced

Saturday, August 6th, 2011

The important thing to be aware of is that all of the elements on your page are boxes. When we used the star selector, we put a red border around all of the elements. You can use the same CSS to put a border around any element on your page. Practice putting a border around […]

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

CSS From Scratch. 5:2 CSS Properties

Saturday, August 6th, 2011

Before looking further at CSS here are some useful examples of CSS properties. Notice how when we set a border before we used a shorthand which combined declarations for the border width, style and colour into one line: * {border: 1px solid red;} If we wrote these out as separate declarations the CSS would look […]

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

CSS From Scratch. 5:1 The Cascade

Saturday, August 6th, 2011

In the previous lesson we learned how to link a CSS file to an HTML document and how to use the Star Selector or Wildcard to put a border around every element on the page. You should have a file named stlye.css saved in the same folder as index.html. If you do not, please consult […]

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

HTML From Scratch. 4:6 Images for the Web

Friday, August 5th, 2011

Although it is considered best practice to use CSS to place images in a web page, it is still very useful to know how to do this with HTML. Here is the basic code to include a picture called mycat.jpg in your HTML document: <img src=”mycat.jpg” alt=”my cat Fluffy” /> Notice this is another self-closing […]

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

CSS From Scratch. 4:1 Include Your CSS File

Friday, August 5th, 2011

CSS stands for Cascading Style Sheets. It is a separate language used to change the way things look on an HTML page. It looks quite different to HTML, but if you think of it as simply lists of attributes and values for each element on your page, in a separate document, you will find it […]

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