======================
Web Authoring - Lab 1
======================
Learning Goals for Lab 1: By the end of this period, you should be able to:
1) Use a web-page authoring tool such as KompoZer to create basic web pages.
2) Create headings, lists, tables, font formats, image insertions, links, etc in your web page.
3) Associate html tags with items and appearances on the web page.
4) Upload your web page to a web server.
Note: The work produced in this lab will serve as the starting point for Lab 2 on html.
Method: We will create a web page for a mock business.
--------
A. Connect to the unix server and run the kompozer web-authoring program.
1. Run NXclient to connect to eidolon, and open a terminal window.
(or on Macs, run X11, and connect to eidolon by typing "ssh -X <yourusername>@eidolon.eos.ubc.ca" )
2. In your unix home directory, create a new directory called "business" .
3. To run kompozer, type "kompozer &" (without the quotes).
--------
B. Web-page Basics
1. In kompozer, follow along with the instructor to create a new web
page for your pretend business. Give it a title, and save it as
file name "index.html" inside your local "business" folder.
2. Type the name of your business.
3. Select the "source" tab at the bottom of kompozer to view the html code the corresponds to your new web page.
4. See the role of the <html> and </html> tags
5. See the role of <head> and <body> tags.
6. Discuss why the title is so important (see inside the head)
7. Save it.
---------
C. Headings and Font Formats
1. Select the "design" tab at the bottom of kompozer.
2. Write a slogan under your business name, followed by 3 line returns.
3. Click once in the business name, and use the pull-down menu to change from "body text" to "heading 2".
4. Select the whole business name, and change the colour to blue (use
the foreground colour swatch tool, just to the right of the "variable
width" tool.
5. Select the whole slogan, and click the "italics" tool.
6. Save it.
7. Use the Source tab at the bottom of kompozer to see the html code.
8. See the role of span and style. See the line breaks <br>.
--------
D. Horizontal Lines and Images
1. Back in the design tab, click at the end of your slogan line to put
your cursor there, and then hit return to add another blank line.
2. From the Insert menu, insert a Horizontal Line.
3. In the next line, type: "Home | Products | Pricing | Ordering | Contact Us | About the President"
4. Add another horizontal line
5. Type "See our new factory".
6. I can provide a photo of the factory for you. From your terminal window, open Firefox if it is not already open
by typing "firefox &" . Navigate to our course web page, to the html-1 lab, and right-click on the
factory link to save it inside your local business folder.
7. From the Insert menu, insert an image just under your "new factory"
sentence. The image location should be "factory.jpg" as URL
relative location. For Alternate Text, type "factory".
8. Click back in the "Home | Products ¦" line, and select the "centered text" tool.
9. Click on the "Source" tab to view the html code. See the tags
that were used for the horizontal line, the centered text, and the
image.
10. Save your page.
------------
E. Tables
1. Create a new web page titled "your business - Products", and saved
as file name "products.html". (Note, Kompozer will automatically
add the suffix .html)
2. Copy into the Products page everything from the home (index) page
except the new factory info. Change the Header to include the
word Products, and reformat it if you wish.
3. Click the insertion point under the last horizontal line.
4. Use either the Insert menu or the Table tool to insert a table with 3 columns and 4 rows.
5. View the source code.
6. Back in the Design tab, double click in any cell in the table.
In the pop-up box, select the Table tab, and change the spacing between
cells to zero. Then hit Apply and OK.
7. Look at the course code again
8. Back in Design mode, click in the top-left cell of the table, and
type "Item Number". In the top middle cell, type "Name". In
the top left cell, type "Image".
9. View the source code, then return to design mode.
10. Create items 1, 2, and 3, and give them names.
11. Save your page.
-----------
F. Lists and Links
1. Create a new web page entitled "your business Pricing" that also has
the same top items that you had copied before from the home page, and
save it as the file "pricing.html". But change the top line to
say Pricing.
2. Hit the numbered list tool, and start typing prices for each item.
3. Save your page.
4. Back in your home (index) page, select the word "Products", and use
the Link tool to create a link to your products page. (Note, you
might need to shorten the path to be a relative path.)
5. Make a similar link from your home page to the "Pricing" page.
6. Save your home page, and view the html source.
7. For both your Products and Pricing Pages, select the Home word and link it back to your home (index) page.
8. Back in the home page, and a new line of text under the image.
The text could read "For more info, see ATSC 212." and link this
text to the ATSC 212 home page.
9. Save, and View the source code.
----------
G. Always Test your page in a Web Browser
1. From your terminal window, open the web browser (if it is not already open) by typing "firefox &" .
2. Under the "File" menu in Firefox, select "open file", and then navigate to the "index" file in your business folder.
3. Test the links.
4. In kompozer, fix any bugs and save.
----------
H. Enable the World to See Your Webpage
1. Using the terminal window, create a soft link in your home directory to the index.html file in your business folder.
ln -s ~/business/index.html ~/index.html
2. Use any web browser (such as the one you normally use on your PC or
laptop computer), and open the course web page and go to the Students
tab.
3. If you click on any student's name, you can see their web page.
4. Now your friends and your Mom can see your web page and be proud of you.
-----------
Homework
1. Insert images into the Products table. (Hint, please use
copyright free images as you can get from Wikipedia.) Save.
2. Create a new web page for "Contact Us", but do NOT put your own info in it (to preserve your privacy).
Instead, have it display this message:
"We are moving into our new factory. The new contact info will be updated soon."
3. Create a new web page for "Ordering", and provide links to/from the
home page. Add the same header info to the top of this new page,
but leave the rest blank (we will add stuff during the next lab).
Save.
4. Create a new web page for "About the President", with similar header lines as before.
Since you are the president, write a brief, attractive resume of yourself on this page.
(But don't put email or phone numbers.) You can use
tables, lists, formatting etc as might look attractive.
Play with other features of Kompozer to enhance your resume.
5. Test your web pages on a web browser. Make any repairs in komposer, and save your fixed code.
6. Read ahead some of the html lecture notes from George Hicks before the next lab meeting.
-end-
Copyright 2012 by Roland Stull
UBC
.