How to Expand the Index in HTML
When you own and operate your own website, controlling the index contents is critical to guiding site visitors to other pages, your menu, and to whatever details they'll need about products and services. Coding in HTML continues to be useful as it is quite simple to write and adjust, and you can also find numerous templates you can adapt to suit your own purposes. When you want to move away from a plain index that has only a basic introduction or a graphic with little information, you can substantially improve upon the site by adding fuller code. This will also help with search engine optimization (SEO), guiding even more people to your site.
Other People Are Reading
Things You'll Need
- HTML writing software
- Upload / download capabilities (FTP)
- Site content -- text and graphics
Instructions
-
-
1
View your basic index.html web page to be sure it shows the tags <!Doctype><HTML> at the very top, and </HTML> at the very bottom of the page. A standard line at the top of most modern HTML pages is this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
2
Within the HTML, add any head tags, such as title, META tags, keywords, page author and so forth. These are standard and look like: <title>Fred's Freelance Filmmaking</title>. META tags are written using <META Name="description" content=" Fred Fillmore shares his filmmaking experience and know-how through online articles and classes."> When changing the Meta Name to keywords, the content will be a list of actual keywords pertinent to your site. Close the head area by using </head> after all the items are in place.
-
-
3
Add the <body> elements -- such as <body background="black" link=" " vlink=" "> Assign your colors using your coding program or color keys from graphic programs. Add the font along with its size and color. For example: <font face="Arial,Helvetica,sans-serif" size="2" color="#FFFFFF">
-
4
Enter the code for any tables to set widths, table rows and table data. This commonly appears as: <table align="center" border=1 bordercolor="black" cellspacing=0 cellpadding=0 COLS=1 WIDTH="900"> Experiment with the different attributes to determine what your page will look like. Add the rows <tr> and data <td> as needed through subsequent lines: <tr width="900" bgcolor="000000"><td><p>All about Fred...</p></td></tr>
-
5
Build your menu for the various subpages. In our example, Fred will have a page with his bio (bio.html), his video clips (videos.html), info on classes and workshops (classes.html) and how to pay to take the class. You can use the same index template to adapt to each page by copying index.html and saving it with a new name ( payhere.html ). The menu will list each of the page links so your site visitors can find them.
-
6
Expand the code to include headers, subheaders, block quotes, graphics and so forth. Each of these has basic coding that you will often find directly within your coding software. Typical header sizes are <H1> through <H5> and always require a closing </H5> or </H1>. Images use the standard <IMG ALIGN="left" SRC="/images/fredonset1.jpg"> but you can add height, width and other details, too. Make sure you upload all the images you code or they won't show up on the web page.
-
7
Add any other items such as embedded videos, background images, and links that aren't on your core menu. Keep in mind, though, that you want a professional looking site -- don't overdo the first page. Keep it clean, simple and direct with excellent navigation to other site pages.
-
8
Make sure all your closing tags are at the end of each opener, as well as at the end of each page. For example, the bottom of each page should have </td></tr></table> where the table actually ends, plus </body> and </html> at the very end of the page.
-
1
Tips & Warnings
Pre-writing all your content will simplify your web work considerably. For example, write your biography then cut and paste it within the paragraphing code <p> </p> or divide it into several paragraphs.
If you are using a template designed by someone else, make sure it serves all the functions and purposes you want for your own website before developing your entire site.
Test each version of your index by uploading it and viewing it for visual appeal as well as for functionality. Test every sub-page and each link throughout your site to be sure everything works correctly.
Consider avoiding frames altogether -- these have become virtually obsolete and are considered a nuisance to most site visitors and users, and are not very modern-browser friendly anymore.
