RaysWebClass.Com |
Comments are like sticky notes that do not show up on the web page but are visible to you, the designer. They can be used to organize your page or to "comment out" sections of code that would be seasonal. For example you may have a sale every 4th of July. So, rather than erase the sale and re-write it every year, you can comment it out and remove the comments every July
<!-- This is a comment -->(Or my favourite rendition)
<!-- * * * * * * * * * * * -->
<!-- * This is a comment * -->
<!-- * * * * * * * * * * * -->
We the people In order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare and secure the blessings of liberty to ourselves and our posterity do ordain and establish this Constitution for the United States of America.
</p>We the people In order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare and secure the blessings of liberty to ourselves and our posterity do ordain and establish this Constitution for the United States of America.
</p>We the people In order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare and secure the blessings of liberty to ourselves and our posterity do ordain and establish this Constitution for the United States of America.
</p>| Red | Green | Blue |
| Black | Orange | Purple |
| White | Yellow | Violet |
| Maroon | Gray | Cornflowerblue |
<pre> Red Green Blue Black Orange Purple White Yellow Violet Maroon Gray Cornflowerblue </pre>
Char Name ASCII Description > > > > greater than sign < < < < less than sign & & & & ampersand ‘ ‘ ‘ ‘ left single quote ’ ’ ’ ‘ right single quote “ “ “ “ left double quote ” ” ” ” right double quote   no-break space © © > © copyright ™ ™ > ™ trademark ® ® ® ® registered • • • • bullet ¤ ¤ ¤ ¤ currency ¢ ¢ ¢ ¢ cent £ £ £ £ pound ¥ ¥ ¥ ¥ yen € € € € euro º º º º ordanent ¹ ¹ ¹ ¹ first ² ² ² ² squared ³ ³ ³ ³ cubed » » » » double greater « « « « double less ° ° ° ° degrees · · · · middle dot ½ ½ ¼ ¼ fraction ¼ ¼ ½ ½ fraction ¾ ¾ ¾ ¾ fraction ‰ ‰ ‰ ‰ per mille µ µ µ µ micro ± ± ± ± plus/minus × × × × multiplication ÷ &division; ÷ ÷ division ≠ &en; ≠ ≠ not equal to ∞ ∞ ∞ ∞ infinity ≡ ≡ ≡ ≡ identical to ¿ ¿ ¿ ¿ inverted? ¡ ¡ ¡ ¡ inverted! § § § § section ¶ ¶ ¶ ¶ paragraph † † † † dagger ‡ ‡ ‡ ‡ double dagger ◊ ◊ ◊ ◊ lozenge ↓ ↓ ↓ ↓ down arrow ← ← ← ← left arrow → → → → right arrow ↑ ↑ ↑ ↑ up arrow ↔ ↔ ↔ ↔ left/right arrows ♣ ♣ ♣ ♣ clubs ♦ ♦ ♦ ♦ diamonds ♥ ♥ ♥ ♥ hearts ♠ ♠ ♠ ♠ spades ♀ ♀ ♀ ♀ Female/Venus ♂ ♂ ♂ ♂ Male/Mars ♪ ♪ ♪ ♪ Eight note ☆ ☆ ☆ ☆ Star ☏ ☏ ☏ ☏ Phone ✓ ✓ ✓ ✓ Check Mark ✕ ✕ ✕ ✕ X-Mark
Now that we have created and fine-tuned our Home Page, let's create a template of the Home Page so we can used it to add new pages to our site without having to create them from scratch.
- Open index.html in notepad.
- Click File → Save As... and save this file as template.html
- Notice (see the very top of notepad) that you are now working in the template.html (NOT index.html)
- Replace the word Home in the title tag (in the head) with template.
- Remove all of the content from the Main Page. Your new template page should look like the sample page below. Rename the page to template.html and save the file.
Your template code should look like this:
(NOTE: If it doesn't, select everything and replace it with the code below)<!DOCTYPE html>Save it, close notepad and the browser, and double click template.html
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Global Company - template</title>
</head>
<body bgcolor='gray' align='center'>
<font size='3' face='verdana'>
<table border='0' cellspacing='0' width='800' align='center' bgcolor='white'>
<tr>
<td colspan='2' bgcolor='#2E869D' height='50'>
<!-- * * * * * * -->
<!-- * Header * -->
<!-- * * * * * * -->
<h2>
Global Company
<img src='images/Globe.gif' align='middle'>
</h2>
</td>
</tr>
<tr valign='top'>
<td width='110'>
<!-- * * * * * * * * * * -->
<!-- * Navigation Menu * -->
<!-- * * * * * * * * * * -->
<br>
<a href='index.html'>Home</a>
<br><br>
<a href='History.html'>History</a>
<br><br>
<a href='Products.html'>Products</a>
<br><br>
<a href='Contact.html'>Contact Us</a>
<br><br>
</td>
<td height='1000'>
<!-- * * * * * * * * * * * * * -->
<!-- * Main Page: BELOW Here * -->
<!-- * * * * * * * * * * * * * -->
template
<!-- * * * * * * * * * * * * * -->
<!-- * Main Page: ABOVE Here * -->
<!-- * * * * * * * * * * * * * -->
</tr>
<tr>
<td colspan='2' height='17' align='center'>
<!-- * * * * * * -->
<!-- * Footer * -->
<!-- * * * * * * -->
<small>
Copyright ©
<!-- * * * * * * * * * * * * * -->
<!-- * Displays Current Year * -->
<!-- * * * * * * * * * * * * * -->
<script type="text/javascript">
var theDate=new Date()
document.write(theDate.getFullYear())
</script>
Global Company
</small>
</td>
</tr>
</table>
</font>
</body>
</html>
See how the hearder and the menu and the footer all show up, and the Main Page says template?
Also, click the Home link in the menu. See how the Menu works. It returns you to the Home Page!- Let's now create the other three pages in our website:
Close notepad and the browser.
Right click on the template.html and choose Copy
Right click anywhere in the html folder and choose Paste
You now have a copy of the template file named: template - Copy.html
Right click on template - Copy.html and choose Rename.
Change the name to History.html.
Repeat this process twice to create Products.html and a Contact.html.- Lets changes the title and Main heading text of these new pages:
Open the Contact page. View the code.
Change the title from Global Company - template to Global Company - Contact Us
Change template (below the Main Page:) to<h2><font color='#2E869D'>Do the same for the History and Products pages.
Contact Us
</font></h2>
Now check out the navigation menu - no more missing pages! Notice how smoothly the transitions are from page to page. Watch the URL box to see it chage from History to Products to Contact etc.