To See Mouseover Effect
Descriptive Message On Mouseover With Text Link
W
e have used many different codes and scripts in the making of our tutorial that were not included in the finished "My First Web Page". If they were not included in the finished product, you can find them here and also the below link will give you a page that will have all the different codes we used that you can copy/cut and paste into a notepad and save to a floppy disc.
[ All The HTML Codes We Used ]
W
hat is a "Link Anchor"? If you click on the below link, you will find out how to make you go to a different part of this page or to a specific section of another page.
[ Watch What Happens When You click Me ]
Embed Midi Music Files ~ Visible And Hidden
Control Panel For
Control Panel For
Control Panel For
Small Panel
W hich ever browser you are viewing the above control panels, the other one will not appear correctly. Below we will show you the attributes for each respective browser.
I
f you notice on the above players that the positioning of the words is on both sides of the player. With Internet Explorer this does not pose a positioning problem as opposed to Netscape where you need to add another opening and closing attribute (<nobr> </nobr>) if it is to be viewed with certain platforms of Netscape as well as Internet Explorer or it will not appear properly in Netscape. It is a good practice in this situation to just add the attribute whatever platform you are designing with so it is the same in both. See the below link for reconfigurations for proper positioning so they are viewed the same in both platforms.
[ Added Attribute For Positioning ]
S etting a visible control panel can be frustrating because they do not appear the same in different browser platforms. This choice needs to be made by you which one will appear properly when viewed in certain platforms.
Internet Explorer Code
<EMBED SRC="Path To Your Upload Music" autostart="false" volume="100" hidden="false" loop="false" controls=smallconsole width="150" height="45">
Netscape Code
<EMBED SRC="Path To Your Upload Music" autostart="false" volume="100" hidden="false" loop="false" controls=smallconsole width="145" height="55">
Netscape Small Panel Code
<EMBED SRC="Path To Your Upload Music" autostart="false" volume="100" hidden="false" loop="false" controls=smallconsole width="143" height="15">
A s you can notice, the only differences in both respective codes is that of width and height. All the other configurations are the same.
Definitions Of Attributes
1) autostart="false" This tells the page when opened not to automatically start the music. If you change it to true the music will start automatically.
2) volume="100" This sets the volume control to maximum volume or 100% when music starts. You can set this to a lower number than 100 if you want. You will notice on the control panel that the volume slide is positioned all the way to the right (Netscape Only) denoting full volume. You can manually slide this to adjust it.
3) hidden="false" This attribute tells the page to make the control panel visible or not. By changing this to true the control panel will not be seen. If you select this option, if the music does not start automatically, no one will hear it or have any way to start the music. (See # 1) If you do this remember that the person/persons listening to the music have no control as to turn it on/off from your page. All They can do is mute their speakers from their computer.
4) loop="false" This tells the control panel how many times to loop (play) the music. If you change this to true it will keep playing over and over again. You can also set this with a number value from 1 and higher. 1 means the song will play only one time and stop.
5) width="143" This defines how wide in pixels the control panel will be.
6) height="15" This defines how wide the control panel will be.
F
isrt thing you need to do is have the midi music file uploaded into your editor so you can call it to play when the page opens. We have covered howto upload files and images on a previous page. But with midi files, most downloaded midi music come in a zip format. If you do not understand zip files and what is involved, follow the below link.
[ All About Zip Files ]
<UL>
<LI>
I Am An Unordered List
<LI>I Also Use Bullets
<LI>Bullets Are The Dots Preceding These Words
</UL>
<OL>
<LI>I Am An Ordered List
<LI>I Use Numbers Instead Of Bullets
<LI>My Numbers Are Automatically Added
<LI>You Do Not Have To Do It
</OL>
A s you can notice, both sets of lists, (Unordered and Ordered) Both use the <LI> tag. This tag denotes it is a list of some sort. This tag you Do Not close with the </LI>
N ow notice the tags that enclose the <LI> tag. They are <UL> </UL> for the Unordered list and <OL> </OL> for the Ordered list. These opening and closing attributes tell the <LI> tags to either use the bullet or a number.
I f you would like to start your paragraphs <P> with a larger letter and a different color font, it is quite easy to do. Just use the below code and make any reconfigurations on the font face and size you prefer. Do you remember why we use 3 different font styles in a complete font tag?
<P><font face="georgia,arial,helvetica"size="6"color="#ba55dc">T</font> <font face="georgia,arial,helvetica"size="3"color="#ffa500">he rest of your paragraph goes here</font></P>
N otice where we opened and closed the <P> </P> </font> tags.
I
f you got to this part of the page by clicking on a link either further down or further up on this page, the process is called a "Link Anchor". This means that you can use links to put you on a specific part of the same page or different page. Follow the below link to see how you can achieve this effect on your pages.
[ Link Anchors ]
H ave you ever visited a site and saw a little message something to the effect of
"Site Best Viewed With Font Style So & So" No link to get the font, just the message. You knew what the style should look like
but you were not viewing it because your computer did not have it.
W
ell, if you would follow the below link, we will show you howto add font styles to your computer plus a very professional way to have your site viewed in a certain font style.
[ Howto Add Font Styles To Your Computer ]
Set Margin Values On Web Page
Y ou can remove the margins on a web page with attributes placed in the <BODY> tag. There are three 3 different sets of attributes you need to use to remove the margins for Internet Explorer, Netscape and MSNTV. By adding all three of the below attributes into your <BODY> tag, you eliminate any margin on all of them. If you are only designing your page for one browser type, then just use the one you need. You can use only the height and not the width or vice versa. Whatever fits your needs in your page design.
<body bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc" topmargin="0" marginheight="0" hspace="0">
T he above have all the height deinitions set to zero. We did not add the left margin attributes.
T he below will have all attributes for height and width set to zero and the page would have no margin whatsoever so to speak.
<body bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" hspace="0" vspace="0">
Y ou can add what is called a "Table" around specified text, images etc. To add a basic table that you define size, color etc. is quite simple to achieve. See the below example.
<!---------- Start Basic Table Code ---------->
<P><table bgcolor="#ba55dc" border="1" width="200"
cellpadding="4" cellspacing="3">
<tr>
<td bgcolor="#ffa500" align="center" colspan="3">
Place your Text, Images, Etc. Here
</td></tr>
</font>
</table></P>
<!---------- End Basic Table Code ---------->
| This Is What Text Looks Like Inside The Above Table Code. |
R
emember! With tables whatever tag to open within the table, you must close when you close the table. For example if you have a font tag inside the table,
<font face="georgia,arial,helvetica"size="3"color="#000000">
you must close </font> that font tag!
L ets define the reconfigurations within the table that you need to be concerned with.
1) <table bgcolor="#ba55dc" This attribute sets the border color around the table. This hinges on what you set your border on if it will be seen or not.
2) border="1" This is the size or width of the border surrounding the table. The number of 1 or greater will denote a visible border. The number 0 will denote no visible border.
3) width="200" This denotes how wide in pixels the table will be. If you delete this attribute completely, what is inside the table will take the size of whatever is inside the table as viewed by the individuals screen size. So what you see without this attribute may not be what someone else will see.
4) <td bgcolor="#ffa500" This denotes the color inside the table.
5) align="center" This denotes the position of what is inside the table. It does NOT position the table itself. This is done with your page positioning. <div align="?">. Remember the ? can be either left, center or right.
W e showed you how to make an "alt tag" on mouseover on a graphic but did you know you can also have a descriptive little message pop up (Just like an alt tag on mouseover) on a text link also.
Basic Alt Tag For Graphic
<img src="Path To Your Uploaded Image" border="0" width="?" height="?" alt="Descriptive Text Here">
Y ou can achieve this effect on mouseover by adding a "title"* tag into your hyperlink.
* Not to get confused with your <title> </title> tag that is in the <HEAD> section of your document. [ Place Cursor Here ]
<a href="Path To URL Called"title="Your Message Goes Here">Place Cursor Here</a>
Howto Deactivate A Link
T his little effect is great if you are like us and do not want all the links to work just for a tutorial. So we just deactivate the link (either Text or Image) by adding the attribute of onClick="return false;" into the URL ( a href ) part of the code. Not in the <img src=""> part if it is attached to a graphic or image
<a href="Path To URL Called"onClick="return false;">This Text Link Is Deactivated</a>B elow is the code for rendering an image link disabled.
<a href="Path To URL Called"onClick="return false;"><img src="Path To Uploaded Image" border="0" Width="?" Height="?" alt="?"></a>
W e have had many requests from people to want to know howto make the little characters with different colors on either side of our links. [ Link ]. This is very simple to do. All we do is add a complete font tag* before the link in the color of your choice, add either the character of [ and the code for one space in front of the URL and the code for one space and then the character of ] behind the closing </a> tag. Also do not forget to close the font tag. </font>. See the below example.
* Complete font tag ~ Click to refresh your memory on why the use of the complete font tag
[ Click Here ]
<font face="georgia,arial,helvetica"size="3"color="#ba55dc">
[ <a href="URL Goes Here">Link Name Here</a> ]</font>R emember that the color you select for the surrounding characters should be in contrast with the link colors you set forth in your body tag.
W
hat is a "Link Anchor"? If you click on the below link, you will find out how to make you go to a different part of this page or to a specific section of another page.
[ Watch What Happens When You click Me ]
Copyright © Consigliere Ltd., All Rights Reserved. 2001-