Transcript Creating a Web Page

Creating a Web Page
HTML, FrontPage,
Word, Composer
Creating a Web Page
Requires HTML coding:
 Create with HTML language and a text
editor (Edit+, First Page)
 Create in a web editing program that
formats your WYSIWYG page into HTML
for you (Composer, WebBulider, etc.)
 Combination of these (FrontPage,
DreamWeaver, etc.)
Creating a Web Page
What you’ll need:
 Software to create a page (Composer)
 Images, backgrounds, text, etc.
 A location to “host” your page (Gatorlink,
CLAS)
 An Internet connection and an FTP
program to transfer your page to the host
location (WS-FTP)
UF Software CD
Using HTML
Creating a Web Page with HTML
HTML language:
 HTML tags are presented inside of
<angle brackets>
 Any tag you open<p> must also be
closed </p>
 The pieces of code that fall in between
these tags should be in a single line, with
no hard returns (it will wrap)
Creating a Web Page with HTML
HTML Basics
 All web pages
start with a series
of basic coding
elements that an
editing program
will add for you
Creating a Web Page with HTML

Your handout shows you the basics

An editing program will color code and
help you correct errors (much like SAS
does)
• Layout & Structure Elements
• Layout Elements
• Text Layout Elements
Creating a Web Page with HTML



You modify these elements, adding your
own coding, to meet the needs of your
web page
After this, you structure the page with
layout elements
Then the body can be formatted using
tables, text, pictures, etc.
Creating a Web Page with HTML
TIP: Good way to learn…
 Download an editor (www.editplus.com)
 Find a site that you like, copy the source
code (“View”  “Page Source”)
 Paste it to the editor
 Change it to use your elements
(pictures, text, colors, etc.)
Creating a Web Page with
FrontPage



FrontPage is Microsoft’s Web Editor /
Builder
You can try it free here: FrontPage Trial
Unlike WYSIWYG programs (like
Composer), FrontPage allows you to
choose from templates and formatting
options, and it inserts the HTML code for
you (the HTML appears)
Creating a Web Page with
FrontPage


If you’re relatively familiar with HTML this
is useful – more complicated formatting
will be done for you based on templates,
but you can customize certain parts of
the code to your liking
Simplifies the coding process, but still
shows the code
Creating a Web Page with
FrontPage



Works like other MS
programs
Task Pane on the
side guides the
process
Point and click
Creating a Web Page with
FrontPage


As with the other
programs, you need
a location to host
your site
You’ll enter that in
the basic starting
information
Creating a Web Page with
FrontPage
Creating a Web Page with
FrontPage
Creating a Web Page with
FrontPage


You continue to add elements, add
pages, and index them
Then you save these pages and upload
them to your server
Creating a Web Page
without HTML
WYSIWYG
Creating a Web Page with Word


You can save MS
Word documents as
HTML
Very often, you’ll lose
formatting if you
convert an existing
document into “web
page” or HTML
format
Creating a Web Page with Word

If you know before
hand that you’ll use
the document for a
web page, choose
“Blank Web Page” as
your starting
document – this will
preserve the
formatting
Creating a Web Page with Word
Creating a Web Page with Word
Creating a Web Page with Word
Creating a Web Page with Word
Creating a Web Page with Word
Creating a Web Page with Word
Creating a Web Page with Word
Creating a Web Page with Word
Creating a Web Page with Word



When you click
“Finish,” each of the
pages will appear
You can highlight
and change the text
and add graphics,
etc.
On-screen
instructions appear
for links, etc.
Creating a Web Page with
Netscape Composer



One of the simplest WYSIWYG
programs for creating a web page is
Netscape’s Composer program
CLASnet Applications
You can get it on the UF Software CD or
you can download it:
http://wp.netscape.com/communicator/co
mposer/v4.0/index.html
Creating a Web Page with
Netscape Composer

Open “Composer” from the Program Menu (or,
if you use Netscape as your browser, choose
“Composer” from the “Communicator” pull
down menu)
Creating a Web Page with
Netscape Composer

The basic Menus and Toolbars in Composer
are very similar to MS programs and to most
Web Browsers
Creating a Web Page with
Netscape Composer


Start a blank page by
selecting “File,”
“New,” “Blank Page”
from the Menu
Or, click on the
icon, and select
“Blank Page”
Creating a Web Page with
Netscape Composer


You can add text and
tables (to organize
your page) just as
you would in a word
processing program
You can modify that
text by using the
shortcuts on the
toolbar or the
“Format” Menu
Creating a Web Page with
Netscape Composer
Creating Links to other pages on the web:

Type the text that will lead to the other page

Highlight the text

Click the “Link” button on the toolbar
Creating a Web Page with
Netscape Composer
Creating a Web Page with
Netscape Composer


Type the URL for the
page you want to link
to in the “Page
location” box
Select “OK” and your
original text will
change to become a
link
Creating a Web Page with
Netscape Composer
Email Links
 An email link works like
a link to another web
page
 In the “Link to…” box,
you type:
mailto:your email address
Creating a Web Page with
Netscape Composer
Creating links to other places on your web
page:
 To make it easier for readers to move
around your web page, it’s a good idea
to create “Targets”
• Targets allow users to move directly to a
certain location within your web page

Creating a Target is a 2-step process
Creating a Web Page with
Netscape Composer
Creating Targets
 Suppose we’d like a way for people to return to
the top of the page, from the bottom, without
having to scroll up
 Place your cursor at the top of the page, and
select the “Target” icon from the toolbar
Creating a Web Page with
Netscape Composer


Or select “Target”
from the “Insert” drop
down menu
You’ll be asked to
enter a name for the
Target – it’s best to
use something
descriptive like “Top
of Page”
Creating a Web Page with
Netscape Composer




Next, go to the bottom
of the page
Select the “Link” icon
Enter the text to
display. Again,
something descriptive
Select the “Top of
Page” Target from the
list
Creating a Web Page with
Netscape Composer


Click “OK” and the
text will appear as a
link at the bottom of
your page
This link will return
users to the location
of the Target symbol
above
Creating a Web Page with
Netscape Composer
Adding Images
 Images generally appear on web sites as
either .gif files or .jpg files
 You can insert images from Clip Art files,
photos you own, or images you
download from the web and save to your
computer
Creating a Web Page with
Netscape Composer



To add an image into
your web page,
place your cursor
where you’d like the
image to be
Click the “Image”
icon
Select “Choose File”
Creating a Web Page with
Netscape Composer



Choose the image
that you’d like to
insert
You can choose to
have this image be a
background to the
entire page
Or, you can choose
how text should wrap
around the image
Creating a Web Page with
Netscape Composer


Once your image is
in place, you can
adjust it by selecting
and dragging to
resize or by right
clicking and selecting
“Image Properties”
You can adjust the
pixel size
Creating a Web Page with
Netscape Composer
Backgrounds (Wallpapers)
 Background images (called wallpapers)
can be acquired as images are, or
images can be set as wallpaper
 Background colors can be changed by
going to the “Format” menu and
selecting “Page Color and Properties”
Creating a Web Page with
Netscape Composer

The “Colors and
Backgrounds” tab
will allow you to
adjust the
background color,
the color of text and
link texts
Creating a Web Page with
Netscape Composer
Creating a Web Page with
Netscape Composer
Using Tables and Lines
 Tables allow you to place your text in
nice, neat columns without manually
tabbing
 You don’t have to show the boundaries
of the table if you choose not to
 You can also add dividing lines to break
up text on the page
Creating a Web Page with
Netscape Composer
Creating a Web Page with
Netscape Composer



Save your page locally
Then click “Preview” to see what your page will
look like when it’s published to the Web
When it’s ready, you can publish it
Publishing Your Web Page



Once you’ve created your page, you’ll
want to “Publish” it
You need a place to “host” your page
(we’ll use Gatorlink or CLAS)
You need a FTP program to transfer your
page from your computer to the server
(or, you can use the one built-in to
Composer, or save on the network)
Publishing Your Web Page


After saving your
file, choose File
and Publish or
select the Publish
icon
Enter a title for your
page in the “Page
Title” box
Publishing Your Web Page


Enter a filename for
your page in the
“HTML Filename”
box
NOTE: Your main
page should be
named “index.html”
Publishing Your Web Page



Enter
ftp://plaza.ufl.edu/ in
the “HTTP or FTP
Location to publish
to” box
Enter your Gatorlink
ID in the “User
name” box
Enter your password
Publishing Your Web Page
Publishing Your Web Page

If you’ve created a page in another program,
you can also connect directly to the server with
FTP
Publishing Your Web Page



Enter a Profile Name
(i.e. “Gatorlink”)
Enter plaza.ufl.edu in
the “Host
Name/Address” box
Select UNIX
(standard) or
Automatic Detect in
the “Host Type” box
Publishing Your Web Page



Enter your Gatorlink
ID in the “User ID”
box
Enter your Gatorlink
Password
Leave the “Account”
and “Comment”
boxes empty
Publishing Your Web Page
Publishing Your Web Page



The left window of WS-FTP shows the
files on your computer
You can choose what you’d like to FTP
to the server from this list
The right window of the WS-FTP shows
the files you have loaded on the server
Publishing Your Web Page

To transfer a file, click on it to select it then
press the transfer button
Publishing Your Web Page


The transfer buttons are used to move files
(upload and download) back and forth between
your computer and the remote location
When you’re done, click “Close” and “Exit”
Viewing Your Web Page

Once you’ve uploaded your web page,
you should be able to view it using any
Internet Browser
