Instructional Computing Services
Faculty Help Pages

How can my students and I develop websites or e-portfolios with an HTML editor?

Document developed by Dan Cournoyer, February 2006
Last update 21 August 2006; RKH

To set up a website or electronic portfolio, a student writes interlinked text pages, often with pictures, and perhaps video and sound.  Because an e-portfolio has this structure, it can be viewed as a website, with a hierarchy of pages and elements linked to each other, opened when the viewer clicks on them.  Many instructors find that this meets their pedagogical goals for a course project.

Example:

A possible title page, of an electronic portfolio for a class project, as it might appear under development in Nvu.

Notice the graphical formatting buttons at the top, and the tabs at the bottom, to reveal the HTML Tags and Source.  The current "Normal" view simply shows the resulting page and allows easy development.

Background:  Web pages are written in plain text with HTML tags.  In a text editor, an HTML file appears with the contents enclosed in formatting tags.  In a browser, an HTML file appears nicely formatted.  Sophisticated authoring software that provides graphical, or what-you-see-is-what-you-get (WYSIWYG), interface, such as Microsoft FrontPage and Macromedia Dreamweaver, are intended for large managed commercial websites.  A free program similar to these is Nvu ('N-View'), which may provide more features than are required for a simple class project but can easily handle any needs.  With this software students can build web sites and then publish the resulting e-portfolio to a CD to submit to you, or to a server for public viewing.

The Procedure and Result:  Your students should assemble the components of their e-portfolios in advance.  You might ask for various pieces of written work, graphics, web page links, and even audio and video files.  With these items, as we see above, Flo Schmo has created the centered headings, and inserted a table for the web materials links, as well as a picture.  She continues work using Nvu, finding web materials and incorporating the essay that constitutes the main part of the project.  She delivers the project to you by either writing it to a CD, with all necessary HTML, image, and media files, or publishing it to a server, such as the UW "students" server.  You, the instructor, can examine and grade her e-portfolio by opening the root or index page and then clicking on the links.

Example: The finished e-portfolio or web project, after clicking on the "A Neophyte's Notes" link to show the essay for reading.

To write their essays and other compositions, students may use the Nvu window; or a text editor for producing plain text or text with HTML tags for formatting; or a word processor such as Microsoft Word, incorporating them directly into the web page or converting to HTML on saving and then linking into the e-portfolio; or any mechanism and then scanning the printed work to a PDF file for linking into the e-portfolio.

Note that a browser, Firefox, is being used by the instructor to view the final projects.

To Use Nvu: A free Web Authoring System

Have your students download and install (free!) from www.nvu.com/index.php  The Nvu software will also be installed, by the Fall 2006 semester, on the laptop computers available for students to check out at Coe Library.

In addition to the brief instructions below, please see:
  College of Education tutorial (by Christi Boggs):  http://ed.uwyo.edu/tech/tutorials/nvu.html
  Nvu tutorial:  http://www.nvu.com/websitehelp.php

Open the Composer Window

Launch Nvu. You should have an editing window open, with some visual tools such as buttons for boldface, centering, and so forth.  Notice the tabs at the bottom, which allow you to switch between the "Normal" (WYSIWYG formatted view) and the "HTML Source" (code with tags).

Entering text

Text can be typed directly into the window, in the same manner as using a word processor.

Font style, size, color, paragraph justification, et cetera, may be changed using the tool bar.

Spell check function can be used from inside the program.

Tables may be used for easy text alignment; see below.

Inserting an image

  1. Click on the “Image” button in the tool bar.
  2. Once the “Image Properties” window opens click “Choose File”.
  3. After selecting an image from your own folders, enter an image name in "Alternate Text”.
  4. Click “Ok”.

Adding links

  1. Click the “Link” button in the tool bar.
  2. If desired link is another web page enter the URL.
  3. If desired link is from your own website, click “Choose File” (if there is currently no second page create and save a new page).
  4. Select the desired page and click “Ok”.

Tables
Tables are virtually the only alignment mechanism in basic HTML. Indentation and columns are produced with tables.

  1. Click the "Table" button on the tool bar.
  2. Choose the number of cells and orientation you want.
  3. Put the cursor inside one of the table cells; note that the cell is highlighted.  Type in the text you want at that position.  You can also adjust the size of the rows and columns by clicking on the handles around a selected table.

You can use the cells on the top row as headings. 

The Help files for Nvu have a section called "Adding Tables to Your Web Page."

Adding Email Address

  1. Click the "Link" button on the tool bar.
  2. Enter the desired email address in the "Link Location" field.
  3. Check the "above is an email address" box.

Viewing the created pages

  1. First save each page.
  2. Click “Browse” in the tool bar.

(Using this function allows the author to see how the site functions without publishing the pages)

Finishing up; Publishing created pages

  1. Save each created page.
  2. Students will need to SAVE their pages to the provided web-server share (\\uwstudentweb\[username]$).

          OR

          If a web server with ftp upload is being used, the PUBLISH option can upload the whole site at once.

For more help with this last step-- such as exactly what to tell your students to do-- please contact Instructional Computing Services.

Learn HTML by reviewing the pages linked from the "Faculty Help" question on "good introductions to HTML."

Note: You may have difficulty cutting/copying and pasting anything in Nvu when using Linux.  This may apply to all Mozilla based products in Linux.  See these pages for details on how to get the required behavior:

Back to:
  Faculty Help
  Instructional Computing Services
  Ellbogen Center for Teaching and Learning