Integrating Technology in the Second Language Classroom

KompoZer:
HTML Introduction: Making your first WWW page

KompoZer (formerly Nvu) is a web site editor that is similar to Dreamweaver in many ways. It is free and you can download a copy for the Mac, Windows or Linux environments.

Step 1

Before you start, you need to read the information contained in a few of the basic links on the  Beginning WWW page. Just get a feel for what they are talking about in a few of these sites. If you have not done this, STOP! Do not pass go, do not collect $200, you are in BIG trouble. Go back and do your homework by examining some of those pages; then return here.

Step 2

Before you begin construction, you also need to have a general idea of what you want your page to look like, what it is intended to do, how someone will get around inside it, and, consequently, how you will organize it.  Below are some basic things to consider when planning your first web page/site:

• What's the purpose of the page? Are you providing a service, a product, information, entertainment?
• Who is your intended audience? What do they know? Why are they looking at your site? Knowing your readers helps you shape the information content and pick a consistent voice to address them.
• How do you intend to structure the information? For multiple page projects or sites, it is common to see at least two levels of hierarchy: a top level index and second-level pages. Put clear, quickly grasped content toward the top of a page so that the reader immediately knows what's going on. This way, even the casual reader can quickly see the sort of information you're presenting, and that may be just the hook to keep the person interested.  For your first page, this will not be such an issue, but the principle still holds.

Step 3

Time to roll up our sleeves. (If you are installing KompoZer on your own computer, you may check the installation instructions for various language versions.) Open KompoZer. You will be in the main editing window and ready to begin making your web page. Whenever you wish to begin a new page from scratch, you can go to File/New. You can see a number of menu items along the top of the window and a number of buttons in the Composition, Format, and Edit mode toolbars. There is an editing window that can show several different displays of your page (Normal, HTML tags, HTML source, Preview) and a Site Manager for larger sites with multiple pages. Voilà, the bare bones of your first WWW page! You are now in KompoZer's user-friendly WYSIWYG (what you see is what you get) editor. 

Across the top, you see the Menu Bar (File, Edit, View, Insert, Format, Table, Tools, Help). We won't try to cover everything now, just some of the more important features. As in your favorite word processor, File is mostly for opening and saving your work. Edit has a useful Undo command and commands for copy and paste, find and replace, and spell check . Under View, you will see several very different views of a page: Normal Edit mode, HTML Tags, HTML Source, and Preview are all very useful, though Normal Edit mode is the view that you will use most of the time. It is easier to switch among these using tabs at the bottom of the editing window, as we will see later. Insert is important for inserting Images, Tables, and various other HTML objects. Format is for modifying many different features of the web page contents, mostly text (fonts, size), paragraph format, and page properties (background color, page title). Table allows you to insert tables and modify table properties. Tables will be used to help us position items on a web page.  Tools is where you can change KompoZer's preferences, verify errors in HTML markup, and work with a number of more advanced features of web pages such as Cascading Style Sheets and JavaScript. Help is a fast way to access various kinds of online information about using the program.

In addition to those pull-down menus across the top, which function just like the menus in many other programs that you probably have seen, the Toolbar provides icon shortcuts to the most common composition commands for your page creation. You can find out more about items in the toolbar by looking at the pop-up text that appears when you move your mouse over each icon.

New: Begin working on a new page from scratch.

Open a web page on your computer for editing. 

Save your page as a file on your computer.

Publish: Upload your web site to an online location on a web server.

Browse: Open your web page in your web browser to see how it looks.

Undo / Redo: Undo recent commands in KompoZer.

Named Anchor: Allows you to jump not only to a page, but to a particular spot on that page.

Link: Inserts a link to a another file or page. This can be a relative link to a file name within the same web site or an absolute link (full http://... address) to a page on a different server.

Images: Insert images and allows you to control image properties.

Table: Create a table. Tables are a good way to control the placement of items on your page.

Form: Insert various form elements that you might need for interactive functions. This will be important for more advanced features later in the course. 

Cascading Style Sheets: Edit styles as one way to control fonts and the like.

Spell Check (under the Edit menu) can be used to check the spelling of words in languages other than English. Download additional dictionaries here: http://dictionaries.mozdev.org/installation.html Install new dictionaries using the Tools / Extensions menu.

 Document Window

Each web page that you open in KompoZer will have its own Document Window. The windows are tabbed, so you can see along the top which pages are open, and you can jump around among them by clicking on those tabs, editing several pages at the same time. In the example below, there are two windows open, Second (the one we are looking at) and First.

The icons in the document window toolbar allow us to view the document in Normal View, HTML tags, Source, or Preview mode. Most of the time, the Normal view will be all that you need. Normal View is WYSIWYG (what you see is what you get). It will be close to what your final version will look like in a browser with some small differences to make editing easier.  Looking at the HTML tags and Source views can be a good way to learn how the codes work together to make you web page appear the way it does. For instance, here is a Normal view image and the associated code for an image:

= <img src="first-www-04.jpg" width="28" height="28" align="absbottom">

When you know what you are doing, directly editing some parts of the source code can give you more precise control (but when you don't know what you are doing, it can get you into trouble).

Many text properties are directly available from the main edit window, just like in a word processor. Paragraph format, text color, size, bold, italic, underline, list styles, alignment, indentation, font, and various tools for positioning are just a click away.

KompoZer does a good job of giving you access to the properties of the objects that you put on your web page intuitively, without requiring that you edit the codes. In fact, if you edit something in the code view, you might introduce errors that could prevent your page from displaying properly. It is MUCH safer to edit an object's properties in the properties window. For instance, to edit the properties of an image, double click on the image in Normal view to open the image's properties window.

Use KompoZer Help and the sites below for additional information.

• Begin construction of your web page.  This page is about YOU.  Convey some basic information about yourself to the reader:  e.g., name, hometown, major, interests, email address. (If you prefer, you may use some other topic that you know as much about, but keep it simple ;-)

• You will need a photo of yourself (or you may use some other image if you prefer).

• If you want to place your picture on the page and have a description or introduction beside it, insert a Table to place these items on the page.  Click here for an example.  Notice the email address is an active link.  This is easily accomplished by highlighting your email address, choosing "insert link" from one of the toolbars or pull-down menus or buttons, and typing mailto:your-email-address-here (example: mailto:santaclause@cortland.edu) in the dialog box where it asks for the link address.

• If you want to see the "man behind the curtain" aka the HTML source code, which are all the tags that make your page look the way you want it to look, click on the Source tag. When you become more acquainted with these source codes and wish to edit codes on your page. This will allow you to edit the tags and, indeed, be the "man behind the curtain" yourself!  **:-)

Generally, you are better off using the Properties Window for any object to make changes rather than trying to edit the source code. Just double-click on an object in design view to see and edit its properties.

Note that for any text you can change the font, the size, the color, the bold or italic style, centering, indentation, list properties and even the hyperlink.

• The Visibone Webmaster's Color Lab has everything you always wanted to know but were afraid to ask about various colors in HTML.
• How Web Pages Work
• KompoZer User Guide - Charles Cooke

For more about KompoZer:

• KompoZer's web site http://kompozer.net/
• The sitewizard.com : Tutorials: Kompozer tutorials - How to design and publish your website with KompoZer
• Intro to Kompozer WYSIWYG HTML Editor: Video