Introduction to HTML using Mozilla Composer
modified by: Tara Stanford

Gaining a basic understanding of Mozilla Composer

Modify a Simple web page

- Open
- Page Properties
- Modify text
- Previewing
- Email Links
- Modify Tables
- Insert Images
- Relative Links
- Absolute Links
- Create from scratch

What do you DO with this website once you've created it on disk?

• Exhibit a basic understanding of Mozilla Composer
• Modify an existing HTML document (web page) 
• Modify page properties and text
• Make Links -- email, absolute, and relative
• Insert Tables
• Insert Images
• Create a simple HTML (HyperText Markup Language) web page 
• Know who to contact for help

Open the software

• Open Mozilla. 
• Mozilla has several functions. You may have used the browser to view Web pages. The browser is called Navigator. We will be using Composer, the Web page editor.
• At the Top menu bar under Window --> Composer

this opens a blank web page (HTML document)
• Notice the top toolbar (Link, Image, Table, etc.)
• Notice the text toolbar (type, alignment, size, color, etc.)

• File --> Open File
• Go to the Desktop (or the location for your unzipped files) and select the file named syllabus.html
• Click Open 
• Click Open

• Format --> Page Title and Properties
• At Title: type in "your course name ­ Syllabus" (minus the quotation marks).
• At Author: type in your name
• Click OK
• Format --> Page Colors and Backgrounds
• Click on Use Custom Colors
• Click on the white box beside "Background color" and select the pale yellow square in the color pallette
• Click OK
• Click OK

• Select the text from "History and Culture of China" to "7:30pm"
• Format --> Align --> Center (or click on the center icon in the toolbar)
• Select the line of text under "Book Required"
• Format --> Text Style --> Italic or click on I in text toolbar 
• Select "Course Requirements" -- want to make it a heading
• Click on the arrow next to the text type ("Paragraph") in the tool bar and click on Heading 4
• Do the same for "Important Dates" and "Schedule"
• Save your page! Click on the Save icon on the top toolbar

• You have to look at your work in Navigator to see how it will look on the Web. The icon for the Navigator is a ship's wheel.
• Click on the Browse icon on the top toolbar. Notice how similar it looks!
• Close the Mozilla browser window ("Navigator") by clicking on its top rightmost "X-in-a-box." (on the Mac, click the box on the top left). Or return to Composer by clicking on the writing pad icon (on bottom right).

Select "Leigh Jay Temple" and replace with your name, and beside your name, type in your email address in parentheses (ljtemple@unity.ncsu.edu)

• Select the email address but not the parentheses
• Insert --> Link
• In the white box under "Link Location...." type: mailto: youremailaddress@xxx
• Click OK
• Save your page!
• If you check this in the Navigator and it doesn't work, make sure you typed mailto: exactly as shown above.

• Place your blinking cursor under "Important Dates"
• Insert --> Table or click on the Table icon on the top toolbar
• Type in 4 rows and 2 columns
• Make the "Table Width" 50 beside "% of window"
• Make the border width 2 pixels
• Click OK
• In the first cell of the first row type Assignment and make it bold, press the TAB key to change to the next cell.
• In the second cell of the first row type Due Date and make it bold, press the TAB key to change to the next cell.
• Type in text for the remaining cells 
• Change the color of the first row and the text in it 
• Select the first row of the table
• Format --> Table Cell Properties
• In the Table Properties window click on the tab at the top named Cells
• Check "Background Color" 
• Click on the grey box beside "Background Color" and click on a dark color.
• Click Appy then OK. Notice that it is hard to see the text you typed earlier.
• Select the text in the first row of the table
• Format --> Text Color and select a light color (white or grey)

 
• Center the text in the table 
• Select the table
• Format --> Align --> Center

 
• Save your page! Click on the Save icon on the top toolbar
• Click on the Browse icon on the top toolbar.
• Close Navigator window.
• Close syllabus.html

• We will start by opening a new existing Web page and working with it. 
• First, open an existing webpage while in Netscape. 
• File --> Open File
• Go to the Desktop and select the file named china.html
• Click Open 
   
• Page Properties 
• Format --> Page Title and Properties
• At Title: type "your course name" (minus the quotation marks)
• At Author: type in your name
• Click OK
• Go to Format --> Page Colors and Background
• Select "Use custom colors"
• Click on the white box beside "Background color" and select a pastel square in the color pallette 
• Click OK 
• Position your cursor to just before the word "Welcome!"
• Insert --> Image or click on the Image icon on the top toolbar
• In the Image Properties window under "Image location..." type in graphics/china_logo.gif (or you can try to browse to the graphics folder to find this picture). Under Alternative Text, type a short description of the picture in the Text box (such as "Chinese flag" -- this will help make your Web page accessible to people with vision impairments).
• Click OK
• Press ENTER to put "Welcome!" on a different line.

 
• Modify Text in page 
• Select "Welcome!" and change it to Heading 1
• Underline "Useful Websites" -- Select text, Format --> Style --> Underline

Relative links are within your website. These links are based on the files' relationships with each other. The use of relative links allows files to call each other without using their exact location on the hard drive or floppy drive. (important if you plan to carry your Web pages on disks or CDs)

• Example: graphics/china_logo.gif rather than A://mozillatutorial/graphics/china_logo.gif
• The use of relative links keeps your site portable (imagine a server trying to look for something on your floppy drive!).

• Example: http://www.ncsu.edu will not be part of your site, but you may want to link to it.

• Select "Syllabus".
• Insert --> Link
• In the white box under "Link Location...." type in syllabus.html
• Click OK

(This process tells your current page to look for a file named syllabus.html in the same location, such as a floppy disk, or in a folder on your hard drive).
• Save your page!
• Click on the Browse icon on the top toolbar.
• When the browser window comes up, click on "Syllabus"

This is a new page--the file we just modified! So you’ve created a relative link to a new page (file) in the same location as your original file.
• Close the browser window.

• Select the URL (web address) under "A History of China" 
• Insert --> Link
• In the white box under "Link Location...." type in 

the entire URL minus the ( )!
(http://www-chaos.umd.edu/history/toc.html) 
• Click OK
• Save your page!
• Click on the Browse icon on the top toolbar.
• When the browser window comes up, test the link you just made.

It's another website about the history of China.
• Close the Navigator window.
• Repeat this process for  "China -- History in General" . You may want to use this link
  http://library.thinkquest.org/26469/history/
• After saving and previewing your page, close the windows. (Note: if the links are broken, you can use a search engine, such as Google, to find two Web sites for history of China.)

• File --> New --> Composer Page 
• Start typing your own content! 
• Refer to the above exercies for how to 
• modify page properties, 
• modify text, and
• insert an image, link, or table

 
• You will need to save your new page in a folder on your computer. The first page of any folder for the Web should be named "index.html". You can use this Web page on your computer or carry it to another computer on a diskette. You will have to publish it on the Web to use it on the Internet. Remember, the images are not attached to the Web page. You always have to have your graphics or images folder with your Web pages.

• Know who to contact for help 
• Contact Dr. Lisa L. Grable (grable@unity.ncsu.edu)
• or Learning Technologies Resource Center (clt_poe@ncsu.edu) for further help with Mozilla Composer.
• Your School information systems administrator

There are also other sites where you can create and post a website! For more resources see: 

MentorNet workshops Web page
http://ced.ncsu.edu/mentornet/mnworkshops02.html
Click on Create and Post Web pages
(Note: check out the other resources on this page. You may want to learn how to download graphics from the Web or use digital photographs.)

More Resources from the Learning Technologies Resource Center
http://ced.ncsu.edu/ltrc/studio/workshops