Website/Webpage Creation Guidelines for Static Sites

Filenames and Folders

Filename and Folder guidelines are necessary to keep web elements organized in an efficient manner. If filenames and folder guidelines are not correctly followed, it is possible that the files and folders, once uploaded to a web server, will not work as designed in a local environment.

1) Filenames must accurately describe the file it represents (e.g. index.html, services.html, rulogo.gif, policies.pdf, etc.)

2) DO NOT number or greatly abbreviate filenames or folders (e.g. rtb5.html, pdf4.pdf, image1.gif). These filenames are much too vague. If another programmer or developer looked at these files, they would not know what the file is until they physically open it. Even from that point on, the developer would have to write down the details of each file to keep organized if all the filenames are in a similar format. Not only does this practice help the developer, but if you are to re-visit a site 6 months down the line, you would have a better understanding of what you did to develop the site. The only exception to this rule is if you have a number of images that you are switching out of a JavaScript code, and in this case, numbering images is fine. There may be other exceptions, but unless it makes absolute sense, all files should follow the above guidelines.

Basic Site File Structure

The basic file structure of a website should be as follows:

1) All html files should be placed at the top level of the respective main folder. The only exception would be html files contained in a well-defined section of a site (e.g. archives).

2) All PDF, CSS and JS files should be placed in their own respective folder – e.g. ‘pdf’, ‘css’ or ‘js’ folders.

3) All images should be placed in a folder on the top level of the site and should contain ALL images for the site. Therefore, all references to images will follow the format <img src=”images/whateverimage.jpg”>.

Even if an HTML page is a few levels deep in the site structure, the corresponding images for the page should ALWAYS go in the main images folder, and the <img> tag should reflect this using relative linking:

<img src=”../images/whateverimage.jpg”> or

If there are photo galleries on the site with many images, it may make sense to create a specific folder WITHIN the images folder to contain these images for organizational purposes:

4) Server side includes should be used for any site elements that are repeated across multiple pages in the site (e.g. global navigation, footer, even page headers). This allows a user to update a single file and have the change reflected across all pages of a site. These files should be placed in a folder called ‘includes’ on the top level of the respective site, and should use the ‘.html’ extension. Within the HTML document, the includes should be referenced as:

Please note that in some local environments, ‘include’ files may not display as intended – it may be necessary to upload the files to a server environment for them to be properly read.

Basic Web Page Structure

All web pages created for the University must adhere to the same page structure so that the pages are consistent in terms of code structure. This helps developers read and modify the pages more quickly and efficiently, and also helps in how the pages are indexed by Search engines such as Google or Yahoo.

Header Information

The page header contains information not visible to users, and is contained within the <head>…</head> tags of the document. Be sure to include the following elements:

1) Title of the HTML page that displays in the top-most bar on a standard web-browser.

<title>The Dalai Lama Visits Rutgers</title>

2) META tag used to add keywords to a page so that it can be properly recognized and indexed by search engines such as Google or Yahoo. When these terms are submitted by a user in a search engine query, these keywords will help the search engine find the page, and display it as a result of the query.

3) This META tag is the description displayed when the terms are submitted by a user in a search engine query.

Body Content

The main content of the page visible to users contained within the <body>…</body> tags of the document. When creating web pages:

1) All single tags (meaning tags that aren’t ‘container tags’ like , , etc. like <img>, ) must end with ‘ /> ‘ to close the tag: , <img….. / > , etc. All examples below apply this rule.

2) All image tags MUST contain the ‘height’, ‘width’, ‘alt’ and ‘title’ tags. If the image is being used as a clickable link, then the image tag must contain the ‘border’ designation as well. The ‘alt’ and ‘title’ should contain the same information – this is the information displayed when a user rolls over an image. If the image does not have an appropriate ‘title’ or ‘alt’ (such as a spacer image, bullet, or other non-essential image) the designation should still be used, but should be referenced as an empty-set: (e.g. alt=” ” ).

3) The rule for ‘alt’ and ‘title’ tags also applies to image maps.

<area shape="rect" coords="2,13,98,24" href="/%20%3Ca%20href%3D"http://search.rutgers.edu/">http://search.rutgers.edu " alt="Finding people and more..." title="Finding people and more..." />

</map>

4) The tag below is used to reference server side include files, which should be placed in a specific ‘includes’ folder.

Browser Testing

Although vast improvements have been made over the past few years with how pages are displayed across platforms and browser versions, it is still necessary to check pages for browser and platform compatibility.

After a site is developed and is ready for release, it should be first checked in a variety of different browsers and platforms including the latest and previous versions of the following: