Web Source Web Design Tips
by Shelley Lowery
[Customizing Your Input Boxes]
The INPUT tag is used to create input fields within a
web page form.
You can specify the size of your INPUT box by changing
the SIZE value. In addition, you can change the amount
of text input by changing the MAXLENGTH value.
When specifying the MAXLENGTH value, make sure you
provide your visitors with enough space to type in the
necessary information.
<INPUT type="text" SIZE="10" MAXLENGTH="40">
You can display default text within your INPUT box by
adding the VALUE attribute.
<INPUT type="text" SIZE="10" MAXLENGTH="30" VALUE="Your Text">
Tip provided by: Web Source: Your Guide to Professional
Web Design and Development. http://www.web-source.net
[Top]
Web Source Web Design Tips
by Shelley Lowery
[Adding Color to Your Input Boxes]
Adding Color to Your Input Boxes
The INPUT tag is used to create input fields within a
web page form.
You can change the font, input text color, input text size
and the background color of your INPUT box by using the
STYLE attribute.
<INPUT type="text" STYLE="color: #FFFFFF; font-family:
Verdana; font-weight: bold; font-size: 12px; background-
color: #72A4D2;" size="10" maxlength="30">
In addition, instead of using the standard form submit
button, you can use an image.
<INPUT type=image name="submit" src="yourimage.gif" border="0">
When using an image to replace the standard submission
button, make sure you include, "BORDER=0," as the Netscape
browser will show a border.
Tip provided by: Web Source: Your Guide to Professional
Web Design and Development. http://www.web-source.net
[Top]
Web Source Web Design Tips
by Shelley Lowery
[Creating A Radio or Checkbox Form]
The INPUT tag is used to create input fields within a
web page form.
You can create a radio or checkbox selection list by
adding attributes to your INPUT tag.
<INPUT type="radio" name="option1">Option 1
<INPUT type="radio" name="option2">Option 2
<INPUT type="radio" name="option3">Option 3
<INPUT type="checkbox" name="selection1"> Selection 1
<INPUT type="checkbox" name="selection2"> Selection 2
<INPUT type="checkbox" name="selection3"> Selection 3
"You can select a default value by adding the word "checked"
within your INPUT tag.
<INPUT type="radio" name="option1" checked>Option 1
<INPUT type="checkbox" name="selection1" checked> Selection 1
The OPTION tag is used to create options listed in a
drop down box of a form.
You can select a default option, by adding the word
"selected" within your OPTION tag.
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT>
Tip provided by: Web Source: Your Guide to Professional
Web Design and Development. http://www.web-source.net
[Top]
Web Source Web Design Tips
by Shelley Lowery
[Changing the Style of Your Bullets]
The LIST ITEM tag is used to create bullets to display
your list text.
You can change the style of your bullets by adding
attributes to your <LI> tag.
<Menu>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</Menu>
To create a bulleted list within a list, your code would
look something like this:
<UL>
<LI>Your text goes here
<UL type="circle">
<LI>Your text goes here
<LI>Your text goes here
<LI>Your text goes here
</UL>
<LI>Your text goes here
<LI>Your text goes here
</UL>
Tip provided by: Web Source: Your Guide to Professional
Web Design and Development. http://www.web-source.net
[Top]
Web Source Web Design Tips
by Shelley Lowery
[Creating A Customized Marquee]
The MARQUEE tag is used to scroll text across a web page
and is only supported by Microsoft Internet Explorer.
You can change the background color, width, the number of
times your message will scroll and the speed that your
text scrolls, by adding the following attributes within
your MARQUEE tag.
BGCOLOR="#CCCCCC" - background color
LOOP - Determines how many times the text will scroll.
-1 is indefinite and will continuously scroll. You can set
this to whatever you'd like.
SCROLLAMOUNT - Determines the speed your text will scroll.
WIDTH - Determines the width of your marquee.
<MARQUEE bgcolor="#CCCCCC" loop="-1" scrollamount="2"
width="100%">Example Marquee</MARQUEE>
Tip provided by: Web Source: Your Guide to Professional
Web Design and Development. http://www.web-source.net
[Top]
Web Source Web Design Tips
by Shelley Lowery
[Using META Tags for Search Engine Indexing]
Meta tags are used to give detailed instructions, in
regard to a web page, to the Search Engines and browsers.
You can provide the Search Engines with a description of
your web page and the most relevant "keywords" for your
web site by adding the following META tags between the
<HEAD> and </HEAD> tags of your HTML.
<META name="Description" content="Description of your site">
<META name="keywords" content="keywords describing your site">
When selecting your keywords, it is best to list them within
a phrase. Try to concentrate on only a few keyword phrases
throughout your text.
Example:
dog grooming techniques,groomers,tips,pet supplies,animal care,
Try to select keyword phrases that your potential visitor
may type in while at a Search Engine.
The keywords above will cover a wide variety of queries:
dog
dog grooming
dog groomers
grooming techniques
dog grooming techniques
dog groomer techniques
dog grooming tips
dog groomer tips
grooming tips
dog care
dog supplies
animal care
pet care
pet supplies
pet grooming
pet groomers
animal grooming
animal groomers
grooming supplies
dog grooming supplies
pet grooming supplies
Try not to repeat your META keywords more than three times.
To cover the many different ways your potential visitor may
type in their search terms, type your META keywords in a few
different styles.
Example:
<META name="keywords" content="dog grooming techniques,groomers,
tips,pet supplies,animal care,Dog Grooming Techniques,Groomers,
Tips,Pet Supplies,Animal Care,DOG GROOMING TECHNIQUES,GROOMERS,
TIPS,PET SUPPLIES,ANIMAL CARE">
Tip provided by: Web Source: Your Guide to Professional
Web Design and Development. http://www.web-source.net
[Top]
Web Source Web Design Tips
by Shelley Lowery
[Using META Tags to Redirect]
Meta tags are used to give detailed instructions, in
regard to a web page, to the Search Engines and browsers.
You can automatically redirect your visitors to another
web page by adding the following META tag between the
<HEAD> and </HEAD> tags of your HTML.
<META HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain.com/">
The CONTENT attribute tells the browser to redirect the
visitor to the URL you specify in 4 seconds. This can be
changed to whatever you'd like.
If you move your web site to a new location, this tag
provides a great way to automatically redirect your visitors.
Tip provided by: Web Source: Your Guide to Professional Web Design and
Development. http://www.web-source.net
[Top]
Web Source Web Design Tips
by Shelley Lowery
[Using META Tags to Prevent Browser Cache]
Meta tags are used to give detailed instructions, in
regard to a web page, to the Search Engines and browsers.
When visiting a web site, your browser will cache or make
a copy of the web site for fasting viewing your next visit.
This will prevent your regular visitors from seeing your
new content unless they manually reload their browser.
To prevent this problem, add the following code between
the <HEAD> and </HEAD> tags of your HTML.
<META http-equiv="Pragma" content="no-cache">
Tip provided by: Web Source: Your Guide to Professional Web Design and
Development. http://www.web-source.net
[Top]
Web Source Web Design Tips
by Shelley Lowery
[Using META Tags to Prevent Search Engine Indexing]
Using META Tags to Prevent Search Engine Indexing
Meta tags are used to give detailed instructions, in
regard to a web page, to the Search Engines and browsers.
Many times, you may have a web page that you don't want
the Search Engines to index. To help with this problem,
add one of the following codes between the <HEAD> and
</HEAD> tags of your HTML.
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
This tag tells the robots not to index this page and not
to follow any links within the page.
<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">
This tag tells the robots not to index this page, but
follow any links within the page.
Tip provided by: Web Source: Your Guide to Professional Web Design and
Development. http://www.web-source.net
[Top]
|
|
