HTML Basics

HTML is simply a series of tags that are integrated into a text document. These tags are read by the browser and the browser then displays the page accordingly.

HTML tags are usually English words (such as blockquote) or abbreviations (such as "p" for paragraph), but they are distinguished from the regular text because they are placed in small angle brackets. So the paragraph tag is <p>, and the blockquote tag is <blockquote>. Some tags dictate how the page will be formatted (for instance, <p> begins a new paragraph), and others dictate how the words appear (<b> makes text bold). Still others provide information -- such as the title -- that doesn't appear on the page itself.

The first thing to remember about tags is that they travel in pairs. Every time you use a tag -- say <blockquote> -- you must also close it off with another tag - in this case, </blockquote>. Note the slash (/) before the word "blockquote"; that's what distinguishes a closing tag from an opening tag.

The basic HTML page begins with the tag <html> and ends with </html>. In between, the file has two sections -- the header and the body.

The header --enclosed by the <head> and </head> tags -- contains information about a page that won't appear on the page itself, such as the title. The body -- enclosed by <body> and </body> -- is where the action is. Every thing that appears on the page is contained within these tags.

When you create a new text document (remember, it should be saved as "Text Only" or "Plain Text"), name it "name.htm". You might want to sketch out the page on paper before you start coding.

Tips for working in the Notepad: select Format > Word Wrap to view easily. Only do View > Source the first time you open the .htm document in your browser. After that, minimize or ALT-TAB. Remember to SAVE your changes in the Notepad and go to your browser and hit REFRESH to view changes. Do this often.

Essential HTML Page

<html>
<head>
<title>x homepage</title>
</head>
<body>
<p>text</p>
</body>
</html>

Table

<table>
<tr>
<td>Cell A1</td>
<td>Cell B1</td>
</tr>
<tr>
<td>Cell A2</td>
<td>Cell B2</td>
</tr>
</table>

Lists

<ul>
<li>1</li>
<li>2</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

Helpful Web Sites

HTML/Javascript:

Page Tutor: So you want to make a Web page? http://www.pagetutor.com/

NCSA: A Beginner's Guide to HTML: http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html

The Bare Bones Guide to HTML -- handy list of tags: http://werbach.com/barebones/barebones.html

Webmonkey: The Web Developer's Resource: http://hotwired.lycos.com/webmonkey/

Webmonkey's HTML Teaching Tool: http://hotwired.lycos.com/webmonkey/teachingtool/index.html

Resource for Web Developers and Web Designers: http://www.webdeveloper.com/

Webmaster Resources and Tools: http://www.activewebmaster.com/

Technology Resources and Downloads: http://www.zdnet.com/

Dynamic Drive -- awesome site for getting full directions: http://www.dynamicdrive.com/

Wow Web Designs -- annotated links to various good Web designs in many categories: http://www.wowwebdesigns.com/designs/

Style Guides/Usability/Writing:

Web Style Guide -- this is the best resource: http://www.webstyleguide.com/

Sun Microsystems: Writing for the Web: http://www.sun.com/980713/webwriting/

Edit-Work.com Web Style Guide: http://www.edit-work.com/

Review of Web Style Guides -- OK summary style guide, a bit outdated: http://archive.ncsa.uiuc.edu/edu/trg/styleguide/

Wired Style: http://hotwired.lycos.com/hardwired/wiredstyle/toc/index.html

Bartleby.com Reference: http://www.bartleby.com/reference/

MLA Style: http://www.mla.org/

Strunk's Elements of Style: http://www.bartleby.com/141/

Columbia University Press Guide to Online Style: http://www.columbia.edu/cu/cup/cgos/idx_basic.html

Technical Standards Inc.: http://www.tecstandards.com/

Improving Web Site Usability and Appeal: http://msdn.microsoft.com/workshop/management/planning/improvingsiteusa.asp

Usable Web: http://www.usableweb.com/

WebWord: http://webword.com

What is good hypertext writing? http://kbs.cs.tu-berlin.de/~jutta/ht/writing.html

Glossary of graphic design and Web page design terms: http://www.grantasticdesigns.com/glossary.html

The Writing on the Web: http://hotwired.lycos.com/webmonkey/99/32/index0a.html?tw=eg20000906

Web Pages That Suck: http://www.webpagesthatsuck.com/

Good Documents: How to write for intranets and the Internet: http://www.gooddocuments.com/homepage/homepage.htm

Concise, SCANNABLE, and Objective: How to Write for the Web: http://www.useit.com/papers/webwriting/writing.html

It's All in the Links: Readying Publications for the Web: http://www.eeicommunications.com/eye/links.html

Simple English on the Web: http://www.clickz.com/design/site_design/article.php/977621

 

©2003, Kelly Moravec