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• Layout & Structure Elements

• Layout Elements

• Text Layout Elements

An editing program will color code and help you correct errors (much like SAS does)

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/composer/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