Creating a Web Page HTML, FrontPage, Word, Composer
Dec 24, 2015
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