A page anchor (or internal link) is basically a link on a page to a part on the same page. It is very handy if you have a long page with multiple sub headings, and is very easy to learn and use. For a quick example, CLICK ME to go to the top of this tutorial. Now, get going!

Firstly, you need to drop the anchor! This is done by using a variation of the <a> tag. It goes something like this:

<a name="whatever"></a>

That sets that specific part of the page with an anchor named 'whatever'. To access this anchor, all we need to do is link to it. For example:

<a href="#whatever">Go to whatever!</a>

The # thingie is put in place so the web browser doesn't confuse the link with another page name, which prevents the browser from floating away...
So that's it. A really simple technique that can be really handy.

iFrames or Inline Frames are a handy thing to have in your web design repertoire. They allow you to embed a page inside a page, which can be very handy when creating different types of web pages and when looking for a certain effect. So let’s start.

Firstly, the iframe tag looks like this:

<IFRAME SRC="thepageyouwant.html" NAME="framename" WIDTH="100" HEIGHT="200" FRAMEBORDER="0"></IFRAME>

It is a pretty simple code, let me break it up for you.

Like in the image tutorial, the src attribute defines the location of what you are including, in this case, another page. The name attribute is used for referring to the iframe, we will talk more about this later. The width and height attributes are used to define the width and height of the frame, in pixels. Lastly, the frameborder attribute defines whether or not to display a border around the iframe. When set to 0, no border is shown.

So, if you set all your attributes correctly, you should be able to display something like i have below:



The only problem with iframes is that not all web browsers support them. The browsers that don't support iframes (older versions of Netscape and Opera) can be given a little message to show for when the iframes don't work. An example is shown below:

<IFRAME SRC="thepageyouwant.html" NAME="framename" WIDTH="100" HEIGHT="200" FRAMEBORDER="0">Sorry, but your browser doesn’t support Inline Frames!</IFRAME>

Notice the text between the iframe tags? You could also place a url in that space, so that when the user sees that message, they can still access the page.

To finish off the tutorial, I will explain a little more about the NAME attribute in the iframe tag. What the NAME attribute does is allow you to click a link and make it show up in that iframe. For example, clicking this link will make the frame above go from Google.com to the Pixel-Pro home page. Now, to put this little trick to work, you just make a normal link tag but add target="framename" to it. The code is below:

<A HREF="www.somepage.com" TARGET="framename">click me!</A>

Faveourite icons, or favicons, are those little images that replace the standard IE image in your web browser. Many sites have them (including us at Pixel-Pro), and they are just one more thing that allows you to customize your website.

If you aren't convinced about the usefulness of customizing your sites favicon, then have a look at your faveourites menu in your web browser. When someone bookmarks a site, their custom favicon is saved along with it, and when people are looking for a site to browse, your little custom favicon will stand out to them and they might just come wandering back!

Ok, so you want one now eh? Well first you have to make one. Favicons are 16x16 pixels and have their own special extension, .ico
In order to make these files, you need an icon creating program, so search Google for one. I use IconEdit, though there are many, many others out there for download.

So, once you have got the program, you can either make your favicon in the program or make one in Photoshop then export it to the program. However you do it is fine by me.

Once you have made the icon and made sure it is saved as a .ico file, it is just a matter of placing the code below in the HEAD area of your site, along with uploading the favicon to your site:

<link rel="shortcut icon" href="favicon.ico" type="image/ico" />

Form

We start with the tags , a form has to stand between the tags <form> and </form>
this will be the beginning and the end. We have to announch what the form
has to do , it has to send an email.

This is how it has to be :
<form method="post" action="mailto:email@provider.com">
*Here comes the rest*
</form> </p>

Options :
We're gonna learn you how to make a text box.

Here are some atributes :

type="text"
With this you announce it's an textbox

size="30"
With this you announce the length of the textspace is 30 chars

maxlength="50"
This decides the lenght of the textspace , this number isn't compared to the code "size".

name="naam"
Your giving the textspace a name , so you can reconize it in your e-mail.

You can make the same textspace with an other subject like "email" or "url".

We're gonna continue with the checkboxes. It's a list of options ,
you have to choose on of them. This is like a little poll.
Here you see the code and an example of the checkboxes.

We also have the select option list , this is usefull to select a country.
Here you see the code and an example of the selection list.

Now we're gonna teach you how to make a text area.
Here is the code and an example of the text area.

We are ready to send the e-mail.
Here is the code and an example of the buttons.

Value means the text that is displayed on the button , so you can put what ever you want!

I have one more tip , this has to be included in the tag <form> :

So it's gonna be :

The mail be well organized with this function.

Using colors

Some web page elements can have colors assigned to them using arrtibutes in their tags. These include:

<BODY>

<FONT>

<TD>, <TH>, <TR>

The value "color" can be specified using

1. a color name, such as "black", "white", "blue", "red", "yellow", etc. (see pages 78-84 for a full list)
2. a color number, such as "#FF0000", "#FFFFFF" (those are red and white).

The anchor tag

Hypertext links are created with the <A> tag.
The opening tag always contains additional attributes and information about the link.
The two most commonly used attributes are HREF and NAME.

Linking to other web pages in your site

To create a link to another web site, the <A> tag is used with the HREF attribute.

Clicking on the underlined link will take you back to the main web development workshop page.

A link to another page in the same directory of a web site can be broken down as follows:

Note the quotation marks enclosing the name of the file, and that file names are case sensitive.

Linking to other web sites

Links to other web site are created using a procedure similar to that outlined above:

A link to an external web site can be broken down as follows:

Note the quotation marks enclosing the URL, and that URLs are case sensitive.

Linking to sections within a document

It's often useful to be able to jump from section to section within a long document -
for example from an item in a table of contents to the section it refers to.

Step 1.

In order to create links within one document, you need to create "bookmarks" or "targets" within the document.
This is done by using the NAME attribute within the <A> tag to mark the place in the page you wish to bookmark:

Step 2.

Once the bookmarks have been created, you can link to them using a format similar to that used to link to other pages and web sites:

Clicking on the above link will take you to the top of this page. (This function only works in a .HTML document and won't work here because this is .PHP)

"Mailto" links

The <A> tag can also be used to create links which allow you to send e-mail messages directly from a web page:

If your browser is set up to send e-mail, clicking on the link above will bring up a window in which to compose an e-mail message.

Show/Hide Toggling

Posted on Oct 21st, 2005 at 12:00 am. 439 words. 16 comments and 2068 views.

If you have a busy web site, you might want to allow the visitor to hide areas they don't need to see and have the option to show them again. While you could do this dynamically, you might be running a static HTML web site and not want to make a big deal out of it. Using JavaScript, you can do this very easily.

First we'll set up our HTML.

<a href="#" onclick="showorhide('raw');">Toggle Top</a> - <a href="#" onclick="showorhide('war');">Toggle Bottom</a><br /><br />
Top:<div id="raw">This is a bunch of text yo... and more text because<br />
We want a lot of the text in this division of <q>raw</q>.</div>
Bottom:<div id="war">Here we have more text in the division that we know as <q>war</q>.</div>

So what do we have? Well, I can see two link, that use the onclick attribute and two divs with id attributes.

So what's this all about? Well, the onclick attribute is used by JavaScript, it's known as an Event. What it does is it waits for the user to click the object, then it generally execute a JavaScript function. As for the divs, we gave them unique id's (raw and war) so that we can modify them uniquely. Notice that these ID values are within the onclick's javascript function? This is so that when we trigger the function, we can pass on the name of the element we want to modify. Let's move on to that JavaScript code.

You can put this either in your header, the middle of your page or in an external JavaScript file. Whichever way you choose will be fine.

function showorhide(id) {
if (document.getElementById(id).style.display == "none") {
document.getElementById(id).style.display = "block";
} else {
document.getElementById(id).style.display = "none";
}
}

Styling your Table

Posted on Sep 2nd, 2005 at 12:00 am. 478 words. 2 comments and 2557 views.

Have some tabular data that you want to throw on your website? Well, that's great, but if you're going with standards, styling that table can be sort of tricky. Never fear though, there's an easy way to get around that and have your table looking spiffy in no time.

First, we have our table:

<table summary="A list of letter grades per annual">
<caption>School Grades</caption>
<thead>
<tr>
<th id="year">Year</th>
<th id="a_s">A's</th>
<th id="b_s">B's</th>
<th id="c_s">C's</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td headers="a_s">6</td>
<td headers="b_s">6</td>
<td headers="c_s">3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td headers="year">2003</td>
<td headers="a_s">1</td>
<td headers="b_s">3</td>
<td headers="c_s">1</td>
</tr>
<tr>
<td headers="year">2004</td>
<td headers="a_s">2</td>
<td headers="b_s">2</td>
<td headers="c_s">1</td>
</tr>
<tr>
<td headers="year">2005</td>
<td headers="a_s">3</td>
<td headers="b_s">1</td>
<td headers="c_s">1</td>
</tr>
</tbody>
</table>

So now we have our table ready to go and style, it's simple and just shows the amount of letter grades achieved in each school year from 2003 to 2005. They're made up, so don't worry about those C's.

First of all, what we want to style is the border of the cells and table. Let's go with a one pixel solid gray one. In our stylesheet, we'll add this:

table {
border-top: 1px solid #999;
border-left: 1px solid #999;
}
td,th {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}

Simple right? The reason we style them by opposite sides is that if you don't, you tend to get some double borders that can be quite unattractive. But, we have some gaps, so let's get rid of them. We change the table css declaration slightly.

table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse: collapse;
}
td,th {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
padding: 5px;
}

Apply that change and you've suddenly got some nice borders. And since we added some padding to the cells, the contents have some room to be read more easily.

Now that our cells are styles how we want them, we can make our header and footer nicer to make them more seperated from the normal content. We'll add a bit more to our CSS.

thead th {
background-color: #ddd;
}
tfoot td {
background-color: #bbb;
font-weight: bold;
}

Excellent, we've now applied the final styling to our table to make it awesome. You can feel free to style the caption add background images to cells or whatever you wish, just remember that tables should only be used for tabular data and not for your layout.

The very basic structure of a table is shown below:

<TABLE>
<TR>
<TD>
Table content goes here!
</TD>
</TR>
</TABLE>

From that, I can tell you that the TABLE tag starts a new table, the TR tag starts a new row in a table and the TD tag starts a new cell in the table. When making tables, you must end each tag with respect to when it was started. For example, in the above piece of code, TR started a row, then TD started a cell. Once the information was put in place, the TD tag was ended before the TR tag was. It is a pretty simple concept, but it is important to how your tables work.

Below are some of the attributes that can be applied to tables. They can be applied to the TABLE tag, and most of them can also be applied to the TR and TD tags. Once you have read through this tutorial, have a play around with all the attributes to get yourself properly acquainted with the workings of these attributes.

ALIGN: Allows you to align a table, values include left, right and middle.
BACKGROUND: Allows you to set an image as the background of the table.
BGCOLOR: Defines the colour of the background in the table.
BORDER: Defines the width or visibility of a border on your table. A value of 0 shows no border, and values of 1, 2, 3 etc. give larger and larger borders.
CELLPADDING: Determines how far the content is spaced away from the inside border of the table.
CELLSPACING: Determines how far apart the cells of the table are from each other.
HEIGHT: Changes the height of the entire table.
WIDTH: Changes the width of the entire table.
VALIGN: This tells the table where to put the content in each cell, whether it be at the top of the cell, in the middle or at the bottom.

So, with the above notes in mind, let's make a simple table with one row and 3 cells, with a standard border and some cell padding.

<TABLE BORDER="1" CELLPADDING="3">
<TR>
<TD>
Cell one
</TD>
<TD>
Cell two
</TD>
<TD>
Cell three
</TD>
</TR>
</TABLE>

Now, the code above will display the table below:

Now, when table’s don’t have width or height values assigned to them, they just go as big as they need to in order to fit the content in. So, if you wanted your table to have a fixed width, but just get longer and longer when you put more content in, you would do this:

<TABLE BORDER="1" CELLPADDING="3" WIDTH="400">
<TR>
<TD WIDTH="200">
I'm typing a bunch of stuff in here, and the whole table is going to stay 400 pixels wide, while the table just gets longer and longer...
and longer...
and even longer...
</TD>
<TD WIDTH="200">
This cell doesn't have as much content in it, though it just keeps going with the other cell.
</TD>
</TR>
</TABLE>

So that code gives us this:

Notice how I assigned a width to the table tag, but I also assigned widths to the individual td tags? This allows you to control the widths of the individual cells, otherwise the table would just move them around all over the place. Ok, so we have a table that increases its length, but the content in the second cell of our table is floating in the middle. To change this, we need to apply the valign attribute to the td tag. So, it’s the same code as before, but with VALIGN="top" given to the td tags:

<TABLE BORDER="1" CELLPADDING="3" WIDTH="400">
<TR>
<TD WIDTH="200" VALIGN="top">
I'm typing a bunch of stuff in here, and the whole table is going to stay 400 pixels wide, while the table just gets longer and longer...
and longer...
and even longer...
</TD>
<TD WIDTH="200" VALIGN="top">
This cell doesn't have as much content in it, though it just keeps going with the other cell.
</TD>
</TR>
</TABLE>

Which does this:

Now, we haven't done anything about multiple rows. This is no big deal really, it's just a repeat of the tr tag. Here is an example:

<TABLE BORDER="1" CELLPADDING="3">
<TR>
<TD>
Row one, Cell one
</TD>
<TD>
Row one, Cell two
</TD>
</TR>
<TR>
<TD>
Row two, Cell one
</TD>
<TD>
Row two, cell two
</TD>
</TR>
</TABLE>

Which gives us this:

Too easy :) Lastly, there is one more handy trick you can do with tables, and that is put a table inside a table. For this, we will make one table with two cells in the one row, but make another one-celled table in the second cell:

<TABLE BORDER="1" CELLPADDING="3">
<TR>
<TD>
Cell one
</TD>
<TD>
Cell two

<TABLE BORDER="1" CELLPADDING="3">
<TR>
<TD>
This is the table inside the table!
</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

Which gives us this:

Have a good play around with some of these different aspects of tables. Hope you found this tutorial helpful!