Today I'm going to share some basic HTML tips for biggeners. These tips are very useful for day-to-day HTML:
1. Changing Table Background Colors on Mouseover / Mouseout
This is very easy trick to learn and very useful, Place your mouse pointer over each of the HTML table cells below to view this HTML mouseover effect.
This HTML code will enable you to give your HTML tables a more professional look and feel, as it will greatly improve the presentation of your HTML table data.
| Your Table Data |
| Your Table Data |
| Your Table Data |
Here's the code of above table:
<TABLE BORDER="0" CELLPADDING="1" WIDTH="100%">
<TR onMouseover="this.bgColor='#CCCCCC'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
<TR onMouseover="this.bgColor='#CCCCCC'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
<TR onMouseover="this.bgColor='#CCCCCC'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
</TABLE>You can change color (#CCCCCC and #FFFFFF) according to your choice but whatever you change it should look nice.
2. Redirect to a New Page
Sometime you need to change your web page location for different reasons, but you dont want to lose your traffic linked to that page. So for this reason you may need to redirect your visitor to the new page.
Place the following HTML redirect code between the <HEAD> and </HEAD> tags of your HTML code.
<meta HTTP-EQUIV="REFRESH" content="0; url=http://tutorialfeed.blogspot.com/"> The above HTML redirect code will redirect your visitors to another web page instantly. The content="0; may be changed to the number of seconds you want the browser to wait before redirecting.
3. Gradient Background Effect
A gradient background effect will display your selected HTML background colors in ascending or descending color variations - from lightest to darkest or darkest to lightest.
This powerful HTML code effect can be used to give your web pages a unique look and feel. However, it must be used very cautiously.
This effect can be used for your entire web page background, or within your table cells.
To use the gradient effect as your web page background, use the following BODY tag:
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">To use the gradient effect within your HTML tables, place the following code within your table tag:
style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');" Although you can edit the gradient colors indicated in red, keep in mind, in order for the gradient effect to display properly, you must select one light color and another color that is several shades lighter.
4. Using an Image Submit Button
It is not necessary to use default html submit button in your forms, you can use your own customized image button instead. Here's is the simple code for converting your html submit button to image button:
<input type="submit" value="Submit" style="background:url(../images/btn_bg1.gif) no-repeat;">Using an image submission button within your HTML web page forms will enable you to easily spice up your forms.
5. Resizing Images
If you have a small web page image in JPG format and need to make it just a little bit smaller, you can do so simply by changing your image's HEIGHT and WIDTH values within your image tag. However, if you need to make a substantial change in the size of your image, this method is not recommended, as your file size will be the same.
Following the code for resizing images by changing the HEIGHT and WIDTH values:
Standard Image
<IMG SRC="yourimage.jpg" WIDTH="90" HEIGHT="130" BORDER="0" />Resized Image
<IMG SRC="yourimage.jpg" WIDTH="39" HEIGHT="63" BORDER="0" />When resizing a web page image, please ensure that you make the propotionate amount of change so the image will display properly.
6. Creating an HTML Email Form
You can create a simple form, to enable your visitors to send you comments, questions, product support requests, or whatever you'd like.
Copy and paste the following HTML code into the HTML portion of your web page:
<FORM action="mailto:you@xyz.com" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD> </TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>Change the text indicated in bold to your email address.
Displaying an email form on your web page provides a great way to enable your visitors to contact you.
If you want to read detailed information about creating form Click here
7. Embedding Web Pages within Web Pages
Copy and paste the code below into your web page where you would like to embed the additional page.
<object data=http://tutorialfeed.blogspot.com/ width="600" height="400"> <embed src=http://tutorialfeed.blogspot.com/ width="600" height="400"> </embed> Error: Embedded data could not be displayed. </object>Change the text indicated in bold to suit your needs.
8. Using list tag to show item in ordered list
This is very useful to tip to show items in a list on your web page. You can understand by following example:
- Master Items
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Copy and paste following code in your page where you want to show list items:
<ul><B>Master Items</B>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>If you want to read more interesting facts about list tag click here
9. Showing two events on a single click by using Onclick
I have already posted article related to this topic in my previouse posts click here to read.
10. Auto Fill Email Subject and Body
If you're using a list management system that requires specific text to be placed within the email subject or body of your email, this HTML code is for you.
Many times, if you request your visitors to type in a specific email subject or body text in order to subscribe to your publication, they may not type the required text correctly. This mistake will cause you to lose your subscriber, as your system will reject the subscription request.
To prevent this problem, you can create an email link that will automatically fill in the subject line and body when clicked on.
yourname@xyz.com
Add the following code to your HTML.
<a HREF="mailto:yourname@xyz.com?subject=Your Subject&body=Message for the body">yourname@xyz.com </a>Want to read more about HTML click here
Subscribe to TutorialFeed via RSS
5 comments :
Great! Thanks for your html tutorial. This is really a big help to those who have problems like these in creating their own website for personal or business use.
Thanks Mitch for your valuable time.
Thank you so much for these very useful tips. Maybe you can help me. I'm trying to work with html to put the links on my blog with flashing links when I mouse over them. For example at this japanese site: http://celluloide.tistory.com/category/Future%20pop/EBM, they have these flashing links. Do you know how can I have the same effect? Thank you once again and greeting from Portugal.
Hi, Jose thanks for your valuable time. They have used some JavaScript for their flashing links. If you want to use same kind of flashing links on your site then you use following JavaScript file:
<script language=javascript src="http://cfs.tistory.com/blog/plugins/RainbowLink/rainbow.js" type="text/javascript"></script>
Copy above script and paste between <head>copy here...</head> of your page.
Cheers!!!!
Thank you for the HTML tutorial, it help me customizing my blog.
regards
Post a Comment