Validate
Validate |
||
| Web Design Remove margin | Dynamic menu button | Open a pop up window | Close a pop up window | Redirect a visitor | Rollover effect | Show and hide a text area within a single page | |
||
| Topic:
Remove margin Time: 1 minute Level: Beginner Requirement: any text editor Have you struggled to remove those frustrating margins of your HTML page? Well, insert this line into your CSS file: body { margin: 0px; } Additionally, include this element on the same line, between those curly brackets: background-color: #dcdcdc; |
||
| Topic:
Dynamic menu button Time: 3 minutes Level: Intermediate Requirement: any text editor For different reasons the small size of your files is important, and sometimes you are required to design your own website without using the Flash code. This tutorial will show you how to make in less then 3 minutes a dynamic button using HTML code and CSS syntax. Copy and paste the below code into a Notepad/ANSI text document, and then save the file under this name: “button.html”. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Dynamic menu button</title> <link href="button.css" rel="stylesheet" type="text/css"> </head> <body> <table cellspacing="0" cellpadding="0" border="0" align="left"> <tr> <td width="150" height="30"> <a class="navigator" title="Home" href="http://www.smorfe.com" target="_self">Home</a> </td> </tr> </table ></body> </html> Copy and paste the below code into a new Notepad/ANSI text document, and then save the file under this name: “button.css”. You can control the button appearance (color, font, pad-border etc) by changing the properties’ values. .navigator:link { color: #000; font-size: 12px; font-family: Verdana; font-weight: bold; text-decoration: none; background-color: #c0c0c0; display: block; padding: 6px 10px 6px 3px; border-style: solid; border-width: 1px; border-color: #fff #808080 #808080 #fff; } .navigator:visited { color: #696969; font-size: 12px; font-family: Verdana; font-weight: bold; text-decoration: none; background-color: #c0c0c0; display: block; padding: 6px 10px 6px 3px; border-style: solid; border-width: 1px; border-color: #fff #808080 #808080 #fff; } .navigator:hover { color: #fff; font-size: 12px; font-family: Verdana; font-weight: bold; background-color: #000; display: block; padding: 6px 10px 6px 3px; border-style: solid; border-width: 1px; border-color: #fff #808080 #808080 #fff; } Have a look at your menu button or download the source files. |
||
| Topic:
Open a pop up window Time: 2 minutes Level: Intermediate Requirement: any text editor Copy and paste the below code into a new Notepad/ANSI text document, and then save the file under this name: “window.html”. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Pop up window</title> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features);} //--> </script> </head> <body> <table> <tr> <td onClick="MM_openBrWindow('open_this.html','win','width=400,height=300')"> <a href="javascript:;"> open me</a> </td> </tr> </table> </body> </html> Create an additional Notepad/ANSI text document, copy and paste the below code into it, and then save the file under this name: “open_this.html”. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>This is a pop up window</title> </head> <body> </body> </html> See how it works or download the source files. |
||
| Topic:
Close a pop up window Time: 1 minute Level: Beginner Requirement: any text editor Just add the below code to your pop up window. <a href="javascript:window.close();">close this window</a> See also: Open a pop up window |
||
| Topic:
Redirect a visitor Time: 1 minute Level: Beginner Requirement: any text editor A simple but efficient way to automatically redirect your visitor to another page is to insert the below code line into the page you want to redirect from, between <head> and </head> tags. You can modify the “refreshing” time by changing the content ’s value of 3 (seconds) in whatsoever. <meta http-equiv="refresh" content="3; URL=your link"> Example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Redirect</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="refresh" content="3; URL=http://www.smorfe.com"> </head> <body> </body> </html> Here is the example or download the source files. |
||
| Topic:
Rollover effect Time: 2 minutes Level: Beginner Requirement: any text editor The convenient way to customize the format of the text (font, size, color etc), giving you a better control over the layout and the appearance of your HTML page, is to use CSS code or Cascading Style Sheets. Copy and paste the below code into a new Notepad/ANSI text document, and then save the file under this name: “rollover.html”. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Rollover effect</title> <link href="rollover.css" rel="stylesheet" type="text/css"> </head> <body> <a class="text" href="http://www.smorfe.com">your link here</a> </body> </html> Create an additional Notepad/ANSI text document, copy and paste the below code into it, and then save the file under this name: “rollover.css”. .text:link { color: #00f; font-size: 12px; font-family: Verdana; text-decoration: underline; } .text:visited { color: #2a5fff; font-size: 12px; font-family: Verdana; text-decoration: underline; } .text:hover { color: #fff; font-size: 12px; font-family: Verdana; background-color: #00f; } This website is plenty of examples. Download the source files. |
||
| Topic:
Show and hide a text area within a single page Time: 3 minutes Level: Beginner Requirement: any text editor Copy and paste the below code into a new Notepad/ANSI text document, and then save the file under this name: “show-hide.html”. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Show and Hide</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="show.css" rel="stylesheet" type="text/css" media="all"> <script type="text/javascript"> function toggle(o) { var e = document.getElementById(o); e.style.display = (e.style.display == 'none') ? 'block' : 'none'; } </script> </head> <body> <a class="text" href="javascript:toggle('content');">Show</a> <div id="content" style="display: none;"> <span class="text"><br>How about this?<br><br></span> <a class="text" href="javascript:toggle('content');">Hide</a> </div> </body> </html> Create an additional Notepad/ANSI text document, copy and paste the below code into it, and then save the file under this name: “show.css”. .text:link { color: #00f; font-size: 12px; font-family: Verdana; text-decoration: underline; } .text:visited { color: #2a5fff; font-size: 12px; font-family: Verdana; text-decoration: underline; } .text:hover { color: #fff; font-size: 12px; font-family: Verdana; background-color: #00f; } .text { color: #000; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 150%; } Try it or download the source files. |
||
| Latest update: Nov 21, 2007 |