html, css, jQuery, PHP, mySQL

HTML From Scratch. 7:2 Tables

August 7th, 2011

meadow

Use tables to set out data: here a biology project.

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 use displaying a chart of data: so in the example below we will consider the proper use of a table to display the results of an experiment. Tables can be styled extensively with CSS (and HTML), including borders, individual cell colours, and fonts. Many interesting effects can be produced with patience and practice – whatever best practice says, playing with tables creatively is probably the best way to learn how to use them.

The basic idea

Tables consist of a grid of boxes, known as Table Data Cells. These are represented by the tag <td>, followed by the content of the Table Data Cell, and then the closing tag </td>.

Each row of boxes is enclosed within the Table Row tags: <tr> and </tr>. The table itself then encloses the entire set of rows and boxes, <table> … </table>

Example:

<table>

<tr><td>23</td><td>10</td><td>1</td></tr>

<tr><td>9</td><td>17</td><td>3</td></tr>

<tr><td>18</td><td>12</td><td>14</td></tr>

</table>

table

This table is not very useful: it lacks a caption, and there are no labels for rows or columns. The borders have been added here for clarity: you would need to use border=”1″ in your HTML, or border: 1px solid black in your CSS to produce them, together with the CSS property border-collapse: collapse (HTML tables have double borders, see overleaf for example).

To add a caption to your table, use the <caption> tag after the opening <table> tag. To add labels (headings) to the columns and rows, you can use the special tag <th> (Table Header Cell). This gives a cell which has bold writing automatically, so that you don’t have to specially style a <td>, and is semantic code.

Example:

<table>

<caption>My Biology Project</caption>

<tr><th></th><th>Meadow</th><th>Verge</th><th>Woodland</th></tr>

<tr><th>Daisies</th><td>23</td><td>10</td><td>1</td></tr>

<tr><th>Buttercups</th><td>9</td><td>17</td><td>3</td></tr>

<tr><th>Nettles</th><td>18</td><td>12</td><td>14</td></tr>

</table>

table

The resulting table from the code above: note Caption and Table Header Cells.Also note that the empty <th> produces a blank cell: if this table was styled with borders, this empty cell would also lack a border unless it contained at least a <br>.

Tables can also have separate sections: Table Head, Body and Foot. The tags for these are <thead>, <tbody> and <tfoot>. Each section can contain numerous rows of boxes, and using these extra markup tags enables each section to be styled differently. To be valid HTML5, a table should always use <tbody>, but <thead> and <tfoot> are optional. The order of markup is head-foot-body, as the top and the bottom of the table are rendered first before it expands to its final size.

Example (code below):

head foot and body

HTML tables have double borders. Use border-collapse: collapse; to overcome this. The thead, tbody and tfoot have been given different background colours with CSS.

example

The head and foot could also be used to contain extra captions – or perhaps you would like one data or header cell to stretch over more than one row or column. This can be achieved in the html by using the colspan and rowspan attributes. Remember to remove the cells which would have been displayed, to allow the table to maintain its proportions.

<td colspan=”2” rowspan=”2”>16</td>

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

HTML From Scratch. 7:1 iframes

August 7th, 2011

iframe

iframes allow you to include content from another page.

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 your own page, or to update an area of your page when a link is clicked without reloading the entire page. Iframes can be invisible, if they have no border and the background colours match. They can also be styled with CSS in any way you like, just like any other element.

The basic HTML needed is simply <iframe>…</iframe>. Iframes can have HTML attributes and values to specify their dimensions and borders, if you prefer to use them, but the resulting code will probably not validate as HTML5. The only attribute-value pairs which you need to remember are src=”[url]” and name=”[name]”. These give the url of the page which is used as the source of the iframe content on page load, and a name to be used to target the iframe when content is displayed within it after clicking a link.

Example:
<iframe src=”google.com” name=”myFrame”>…Text to be displayed by browsers that do not render iframes can be placed here…</iframe>

<a href=”myPage.html” target=”myFrame”>Click here to see my new widgets!</a>
On clicking the link, myPage.html will be displayed inside the iframe named “myFrame”.

The same iframe can be the target for several different links, and the content can even be the same page. Remember that the content can be repositioned, allowing pixel-perfect rendering. The default size of an iframe is 300px x 150px.

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

CSS From Scratch. 6:4 The float property.

August 7th, 2011

floating

Use float to horizontally position lists.

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 horizontal positioning of sibling elements using the float property. Remember that you will need to restrict the widths of the elements, as block-level elements such as div and li default to the width of the entire page.

Floating a series of sibling elements has the effect of making all of the floated elements rise up to the level of the first floated element. If there is not enough room on the line, elements will continue to float horizontally below the other floated elements. The float property can take the values left, right, none and inherit. The values left and right cause floated elements to float as far in that direction as possible, within their containing element.

Floating elements removes them from the document flow. For this reason the property clear is often used on a following element in order to force it to position itself correctly underneath a set of floated items. The property clear can take the values left, right and both. It’s commonly used on an empty span, with the value both.

<div class=”floated”>…</div><div class=”floated”>…</div>
<span class=”clear”></span>

div.floated {width: 300px; float: left;}
span.clear {display: block; width: 100%; float: none; clear: both;}

float left

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

CSS From Scratch. 6:3 The position property.

August 7th, 2011

axis

Use x and y coordinates to position elements.

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 a block-level element to less than the whole width of the page, you can move it to anywhere you like on the page. All elements will have the position property set to relative by default. Relatively positioned elements are positioned relative to their default position in the document flow. Remember that by default, block-level elements naturally follow each other, pushing anything that comes after them down the page. Even if you set the width to 500px, following elements are still pushed down.

It is usually a bad idea to set both the width and the height of an element, as this will not allow elements to resize if a larger font is used than the one which you intended! Also, remember that you can also set margin and padding on elements, and that the actual width will include the padding. Setting different margin or padding values for the four sides of the box is very useful when positioning elements next to each other on the page.

The position property takes five possible values: relative, absolute, fixed, static and inherit. Fixed positioning means an element will remain in place when the rest of the page scrolls. This can be handy for logos, but be aware that fixed positioning does not work in Internet Explorer 6. Absolute and fixed positioning will remove an element from the document flow: following elements will no longer be pushed down neatly underneath, and will rise up to the level below the last relatively positioned element on the page. This can cause problems with overlapping text, for example, and you will need to be aware of this issue when bug fixing.

Position an element relative to its default page location. Document flow remains normal.

Position an element relative to its containing block (often the whole page). The element is removed from the document flow.

Absolutely positioned element which will not move when the page is scrolled.

Use left: [length [px,em,pt] or %]; or right: [length [px,em,pt] or %]; to control the x-coordinate of the element, and top: [length [px,em,pt] or %]; or bottom [length [px,em,pt] or %]; to control the y-coordinate of the element. The x-y point is generally the top left corner (bottom right if using bottom and right, etc).

Example:
position: absolute; left: 25%; top: 500px;

You can find more information about position here:
http://reference.sitepoint.com/css/position

You can position elements in 3-d space using the property z-index. The default value of z-index is 1, and higher numbers place elements further “forwards” on the page. This can be used to create overlapping effects.

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

CSS From Scratch. 6:2 Family Relationships

August 7th, 2011

family tree

CSS elements have family relationships.

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 they will help you to understand your layout and to find methods to target specific elements on your page in terms of the “family” structure.

This is how you would target any p (paragraph) which is a child of any div:

div p { … }

Using the wildcard character – an asterisk – you could access only any p which is a grandchild of any div:

div * p { … }

Notice that this is different from targeting both div and p in one declaration, as the elements are not separated by commas.

A newer method of accessing a child element uses the character >. However, Internet Explorer 7 does not recognise this method.

div>p {…} or div>*>p {…}

Sibling elements are those which are not nested within each other, but are all nested within the same parent and at the same level, i.e. they are all children of the same parent (not grandchildren mixed with children).

More on targeting CSS elements can be found at the following pages:

CSS Combinators (> + ~)
http://reference.sitepoint.com/css/combinators

CSS3 Pseudo-Classes
http://reference.sitepoint.com/css/css3psuedoclasses

We will return to pseudo-classes in a following lesson. For now, simply be aware that you can target children and siblings with CSS.

CSS family

The CSS Family

Div,p,ul,span {…}

/* … this is hidden from the rendering engine … */

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

CSS From Scratch. 6:1 Positioning: the display property.

August 7th, 2011

blocks

Block-level elements include div, ul and p.

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 categories: block-level elements and inline elements. There are also now inline-block elements, introduced in CSS3 as the default for some elements – however browser support may not yet have caught up with the specification. For now, simply be aware of the meanings of the terms used.

Block elements

These are elements which default to the width of the whole page. They push following content downwards, and always begin underneath preceding content. Imagine block elements as a series of boxes, containing text or other elements.
Examples: div, p, ul.
“Top-level” block elements do not like to be nested. You will sometimes find that when styling your page with CSS unexpected bugs occur – one common reason is that top-level block elements have been “nested” in the HTML code, but they “pop out” when you attempt to style them. An example is a list which has been placed inside a div thus:

<div><ul><li>….</li></ul></div>

Inline elements

These are elements which do not affect the flow of other elements on the page. They are often used inside areas of text. Preceding and following text is unaffected by the use of an inline element.
Examples: a, span
Inline elements default to the width and height of their content, and sometimes need to be changed to block elements in order to take certain styles. This is done using the property display thus:

span {display: block;}

Inline-block elements:

This is a new type of element, and is intended to solve the problem of having to change inline elements to display:block simply in order for them to take certain styles. Inline-block elements combine properties of both inline and block elements, and can be used within text areas without disrupting the flow of the text. As this is a new type of element, and is now intended as the default for many elements in CSS, you will need to experiment to see what changes, if any, need to be made to the display property when styling your page.

The display property is used to access all of these in CSS. It takes several possible values: block, inline, inline-block, inherit, none and hidden. Display: none and display: hidden are useful when elements should be invisible for some reason. Common uses include hiding drop-down lists until the mouse hovers over a link, or hiding h1 text when it has to be replaced with an image of a company logo.

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

CSS From Scratch. 5:4 The Box Model Introduced

August 6th, 2011

box

All elements on the page are boxes.

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.

These boxes can be given dimensions in CSS using the width and height properties.

div {width: 300px; height: 400px;}

The units used in measurements for CSS include pixels (px), percentages (%), ems (em) and points (pt). We came across these when we looked at font properties. Pixels are a measurement of the number of pixels an element should take up. Points are a printers’ measurement of text sizes. Ems are relative to the size of text – specifically the size of a letter M. Percentages are relative to the size of the page itself, or to another containing element.

The boxes have additional properties which can be specified in CSS. Two of the most important ones to understand are padding and margin. Here is a diagram explaining their use:


If a box has a width of 200px, padding of 10px and a 5px border, its actual dimensions will be 200+10+10+5+5=230px.

The padding is a blank area between the content and the border of the box. The margin is a blank area around the box outside the border. The top, left, bottom and right values of border, margin or padding can also be given separately:

border-top: 1px; border-right: 5px; border-bottom: 3px; border-left: 2px;

This can also be written in CSS shorthand like this:

border: 1px 5px 3px 2px;

To remember which order to write these values in use this mnemonic: TRouBLe.

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

CSS From Scratch. 5:3 Classes and IDs.

August 6th, 2011

ID

Use ID to select a unique element with CSS.

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 HTML attributes class and id are useful.

Id

An id is a unique identifier given to any html element on your page. You can use anything you want for the value of id, as long as it does not start with a number and only contains letters and numbers. This is how you give a paragraph in html an id of “first”:

<p id=”first”> ….text goes here …. </p>

Notice that this is an html attribute-value pair and that the value can be almost anything you want. You must only use a particular id once on any page. You could have another paragraph with the id of “second”, but you cannot use “first” in any other place. Think of it as being similar to having an identification card or a passport – nobody else can have the same one. It identifies you uniquely.

To style an element with a particular id in CSS we use the hash symbol followed by the id. The element itself can be included, but this is optional. So for the example above the following CSS would give the paragraph bold text:

p#first {font-weight: bold;}
OR
#first {font-weight: bold;}

Class

A class is used to identify more than one element on the same page, and group them together. The elements do not have to be of the same type, so a div, a p and a li could all have the class “special”. This is how to give an element in html a class name:

<div class=”special”> … stuff goes here ….</div>

and we could also use this class for other elements on the same page:

<li class=”special”> … </li>

To style an element with a particular class in CSS, use a dot followed by the class name. Again you can also include the element name, but this is optional.

.special {font-weight: normal;}
OR
div.special {font-weight: normal;}

Notice that if you also include the element (div in this case) ONLY div elements with a class of “special” will be selected. This could allow you to be quite creative, as you could include rules for .special, AND more specific rules for div.special and li.special.

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

CSS From Scratch. 5:2 CSS Properties

August 6th, 2011

fonts

CSS is useful for font styling.

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 like this:

* {
border-width: 1px;
border-style: solid;
border-color: red;
}

Notice how the properties use plain english words, and that the name of the main property is followed by a hyphen and then the word describing the more specific aspect of that property. This is the format followed by almost all CSS declarations. There are very many CSS properties, but it is often possible to guess what they are called.

You can look up lists of CSS properties online. The W3C website is a good source of information, and properties are grouped into sections with examples that you can try out on the website.
http://www.w3schools.com/css/default.asp

We have already seen that color is used to give the text colour of an element, and background-colour gives the background colour of an element.

Here are some useful properties for fonts and values that they take:

Declare all properties at once using CSS shorthand. List the values in this order: font-style font-variant font-weight font-size/line-height font-family. Only font-size and font-family are required.

Example:

p {font: 14pt serif;}

Names of fonts as comma separated list. Names of fonts which are more than one word should be in quotes (“Times New Roman”). The last value should always be either serif or sans-serif as these are the most generic font families (not all computers have the same fonts installed)

This can have values bold, normal or inherit, or a number between 100 and 900.

This could be italic, oblique, normal or inherit

This would be a numerical value in units such as pixels, ems, points or a percentage. (eg 12px, 2em, 14pt, 90%). Ems and Points are printers’ units for measuring text sizes. Percentage values and ems will be relative to the default text size, and will scale if someone enlarges the text in their browser.

Numerical value in same units as above (px, em, pt, %)

There are numerous other CSS properties, but these ones should get you started.

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

CSS From Scratch. 5:1 The Cascade

August 6th, 2011

The Cascade

The Cascade

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 the notes for Lesson Four.

CSS Syntax

CSS stands for Cascading Style Sheets. It is a different language to HTML, and is used to tell the browser how your page should be displayed. Remember that it is good practice to use only semantic HTML, which breaks your page into meaningful blocks (elements) such as paragraphs, headings, lists and links.

Although HTML has a number of attributes which can be used to eg change the colour or font of elements, it is best to use CSS for anything like this.

We use HTML for semantics and CSS for presentation.

This makes it much easier to alter the look of your website later, as the same CSS file can be used for every page on your website. For example, changing the colour of all of the text would mean just changing one colour in the CSS file. If you tried to do this with HTML, you would have to make changes in many places.

CSS uses a different syntax (grammar) to HTML. Here is an example which changes the colour of text in paragraphs:

p { color: red;}

The element p has been selected here. Any element on your page could be used (h1, li, div, a ….). This is known as the selector. The selector is followed by a pair of curly braces, inside which are written declarations. These declarations are similar to attribute-value pairs in HTML, but in CSS they are called properties and values. Here the property “color” determines the colour of text for all paragraphs (p). Its value is given as “red”.

Notice that the property is followed by a colon. In HTML we used an equals sign. The whole declaration is followed by a semi-colon.

You can list as many declarations as you like inside the curly braces. The semi-colon tells the browser where each declaration finishes.

It can make CSS easier to read if you put the declarations on separate lines.

h1 {
color: blue;
background-color: green;
border: 1px solid black;
}

Here the main heading (h1) has been given blue text, a green background, and a black border.

The Cascade

In your CSS file you can repeat this process for as many elements as you like.

The browser reads the CSS file in order from the top to the bottom. It then reads any CSS in the HTML file itself.

The browser uses a formula to work out any conflicts, but in general simply be aware that putting something at the end of a CSS file gives it more weight than putting the same rule at the beginning.

For example, the following CSS changes the text colour of all of the elements on the page to red because everything on the page is betweenand. However, the next declaration changes the colour of all text inside paragraphs to blue instead.

body {color: red;}
p {color: blue;}

This process is known as the Cascade, as this word brings to mind a waterfall with water flowing from the top to the bottom. As the water moves downwards, its flow can be changed by rocks. This image may help you to understand how the order of CSS declarations is important in working out the final appearance of your page.

Usually people put the largest and most general elements first in their CSS files. If a CSS declaration doesn’t seem to work, check that a rule lower down the page isn’t over-riding it!

You can also include CSS in your HTML file. This can be useful if you are having trouble getting a declaration to work, as the nearer to the HTML element the declaration is made the more weight it carries. You can do this is 2 ways. The first is to include a style declaration inside theandtags of the html like this:

<head>
<style type=”text/css”>
div {color: green;}
</style>
</head>

The second is to include CSS inside an HTML element, using the style attribute and giving the CSS declarations as its value like this:

<ul style=”color: blue; background-color: red;”>

Notice that the curly braces are not needed, but the colons and semi-colons are. This is known as an inline style. Inline styles will over-ride any previous styles.

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