Download 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…
Specifies that "hypertext transfer
protocol" will be used to communicate
between your computer and the server.
Names the "server" -- the computer that holds the
web page file you want to look at.
http://psych.unl.edu/psyc450_2012/garbin/index.html
Tells the directory on the server that
holds the file you want to look at. The
specification of the directory can have
several layers.
This is the name of the file you want to look at.
Sometimes there isn't a file given at the end of the
directory specification -- then the computer automatically
looks in the specified directory for a file named
"index.html"
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 web pages 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.
You will build your webpage in three steps – with the following requirements:
Lab #1:
`Lab #2
1. Make the following pages with complete interlinking (except for tables/figures – see below)
 Index page (contents of title & abstract pages & a link to a pdf of you research resport)
 Introduction
 Method
 Results
 Discussion
 a page for each figure and each table – each should allow return to page linked from and to all
other tables and figures
Format the text and add pictures, graphics, etc.
Starting a Web Page using Microsoft WORD



File  New click on "Web Pages" tab and double click the "Blank Web Page" icon
Remember to save early and often while you are working on your pages -- also make backup copies.
I have put a file called “blank.html in your account file – I suggest starting with it to make each of your web
pages and renaming it
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. We'll discuss this more during
the next work session. For right now you should concentrate on getting the text of each of your subtopics written !!
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. Also, since there will be more than
one person working on the pages, it is a good way to be sure that the current version of your work is available to
everybody in the group. 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., 828) 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.
Find and open the FTP program on your computer
In the "Session Properties" window, enter your account information
 Host Name / Address
psych.unl.edu
 User ID
unl-ad\psyc451
 Password
Webpages1

Leave the rest of the windows as they are & Click "OK" -- the software will connect you to the server
In the "Local System" window
 Find where you saved your html files
 Double-click the icon next to [-a-] to get to the floppy drive
 Double-click on the green arrow (maybe more than once) to get to the root directory on the hard drive
(when you get there the window under "Local System" will display C:\) -- you can move to the directory
where you saved your files (Probably "My Documents") from there
 Highlight the your files (index.html, ref.html & url.html)
In the "Remote System" window
 Click on  psyc451_2011  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
Using IE or some other browser, take a look at your pages, and be sure they show up & all the links work
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.