:'######::'##:::::'##::::'###::::'########:
'##... ##: ##:'##: ##:::'## ##:::... ##..::
##:::..:: ##: ##: ##::'##:. ##::::: ##::::
. ######:: ##: ##: ##:'##:::. ##:::: ##::::
:..... ##: ##: ##: ##: #########:::: ##::::
'##::: ##: ##: ##: ##: ##.... ##:::: ##::::
. ######::. ###. ###:: ##:::: ##:::: ##::::
:......::::...::...:::..:::::..:::::..:::::
___ ___ ___ _____ ___ ___________ _ _ _____
| \/ | / _ \| __ \ / _ \ |___ /_ _| \ | || ___|
| . . |/ /_\ \ | \// /_\ \ / / | | | \| || |__
| |\/| || _ | | __ | _ | / / | | | . ` || __|
| | | || | | | |_\ \| | | |./ /____| |_| |\ || |___
\_| |_/\_| |_/\____/\_| |_/\_____/\___/\_| \_/\____/
.'`-_-`',.`'-_ Issue 41 Article 4 _-'`,.'`-_-`',
(____________________________________________________)
| Basic HTML |
(____________________________________________________)
Cheezy
[x--------------------------------------------------x]
In this artical i will give a very basic guide to using html for
designing webpages. I have only explained a few commands here but you
should be able to make a reasonably good looking page using them. This
is a good way to learn a few commands to give you a start in html, a
good way to learn more, and learn how to use html better, is by looking
at the source of many html webpages. Html is logical so the parts that
i have not explained in the html below you should be able to work out
when you see how a browser displays the page. If not look at other
webpages that use it.
Below is a sample of html that you could copy and paste into notepad
and save as whatever.html . I tried to set it out well to make it easy
to understand. Looking at what this gives you when you open it in a
web browser can help you understand what everything does in it. The
origional idea for this was as a template so you could use this as a
template but it probably has a bit to much rubbish on it now to be any
use as that.
Top
********** cut here ******************
title here
The background colour (bgcolor) can be writen as hex from #000000
(black) to #FFFFFF (white), certain colours can be written as words
also. The same way of defining colours is used for text and links
also.
A picture can also be set as the background. Use
background="image.jpeg" where bgcolor is.
This is how to tell the browser to show an image. The width and height
of the image is in pixles.
Text goes here.
linktext. You can put writing
before and after the link text.
If the link has a value for the target it will open in a new
window.this will open
in a new window
An image can be made into a link also.
If no height and width is given for the image it will be it's
actuall size.
p gives a new paragraph
br gives a new line
Font size one is small (1).
Font size 2 is also small (2).
This is normal sized text, font size 3 (3).
Font size 4 is BIG (4).
The /font at the end of each line tells the browser that text after
it is no longer set with the font size you told it to use.
Big (h1).
smaller (h2).
even smaller (h3).
even smaller (h4).
even smaller (h5).
li gives a bullet point. (li can be used with ol and /ol to give
numbers, explore that yourself.)
i gives italics.
b gives bold text.
dd and /dd can be used to move text to the right a bit.
This is useful because
all text is moved the
same distance to make
a document look neat.
Center puts the text or picture in the center of a page.
Many of these effects can be used together to
link to sites, while
making the text bigger or
smaller.
All this time the text can still
be centralised.
********** cut here ******************
Bottom
Remember that all web browser display the same page slightly
differently, you should definetly test your pages on Internet Explorer,
Netscape and checking it on AOL's browser would be a good plan aswell.
(I only checked this html on internet explorer, but there is nothing
complicated in it and i couldn't be botherd installing netscape and
AOL.) Also remember that putting a new line in notepad will not make
a new line when the page is displayed, everything that you want the
browser to do you have to tell it to do. Just think it through, it's
very logical.
Shouts: CocytusUK and SWATeam
Contact:
e-mail Cheezyh1@hotmail.com
IRC irc.cocytusuk.org 6667 #cocytusuk