|
Online Casino Affiliate Marketing Manual, Intermediate Level
IMAGE OPTIMIZATION
Images can add that extra bit of sass to a online casino affiliate website,
so long as they're used cleverly. Avoiding going overboard with that sass
and only putting quality graphics on your pages which compliment your
site's design and colour-scheme will enhance the look of your site.
Images are often the cause of many slow loading pages, but done correctly,
you can keep using images to make your page look nice while also keeping
load times down.
Optimising images for the web is a tricky business. You have to get the
right balance between filesize and picture quality. It is an essential
step though. Look at any webpage, and you will see that most of its load
time comes from images. Your website will be needlessly slow if you don't
drop the sizes of these images.
 Top
Ways to Optimize
There are three key areas where bytes can be shaved off your graphics:
bit depth (number of colours), resolution, and dimension. Here I'm going
to show you the practicalities of web graphics optimisation, and less
of the technicalities. You don't need expensive graphics editors to compress
the sizes of your images, as there are plenty of free utilities and shareware
that will do the job for you.
Now, you've got some stuff written, and a couple of linked pages. Your
site is looking far more convincing now. But there's still something missing,
isn't there? Most new HTML learners can't help themselves from wanting
to fill their pages with images. The beauty of it is that it's really
easy. In fact, if you've been paying attention so far, you should have
no problem at all. Let's get busy.
Top
How do I insert an image on my page?
This is the basic stuff — just getting the image on your page. The
code for inline images is img. You use the same type of attribute as the
href attribute from the last article, so having used that before will
help you get your head around this quicker.
To keep it simple, place the image you want to use in the same directory
as the file it is going to be in. Say it's called 'go.gif', the code is:
Very Important<img src="go.gif">
src stands for 'SouRCe', so what you're saying is the image source is
go.gif. Make sure you've gotten the image file type right. If you're linking
to a photograph, it is more than likely a .jpg. The src bit is mandatory
in an img tag, which means you have to put it in. Obvious really, otherwise
there'd be nothing there.
You can put in the url of any image on the web into the src, but really
you should only use relative addresses to put images onto your pages.
Adding external images means a reader has to connect to multiple servers
when they load your page, and that adds lots of extra time to your page's
download. Not a good thing. You can save images from other casino affiliate
web pages into your own directory and use them from there if you want,
as long as the images are free (you should always check with the site
owner).
http://www.yourhtmlsource.com/myfirstsite/basicimages.html
Top
TABLES
Basic Table Code
Tables are one of the most flexible layout systems available to web-designers.
In fact, you'd be hard pressed to find a professional site which doesn't
make use of tables.
Tables are made up of many parts, all inside one another, which is where
much of the complications come from. Thankfully, there is a very rigid
and logical system for writing tables.
<table border="1">
<tr>
<td>cell 1</td><td>cell 2</td>
</tr>
<tr>
<td>cell 3</td><td>cell 4</td>
</tr>
</table>
would create
cell 1 cell 2
cell 3 cell 4
Even though that's about as basic as a table can be, that might still
look far more complicated than you're used to. Allow me to explain:
• <table> holds everything else inside. border is an attribute.
• <tr> starts a new Table Row. Rows are ended with a closing
</tr>.
• <td> means Table Data, or Table Cell in other words. Each
box is a cell. tds are closed similarly with a </td>.
• </table> ends the table.
Cells resize themselves if the data you put into the tds is big, and each
row in a table must contain the same amount of cells, unless you use special
attributes (dealt with later). You cannot put anything in a table that
is not within a td and a /td - i.e. you can't start writing after a tr
tag, you must put in the td first. Be careful that you close all your
tags. Since the tds are contained in the trs, and they are contained in
the <table>, if you forget any end tags, your whole table might
be messed up (especially in the more recent browsers who are clamping
down on this).
http://www.yourhtmlsource.com/tables/basictables.html
Top
BASIC FORMS
Forms are a very simple way to allow your visitors to send you simple
information, whether it be for feedback purposes, subscription or purchase
information, or any of the many other uses of forms.
Using simple HTML forms is a very slick way of receiving information from
your visitors. You put a few boxes and buttons on your page, they enter
in their details and you receive them through email — brilliant.
Top
Form Structure
Just like the rest of HTML, forms follow a structure. The <form>
tag is a container tag. It holds all of the elements, such as text boxes
and submit buttons, which we'll see below, inside it. Our form container
will look like this:
<form name="feedback" method="post" action="mailto:you@site.com">
<!-- Form elements will go in here -->
</form>
This tag and its attributes start a new form; name the form ‘feedback’,
specify that the method the form will use is to post the information,
and give the location that the information will be sent to with the action
attribute — in this case your email address. Make sure you put your
address in straight after the attribute, with no space in-between.
This method of sending the data will just send an email. If you want the
form to add a thank-you message afterwards, you need to use Perl to write
a CGI script, which is a bit more complicated. For your first form, just
send it straight to your email address.
Once you've set down that a form is going here, you will need to populate
it with some of the input elements and a submit button. Put the parts
below between the form tags.
Top
Text Boxes
These will probably be the main parts of your form. They allow the reader
to input either a line or multiple lines of text.
Top
One-line Text Box
The first type of text box is a one-line box, suitable for information
like their name or email address. It looks like this:
Click inside the box and try it out. You can type anything you want. The
code for one of these boxes is
<input type="text" name="mail" size="25">
<input>
This is the tag name for many of the form elements that are there to collect
user input.
Top
Type
The value of this attribute decides which of the input elements this one
is. In this case, text is telling the browser that it's a single-line
text-box.
Top
Name
When you get the results of this form in your email, you're going to need
to know which responses were placed in which boxes, as you just get back
a load of text. This is where the name attribute comes in. With this,
each line in the response will be given a label in the email. If you used
name="firstname", because you were using this box to find out
the reader's first name, you would receive
firstname=Ross
in the email you are sent.
Top
Size
This specifies the length of the box on your page. If the box is not wide
enough for the information that is entered, it will scroll across to allow
more letters, but you should tailor this to the type of information being
asked for so that most people can see their whole response at once.
Top
Text Area Box
This box allows more than one line of text to be entered. It's suitable
for comments, street addresses, that kind of thing. You don't need to
press return at the end of each line, the browser will wrap the text automatically.
For some reason, text areas aren't specified as a value for input type="...",
but instead have their own tag — <textarea>. It's a stupid
inconsistency, but we're all just going to have to deal with that. The
code is
<textarea cols="50" rows="4" name="comment"></textarea>
Again, you'll have to change around the dimensions to suit your needs.
cols and rows here mean COLumns and er, ROWS respectively. Take note that
this tag needs an end-tag too. More stupidity. Any text you put in there
between the tags will appear in the box when the form is loaded.
If you want to change the colour of the scrollbar in there, you're going
to have to use some CSS in your scrollbars.
Top
Selection Boxes
These three elements give the reader a choice of options, and asks them
to pick out one or more of them.
Top
Radio Buttons
These small circular buttons can be used in polls or information forms
to ask the user their preference. When you set up a group of them, you
can only select one choice. Try it here:
1. 2. 3.
They're called radio buttons because they function like the buttons on
a really old car radio. Remember, the guys who came up with this stuff
have beards as long as your arm, so you should expect things like that.
The code for a radio button is:
<input type="radio" name="choices" value="choice1">
The code is about the same as the one you've seen before. type="radio"
says that this is going to be a radio button. There is a new attribute
here too — value. This is like the answer to a question. Say you
were asking the reader what they liked most about your site. The name
of this group of questions would be 'likemost' and there would be three
choices, all radio buttons, all with name="likemost" in them,
to show that they're all part of the same question. Then the three values
could be 'layout', 'content' and 'graphics'. When you receive the results,
you'll get something like likemost=layout depending on which button was
checked. Get it? I should tell you now that you can add the value attribute
to the single-line text box above to add in some text before the user
even starts typing.
Top
Check Boxes
Groups of check boxes are similar to radio buttons except they are not
grouped, so multiple boxes can be selected at the same time. They are
small squares that are marked with a tick when selected. Here's a few
to play with:
1. 2. 3.
The code for these boxes is the same as for the radio buttons, with just
the value of the type attribute changed:
<input type="checkbox" name="checkbox1">
Notice that there is no value attribute for checkboxes, as they will either
be checked or left blank. If you want a checkbox to be checked before
the user gets to modify it, add the boolean checked attribute:
<input type="checkbox" name="newsletter" checked="checked">
Top
Drop-down Select Boxes
These are a cool way to get a user to select an option. They perform the
same thing as radio buttons, it's just the way they look that's different.
Most of the options available are not in view until the user gets intimate
with the box and clicks on it. The rest of the options will then pop-up
below the box.
This box would be used to find out what continent you come from, like
I care. The lengthy code is:
<select name="continent" size="1">
<option value="europe">europe</option>
<option value="namerica">n. america</option>
<option value="samerica">s. america</option>
<option value="asia">asia</option>
<option value="africa">africa</option>
<option value="oz">the other one</option>
</select>
select boxes are like textareas — they have their own tag, but these
elements hold further tags inside them too. Each choice you give your
reader is denoted by an option. The name/value system remains from the
tags above. The size attribute sets how many lines of options are displayed.
Setting this to anything over 1 (the default) is really defeating the
purpose of having the options hidden away.
You can use these boxes as a link-chooser too, with the help of a bit
of JavaScript. The code for that is on the drop-down link box page.
Send and Reset Buttons
Now that you've gotten the reader to fill in all the information you want,
you need a finishing button to click on to send it all to your email address
(or wherever you've said at the start). You can also clear all the info
in the form out with the reset button. They're both real easy to make,
and look like this:
The simple tags for these two are:
<input type="submit" value="Submit">
<input type="reset">
The value attribute in this case sets the text that's displayed on the
front of the button. When you click submit all the form information is
sent to your target and the page (or following page) is loaded. Done.
http://www.yourhtmlsource.com/forms/
Top
SCROLLING TEXT
Make your text scroll across your page using simple html, with the use
of a marquee tag which loads fast.
<div align="center"><FONT
color="#ffffff" size="+1"><MARQUEE bgcolor="#000080"
direction="right" loop="20" width="75%"><STRONG>This
is cool!</STRONG></MARQUEE></FONT></DIV>
Go
to the Advanced Section of The Casino Affiliate Marketing Manual
|