Writing Webpages with Wesley Menu Options

4. HTML TAGGING

A basic understanding of HTML tagging is extremely helpful when creating webpages, even if you are using a WYSIWYG webpage editor like Claris HomePage.

View Source code
- With a basic understanding of HTML, from the "View" menu in Netscape choose "Document Source." In this way, you can examine the HTML code "behind" other webpages on the internet and learn more.
Use any text editor and web browser:
- SimpleText (for Macintosh OS) or Notepad (for Windows OS)
- Most HTML files have the extension ".html" or ".htm"
- Use all lowercase letters for HTML file and image file names. This will save headaches when you upload your files to a server. (You won't have to remember which letters you capitalized and which ones you didn't!)
- Once you have entered HTML into a document and saved your most recent changes/additions, open the file in Netscape (or another web browser) to see how the document will look on the internet.
TAGS: "Tags" are placed before and after text to format it like old word processing programs
- Brackets "< >" surround each tag
- Example: <b> turns bold formatting on, </b> turns bold formatting off
- Tags are not case-sensitive (they can be upper or lower case, or a combination thereof)
Basic structure of tags
- <html> </html> - Start and end of HTML document
- <head> </head> - Surrounds header portion at beginning, includes title
- <title> </title> - Sets the title of your document in the browser's titlebar
- <body> </body> - Surrounds main content of the webpage
Format tags
- <br> Inserts a line break
- <p> Starts a new paragraph (it is not necessary to include </p> at the end)
- <ul> </ul> Surrounds items in an unordered list. Each item is preceded by the <li> tag. (It is not necessary to include </li> at the end)
- <ol> </ol> Surrounds items in an ordered list. Each item is preceded by the <li> tag. (It is not necessary to include </li> at the end)
- <b> </b> Turns bold formatting on and off
- <h1> </h1> Makes surrounded text a "heading," with the largest size being "h1" and the smallest "h6." Automatically creates space around the heading text.
- <hr> Creates a horizontal rule, which is a straight line across the webpage.
Links
- Hyperlinks are underlined text which open another webpage in your browser
- "Absolute" links include the full address (Example: http://www.yahoo.com)
- "Relative" links include the file name only. You generally want to use relative links in your school webpages.
- Links begin with an anchor tag and include a reference to a file or webpage address. Example:
HTML code: <a href="http://see-inc.com/html/"Writing Webpages with Wesley</a>
Appears in a browser as: Writing Webpages with Wesley
- Email links are preceded by "mailto:" instead of "http://" for a webpage reference. Example:
HTML code: <a href="mailto:wfryer@tenet.edu"wfryer@tenet.edu</a>
Appears in a browser as: wfryer@tenet.edu
Images
- Images are inserted with the <img src="image_name.gif"> tag.
  - It is helpful to include dimensions of images, so browsers can load textual information first and fill in images later. Example:
  HTML code: <img src="image_name.gif" width=100 height=50>
  - To find an image's dimensions in Netscape which you have saved on your hard drive, Select "Open File" from the File menu. Open the desired image. The dimensions will be displayed on Netscape's title bar.
- Images may serve as links just like text. When an image is linked, a blue box will normally surround it. (Unless the code "border=0" is included in the image reference, which eliminates the blue box) Example:
HTML code: <A HREF="http://see-inc.com/html/"><IMG SRC="returnwww.gif" WIDTH=242 HEIGHT=68></A>
Appears in a browser as:
HTML Tools: It is possible to create and edit HTML with a basic text editor like SimpleText or Notepad. If you work with HTML code a great deal, however, several software programs can make coding easier and MUCH faster.
- BBEdit Lite FREE demo version of a HTML editing program for Macintosh. BBEdit (for sale) version includes a "Check HTML" feature which finds coding errors. (http://www.barebones.com/)
- SoftQuad's Hotmetal for Mac and Windows (http://www.sq.com)
HTML Online Resources: Learn more about HTML at these sites.
- Basic/Introductory:
  - NCSA-- A Beginner's Guide to HTML Home Page (http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html)
  - HTML Crash Course for Educators: Includes online quizzes (http://edweb.gsn.org/htmlintro.html)
  - Introduction to HTML by Case Western Reserve University (http://www.cwru.edu/help/introHTML/toc.html)
  - A Beginner's Guide to HTML (http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html)
  - Background Colors (http://www.infi.net/wwwimages/colorindex.html)
- Advanced Resources:
  - Composing Good HTML (http://www.cs.cmu.edu/~tilt/cgh/)
  - Intermediate HTML a sequel to the Introduction to HTML above, HTML 2.0 specifications (http://www.cwru.edu/help/interHTML/toc.html)
- Updated Indexes:
  - Yahoo's Index of HTML Tutorials & References: This link will directly take you to Yahoo's exhaustive and frequently updated list! (http://www.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/Guides_and_Tutorials/)
  - The University of Iowa's HTML resource links (http://www3.arcade.uiowa.edu/proj/webbuilder/reference.html)

"Good" Webpages/Terms - Your First Webpage - Authoring Concepts/Design - HTML Tagging

Formatting Text - Adding Graphics - Uploading - Advanced Techniques - HOME

Course and Website by Wesley A. Fryer of Lubbock, Texas.
Site sponsored by WesTech Vision Inc.