Integrating Technology in the Second Language Classroom

Jean LeLoup & Bob Ponterio 
SUNY Cortland 
© 2009, 2017

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:

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 New: Begin working on a new page from scratch.

Open Open a web page on your computer for editing. 

Save Save your page as a file on your computer.

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

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

Undo / Redo: Undo recent commands in KompoZer.

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

Link 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.

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

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

Form 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: 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.

Step 4

You might want to refer frequently to the following sites as you construct your web page:

For more about KompoZer:

Return to Syllabus