Forms and buttons: Sending data to the server

Using google is an everyday event for a large percentage of the human population. Ever wonder what is going on when you hit the button? Here’s a working example which searches this site (right click and save then double click it to try it out). Ignore the complicated header, it’s just so the example validates.

We surround the information to be sent in a FORM tag:

<form action="/" method="get">

(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 14

Well, that’s it. I how you enjoyed it and I’d value any feedback you have.

You could review the finished page and its’ CSS file.

You could go back to the beginning of the web design tutorial.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

How to put a ‘back to top’ link at the bottom of a page

Long webpages often have a link to take the user back to the top of the page. 2 things are needed for this. Immediately inside the body tag of your HTML document put:

<a name=”top”></a>

This is an anchor, with a specified name. To link to it you use a link the name, prefixed with # to show that the link is to the same page (this tells the browser it doesn’t need to reload the page)

<a href=”#top”>Back to top</a>

You can also use this to make a table of contents by putting anchors at the start of each section of the page.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

How to make an email link using “mailto:”

Often you see links which open up your email program with the address already filled in for you. Here’s how you do it:

<a href=”mailto:bob@example.com”>bob@example.com</a>

(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 13

Styling Links

Here’s example 14 (opens in a new window) and the CSS file.

OK, notice on the left hand side that the links have changed in style. The underline has gone but if you roll the mouse over them it reapppears.

A {
text-decoration: none;
}
A:hover {
text-decoration: underline;
}

(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 12

Choosing fonts

Here is example 13 and here is the CSS file.

In the BODY section there are now two lines like this:

font-family: Candara, sans-serif;
font-size: 12pt;

(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 11

Centering the page and adding borders with CSS

Here is example 12 showing the next stage. The CSS file is here.

So, what’s new? Firstly the page has been centered by including this code in the CSS BODY section:
margin-left: auto;
margin-right: auto;
width: 800px;

This makes the whole page 800 pixels wide and centers it in the browser window.

(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 10

Introducing Cascading Stylesheets (CSS)

I’m not going to show the complete source code any more just the changes.

I’ve added a line to the HEAD dection of the HTML file to tell the browser to request a CSS (cascading stylesheet) called “example11.css” (in the same directory as the webpage) and apply it’s effects to the browser. In example 11 it looks like this:

<link rel=”stylesheet” href=”example11.css” type=”text/css” />
The CSS file is here.
(more…)
Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 9

Putting it all together, content and layout

Example 10 (opens in a new browser window) puts everything you’ve learnt so far into pratice. The page is layed out in a table. It has headers, an image and links. Next we’ll make it look more stylish by adding a cascading stylesheet (CSS) to change the fonts, background colours, text colours and layout. There’s also an HTML comment or two. It’s good practice to comment your code if there’s anything you think you might forget when you go back to edit it later.
(more…)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Basic Web Design Tutorial Part 8

A complex table

This is a more complex table example. Complex layouts (with headers, footers, columns) might need this.

The COLSPAN and ROWSPAN attributes of the TD tag tell the browser that that TD stretches over multiple rows or columns. I find it helps to imagine the table being built up a row at a time from top to bottom and from left to right. The best way to get your head around this is to play around with it.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter