Building Simple Web Pages

Building Simple Web Pages

What and “Where” is a Web Page?

A webpage is a file stored on a computer called a "server". When your computer contacts the server, by issuing the URL (address) of the specific file, the contents of that file are shown on your computer. Here is what the parts of a URL (i.e., Uniform Resource Locator) tell you…

A Few Important Things about URLs for Web Page Users and Authors

Every character must be correct -- nearly all complaints about web pages "not being there" are solved when

the user finally types in the correct URL

\ is not the same as / ; is not the same as : , is not the same as . etc.
case matters -- M is not the same as m
~ is really a character -- called "tilde" (usually to the left of the number 1 key -- has to be shifted)

It is best if there are no spaces in a URL -- this is why you see lots of "-" and "_" used

Most pages have the file extension .html or .htm -- these are not interchangeable -- be sure which to use!

A Web Page is a file containing "code" that tells your computer what to show on the screen.

Using a browser, go to the some web page. On the command bar, click View and then Source to see what the html code looks like that produces the webpage.

If we were "real" webpage programmers (some of you may be now or in the future), we would learn the different program commands to make webpages. However, because the focus of this exercise is the content of the webpage, we will be using Microsoft Word as a basic html editor. Using Word, making a webpage is very much like making any other document. It is a combination of text of selected font, size, color and formatting and some pictures. To this we will add "links" that will allow your reader to move around between your webpages to find the things they want, other links that will take your readers to other folk's webpages and we'll make it easy for them to email their comments and questions to you.

Here are the requirements for your webpage:

The following pages with complete interlinking

Index page (contents of title & abstract pages & a link to a pdf of you research resport)
Introduction
Method
Results
Discussion
References (with active links to any available online)
a page for each figure and each table

Starting a Web Page using a blank html page & Microsoft WORD

Save the “blank.html” page to whatever hard drive or memory stick you are going to use for the assignment
Copy and save the file into the following to get started (you can make more as you need them): intro.html, method.html, result.html, discussion.html
Open one of those files using Word
Edit the file and resave the updated version

Remember to save early and often while you are working on your pages -- also make backup copies.

Text

Like in a "regular" document, there are two basic ways to get text onto a web page -- type it in or paste it in. Typing you know about. Pasting works the same as in a text document. First, go to the source of that text (even from another web page -- don't plagiarize, give credit for things you "borrow"), highlight the desired text and click on the "Copy" button (or use Ctrl-c or the Edit  copy). Then, go to where you want to insert the text on your web page and hit the "Paste" button (or use Ctrl-l, or the Edit  paste).

Many of the things you want to do with text are available on the "toolbar" (usually at the top of the screen):

The usual font type window appears, usually near the upper left corner.

Font size is controlled using the two buttons to the immediate right of the font type window. One of these makes the current or highlighted font "the next size larger" and the other makes it "the next size smaller". Be sure to try looking at you page on different computers, especially those with different screen settings.

The usual font effects buttons are next, B = bold, I = italics, U = underline

Text positioning is controlled with the next set of buttons. Note that these control only relative positioning -- different screen sizes used by the viewer will result in differently located wrap-arounds. Don't count on specific positioning of words!

Numbering and Bullets can be used.

The Tab controls can be deceiving! In HTML multiple spaces and tabs are usually ignored, so you can't control positioning on a web page like you can in a text document. One exception is if you are using bullets or numbering -- then you can use the tab keys to get indentation patterns (like for an outline).

Horizontal lines are used to divide sections of a page, etc. These are usually center justified, and will change size to fit the screen of the viewer (don’t' try to use them to underline text).

You can pick the background color and pattern by clicking on the paint bucket (don't use patterns today, please).

Font color can be chosen using the last button in this series. Be sure that the combination of font and background you choose gives an easy-to-read page!

A Caution about Spacing and Arranging Text in HTML Files

While making a webpage in Word is much like making a document file, there are some differences. One is that you have limited control over the spacing and positioning of text. For example, if your were to carefully arrange a list of terms so that they lined up "just so," they probably wouldn't line up like that at all when viewed as a webpage! About the only positioning control you will have is to use the "left justify," "center" and "right justify buttons on the control bar.

If you want more positioning control of text and of picture you can use Tables, as discussed below.

Linking to Other Web Pages

Usually a "web page" isn't a single page, but rather a set of interconnected pages. This might be done to help the author stay organized, to direct the reader's attention as the author desires, or to speed things up for the reader by having shorter pages to load from the server. Also, you will want to link other pages to yours, so that your reader can go and peruse what other folks have done. This is really easy to do in Word! All you have to do is highlight a word or phrase that tells the reader where the link leads, click on the "Insert Hyperlink" icon (a picture of the earth with a chain link), and type in the URL for the linked page. Remember, the URLs must be EXACT. Each and every character must be correct or your reader will get the dreaded and hated "error 404 page".

Most of the time we will use "relative paths" to link your various pages together. This means that you will only specify the file name of the different pages, and the computer will look for a file of that name that is in the same directory as the current file. Relative links decrease the chances of mis-specifying URLS and also make it easier if you have to change servers or directories (since you won't have to rename all the links).

Linking to a Specific Spot on Another Web Page

First – add a bookmark in the target file

you are working in the target tile!
Highlight the text you want to assign as a bookmark (i.e., the location on that page you want the link to bring you to)
On the Insert tab, click on Links and then Bookmark.
In the window that appears type the name you want to give that location (keep it simple, start with a letter & no spaces. e.g. bkmk1 )
Click Add

Second – linking to that bookmark in that file

Highlight the text you want to assign as the link.
On the Insert tab, click on Links and then Hyperlink
In the window that appears, put the name of the target file, a “#”, and the name you gave that location (e.g., secondpage.html#bkmk1 )

Uploading Your Web Page Files to the Server

In order to be a "real" web page, instead of just an html file, your web page file must be resident on a "server". A "server" is a computer with an Internet address that stores your files and sends them to anyone who requests the page by entering your URL using a web browser such as Netscape or Internet Explorer.

"Uploading" your files (copying them from your computer to the server) is pretty simple, using an FTP (File Transfer Protocol) program. There are several of these and they work pretty much the same. FTP software connects your computer to the server, and allows you to move files back and forth between the two. When the software has connected the two computers, you'll see a two-part screen. The left side represents the files on your computer, and the right side represents the files on your account on the server. You will locate and highlight the file(s) on your computer (left side) and the folder/directory to which you want to upload them on the server and them click the arrow that points from the left side to the right side (the "upload button").

You can also "download" files from the server to the computer you are working at. If you want to download a file (copy it from the server to your computer), just highlight the file on the right side and then click the left-pointing arrow (the "download button"). Be sure you correctly identified the directory on your computer where you want to be saved or it will "disappear". If this happens, use the "Find" utility to see where you wedged your file.

You should consider keeping your working and finished files on the server. Your files are probably safer when saved on the server then if left on a desktop computer or carried around with you. It is also a good idea to keep copies of earlier versions of your web page file saved on the server. One simple way to do this is to rename the file -- using the date (e.g., 11_10) instead of the "html". Don't keep dozens of copies, but a few backups can save time when there is a lost file, or a new version doesn't work well.

Using FTP

Download the FTP zip file from our webpage
Unzip the folder and put it on whatever hard drive or memory stick you are going to use for the assignment
Open the unzipped folder
Double click “WS_FTP95.exe”

Leave the information in the windows as it is & Click "OK" -- the software will connect you to the server
But  you can only do this on campus… (it is a “permissions” thing)

In the "Local System" window – on the left

Find where you saved your html files (the “..” is used to back up one folder

Highlight the folder or file you want to upload (index.html, ref.html & url.html)

In the "Remote System" window – on the right

Click on  psyc451_2014 and your name
All your files must be saved in this directory for them to be available to the Internet

Click the right-pointing arrow to upload your files -- they should appear in the Remote Site window

Including Pictures in your Web Page

If you have the picture saved in a file then use Insert  Picture  From File and select the picture file you want. One thing to remember is that when you insert a picture Word automatically: 1) creates a folder with the same name as the webpage, 2) creates a copy of the file of that image, and 3) saves the file into the subdirectory in the same directory as the webpage file. This is a real timesaver, but for it to work (the pictures to show up on your web page) … When you upload your webpage file to the server, you must also upload he subdirectory that contains the picture files!

You can get a copy of a picture from the web. While in a browser, right-click on the image you want and save it as a file. Then get into Word and insert the picture as above.

You can also scan in a picture. Probably the most common is to use a scanner to make a file and then insert the file as described above.

Using any of these procedures, the picture (or picture of text) will be inserted, but probably not where you had in mind. You can change its position by highlighting the picture and clicking on one of the justification position buttons. Please note, as with text, careful positioning of the picture by dragging it around usually results in the picture being somewhere you don’t want it! You can adjust the size and shape of the object by highlighting it and moving the markers on the corners and sides -- use the markers on the corners to adjust picture size (you can also change just the height or width of the picture though doing so will usually distort the picture).

A Little More Position Control: Using Tables

When typing and/or copying in text and pictures, there is only limited positioning control. Using “tables” can help. Suppose you wanted to put two pictures side-by-side, with some text that described what is similar and different about them in between. If you inserted the pictures and then carefully arranged them, they wouldn’t like you had them when the page is saved as an html file. Using this example, here’s how to accomplish what you want. (There are probably other ways to do this, but I’ve had good luck with this one.)

Table  Insert Table and indicate the number of rows and columns you want

To see the table you might have to Table  Show Gridlines

Put the cursor in the cell where you want the picture.
Insert  Picture  From File use the browser to find the picture file and press the “Insert” button – Ta Da !!! (using the procedure described above, you can instead insert the URL for one of the archived pictures)
Use the little squares on the sides and corners of the images to adjust their size and position as desired
You can put any combination of pictures and text in the different cells, to get the "effect" you like.
You can move text you already have in the webpage into a table by highlighting and copying it and then pasting it into the table cell you desire.

Cautions about Pictures

Giving credit When you “borrow” a picture, be sure to give credit, by listing the book, article, web site, etc. from which you got it. Because this is an educational web page, we have considerable latitude with respect to copyright rules, but we want to give credit where it is due.

Making the web page file big and slow The more pictures you have in the web page the slower it will load. There are at least two options: You might split your web page up into multiple pages, each of which will load faster. However, you have to plan this carefully, because a lot of linking back and forth will slow things down. Or, if you found a picture you like at another web site, put in a link to that web site, rather than borrowing the page to put in yours. This will give due credit, and will give the reader an opportunity to look through the other stuff on that website.