William M. Pegram
Home | Courses | Web Design | Office Software | Client-Side Scripting | Server-Side Scripting | About Me

William M. Pegram, Instructor, wpegram@nvcc.edu
www.billpegram.com

This introductory course will enable you to

The emphasis will be on how to do things in HTML/XHTML which is the underlying code for web pages.  XHTML applies XML rules to XHTML, and hence is more strict. However, the differences are minor, and will be noted as we go. Design observations will be offered at various points.

Tags

Web pages consist primarily of text and tags. The tags both control the appearance of the text and are the mechanism by which images, sound, or movies are included in the web page. Tags

Creating a Web Page, Viewing It in a Browser, and Revising It

Formatting Text

The most commonly used basic text formatting tags are the following with the last four tags rarely used:
<b></b> bold
<i></i> italics
<u></u> underline
<h1></h1>

Heading 1(largest)
<h6></h6>
Heading 6 (smallest, h2 to h5 are in between)
<br> go to next line - stands for break
<p> skip a line - stands for paragraph
<font> Controls the size, color, and typeface of text
&nbsp; inserts a space, can be repeated for additional spaces, stands for non-breaking space
<center></center> Centers text horizontally on page
<ul><li>item 1<li>item 2 </ul>
  • item 1
  • item 2
 <ol><li>first<li>second </ol>
  1. first
  2. second
 <pre></pre> 
Text between tags is rendered as typed with
respect to spaces and carriage returns, generally
in fixed width font
<em></em> Emphasis - how text is rendered can depend on browser but in italics in IE and Netscape
<strong></strong> Strong - how text is rendered can depend on browser but in bold in IE and Netscape
<cite></cite> Cite - how text is rendered can depend on browser but in italics in IE and Netscape

Attributes

A number of tags have attributes.  Attributes are specified within the tag,  generally in the form of attribute=value.  If the value contains spaces (i.e., is more than one word), you must put quote marks around the value, otherwise they are optional.  (In XHTML, the quotes are required.) If you add an attribute=value to a paired tag, it is always added to the opening tag; the closing tag will not include the name=value pair.

Example of the use of Attributes: <Font> Tag

Example: <font size=4 face=Arial color=red> ... </font>  Size, face, and color are attributes.

The standard-setting body for HTML/XHTML has deprecated the font tag which means that its use is discouraged. Cascading stylesheets (CSS) are to be used instead.

Example of the use of Attributes: <BODY> Tag

<body bgcolor="yellow" text="red"> - Bgcolor specifies the background color of the entire page whereas text specified the color of the text within the entire page. Both attributes are now deprecated.

Alignment, Nesting, Comments, Color, Specificity

Align is an optional attribute of the <p> tag.  The default alignment in HTML is always left; other choices are center, right, and justify.

Tags should be properly nested; for example <b><i>Hello</i></b> rather than <b><i>Hello</b></i>. In XHTML, this is a requirement.  

Single-line or multi-line comments, which will not display in the page when viewed in the browser, are created by beginning with <!-- and ending with -->.

Whenever color is specified in any tag, it can also be specified in hexadecimal terms, using RGB notation, for example <body bgcolor="#3300FF">.  216 colors are termed "websafe" -- these colors are those which which the red, green, and blue components are all given by the hexadecimal codes 00, 33, 66, 99, CC, and FF.

More specific specifications override more general specifications.  For example, in the <BODY> tag one can specify text color for an entire page but specifying color within a font tag takes precedence over the color for text specified in the <BODY> tag.

Special Characters

Characters such as a less than sign or greater than sign are used to write the HTML for a web page. If one wants to display these characters in a browser, for example to say that one number is less than another, the use of these characters would be interpreted as HTML markup rather than as the less than sign. If one intends the latter, one can use the character entity reference &lt; Similarly, the greater than sign is &gt; and the single quote is &quot; There are a few others. The non-breaking space &nbsp; is another example. 

Creating Links from One Page to Another

Links to other pages can be specified in either absolute terms or relative terms.  Absolute links must be used to refer to pages outside of one's web site, whereas relative links are recommended for referring to pages within one's web site:

Absolute Link: <a href="http://www.nvcc.edu/home/wpegram/index.html">Bill's home page</a>. Although use of the http:// is optional when entering a URL into a browser, here it is required.

Relative link: <a href="index.html">Bill's home page</a>

In both examples above, the browser will display the text "Bill's home page" underlined and in blue (typically).  Clicking on this link will take the user to the location specified in the href attribute.  

The second link is relative because the address specified for href depends not only on the location of the file you are linking to, but also on the location you are linking from; the address is relative to the location of your current file.  Specifying relative links is simplest if all files are in the same folder because you can just use the file name.  If you have files in more than one folder, it's best to draw a picture of the folder structure before trying to specify the link.  To refer to a file in another folder, you must use the folder name.  Specifying a folder name refers to the folder that is immediately below (a child) of the folder of the referring file. If the referring folder is on the same level, you must first move up before you can refer to the folder. To move up one level, one uses "../"; for two levels, "../../", etc.

Links should never reference the a: drive or c: drive, because these links will not work when the file is transported to the internet, since the user will not have the desired file on their a or c drive.

If a link references a folder without referencing a particular file, e.g. <a href="http://www.nvcc.edu/home/wpegram"> ...</a>, what file (if any) is displayed depends on how the server is configured. Typicallly, it will be configured to display a file with a default filename, often index.html or index.htm, if such a file is present in the directory. If such a default file is not present, some servers are configured to display a directory listing of files in the folder, whereas other servers are configured to display a message such as "directory listing denied"..

Email link: My email is <a href="mailto:wpegram@nvcc.edu">wpegram@nvcc.edu</a>  Here, wpegram@nvcc.edu will appear underlined and in blue (typically).  Clicking on this link will launch an email program with this address in the address line if the browser is set up to work with an email program.

Linking to another part of the same page: <a href="#bottom">Jump to Bottom</a>  The target of the link, bottom, is defined by the tag <a name="bottom"></a>  You can link to another part of a different page by combining these two types of links, e.g.

<a href="http://www.nvcc.edu/home/wpegram/index.html#bottom">

The color of links can be changed by adding one or more attributes to the <BODY> tag.  <BODY LINK="orange" ALINK="red" VLINK="purple"> will make visited links purple, unvisited links orange, and links when they are being clicked on (active links) red.  Link colors should be chosen to go well with the background of the page, whether it be a uniform color or an image.

Putting Images on Your Page

Images can displayed on your page in three different ways:

  1. Background for the entire page: <body background="pretty.gif">  Typically one uses a relatively small image so that it will load quickly, and the browser repeats it across and down the entire page.
  2. A link is created to an image -- in this use, only the image will be displayed if the user clicks on the link: <a href="pretty.gif">Link to Pretty Picture</a>
  3. Image is displayed as part of a page (most common use): <img src="pretty.gif">

When using the <IMG> tag, the image is referred to using the same principles as apply to links.  For the <IMG> tag, additional attributes are recommended, in particular alt, height and width.

<img src="pretty.gif" alt="Pretty Picture" height=30 width = 50>  The size of the displayed image is specified in pixels.  The image file has a size associated with it.  If you want to display the image on your web page at a different size,  you can either resize the image in a graphics program or resize using the height and width attributes.  Most of the time one is interested in displaying the picture at a smaller size than its natural size.  It is better to resize in a graphics program because that reduces the file size and hence loading time whereas shrinking the picture with the height and width attributes has no effect on file size or loading time because one is working with the original file.  

One will often also want to specify align, hspace, and vspace if text is to be used next to an image.  Examples of use of these attributes  As shown in these examples, align=right or left seems to be the best choice in many instances.

You can also make images a link, just as you can make text a link as shown in the following example:

<a href="first.html"><img src="pretty.gif" border=0></a>  The border=0 is added, otherwise making it a link will add a blue border around the image.

Images on your web page should have an extension .gif or .jpg. For example, Netscape will not display .bmp files.  If you have an image in another format, you should convert the image to .gif or .jpg format in a graphics editing program; you cannot simply change the extension of the file.  .jpg is normally used for photographs, and .gif for everything else.  Unlike jpegs, gifs can be animated and can have a transparent color.  The latter allows  images to appear other than as rectangles on web pages.

Formatting Using Tables

Because extra spaces are ignored in HTML and there is no equivalent of a TAB key in a word processor, it is difficult to layout a page with the commands we have covered so far.  Tables are the most commonly-used solution to this problem.  The following is a table with one row and two columns, with "Hello" in the first column and "there" in the second.

<table>
<tr>
<td>Hello</td>
<td>there</td>
</tr>
</table>

All of the content of the table is specified between <td></td> tag pairs.  

<table> tag - Optional attributes include align, bgcolor, border, cellpadding, cellspacing, height, and width.  "Align" aligns the entire table in the page.  The default for border is border=0.  It is often helpful in developing a table to specify a border, whether or not the table will have one in final form.  
<tr> - "table row" - Optional attributes include bgcolor, align and valign.  "Align" in the <tr> tag is horizontal alignment within cells of the row.  Default value of valign is "middle". 
<td> - "table data" - Optional attributes include bgcolor, align, valign, and width. <th> ("table header") tags can be used instead of <td> tags.  Most browsers will display the content between <th></th> tags in bold, and centered horizontally and vertically within the cell .

Examples of uses of tables

Transferring Files to the Internet

Although free sites like Geocities generally provide tools to upload your files to your web site, FTP software such as CoreFTP or WS_FTP is easier to use, once one sets it up.   FTP instructions

HTML Editors 

HTML editors make construction of web pages faster, with fewer errors, and allows focus on content rather than coding.  Netscape Composer is a free HTML editor that ships with the Netscape browser. The version of Composer that ships with Netscape 6, 7, or 8 is easier to use than the version that accompanied Netscape 4. 

Popular editors which cost money include Adobe's GoLive, Macromedia's Dreamweaver and Microsoft's FrontPage.  Dreamweaver 8 is the leading choice of web professionals; it lists for $399, the educational price is $199, and the 30 day trial is free. FrontPage 2003 lists for $199, the educational price is $80, and the 30 day free trial is $7.95.  I have used both Dreamweaver and FrontPage and have not used GoLive.  Dreamweaver has lots of palettes like Photoshop whereas using FrontPage is very much like using Word. Dreamweaver, Flash, Fireworks, and Freehand are also sold together as a package (Studio 8) for $999 list commercial and $299 educational. 

There are also web page development programs that one can find in stores that range anywhere from a few dollars to $40 or 50.  I have no experience in using any of these.

Web Site Hosting and Domain Name Registration

If you have internet service through an ISP, they likely provide you with some space for hosting your web page for no extra charge. You website address is typically some combination of their domain name and your username, e.g. http://home.comcast.net/~wmpegram.

If you want to have your own domain name, e.g. www.billpegram.com, you must both pay for the domain name and pay to have your website hosted. ISP's will typically not include hosting your own domain name as part of their free web hosting service, i.e. it will not be included just by paying for internet access. As the owner of your domain name, you can change web hosting companies.

If you are interested in obtaining a domain name of .com, .net, .org, or .edu, you can determine who, if anyone, already owns that domain name, or variations of that domain name, at www.whois.net You can obtain domain names from a variety of companies; information on obtaining a domain name can be obtained at www.internic.net This site also provides the registrars for the new domain extensions, such as .biz, .name; to determine the availability of particular domain names with these new extensions, one goes to the registrar's website rather than the www.whois.net site

Verio (who I have used) charges $19/yr. for domain name registration only, with lower prices for multiyear contracts (e.g. $9.95/yr for a 10 year registration period). www.ipower.com and www.brinkster.com (I have used both) provide inexpensive hosting services.

Revised: August 21, 2006. Comments to William Pegram, wpegram@nvcc.edu