This is a bit
more complicated but still pretty simple. At the top of your HTML document there
should be somthing like this <body bgcolor="" text=""
alink="" link="" vlink=""> (Inbetween the ""s
would be the color codes) To make your backround into a pattern or picture you
must upload the picture into your directory or know the URL of a backround somewhere
else.
First you must change the <body bgcolor "" to <body backround="the
URL of the bacround you wish to use"
Here is an example: <body
backround="http://somwhere.com/logo.gif" text="#ffffff"
alink="#000000" link="#00000" vlink="#00000">
Making links to
pages is very simple. Here's how:
<a href="link to whatever
page you want">page name here</a>
If you do not include the </a> after it the whole page will be the link.
This is also fairly
simple. First you need to upload an image to your directory. Then to make an
image appear on your page you would put:
<img src="the image you want
to appear">
Here's an example <img src="http://members.tripod.com/SonicTm/sonicsm.jpg">
This combines
the two sections above. Firt you need to make a link to the page <a
href="http://sonic99.cjb.net"> Then here you would put the
images link like <img src ="http://members.tripod.com/SonicTm/sonicsm.jpg"></a>
In the <img src part you can also add border=0 so that a border is not automatically
placed around the picture.
Here is an example: <a href="http://www.rnst.com/"><img
border=0 src="http://www.rnst.com/image.jpg"></a>
How to make images different sizes than they appear
To do this you
need your images location. Lets say your image is <img
src="http://members.tripod.com/SonicTm/sonicsm.jpg"> Then
you need to put inbetween the <img src a width and height property which
would be coded width="" height="", the border= 0 would go
there also.
Example: <img height="25"
width="25" src="http://members.tripod.com/SonicTm/sonicsm.jpg">
This would result in the following picture:
How to make text appear beside an image
Have you ever
noticed that when you type beside an image the text starts at the bottom of
the image and there is then an empty space left? Well, this little command will
solve that problem.
align=right or align=left
Here's an example: <img
src="blah.gif" height=50 width=50 align=right>
How to make a link that opens a new browser window
This is almost
just as simple as making a simple link. The command is:
target=body
Here's an example: <a href="whatever.com"
target=body>
This will open a link in a new window and is very helpfull when making links
in chats.
Tables can get
pretty complicated because you can easily mix up a tag or not have them appear
as you want them to. There are lots of different things you can do with tables.
Alot of Ghost'z DuNgeon pages use
tables. I will go over the basics first then go into more complex tables after
that.
The basic table would be made using these commands:
<TABLE WIDTH="75%"
BORDER="1">
<TR>
<TD>Your text here</TD>
</TR>
</TABLE>
That would appear like this:
| Your Text here |
You can then change
the tables properties to make it smaller by changing the WIDTH="100%"
to "50%". You also do not need to use a percent you can use pixels
like "200" or "300", this will make you frames more precise
and they will not move when the page is maximized/minimized. To make the table
two rows and two columns you would use this command:
That command would look like this:
| Box 1 | Box 2 |
| Box 3 | Box 4 |
| How cool a purple background! |
These are definitely
not as easy as they look. They can become very complicated depending on what
you are trying to do. Below I will show you how to make a form to mail someone:
<form method="post"
action="mailto: your e-mail address here">
The code above will be hidden. The main part of the form starts below:
Full Name: <input name="name" type="text" size=35>
E-mail Address: <input name="address" type="text" size=30>
Comments: <textarea name="text" rows=5 cols=30></textarea>
You can add the
following if you want to know what people think about your site.
<select name="poll" size=4>
<option>I like your page
<option>It needs some work
</select>
Now you need
the buttons at the bottom to send it in and clear it if they want to start again:
<input type="Submit"
value="Send it in"> <input type="reset" value="Clear">
And then you need the closing tag:
</form>
This is what it would all look like:
Some people think
that frames are hard to make, but they're really not. You will need to create
a separate HTML file and name it what you want the title to be. There are a
few attributes to learn but I'm sure you'll do fine. Below is a basic frames
document and an explanation of what it means.
<html>
<head>
<title>Your Title</title>
<head>
<frameset cols=20%,80%>
<frame src="leftside.html" name="leftside">
<frame src="rightside.html" name="rightside">
</frameset>
</html>
What it means:
There are two frames that are columns (columns run vertically) one is 20% wide
and the other is 80%.(your frames must equal 100% of the page.) You may also
use pixels in which case you will need only one value and an asterisk, i.e.
Frameset cols=130,*.The first frame contains a child document (a separate html
file) called leftside.html and is named leftside. The second column contains
the file rightside.html and is named rightside. The (noframes) document is optional,you
can enter standard html documents here for users who do not support frames.
You can set the rows as you wish, you may want three columns, in that case set
the desired percentages.
(ex.)
20%,40%,40%
Remember,if you add another frame you must add another file to your frameset.
<frame src="document"name="">
<frame src="document" name="">
<frame src="document" name="">
You may also change the <frameset cols>to<frameset rows>if you desire
rows (rows run horizontally.)
Why do I name my frames?
You will understand when I start talking about your child pages and links.
Can I have columns and rows?
Sure you can, this would call for "embedding" a frame. It would look
like this:
<frameset rows=10%,40%,50%>
<frame src="document">
<frame src="document">
<frameset rows=50%>
<frame src="document">
</frameset>
Notice the embedded frameset rows tag which would use the 50% frameset.
Working with your files
The leftside.html
and rightside.html are standard html files like the ones you're used to creating.
The difference is on your links you can target which frame(side of the page)
will change.This way you can have a menu which remains on one side of the page
while the other (side of page) changes. The files you name in your frameset
will be the ones which appear when someone clicks on your URL.
This is a sample frameset:(you name it index.html)
<html>
<head>
<title>Your Title</title>
</head>
<frameset cols=20%,80%>
<frame src="leftside.html" name="leftside">
<frame src="rightside.html" name="rightside">
</frameset>
For Example: If
I typed:
<a href="mainpage.html"
target="rightside">
The "mainpage.html"
would open up on the right side since I have targeted the link to that frame.(Notice
on the frameset where the right frame is named "rightside")
<target="_top">
If most of the links on the child are outside the system you can add a tag to
the head of your file it would look like this:
<head><title>
Page name
</title>
<base target="_top">
</head>
Below a frameset
example that you can copy and paste if you want.
|
<HTML> NOTE: The <NOFRAMES> tag is not manditory...If you wish, simply delete that part of the code. But Iwould keep it in just in case somone's browser does not support frames. If you don't, then you can write in there somthing like "Sorry your broswer does not support frames." |
<target="_top>
This would make
all links which don't have the (target=) to be brought to the top level. This
works exceptionally well with webrings. This is a tag that a browser recognizes
to bring someone to the top of that page.This way your frames will not show
up when viewing someone elses page. Remember,the parent file is what the viewers
will access, the files listed on this page should apply, I suggest having the
20% frame be a menu and the 80% frame be one reserved for viewing. The default
80% file should be a synopsis of your page.
Floating Frames
Floating
frames or I-Frames are frames introduced by microsoft that are not attached
to the sides of the browser, they are directly added to the body of your document.
Note that you still have to target to this frame and name it. The tag appears
much like the <IMG> tag and many of the attributes are the same. Here's
the code:
<IFRAME NAME="float1"
SRC="yourpagehere" WIDTH=300 HEIGHT=200 ALIGN="LEFT">
There would be a floating frame here for compatible browsers
</IFRAME>
|
|
