|
Website
Design Tips: HTML, JavaScript codes, tips, tricks and techniques
Web
Source Web Design Tips
by Shelley Lowery
Cascading Style Sheets
The FONT tag is used to display your text in a specific style. Using
fonts within a table requires you to add the FONT tag to each
individual cell. This technique will cause your page to be larger
than necessary.
By using Cascading Style Sheets, you can, not only save yourself a
lot of time, but keep your page size down.
Place the following code between the <HEAD> and </HEAD> tags of your
HTML page.
<STYLE TYPE="text/css">
<!--
TD{font-family: Verdana; font-size: 12pt;}
--->
</STYLE>
By using this style sheet, all the text displayed in your table will
be displayed in your specified font and size.
Tip provided by: Web Source: Your Guide to Professional Web Design
and Development.
http://www.web-source.net
----------------------------------------------------------------------
Web Source Web Design Tips
by Shelley Lowery
Preformat Your Forms
The FORM tag is used to set up input forms on your web site. To
properly align your forms, instead of using a table, use the <PRE>
tag for the same results. Your form will be displayed exactly as you
format it within your HTML.
By preformatting your forms, not only will it save you some time,
but it will also cut down on your HTML code and speed up your web
sites load time.
<FORM>
<PRE>
Name: <input type="text">
Email:<imput type="text">
</PRE>
</FORM>
Tip provided by: Web Source: Your Guide to Professional Web Design
and Development.
http://www.web-source.net
----------------------------------------------------------------------
Web Source Web Design Tips
by Shelley Lowery
Heading Tags
The HEADING tag is used to display your heading text in a larger
font with <H1> being the largest down to <H6> being the smallest.
Some Search Engines place relevance on text displayed within the
<H#> tags, so place some of your most relevant keywords within any
of the 6 <Hx> tags.
Example:
<H3>Your Guide to Health & Fitness</H3>
When using the HEADING tags, you don't have to use the <H1> for your
first heading. You may begin with the heading size of your choice,
but for your secondary headings, you should not use a larger heading
than you began with. In other words, if you're using <H3> for your
primary heading, then your secondary headings should be <H4> or <H5>
and not <H1> or <H2>.
Tip provided by: Web Source: Your Guide to Professional Web Design
and Development.
http://www.web-source.net
----------------------------------------------------------------------
Web Source Web Design Tips
by Shelley Lowery
Creating Customized Horizontal Rules
The HORIZONTAL RULE tag is used to divide different subjects within
your web page.
You can specify the height, width, color and shading values within
the <HR> tag.
Examples:
<HR WIDTH="50%" SIZE="3">
This example will display your horizontal rule across 50% of your
page width or if placed within a table cell, 50% of the table cell.
<HR WIDTH="50%" SIZE="3" NOSHADE>
This example will display your horizontal rule across 50% of your
page width with the height set to 3. The NOSHADE will display the
<HR> as a solid line.
<HR WIDTH="75%" COLOR="#FF0000">
This example will display a red horizontal rule across 75% of your
page.
Tip provided by: Web Source: Your Guide to Professional Web Design
and Development.
http://www.web-source.net
----------------------------------------------------------------------
Web Source Web Design Tips
by Shelley Lowery
Resizing Your Images
The IMAGE tag is used to display images on your web page.
You can resize your image within your HTML by changing the HEIGHT
and WIDTH values. To retain your images original characteristics,
make sure you adjust the height and the width equally. In other
words, if your original graphic dimensions are height 50 and width
100, to reduce your image to one half the size, you would change the
height to 25 and the width to 50. This technique works best with .jpg
images, as .gif images are reduced to a maximum of 256 colors.
In addition, you can add the ALT element to enable you to place your
most relevant keywords for Search Engine indexing. The text will
only be displayed on your web site while your image loads and when
your mouse is over it.
Example:
<IMG SRC="yourimage.gif" HEIGHT="20" WIDTH="20"
ALT="health fitness">
Tip provided by: Web Source: Your Guide to Professional Web Design
and Development.
http://www.web-source.net
|