html, css, jQuery, PHP, mySQL

Archive for the ‘Tutorials’ Category

HTML From Scratch. 7:1 iframes

Sunday, August 7th, 2011

In this lesson we return to HTML to cover a few more important element types. The first of these is the iframe. Iframe stands for inline frame, and iframes are like rectangular windows in a web page, within which another web page can be displayed. This allows you to incorporate portions of other websites within […]

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:3 The position property.

Sunday, August 7th, 2011

Once you have understood the display property and the parent-child relationship in CSS, it is time to move the elements around with relation to one another and the page itself. We do this using the position property, and x and y coordinates. Once you have set a width on an element, restricting the size of […]

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. 6:1 Positioning: the display property.

Sunday, August 7th, 2011

CSS allows us to move elements around the page, and even stack elements on top of each other. We can control the dimensions and positions of elements at the pixel level. This is one of the most significant advantages of using CSS for presentation rather than HTML attributes. Elements in CSS largely fall into two […]

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:3 Classes and IDs.

Saturday, August 6th, 2011

Sometimes just selecting parts of the page using the element name (body, div, p, ul etc) is not enough. What if you want to make one paragraph stand out by giving it bold text? Perhaps there are several elements on your page which should all have a different colour of writing? This is where the […]

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 »