Goto Introduction Page
www.Teachwebdesign.Com
 
Sub Menu contents
Site Map
· Learn HTML

· Design 1 (Basic Info)

· Design 2 (Building A Page)

· Design 3 (Fine Tuning)

· Design 4 (A Sample Page)

· Design 5 (A Page Analysis)

· Design 6 (Mobile Web Pages)



Tricks 2 Menu:
· Page Editing

· Page Redirect

· Peel Cornersstar

· Scroll Bars

· Slide Shows

· Spacing

· SSI

· Tab Navigatestar

· Text Highlite

· Thumbnails

· Titles

· Transitions

· Typing-Printing

· Vertical Lines

· View Source

· Videosstar


Design Links
 ·HTML Tags
 
 ·Image Sites
 
 ·Validators
 
 ·Web Hosts
 
 ·Design Sites
 
 ·CSS Sites
 
 ·Javascript
 
 ·Misc Sites


Help Pages
 ·F A Q
 
 ·Page Layout
 
 ·Custom Tables
 
 ·Page Navigation
 
 ·Templates
 
 ·HTML Tricks 1
 
 ·HTML Tricks 2
 
 ·Image Help
 
 ·Glossary
 
 ·Tools
 
 ·Ask Questions


Tutorials
 ·Tutorial 1
 
 ·Tutorial 2
 
 ·Craigslist Tutorial
 
 ·eCommerce Tutorial
 
 ·Page Videos
 
 ·Form Mail
 
 ·Sound Tutorial


Extras
 ·Critiques
 
 ·Quiz
 
 ·News Gps

HTML DESIGN TRICKS 2 and TIPS movies
New Tricks
Added Often


Page Editing

Using a Text Editor on your PC to edit your HTML Documents is fairly easy and we have written a Text Editing Tutorial to help you... Good Luck!

GO UP TO MENU


Page Redirect

To have a user Redirected Automatically to another page is best accomplished by using a Server Redirect via .htaccess files, rather than using the other client-side methods explained below! For info on this please Look Here

To have a user Redirected using the META tag in your HEAD section... which is a client-side Redirect (ie it's done on the user's Browser):

SEE EXAMPLE

Just add this META tag to your HEAD section:

<meta http-equiv="refresh" content= "10;url=http://addy of redirected page">

Change the 10 to whatever number of seconds you want to wait before redirect begins!

Another client-side method using JavaScript will redirect the user automatically without any waiting... put this into your Head section:

<script type="text/javascript">
<!--
window.location="http://someplace.com";
//-->
</script>

GO UP TO MENU


Adding Peel Back Corners star

Creating and adding a "Magic Corner" or Peel Back Corner to your web page is an ASTOUNDING EFFECT... done with Flash Technology... you should look at our PEEL BACK Corner Example where you can get all the info required... and it's ALL FREE ...enjoy!

GO UP TO MENU


Scroll Bars

For Internet Explorer Browsers, you can Color the Scroll Bars (other Browsers will not see these), just by adding a simple Style Code to your <head> section... you can "brighten-up" your pages:

<style type="text/css">
body, html { scrollbar-arrow-color:#0000cc;
scrollbar-face-color:#c7d0e0;
scrollbar-track-color:#e7f0fa;
scrollbar-highlight-color:#e0e7f7;
scrollbar-3dlight-color:#e0e7f7;
scrollbar-shadow-color:#6699cc;
scrollbar-darkshadow-color:#003366; }
</style>

scrollbar Refer to the Image at the right...
Arrow-Color ... [red]
Face-Color ... [green]
Track-Color ... [gray]
Highlight-Color ... [lighter blue]
3DLight-Color ... [darker blue]
Shadow-Color ... [lighter brown]
Darkshadow-Color ... [darker brown]

Change the Colors to suit your page style...

GO UP TO MENU


Slide Shows

Want to make a SlideShow where pics or images rotate automatically...
SEE EXAMPLE

Put this code into your HEAD section and replace the values of image URL's with your own values!

<script type="text/javascript">

<!-- Begin var timeDelay = 5; // change delay time in seconds
var Pix = new Array ("http://davmagic.com/images/pic/pictony.jpg"
,"http://davmagic.com/images/pic/picantiques.jpg"
,"http://davmagic.com/images/pic/picentrance.jpg"
,"http://davmagic.com/images/pic/picdog.jpg"
); var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;}
// End -->
</script>

Now put this code into your BODY section where you want the SlideShow to take place:

<img name="ChangingPix" src="your pic1.jpg" width="???" height="???">

And finally add this to your Body Line of Code:

onLoad="startPix()"

This SlideShow should work on all browsers with JavaScript enabled!

You can find many Free Slideshow Scripts at Dynamic Drive

GO UP TO MENU


Spacing

Even if you're using Tables to control page layout, you still need to be able to space blocks of text or images on a page or in a table cell...

You can string out a bunch of &nbsp; (non breaking spaces codes) for only horizontal control, but a better way is to use an "invisible single pixel gif" and place it by using the image tag and control the space by using the attributes width and height...example: I just inserted a spacial block 100x100 pixels aligned to the left of this text cell and here is the code I used (note the dotclear single pixel gif is stored at my images files):

<img src="/images/dotclear.gif" width="100" height="100" align="left">

To get your own gif, use: Our Image Tutorial

Another way is to use the HTML tag <spacer> ...with it's attribute TYPE and values Block,Horizontal(default),or Vertical.....like this:

<spacer type="block" width="100" height="100" align="left,right,top,bottom,middle">
OR
<spacer type="horizontal" size="75">
OR
<spacer type="vertical" size="90">

Do Not Use A Closing Tag For This Element!

NOTE: The W3C does not recognize this tag in HTML 4.0

GO UP TO MENU


SSI

SSI....Server Side Include...Let's say for example that you have a lot of pages that all have the same thing on them...say it's a Table of links to your other pages. Now if you want to add to or change that Table, you would have to go to each page and make the change...but using SSI (IF your host server allows it to be used) you can rename those pages to a file name ending in ( .shtml ) and take out the Table on all of the pages and replace it with this SSI Directive...

<!--#include virtual="page.txt" -->

Where page.txt is a new text file that you create which has (only) the Table code on it!

This text file should be in the same directory as your .shtml file...now what happens is when the browser reads the .shtml extension of your ( RENAMED ) page URL, it looks for SSI Directives and INSERTS the page.txt file at that position (removing the SSI Directive)...

This is of course only possible IF your server allows it...to test it...go ahead and try it...if it works then you are in luck and will save countless hours of coding because you now only have to change one page (the page.txt ) and the rest is done by your server! The idea is obviously that you can ORIGINALLY build your pages this way and use SSI from the get-go!

NOTE: If you do this as a fix...don't forget to change any links that point to those renamed pages so that they read (.shtml)...or else you'll have a bunch of Dead Links on your hands!!!

IMPORTANT NOTE: It is also possible to use an .htaccess file and add info to it so that you don't need to rename any files to .shtml... SEE THIS PAGE: This Page

GO UP TO MENU


Tab Navigation star

To make custom designed Tab style Navigation, like the kind we use on our pages... (here are two EXAMPLES):

tab navigation

tab navigation

...You need to Study the Technique Here and Here ... the advantages are fantastic... cross browser compatable, and liquid for text size and resolution changes! Only three images are required for any set of tabs... You should also read
Dynamic Drive's CSS Library

GO UP TO MENU


Text Highlite

Here's a CSS code using the "style" attribute which will add a background color to text or to just one word in a text line!

Just put this code into the line:

<span style="background-color: #ffcccc">text here</span>

Use the color name or hexadecimal number preceeded by "#" and adjust your font color to show over it...and don't miss the "colon" or it won't work!

GO UP TO MENU


Thumbnails

A Thumbnail Image is just a smaller sized Image which when clicked on, will take you to either the full sized Image or to any other location...

Click this Example Thumbnail to see what I mean:

dog

A quick way to make a Thumbnail is to use this code:

<a href="URL Of Image Here"><img src="URL Of Image Here" width="70" height="50" border="0"></a>

You can use the same URL for both tags and you can vary the values for width and height...

But to get the Thumbnail to load faster you really should take the original Image and Optimize it (reduce the file size) and Reduce it's overall size (height and width) and get a different URL for this Resized (Smaller) Image and use this URL in the Image Tag in the above code!

<a href="URL Of Image Here"><img src="URL Of Optimized Image Here" width="70" height="50" border="0"></a>

You can find Free Image Sites to do this Optimization at Our Design Links Page

GO UP TO MENU


Titles

By adding the TITLE ATTRIBUTE with a corresponding VALUE to any anchor tag, you can cause PC Browsers to show this value text in a tiny pop-up window (like a "tool tip") next to the link as the mouse points to it... See EXAMPLE BELOW:

Davmagic.Com

And here's the code:

<a title="Our Front Page" href="/index.html">Davmagic.Com</a>

GO UP TO MENU


Transitions

For PC Users using IE (Internet Explorer) you can add this code to your HEAD Section, which will cause the page to open in a special way, by sliding open from the left or from the right etc. (many possibilities):

<meta http-equiv="Page-Enter" content="revealTrans(Duration=?,Transition=?)">

Change the "?" after "Duration" to the Number of SECONDS that you want the Transition to last... and change the "?" after "Transition" to the Number for the Transition EFFECT that you want from the list on THIS PAGE ...

GO UP TO MENU


Typing - Printing

To make business cards, letterheads, letters, resumés, labels, fliers and more...you simply use HTML tables to build a page this then configures the page so that you can print it out when you goto it online with your web browser and receive your business cards etc. which you can cut out with a paper cutter if necessary (use heavier paper for cards)... you can build a page using any text editor on your PC too... SEE Our Tutorial for more info...

It's all so simple once you learn HTML tables, fonts, colors etc.

Just create a new page and in the body section, build an HTML table to produce a page of say 10 copies of business cards for example...then print the page and there you have it! NOTE: You will have to experiment a bit depending on WHAT PRINTER you are using!

Do the same thing on a new page for resumés, letterheads, labels, greeting cards, letters, fliers etc. NOTE: You don't always have to use tables to layout the page ...for a Flier for example you can simply write out the whole page and adjust your font sizes and colors and go ahead and print it! Then take it up to a 5 cent copy machine and make copies...copy your letterheads and other documents this way too!

You can view our page which prints out business cards for our Davmagic.Com Site... Go ahead and print the page to see how it comes out... NOTE: It is set-up to print on a HP 1200 All-In-One Printer, so it might not print correctly on your printer...

NOTE: You will have to fiddle around with your HTML table cells to get the printed page to result in the correct size for your cards based on WHAT PRINTER you have... same thing is true for letter heads etc.

There are many PC Software Programs that can be used on a PC to Print Business Cards, Fliers etc. but using HTML is just a different way to accomplish the same thing!

For a quick lesson on Tables GO HERE

GO UP TO MENU


Vertical Lines

To make Vertical Lines there are a couple of methods...

Use a Table code and add an invisible single pixel gif to a cell and use the Image attributes width and height... you can COLOR the line too by using the table data attribute "bgcolor"...

<table cellspacing="0" cellpadding="0" border="0"><tr><td width="2" bgcolor="green"><img src="/images/dotclear.gif" width="2" height="150"></td></tr></table>

Another way is to use a single pixel gif of the color you want which you have made and saved in your Image files... use the image attributes width and height to control the line...


<img src="/images/dotred.gif" width="10" height="100">


GO UP TO MENU


View Source

For PC users using Windows OS... just Right Click on an OPEN PLACE on the page... and then hit "View Source" in the window that opens... you will then get a new window that opens in Note Pad that will show the entire HTML Source Code for that webpage...

Watch the View Source Tutorial Movie which shows the above information to you Live!

Watch Movie in Media Player takes a minute to load... player controls are at bottom!

GO UP TO MENU


Adding Videos star

Creating and adding a Video to play on your webpage is thoroughly discussed at our VIDEO Tutorial ...enjoy!

GO UP TO MENU

Tricks 1---Images