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 Any tag you open must also be closed 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 ( 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 TrialFrontPage 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

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

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: 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

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 Links An link works like a link to another web page In the “Link to…” box, you type: mailto:your 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

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

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

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

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