CREATING HTML DOCUMENTS

Text Editor: A simple text editor such as Notepad or SimpleText gives the greatest control and is often the best way to learn HTML. This approach requires a thorough understanding of HTML to develop web pages.

Notepad

 

HTML Editor: HTML editors such as Dreamweaver, GoLive, FrontPage, CoffeeCup and HomeSite range from free to very expensive. Some have many features that make it easy to create sophisticated web pages. This approach can lead to overreliance on particular software and overly complex code.

Dreamweaver CoffeeCup

 

Convert: Many applications (e.g. Word, Pagemaker) can automatically generate HTML from an existing document. However they tend to create complex, non-standard HTML and give little control over results. Compare the automatically generated HTML file with the accurate PDF file.

html doc pdf doc

 

Hybrid: It may be most useful to use a combination of methods to create web pages, for example the initial page can be created with an HTML editor and then tweaked with a text editor.

HTML 101

Elements: HTML is composed of elements that represent structure (e.g. paragraph, list) or behavior (e.g. color, font). They usually include a starting tag, content and an ending tag (e.g. <tag>text</tag>).

Attributes: Add properties (e.g. alignment, color) to elements (e.g. <tag attribute="value">text</tag>).

Deprecated Element: Element or attribute that has been outdated by new constructs.

Markup Tags: Specify elements in an HTML document (e.g. <P> indicates start of new paragraph </P> indicates end of paragraph).

HTML tags HTML lists links code tester

 

Style Sheets: Provide layout and presentation control for web documents. Style sheets simplify HTML markup and largely relieve HTML of the responsibilities of presentation. They give both authors and users control over the presentation of documents — font information, alignment, colors, etc. Style information can be specified for individual elements or groups of elements. Style information may be specified in an HTML document or in external style sheets that can be shared.

Cascading Style Sheets (CSS): The use of multiple style sheets in a single document.

Frames: Provide ability to divide a window into separate sections called frames. A different document can be loaded into each frame.

basic frame

 

Tables: Consist of rows and columns of cells. Cells contain text or graphics. Tables provide a means to control layout of information.

data table layout table

 

Scripting: Scripts are interpreted programs that add interactivity to web documents. Through scripts, authors may create dynamic Web pages (e.g. "smart forms" that react as users fill them out) and use HTML as a means to build networked applications. JavaScript is a common scripting lanuage.

Media: Objects that can be linked to or embedded into an HTML document to add functionality such as audio, video or animation.

  animation 1 animation 2

 

DESIGN ISSUES

Design Concept: As in any design task, it is good practice to develop a clear concept and a visual language to implement it.

Workflow Organization: Map out web site, create file hierarchy, use consistent naming conventions, write clean HTML code using spacing and comments.

Document Structure: An HTML document is organized into HEAD and BODY sections. The HEAD includes information about the document. The BODY contains the structure and content of the document.

Structure vs. Presentation: HTML has its roots in SGML which has always been a language for the specification of structural markup. As HTML matures, more and more of its presentational elements and attributes are being replaced by other mechanisms, in particular style sheets. Experience has shown that separating the structure of a document from its presentational aspects reduces the cost of serving a wide range of platforms, media, etc., and facilitates document revisions. HTML describes the structure of a document, the browser presents it. Different browsers will display documents differently.

Browsers and Platforms: Browsers vary in the way they display HTML documents. Different browsers support different HTML elements. Macintosh and Windows platforms can display the same document differently. Web design should involve insuring documents appear correctly on different browsers, different versions of browsers and different platforms.

Speed: Consider the time it takes to download a page. 20K web page downloads in about 10 seconds at 28.8bps. Rule of thumb: page sizes between 20K and 50K.

Navigation: Navigation through a site should be consistent and clear.