creating a web page html, frontpage, word, composer
TRANSCRIPT
![Page 1: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/1.jpg)
Creating a Web Page
HTML, FrontPage,
Word, Composer
![Page 2: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/2.jpg)
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.)
![Page 3: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/3.jpg)
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)
![Page 4: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/4.jpg)
UF Software CD
![Page 5: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/5.jpg)
![Page 6: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/6.jpg)
Using HTML
![Page 7: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/7.jpg)
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)
![Page 8: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/8.jpg)
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
![Page 9: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/9.jpg)
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)
![Page 10: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/10.jpg)
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.
![Page 11: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/11.jpg)
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.)
![Page 12: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/12.jpg)
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)
![Page 13: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/13.jpg)
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
![Page 14: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/14.jpg)
Creating a Web Page with FrontPage
Works like other MS programs
Task Pane on the side guides the process
Point and click
![Page 15: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/15.jpg)
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
![Page 16: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/16.jpg)
Creating a Web Page with FrontPage
![Page 17: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/17.jpg)
Creating a Web Page with FrontPage
![Page 18: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/18.jpg)
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
![Page 19: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/19.jpg)
Creating a Web Page without HTML
WYSIWYG
![Page 20: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/20.jpg)
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
![Page 21: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/21.jpg)
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
![Page 22: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/22.jpg)
Creating a Web Page with Word
![Page 23: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/23.jpg)
Creating a Web Page with Word
![Page 24: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/24.jpg)
Creating a Web Page with Word
![Page 25: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/25.jpg)
Creating a Web Page with Word
![Page 26: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/26.jpg)
Creating a Web Page with Word
![Page 27: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/27.jpg)
Creating a Web Page with Word
![Page 28: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/28.jpg)
Creating a Web Page with Word
![Page 29: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/29.jpg)
Creating a Web Page with Word
![Page 30: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/30.jpg)
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.
![Page 31: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/31.jpg)
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
![Page 32: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/32.jpg)
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)
![Page 33: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/33.jpg)
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
![Page 34: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/34.jpg)
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”
![Page 35: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/35.jpg)
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
![Page 36: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/36.jpg)
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
![Page 37: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/37.jpg)
Creating a Web Page with Netscape Composer
![Page 38: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/38.jpg)
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
![Page 39: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/39.jpg)
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
![Page 40: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/40.jpg)
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
![Page 41: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/41.jpg)
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
![Page 42: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/42.jpg)
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”
![Page 43: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/43.jpg)
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
![Page 44: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/44.jpg)
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
![Page 45: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/45.jpg)
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
![Page 46: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/46.jpg)
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”
![Page 47: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/47.jpg)
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
![Page 48: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/48.jpg)
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
![Page 49: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/49.jpg)
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”
![Page 50: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/50.jpg)
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
![Page 51: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/51.jpg)
Creating a Web Page with Netscape Composer
![Page 52: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/52.jpg)
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
![Page 53: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/53.jpg)
Creating a Web Page with Netscape Composer
![Page 54: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/54.jpg)
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
![Page 55: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/55.jpg)
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)
![Page 56: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/56.jpg)
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
![Page 57: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/57.jpg)
Publishing Your Web Page
Enter a filename for your page in the “HTML Filename” box
NOTE: Your main page should be named “index.html”
![Page 58: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/58.jpg)
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
![Page 59: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/59.jpg)
Publishing Your Web Page
![Page 60: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/60.jpg)
Publishing Your Web Page
If you’ve created a page in another program, you can also connect directly to the server with FTP
![Page 61: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/61.jpg)
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
![Page 62: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/62.jpg)
Publishing Your Web Page
Enter your Gatorlink ID in the “User ID” box
Enter your Gatorlink Password
Leave the “Account” and “Comment” boxes empty
![Page 63: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/63.jpg)
Publishing Your Web Page
![Page 64: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/64.jpg)
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
![Page 65: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/65.jpg)
Publishing Your Web Page
To transfer a file, click on it to select it then press the transfer button
![Page 66: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/66.jpg)
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”
![Page 67: Creating a Web Page HTML, FrontPage, Word, Composer](https://reader035.vdocuments.site/reader035/viewer/2022062221/56649dc05503460f94ab440c/html5/thumbnails/67.jpg)
Viewing Your Web Page
Once you’ve uploaded your web page, you should be able to view it using any Internet Browser