Basic Web Design Tutorial Part 7

A simple table

Tables let us lay out information so it looks nice and can be used to lay out your whole webpage. Some would argue that all the positioning should be done with a CSS stylesheet but I’ve found that it’s hard to get working on all browsers (IE6 is particularly foobar). So I still use tables. They’ve been around for ages and all browsers seem to know what to do with them. Here’s a simple table with 2 rows.

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 6

Adding an image to the page

The IMG tag allows us to include an image. In this example the image is in a sub-directory called “images” under the directory the web page is in. This is an empty tag, meaning that it does not have separate start and end tags. The SRC gives the image filename, in this case in a subdirectory called “images”. The ALT tag gives a description of the image and will be displayed as an alternative if the image fails to load for some reason. It is also useful for giving information to google image search and for text-only or speech-based browsers.

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 5

Making a link open in a new browser window

This is a handy trick, the link opens a new browser window (or a new tab on most browsers nowadays, now that Infernal Exploder finally does tabbed browsing). The TARGET attribute tells it where to go.

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 4

Linking pages to each other

The web is called the web because pages link to each other. Make links clear and obvious in your page. Here’s how to make a link:

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 3

A quick explanation of Entities (HTML encoding)

The clever ones among you might be asking “So if < and > mark tags then how do you put those symbols in a page?”. The answer is that certain symbols are encoded. Here are some common ones:
&lt; gives < (“lt” stands for less than)
&gt; gives > (“gt” stands for greater than)
&copy; will give a copyright mark (©)

(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 2

Example 2 – a more complex page using more HTML tags

<html>
<head>
<title>The Hello World Page v2</title>
</head> (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 1

Example 1 – a simple HTML webpage

I’ll drop you straight into the web design with an example. Create a text file and copy the code below. Save it as “index.html” on your computer somewhere. Now double click it to open it in your default web browser.

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