Welcome to Aspire Knowledge Central (AKC)

Home Public Library Author Content

Principles of HTML design for web engineering

Click here to provide feedback or comments at the bottom of this page

Manage this page

1. Display

2. Feedback

This document will be a series of questions and observations with answers and recommendations

Satya - Sunday, December 19, 2004 10:51:18 AM

Structure each page so that content is separated

Typically all web pages sit in a context, identified by a background for the page containing common menus etc. This is similar to a master page in a power point document

As you create lot of pages find ways to include the master page using server side includes such as jsps

Focus your design for the page only on the content and not the menus

Satya - Sunday, December 19, 2004 10:56:23 AM

No fonts or formatting tags in the content html

Now you know how to focus on the content area of an html page, the next thing to do is to keep the html clean. Try to minimize html constructs to get the effect you want.

For one, don't explicitly specify the fonts and colors etc. Use a common style sheet to derive them. Try to eliminate spurious layout elements such as spans or divs or tables etc to keep the html clean

Use divs and tables judiciously in that order.

Although you can use html editing tools such as frontpage and dreamweaver, validate the html they generate and make sure it is clean.

If you are not familiar with html, understand the few basics such as paragraphs, headings, divs, pre, and style elements.

Rely as much as possible on style sheets to get the visual effect.

Read "Javascript Bible" by Danny Goodman in spare time to refresh your ideas on html pages and javascript.

Satya - Sunday, December 19, 2004 11:03:08 AM

Example of a well structured web page


<HEAD>
<TITLE>Your title goes here</TITLE>
<%@include file="includes/common-html-head.jsp" %>
</HEAD><BODY>
<%@include file="includes/common-body-top.jsp" %>
<!--
*****************************************************************
* content_begin
*****************************************************************
-->

<p>This is your content area

<!--
*****************************************************************
* content_end
*****************************************************************
-->
<%@include file="includes/common-body-bottom.jsp" %>

Satya - Sunday, December 19, 2004 11:21:00 AM

For running text (like an article for ex) on web pages don't use tables

Instead use the regular paragraphs and headings. For interspersed images try using inline image tags. Use divs as a next option if that works. Use tables as the last option

Definitely not use tables for paragraphs and headings!!

Satya - Sunday, December 19, 2004 11:33:02 AM

Separate different sections of html with comment blocks

Identify the significant sections of an html page with eye catching comment blocks to help with maintenance

Especially when you divs and tables and other nested structures.

Also higher level headings such as h2, h3 etc.

Satya - Sunday, December 19, 2004 12:00:08 PM

Periodically Remove the commented out sections

Once in a while go back and delete the commented out sections. This will help in cleaning up if you have to so that you are not dealing with parts of the pages that are no longer of importance.