Making a Website - Where to Begin

Now let's start adding the content. This category covers text effects, graphics, sounds and many other small things that make the content interesting. I will use the words I used in the last category again so if you are unsure what the terms 'decipricated' and 'element' mean while making a website I suggest you have another look.

Quick Links

What is CSS?
Starting with the Basics
Text
Media

What is CSS? - RETURN TO TOP
CSS is a major web language and if you don't already know it I suggest you find out how. This site will descibe and use CSS in it's explanations but you should 'branch out" to other ways of using it as it is much larger than the small amount I teach you. CSS has ways to format basically every tag you can use and it's simple structure of tags makes it easy to catch on to. First of all I'll go over a basic tag.

body
{
font: 12px Arial;
background: black url(bg.png)
}

That code would change all the tags contained in the <body> tag, which in this case would mean everything. The attributes and values added to it would make the font at '12 pixel size' and the font would be changed to Arial, if it already isn't. The background of the site would be black and an image would be added above the black background colour, which is found in the same directory as the index, called 'bg.png'.

Okay, let's have a look at the CSS tag layout:

element{
attribute: value;
}

That is the basic layout of where the tags go, in relation to where the tags would go in HTML.
The { and } characters are stating where the attributes and values go, but the element stays outside, in it's separate place. The : acts as the separator, which distinguishes the attribute from the value. Finally the ; states that the value ended so you put this at the end of each line of attributes. You can only start a new attribute after you've added this to the end of the one above it. You can have as many attribute and value sets as you want, also, you can have as many values as you want, as long as the values are usable with the attribute it's placed with.

Starting with the Basics - RETURN TO TOP
This will be a rather large category. This is where I discuss the little things and say when they're useful.
This category will be more practical than the others, meaning in this section I won't post many examples, but instead you can use the code yourself and experiment with it in your own ways.

 - This splits the area between the p tags from the rest of the text, adding a blank line above and below the paragraphed area. This is good for large areas of text that needs spacing regularly.

Information
More Information

  - This starts a new line where the code is placed. It's a good idea to include a space, followed by a '/' after br because it allows older browsers to understand it.

Information Information Information Information Information

<a href="URL"> - This is a major code to learn. There are a few things that can be customised with this. href="URL" is the attribute and value which locates the link that the link directs to.

<a href="http://www.google.co.nz" target="_blank" title="Hello">Visit Google</a>

There are a few unexplained tags there. Firstly target="_blank" makes the link open in a Blank/New Window. This is good for off-site links so your viewers don't lose where they began from.
The second unfamiliar tag there is title="Hello". This gives a small pop-up description when you hold your mouse over the link.
Make sure you write http:// before any 'www...' link. If you don't it adds the text onto the current URL, eg. http://www.google.com/www.hotmail.com/. That doesn't exactly work unless that is the proper URL you want to direct to.

<hr /> - This created a horizontal line across the page. You can add style to it, for example, this is a &#hr /> tag with the attribute to make it red:

As you can see, if you tried out that code you'll notice that the colour of the line changed, obviously. There are a few other ways of customising this, for example, width="50%" would set the thickness of it to half the area that contains it. You can also use the width="70px" value, which makes it 70 pixels wide.

Lists - Lists are one of the best ways to display information nicely. You may've noticed lists being used earlier in the site, like the Quick Links menu. Here is the basic code for an unordered list, which is a list that isn't numbered or marked in a way that orders it:

That would make a basic list, which can be easily styled, like this:

List Icon
List Icon
List Icon

You can customise the bullet points by changing the "circle" to either disc or square. Edit the code yourself to change it as it is easy and it wouldn't hurt to try it out yourself.

Another list style is an ordered list. This is done the same as an unordered list but instead of <ul> it's <ol>. And also, instead of type="circle/disc/square" it's type="A/a/1/i/I". 'A' creates an alphabetical list using capital letters, 'a' creates an alphabetical list that uses lower-case letters, '1' creates a numbered list, 'I' creates a list marked with capital roman numerals and 'i' creates a list in lower-case roman numerals.
Here is an example list using capital roman numerals.

Which creates this:

List Icon
List Icon
List Icon
List Icon
List Icon

You can also specify what type of bullet point is used by adding the type="..." to the <li> tag.

Text - RETURN TO TOP
This is obviously one of the biggest parts to a webpage. Text looks horrible if you don't add style. This section will go over as many font tags as I think are necessary to start a site.
Firstly I'll go over the font tags , , <s> and .
To begin with this I want to say do not use the  tag! This is decipricated in favour of CSS.
Now for the three other tags:
 - This tag bolds the text inside the tags, for example: TEXT would make the word 'TEXT' bold.
 - This tag underlines the text inside the tags, for example: TEXT would underline the word "TEXT".
<s> - This tag places a strikeout line through the text inside the tags, for example: <s>TEXT</s> would make a line through the word 'TEXT'.

Now, to add a font style to the text you need to add the code specifying what element to target and what font style you want, for example:

#arial{
font-family: Arial;
}

The code changes for a two-worded font title, as you need to add quotation marks to state it is one part of code, like this:

#cg{
font-family: 12px "Century Gothic";
}

Also, make sure that the people who view the site have the font you want to use downloaded to their computer. If it isn't it shows up in a plain and boring font. Also, you may've noticed the 12px there. That is how you state the size of the font you want. You can change the value of the 12 to anything you want, and if you are familiar with other text measurement tags you can use them too.

Using CSS you can also change the colour, background colour, decorations and a lot of other things.

To change the size of your font you use the color: red; tag in your CSS, replacing the 'red' with whatever value you want. You can use HEX Colour values too, which you can learn about here.

If you want to give the text a background colour like this, all you need to do is use background: teal; in your font styling, obviously, changing the value of teal to a HEX code or a colour shortcut.

To add text decorations, like an underline, an overline, a strike through or to remove those lines. You can do this by adding the following codes:

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: line-through underline overline;

The first line specifies no text-decoration to be added. This can be used if you want to remove the line under a link. The second line says to add an underline to the text, the third, to add a line over the text, the fourth to add a strike, the same way as the <s> tag, and the final one shows that you can combine the values, which would make a line over, under and through the selected text.

If you want to add styles that run through the whole site, you need to apply it to the body, for example:

body{
font: 12px Arial;
}

A final font effect which can be used is the h# tags. Using, for example, <h1>Welcome</h1> would make a big heading. There are six types of h# tags, listing from h1 to h6. The size of the heading goes from larger to smaller, h1 being biggest. Also, when you use the heading tag there will be a space added to the top and bottom, like the  tag.

Media - RETURN TO TOP
Now to go over adding images, sound, videos and stuff like that. I'll start easy, with the images.

<img src="image.png" /> is the basic code of an image with no styling. src="image.png" refers to where the image can be found.
If an image doesn't show up because it can't be found or doesn't load you can use alt="Title" to add text where the image would've appeared.

You can use the height and width tags to specify how large or small an image is. This is good if you want to stretch an image bigger or make it smaller. Also, by setting the image size the internet browser doesn't need to find the dimensions from downloading it but can retreive them from the code, making it load faster.

Also, you can add a border by adding the code border="#" where '#' is the size you want the border. To remove the border use a value of 0. You can also add this in CSS, for example, to remove borders from every image you can use the following code:

img{
border: 0;
}

Finally, to embed videos, sounds and other things that I haven't discussed on this website, check out this page on how to use the <embed> tags. It explains it much better than I could.

Great! Now let's finish off with the 'Ok, Now What?' section to get your site up and running.

Website created by Chris Conway in 2007 - Read More
Created for the TVNZ NetGuide Schools Web Challenge