Professional Documents
Culture Documents
For the most up-to-date information about workshops and schedules, visit us at:
http://ittraining.iu.edu/
These materials are for personal use only and may not be copied or distributed. If you would like to use our materials
for self-study or to teach others, please contact us at: IT Training & Education, 2711 East 10th Street, Bloomington,
IN 47408-2671, phone: (812) 855-7383. All rights reserved.
The names of software products referred to in these materials are claimed as trademarks of their respective companies
or trademark holders.
Contents
Welcome and Introduction . . . . . . . . . . . . . . . . . . 1 Formatting a Footer . . . . . . . . . . . . . . . . . . . 19
What You Should Already Know . . . . . . . . . . . . 1 Inserting a Horizontal Line . . . . . . . . . . . . . . 19
What You Will Learn . . . . . . . . . . . . . . . . . . 1 Centering Text . . . . . . . . . . . . . . . . . . . . 19
What You Will Need to Use These Materials . . . . . . 1 Updating Footer Text . . . . . . . . . . . . . . . . . 19
Getting Started . . . . . . . . . . . . . . . . . . . . . . . . 2 Creating a mailto Link . . . . . . . . . . . . . . . . 20
Todays Project . . . . . . . . . . . . . . . . . . . . . . . . 3 Previewing a Web Page . . . . . . . . . . . . . . . . . 21
Understanding HTML and KompoZer . . . . . . . . . . 3 Using a Table for Web Page Layout . . . . . . . . . . . . . 22
Creating a Web Page from An Existing File . . . . . . . . . 3 Inserting a Table . . . . . . . . . . . . . . . . . . . . . 22
Understanding Page Properties. . . . . . . . . . . . . . 6 Formatting a Navigation Bar . . . . . . . . . . . . . . . 25
Adding Background Color . . . . . . . . . . . . . . 8 Creating Navigation Bar Text . . . . . . . . . . . . 27
Saving a File . . . . . . . . . . . . . . . . . . . . . . . 10 Creating an Internal Link. . . . . . . . . . . . . . . . . 28
Understanding File Names and Extensions . . . . . 10 Defining a Named Anchor . . . . . . . . . . . . . . 28
Formatting Web Page Content . . . . . . . . . . . . . . . . 12 Linking to a Named Anchor . . . . . . . . . . . . . 29
Publishing a Web Site . . . . . . . . . . . . . . . . . . . . 31
Inserting an Image . . . . . . . . . . . . . . . . . . . . 12
Web Servers at IU Bloomington, IUPUI, IUK and IUN . 32
Understanding Alt Text . . . . . . . . . . . . . . . 14
Formatting Text . . . . . . . . . . . . . . . . . . . . . 14 Using Mercury . . . . . . . . . . . . . . . . . . . . 32
The Web Publishing Process . . . . . . . . . . . . . . . 32
Understanding Heading Styles . . . . . . . . . . . . 14
Italicizing Text . . . . . . . . . . . . . . . . . . . . 15 Connecting to the Web Server . . . . . . . . . . . . 33
Formatting Lists . . . . . . . . . . . . . . . . . . . 15 Transferring Files. . . . . . . . . . . . . . . . . . . 34
Understanding Links . . . . . . . . . . . . . . . . . . . 16 Setting File Permissions . . . . . . . . . . . . . . . 37
Verifying a Published Web Page . . . . . . . . . . . . . 37
Creating a Relative Link . . . . . . . . . . . . . . . 16
Creating Absolute Links . . . . . . . . . . . . . . . 18 Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . 38
Contributions to These Materials . . . . . . . . . . . . . . 39
Welcome and Introduction
Welcome to KompoZer: The Basics.
http://ittraining.iu.edu/workshops/files/
Once you are logged on and have the needed files in an epclass folder on your
desktop, you are ready to proceed with the rest of the workshop.
Finding Help
If you have computer-related questions not answered in these materials, you
may look for the answers in the UITS Knowledge Base, located at:
http://kb.iu.edu/
IT Training Tips weblog: Our blog has short tutorials and training posts on
a broad range of topics and technologies. Its written by training and support
providers from across the entire IU system; you may read and comment on
these at:
http://ittrainingtips.iu.edu/
In the second part of this workshop, well see how to use a table to create a
layout for an existing Web page. Well also see how to create a navigation bar
that contains internal links. Finally, well publish the Web site.
http://www.kompozer.net
To illustrate how to take content from another application, well open a Word
document, copy its contents, and paste them into a new page in KompoZer.
Copying from Word allows some formatting to be retained, but this can cause
the resulting HTML file to be larger than it needs to be. So we will copy the
file conmtents, but paste the text without the formatting, and use KompoZer to
apply the desired formatting.
We will start at the desktop, since our exercise file folder, epclass, is located
there.
The current location is now set to the desktop. All of our exercise files are
contained in the epclass folder, located on the desktop.
Note for Macintosh Users - On a Macintosh, the From: field is above the
list of visible folders and files. To move to the desktop, press the key com-
bination + D. From there, you can move into the epclass folder.
We will need to open the Citing Web Resources subfolder of the epclass
folder that contains all of the necessary documents.
info.doc
Note for Macintosh Users - To select the full contents of the file, press
+ a.
, Exit Word
Now that we have copied the text to make our new page, we will open Ko-
mpoZer.
When you copy text from Microsoft Word, it often contains formatting in-
formation, which may cause unnecessary file size in a Web page. To avoid
this, we will paste the copied text into the new page without formatting.
11. In order to be able to paste without formatting, near the bottom of the win-
dow, switch to Preview mode,
NOTE: The title appears at the top of the window of any Web browser in
which the page is viewed.
your name
NOTE: The text entered for description is used by some search engines to
locate and summarize Web page content.
Web pages can have a variety of colors or images set as the background of the
page. First time designers often make the mistake of choosing a background
color that does not contrast well with their chosen text color. In addition, some
designers choose to add a complicated background image instead of a solid
background color. Both of these mistakes can make the content of the Web
page difficult to read. Studies have found that most Web users prefer a solid,
light background color that contrasts well with a dark text color.
Lets add a light background color to contrast with our black text.
4. To select a color,
You see the new background color and the page title on the toolbar.
Saving a File
Now that weve made some basic changes to our page, we need to save the file
with a special file name and extension.
The file extension is not the only convention we need to consider. We also
need to consider the name of our file. File names for Web pages are largely
dependent on the structure of the Web server hosting the page. Web servers are
networked computers that use special software to host Web pages. Web pages
are saved in folders on a Web server called directories. Web servers often
default to home.html or index.html as the main page of a directory. This way,
if a user finds a directory for a site but does not enter the exact name of the
main page, index.html or home.html will be displayed. If neither of these files
exists in the directory, a list of files in the directory may be displayed. To pre-
vent this and for consistency, many Web designers name the main page of
each directory index.html.
Now that we know what file name and extension is best, lets save the file as
index.html.
We need to specify where to save the file and what to call it.
We will start at the desktop, since our exercise file folder, epclass, is located
there.
The current location is now set to the desktop. All of our exercise files are
contained in the epclass folder, located on the desktop.
Note for Macintosh Users - On a Macintosh, the From: field is above the
list of visible folders and files. To move to the desktop, press the key com-
bination + D. From there, you can move into the epclass folder.
We will need to open the Citing Web Resources subfolder of the epclass
folder that contains all of the necessary documents.
Now that we have specified the Save in location, we need to specify the file-
name.
index.html
NOTE: In the Windows version of KompoZer , it will add the .html extension
to the filename automatically, so you would only have to type the first
part of the filename, index.
Inserting an Image
Lets see how to insert an image that has already been created for this page.
The particular image we will be using serves as a banner for the entire page.
banner.gif
Lets add some alternative text for this image before we insert it in our Web
page.
Lets see how to use KompoZer to define alt text for the banner image.
NOTE: Sometimes the image may not show in the KompoZer window, even
when the image has been inserted correctly. This is a problem with
KompoZers preview function and does not affect the final outcome
of the Web page.
We want the image to be center aligned so lets set the Paragraph alignment.
the image,
Formatting Text
Now lets format some text on the page to make it stand out more. Since
KompoZer is a WYSIWYG editor, well format the text in the same way text
in a word processor is formatted.
, Heading 2
The Heading 2 style is applied to the text. Notice that the Heading 2 Para-
graph style includes space above and below the text. Lets create another
Heading 2 section in the page.
, Heading 2
Italicizing Text
Just as in a word processor, we can use KompoZer to emphasize Web page
text by italicizing it.
across non-publication
Formatting Lists
KompoZer makes it easy to create lists. An unordered list is indented and
each list item is preceded by a bullet. An ordered list is the same except each
list item is numbered. Keep in mind that in order to be properly formatted,
each list item must be its own paragraph.
Understanding Links
Web pages utilize several different types of links to connect images, Web
pages, and other resources. Hypertext links connect text in one Web page to a
different point in the same Web page or another Web page. Well create two
different types of hypertext links.
4. To select the file to link to, in the Citing Web Resources folder,
comparison.html
across http://www.apastyle.org/
NOTE: Keep in mind that the proper link location is already listed because the
selected text is the link destination, and begins with http://. If we
had selected plain text to link, we would need to enter a web address.
5. Save index.html.
1. Position the cursor in the blank line between the body text and the footer.
You see a horizontal line between the body text and the footer.
NOTE: You can format the height, width, and alignment of the horizontal line.
To access the Horizontal Line properties, the line.
Centering Text
Lets center the footer text.
todays date
across username@host.domain
9. Save index.html.
NOTE: Using a mailto link may allow the email address to be gathered by
spammers. For information on some methods to possibly deter that,
visit http://kb.iu.edu/data/alcm.html.
This is warning you that one application is attempting to open another one,
which could be a security risk. However, in this case, KompoZer is trying
to open a Web browser to display the page.
Well see how to create and format a table to provide the layout for compari-
son.html. Well also create a navigation bar that uses internal links. Once
weve changed comparison.html, we can transfer it to the Web account again.
comparison.html
Inserting a Table
Tables can be used to organize text and images in a Web page layout.
KompoZer provides a quick and easy way to create tables, though they are
sometimes difficult to edit.
The most basic element of a table is called a cell. Each cell can contain text or
graphics. Cells combine to form rows and columns. Rows are horizontal and
span across the table. Columns are vertical and span up and down the table.
Well create a simple table with left-side navigation. This means the page nav-
igation will be controlled from the left column of the table. The table will con-
tain two columns and one row.
Cell
The table will have 2 columns, one for navigation and one for content, and
1 row. By default, the table is set to 2 rows and 2 columns. We need to
change the number of rows to 1.
, type: 1
Cell padding is the amount of space between the cell border and the content.
We want a bit of space inside each cell, so lets increase the padding.
cellpadding
7. To define the cell padding, in the Value field at the bottom of the dialog
box, type:
We want to select all of the page content and move it into the table. Lets
use keyboard shortcuts to select, cut, and paste the page content.
10. To select all the page content, at the top of the page,
before Comparison,
The cursor is positioned at the vertical center of the left-hand column. You
may have to scroll to see it there.
You see the Table Properties dialog box and the Cell Tab:
3. To set the Cell width, in the Width field of the Size section, type:
20
Its important that the cell width be defined as a percentage of the table so
that the content will automatically wrap inside the cell if the browser win-
dow is small.
, % of table
Top
, any color
3. To add some space for the navigation bar, in the left-hand column, press
APAMLASources Cited
There are two parts to creating an internal link, defining a named anchor on the
page and linking to that named anchor.
Lets see how to create the internal links for the navigation bar.
NOTE: KompoZer will automatically create named anchors for the headings
on a page when it creates the headings. However, we will recreate the
named anchors on this page, using shorter text for the named anchors,
so it will be easier to share the URL with someone else.
apa
First well select the text that will serve as the link.
across APA
3. To select the correct anchor from the Link Location drop down list,
, #apa
NOTE: If there is time, link the other two instances of the phrase Back to
Top, so they all point to the same link location.
7. Save comparison.html.
index.html
comparison.html
banner.gif
For files to be available on the World Wide Web, they need to be published on
a Web server. A Web server is a software system that receives requests from
clients (such as Internet Explorer or Mozilla Firefox) and sends the requested
files back to the clients.
Using Mercury
These instructions show how to publish Web pages on Mercury using a Win-
dows computer.
Note for Macintosh Users - For information on publishing Web pages us-
ing a Macintosh computer, go to:
http://ittraining.iu.edu/workshops/sftp/SFTPM.pdf
In order to make a connection to the Mercury Web server, you will need to
have an account on Mercury and you will need to know the host name, the
network name of the Mercury server.
Please be sure you have all of the following information before continuing:
Your Username:
Your Password:
Now that you have your account information gathered, you are ready to pub-
lish your Web pages.
The first time you attempt to login to Mercury, you may see a message in-
dicating that the authenticity of the host cant be established because it is
not in a list of accepted hosts.
4. If necessary, to add the Mercury key to the list of hosts local database,
username
password
Transferring Files
File Transfer Protocol (FTP) is a process used for transferring files from one
computer to another over a network, such as the Internet. To successfully
transfer files, an FTP client (on your local machine) must connect over a net-
work with an FTP server (usually on the Web server you want to publish to -
in this case Mercury). Once this connection has been made, the client and
server can request and transfer files between the two computers.
To combat this security concern, some Web server administrators now require
users to transfer files to and from their servers using Secure FTP (SFTP).
SFTP works much like regular FTP, except all of the information, commands,
usernames, and passwords are encrypted. Hackers are unable to decipher this
information.
To enable SFTP, both the Web server and the software used to transfer the
files have to understand SFTP. Mercury is SFTP enabled; therefore, to transfer
files to Mercury, an SFTP application must be used on the local machine.
WinSCP, SSH Secure Shell (Windows) and CyberDuck (MacOS X) are exam-
ples of SFTP applications.
1. Open WinSCP.
You are now able to securely transfer files from the local computer, whose
files are visible in the left-hand frame (under the heading Local Name) to
the Web server account on Mercury in the right-hand frame (under the
heading Remote Name).
You will upload your files from your local computer to the remote server,
Mercury.
1. To specify the correct location for uploaded les, in the Remote window,
The www folder opens. Any files uploaded to your Mercury account will
now be in the www directory.
NOTE: To select multiple files for uploading, hold down the key while
selecting the files.
4. To confirm the transfer of the file from the local workstation to the remote
server,
The file should now be visible in both the Local and Remote frames.
5. Repeat steps 2 and 3 until all the files are transferred to your Mercury
account.
6. Exit WinSCP.
File, Open...
Note for Macintosh Users - To view the page, File, Open File.
http://mypage.iu.edu/~username/index.html
The page you specified appears in the brower window. Your site is now
viewable by the world.
5. Exit PuTty.
Wrapping Up
Weve reached the end of todays workshop. Please follow your workshop
instructors guidance and take a few moments to fill out the workshop evalua-
tion form.
Web: http://ittraining.iu.edu/
Email: (IUB) ittraining@indiana.edu; (IUPUI) ittraining@iupui.edu
Phone: (IUB) 812/855-7383; (IUPUI) 317/274-7383