| |
|
|
|
|
|
|
 | Making
your
own website
isn't rocket science - I've proved that by making this website. There are two ways to make one. The
first and easiest is to make a website on a web builder, which gives you page templates and you simply change the things on
the pages. The other way is to use HTML, which is a lot harder to learn but well worth the effort because you don't have to
stick to whatever template you have been given to make your website. And you can add extra stuff to your website the web builder
doesn't provide. I've used HTML to add music to my pages, and I've made it possible to put images from the internet directly
onto my site without having to download it first and then upload it again. I've also added special cursors (mouse pointers)
to my pages with HTML. On this page I'm going to show you how to make a website using both of these methods (it is advisable
to use both combined because if you make a website totally out of HTML you usually have to pay for a webspace and domain name). |
|
|
- Why would I want a website?
- Web building
- Introduction to HTML
- Text
- Text
size
- Font
- Alignment
- Colours on a web page
- Changing text colour
- Backgrounds
- Highlighting
- Adding Images
- Resizing
- Aligning
images
- Image borders
- Links
- Music
- Advanced HTML
|
|
| |
|
|
|
| Why would I want a website? | |  | |  |
|
People have websites for lots of reasons. Most of them are for promoting a business, but lots of people just have websites
to tell people about themselves or something they are interested in. If you want to stand out from the crowd and have a lot
to say about yourself, a website is a great way to do it. If you have artwork and want to show it off, a website is a good
way of showing it to people. If you are trying to get a job you could include your CV. Your website could be educational or
just for pleasure.
|
|
| Method 1 - Web building websites | | | | |
|
This is by far the easiest method, but you usually have to stick to a style or colour template, which can
be irritating as
you might want a specific style for your website. The web builder I made my website on was Lycos
UK, and this only allows you one website per account and gives you about fifteen styles to choose from but you have lots
of flexibility with colour, font and layout. The Lycos International web builder
is slightly different. The web address for your site is easier to remember and you can have multiple sites per account, plus
there are hundreds of site colours and layouts to choose from, but you have to stick to that colour and layout throughout
the page and there isn't much choice. This does have a selection of about 5 animated cursors, one of which has a trail of
letters behind it, and you can decide which word it creates. Both are free and work in a similar way. I have tried both and
overall Lycos UK is easier to use but Lycos International
has more selection and the styles are more detailed.
|
These web builders are pretty self explanatory. They give you everything you need to make a simple website
like mine. They also have tools to add chunks of HTML to your site to add extra stuff that don't come with the builder. Once
you have created your site you will be able to publish it for free and it will give you a web address. To have a proper .com
address (www.NAME.com) it costs a certain amount per year.
|
|
|
|
|
|
|
| Method 2 - Hyper Text Mark-up Language | | | | |
|
Hyper Text Mark-up Language (HTML) may look complicated, but when you learn how to use it you'll find it
easy to use.All
HTML is made up of codes. Each code means something - either it changes the text on a web page or it adds a new item to a
web page. HTML codes are always started and ended with chevrons. You'll find these on your keyboard - they are the full-stop
and comma keys whilst pressing shift. They look like this < >. The code goes in between. A HTML code is called a tag. Lots
of tags combined with text make up a web page. A simple small tag can have enormous effects on a page. There is a code about
20 letters long that changes the whole background colour of a page! Please remember that HTML is written in American-English,
so if you want to change the text colour you must type "color" in the code and not "colour." It won't work if you change it. Where
I've shown a tag that part has
to be changed to suit your page, I've written what you need to change in CAPITALS and in green.
|
|
Text in an HTML code is very simple. It doesn't need tags around it. You simply type it in. To change things about
it, like
colour, font or alignment, you add tags at the start and finishing tags at the end (finishing tags are very similar to starting
ones, but they always have a forward slash / immediately in front of the first chevron <).
To write a word in italics, write the tag <i> before the word, and then the tag </i>
after the word.
You can put whole groups of words in italics by enclosing the whole group in the tags.
Likewise, to write a word in bold, write the tag <b> before it and </b>
after it.
To underline the text, write the tag <u> before it and </u> after
it.
|
|
Changing text size is very simple. You can't change size like in a Word Document where you can have any size between 1 and
500. You only get seven sizes on a web page. 1 is the smallest and 7 is the largest.
Size 1 - tiny
Size 2 - small
Size 3 - normal
Size 4 - large
Size 5 - big
Size 6 - very big
Size 7 - enormous
To change text size, type this tag before the words you want to change:
<font size=SIZE NUMBER>
and end it with </font> after the words.
|
|
To change the font, or text style, type this tag before the words you want to change:
<font face="FONT NAME">
You can find a wide selection of fonts in word processors like Mircosoft Word. It is advisable to use a font that most visitors
are likely to have on their system, because if they don't the text will look peculiar. Good examples of common fonts are Arial
(that's the one I use), Times
New Roman,
Comic Sans MS, Verdana
and Impact. You must also be careful to spell it
correctly, or
it won't work. If the fonts I've named haven't changed from the rest of the text on this page (apart from the colour) then
you don't have those fonts on your system and therefore you can't use it.
|
|
This means how your text is spread across the page.
It could be sucked to the left
It could be sucked to the right
It could be in the centre
Text is automatically on the left, but you can change this by using one of these tags:
To align to the left, type <P align=left>
To align to the right, type <P align=right>
To align to the centre, type <P align=center>
Note the spelling of "center," because it is American. Don't change it. Computers only speak one language.
This can also be used to align other things. Note that the tag does not include the word FONT.
The P stands for paragraph, so when you do this you are starting a new paragraph. At the end of the paragraph type </P>
to end the tag. To start a new paragraph without changing
the alignment, just type the tag <P> and end the paragraph with </P> This
will only work if you want the text on the left. If you want it anywhere else you have to specify where you want it at the
start of each paragraph.
|
|
Colours on a web page are always shown as "hexadecimal" codes, which simply means there are six figures,
which could
be either letters or numbers. Each set of two figures stand for one colour. The three colours indicated by hexadecimal codes
are red (the first two figures), green (the middle two) and blue
(the last two). If you know anything about mixing light, you will know that red and green make yellow,
green and blue made turquoise (cyan) and red and blue make pink (magenta).
To write a hexadecimal code, you write a hash (#) and then the code. The easiest way to write the colour code is each figure
for each colour is the same. You can make them different, but this is more complicated. F means "full" in a hexadecimal code,
and 0 means "off", so if you wrote #ff0000 the colour would be red, because the red lights are both on and the green and blue
lights are all off. Likewise, if you wrote #00ffff it would be cyan because the red lights are off and the blue and green
lights are on. You can use the letter c in the same way, but c means "half on." So #cc0000 would be dark red. You can find
out all sorts of different colours by experimenting. Some useful colours are:- #ff0000 red
- #ff7f00
orange
- #ffff00 yellow
- #00ff00 green
- #0000ff
blue
- #ff00ff pink
- #ffbfdf baby pink
- #ffdfbf
tan
- #ffffbf pastel yellow
- #dfffbf mint
green
- #bfdfff
baby blue
- #dfbfff lilac
- #c00000 dark
red
- #bf5f00 brown
- #bfbf00 olive
- #60bf00 dark green
- #0000bf dark blue
- #7f007f purple
- #ffffff
white
- #cccccc grey
- #000000 black
|
|
Text colour can be changed very easily with hexadecimal codes. If you don't indicate the text colour on your code, the text
will appear whatever colour the visitor has set as the default colour on web pages, which may or may not be what you want.
If not, you need to set a colour. The way to do this is typing the tag in front of the word or words you want to change:
<font color=HEXADECIMAL CODE>
and then end it by writing </font>
You must remember to end the tag, otherwise ALL text after it will be the same colour.
|
|
There are two ways you can brighten up your webpage with a background. You can either use solid colour, or you can use an
image from the internet.
To use solid colour, type this tag near the start of your HTML code:
<body bgcolor=HEXADECIMAL CODE>
You don't have to end this tag, because it doesn't end on your page.
To use an image as your background, type this tag near the start of your HTML code:
<body background="URL OF IMAGE">
To find the URL (address) of the image, find the image on the internet, right click it, and click Properties out of the box
that appears. A larger box will appear, and about halfway down it will say ADDRESS (URL). The web address next to this is
the URL of the image. Select this (by dragging over it with your mouse) and copy it (press Ctrl+C while it is selected) and
paste it into your tag.
This tag doesn't need ending either.
|
|
You can make text look like it is permanently highlighted in a colour of your choice - like
this. If you want to do that, type this tag before the words you want to change:
<font style="BACKGROUND-COLOR: HEXADECIMAL CODE">
and end it with </font>
You may have noticed that tags that have something to do with FONT end with </font>. That is no coincidence.
It doesn't matter whether you write in capitals or lower case letters in HTML unless it is proper text and you want it that
way.
Whatever the tag maybe, if you it changes the text appearance it will end with </font>.
|
|
Adding an image to a web page is like adding a chunk of text - you can align it, resize it, and organise it.
To add an image, use this tag:
<img src="URL OF IMAGE">
I explained earlier how to get the URL of the image.
If you want one of your own images on the internet, it's a good idea to get a webspace account from Lycos and use it to upload
images. It's free and quick and once your image is on the web page you can get the URL like any other image on the net.
|
|
All images that you can use on the internet are measured in pixels. Pixels are tiny specks on your screen used to make up
images. To resize them you have to add stuff to your image tag behind the last chevron.
You can find out an image's size on the internet by right clicking. The width and height will be in Properties. If you want
to resize one on your page, type this tag instead of an ordinary image tag:
<img src="URL OF IMAGE" width=WIDTH
IN PIXELS height=HEIGHT IN PIXELS>
If you've no idea how big pixels are, this is one pixel: 
width=1 height=1>
This is 10 pixels by 10 pixels:
This is 50 pixels by 6 pixels:
You get the idea.
|
| Aligning and organising an image | | | | |
|
If you add an image tag just next to text, it will appear as though it was a word, like this 
width=20 height=20>. But you can give it its very own line to sit on by making a separate paragraph (this is explained in
the Alignment
section). You can also align it like you would text.
|
|
Adding an image border is very easy indeed. All you have to do is type border=BORDER WIDTH IN PIXELS
inside the image tag after the URL. The tag would then look like this:
<img src="URL OF IMAGE" border=BORDER
WIDTH IN PIXELS>
As you will learn soon, images develop a border around them automatically if you link them to somewhere. You can get rid of
this by typing border=0 inside the image tag.
The border colour depends on the current font colour, so you can change this like you would if it was text.
|
|
Links can be added to either text or an image. They can link to any URL (web address) on the net. And this is how to do it.
To link text, use this tag:
<a href="URL OF PAGE">
Next, type the text you wish to use as a link, and then type </a> to finish the link. Then the tag wuld look something
like this:
<a href="URL OF PAGE">LINK TEXT</a>
To add a link to images, use the same tags, but instead of typing text to use as a link, use the image tag. In the Borders
section, I told you how to get rid of the border that appears around a linked image.
|
|
The best form of music to download is a MIDI file, because you can easily find free MIDI on the internet, get the address
of the file, and add it to your music tag. A good place to start collecting music is here
at Midi Database. That is where I got my music for this website.
If you want a large player that has lots of buttons on it so the visitor can stop, pause, play, fast forward, rewind and browse
through the music you've chosen, use this tag:
<embed src="URL OF SOUND FILE">
You can resize it the same way you would an image.
For a smaller player with only the play and stop controls, use this tag:
<embed src="URL OF SOUND FILE" width=50 height=40
controls="smallconsole">
Don't take the sizes out of this tag, or the player will just appear like a large one. You cannot change them either. Keep
them as 50 by 40. You can align both players like images.
To hide the player completely, use this tag:
<embed src="URL OF SOUND FILE" hidden=true autostart=true
loop=true>
This will cause the music to play continuously. If you only want it to play once, take "loop=true" out of the tag. The hidden
player doesn't need aligning, and it doesn't matter where you put it on your page.
|
|
HTML can do lots of things to a web page. In fact, there are so many things I hardly have the time nor the webspace to show
them to you. I've shown you some of the simpler methods of making a web page look special using HTML, but I learnt most of
my HTML from a website called Writing HTML, and you can learn
much more from here besides what I've got.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
