Updated: 8/15/98 -- Home

<html>

<head>
<title>Webpage Class Two</title>
</head>

<body>

<hr><hr> <center><h1>Second Build-Your-Own-Homepage Class</h1></center><hr><hr>

<center><h3>REVIEW</h3></center>

</body>
</html>

Second Build-Your-Own-Homepage Class

REVIEW

Review the UNIX commands at the beginning of the Build Your Own Homepage Short Course home page:
<a href="http://www.uark.edu/campus/compserv/shortcrs/shortpage/htmlco.html">UNIX commands</a> UNIX Commands

cd public_html (get into the directory from your home directory)
pico index.html (get into your file)
Observe, in the "url" to the file you are presently reading the following information: "http://comp.uark.edu/~ksampson/webpage_second_revised.htm"

These class notes are contained in a sub-file, that is linked to my main web page that is located in "http://comp.uark.edu/~ksampson/index.html"

Also, click on Sampson Home and note that the url there doesn't even refer to "index.html" even though it's in "index.html" that I have placed all that information. The more detailed "url's" like the one for these web page class notes come from a file that is "imbedded" in the main "index.html" file. You know it's imbedded when you have to click on something in my web site to get to it. The method of connecting up the sub-file is the same method you use to set up a reference to another website:

<a href="http://comp.uark.edu/~ksampson/webpage_second_revised.htm"> Webpage Class Two </a>

You already know how to create additional files (beyond "index.html"); the notes appear in "Hands-On Three" from the first class.

ut, wait to build some imbedded files until after you have "dressed up" your "gateway" home page that's located in your "index.html" file.

REVIEW of simpler material

<p> - two hard returns

<br> - one hard return
<hr> - horizontal rule

Three tags to set up visual division on the page. These tags are not "paired." They serve their functions once inserted. Note: One cannot duplicate the two hard returns that the

<p> HTML tag supplies -- or duplicate the one hard return that the <br> HTML tag supplies. However, one can duplicate the horizontal rules that the HTML tag supplies.

TAGS THAT REGULATE TEXT APPEARANCE

If you haven't already done so, get into your index.html file and start playing with some of these new innovations.

comp% cd public_html
comp% pico index.html
Remember to place all new text BETWEEN the <html></html> and between the <body></body> tags!

<b>Bold text</b> Text in between the <b> tags will be bolded.
This is BOLD text
<u>Underline text</u>
This is UNDERLINED text.
<i>Italicize text</i>
This is ITALICIZED text.

NOTE: the appearance tags are "paired" tags and require an ending tag /b,/u,/i.

Can use more than one appearance tag at the same time.
<b><u><i>Keep them nested</i></u></b> (in the reverse to close)
This line uses all three appearance tags.

For more appearance tags, see BARE BONES GUIDE, linked here and in the short course web site.
Take care with underlining, because links are underlined. Underlined text will make people think they can click on the underlined material to access a link.

RESIZING TEXT

Header tags <h1></h1>Biggest through <h6></h6>Smallest
Header tags also bold the text (so you don't need to add a bold tag to bold it)
Header tags put in a <p> tag automatically.

Here is an h1 header tag.

. . . an h2 header tag.

. . . an h3 header tag.

. . . an h4 header tag.

. . . an h5 header tag.

. . . and an h6 header tag.

To emphasize the first letter in a word (e.g, Once upon a time), can't use <h1>for that because of the automatic hard return.

FONT TAGS

You can emphasize the first letter in a word by using FONT TAGS
Font face: let's you provide a font name from your computer. Face=font name in quotes. But if person doesn't have the font in their hard drive, their view of the web page will ignore your font changes.
Ariel, Helvetica (common fonts), separated by commas, a machine will find the font it does have.
Two main things you commonly do with font: change size and color
Size 1-10 (1 is the smallest; reverse of the header tag hierarchy)
<Font size=8 color="#FFFFFF">O</font>nce upon a time.

Once upon a time.
RGB Color Code
Red
Green
Blue
IN QUOTES"#000000" code color for black (absence of all color)

Once upon a time.

"FFFFFF" code color for white (full amount of color) Once upon a time.

FF FF FF
Red Green Blue These groups tell how much of red, green, or blue that you want.

Red:="#FF0000" Once upon a time.

Green="#00FF00" Once upon a time.

Blue="#0000FF" Once upon a time.

<Font size=1 color="#0000FF"></font> Once upon a time.

Again, font face choices don't work that well. Size and color is great in the font tag. Font face: works with Ariel and Helvetica, because so many hard drives have them; but beyond that, the choices are limited for right now. Equations, etc., might work better to make them up as graphics and then transfer the graphic file to your web page.

Mixing colors using the RGB codes is possible; however, some of your results will differ from the similar process you would use when mixing paints, for example. Several color choices appear in web links; for example, check http://www.infi.net/wwwimages/colorindex.html -- linked here: Color Formulas

ADDING SPACES

&nbsp&nbsp (without tags) can add spacing to your page. Each &nbsp is the same as if you hit the space bar once. More than once space is nice if wish to follow up a semi-colon with two spaces, or separate your sentences with two spaces. This little animal also might help you to move graphics to the right on a page. Don't place it in the html tag <> Place a semi-colon after each set, or this tag method won't work.

The BARE BONES GUIDE gives you superscript, subscript, strike-out to place a line through your text, etc. For the future, when you're working on your web site and you're not in this litle tutorial, place this url in your bookmark file: http://werbach.com/barebones/

CENTERING MATERIAL

CENTERING MATERIAL on the page
<center>Text</center>
Usually you will see headings centered..

Here is a Centered Heading

The center tag is a "paired" tag.

BODY TAGS

BODY TAG optional options
Change color of background, color of text, link color, for entire page
<body bgcolor="#FFFFFF" background="background.graphic" text="#FF0000"
(white) will tile the background; red text
link="#00FF00" vlink="#0000FF">
"Visited Link" color

All optional; you can put in all, few, some, none of them. The </body> at the very end of the page will close these tags for you.

Color formulas at: http://www.infi.net/wwwimages/colorindex.html Color Formulas
--can make your own background graphic with the Photoshop offset function. A smaller graphic will load quickly and will tile quickly. The background will override the background color. Some people do not load graphics because some machines won't be able to read them. A dark background color will help with the contrast for a machine that doesn't load graphics effectively.

Check this link for a page that uses all the body tags: Body Tag Page

You will note that a background image appears on this body tag page. See below "adding graphics" for information about how to add graphics to your web site.

ADDING GRAPHICS

HANDOUT: Using FTP (on the PC); Using Fetch (Macintosh)

In order to add graphics, you will need to using FTP software (for an IBM pc) or Fetch (for Macintosh). Because I know how to use FTP, I will discuss it here. Sorry Mac fans!

First, you will need to obtain the FTP software. If you are drafting your web page from an institutional location where you have computer support, your computer support personnel will be able to load FTP software onto your hard drive. If you do not have institutional support, you can access a free download for FTP software at http://www.ipswitch.com/_vti_bin/shtml.dll/downloads/ws_ftp_LE.html or click here for the link: FTP Download If you attempt to download this software, do so in the middle of the night; otherwise, you will not likely be successful in downloading during the business day.

GRAPHICS: Go to netscape, click on the graphics file that shows up in the short course handout. Or do a web search for graphics. Tons of them are out there. Here's a link to a library of search engines.
The short course takes the students through the Leo's Icon Archive option at: http://www.silverpoint.com/leo/lia/
Leo has some easy-to-load graphics at this site; however, as stated, the web offers several pages of free graphics.
Browse through your choice; select a graphic.
On the pc, move the mouse to the graphic, and right click.
At the drop-down menu, choose "save image as."
Remember where you are saving it to; to make sure you can find it back later when you need to use the FTP software.
Easiest to save a graphic to a disk on the a:/drive - because you save yourself from a virus; and it's easier to remember where you put it for when you use the FTP software.

COPYRIGHT NOTE
Leo's Icon Archive has its "share" rules; other graphic folks will have their own rules. Just pay attention to the restrictions they place on the use of their graphics. Garfield, Mickey Mouse, Dr. Seuss. Be aware that some of the icons that are well-known will have bigger protectors, people who will e-mail you and ask you to stop using their copyrighted images. For example, the person who put together a whole Dr. Seuss page wound up negotiating with Dr. Seuss's widow over access to the Dr. Seuss images. He negotiated the right to use the cartoon images, but was not given the right to use the text from any of the Dr. Seuss books. What you just read was an anecdote from the short course. My brief review of the Dr. Seuss pages turned up one that has some original graphics (Meghan's Dr. Seuss page) and another that has links to Dr. Seuss books on-line (Ultimate Dr. Seuss Page).

Save the graphic you have chosen to your hard drive or to your disk by right-clicking on the image. Now, you will move the image to your web page by using FTP.

Open up the FTP software (some machines in an institutional network will have the FTP software stored in the menu behind the "Start" button; many machines will not have the FTP software loaded; thus the FTP-download will help you go it alone.)

The following references are to using FTP on my local Telnet-Comp account. Once the FTP file opens up, you will need to ensure you are in the comp profile and the comp host. At that point, log in your user id and password, just like you do when you use your comp/pine e-mail

Profile name: Comp
Host name: comp.uark.edu
User id: ksampson
Password: same as the routine entrance to Pine, etc.
NOTE: you can log into more than one program at the same time in your comp account, to use different programs in comp. However, if you access the same program twice without previously exiting, you will experience some comp problems.

Once you have logged into the FTP software, you will have a left screen and a right screen. On the left of the screen you can access your pc's c:/drive or the a:/drive

On the right of the screen you access your web page files.

On left of the screen: open up the C:/drive or to the A:/drive. Find the saved-image file. Click on the image file.

Leave the left side of the screen; move to the right side of the screen

Double-click on public_html to "open it up." This is where you should have begun building your web page in the first class.
Go to left; click once on the graphic.
Click the arrow in the center of the screen that is moving in the direction that you want it to go.

At the bottom of the FTP screen will appear three choices: ascii, binary, and auto. "Binary" is the default and the choice you should use for transferring both graphics and text files that you want to move to your web page. Make sure the FTP is always set on "binary" - it works for everything, including text. If you don't use "binary," you get garbage. "Auto" is not completely fool proof, so "binary" is your best default.
FTP likes to kick you out. If you don't work with it for a few minutes, FTP will just kick you out. When you're finished moving the file in FTP, click "close" at the bottom of the FTP software to exit it.

Note on using FTP to transfer files created on word perfect or other word processing programs. You will need to save these files as ascii text in order for them to transfer to your web page using the FTP software. The details about this conversion depend on the particular word processing equipment you are using.

STEPS TO LOADING GRAPHICS TO COMP ACCOUNT

choose the graphic (the preceding examples assume choosing a graphic from a web page source)
right click on the graphic; choose the "save image as" menu item
save to disk using the a:/drive (or to the hard drive at c:/ -- but take care to remember the name of your file)
load the FTP software, by clicking on the FTP icon or by loading it from the "start" button at the bottom left of the computer screen.
find the saved image in your a:/drive on the left side of the screen. If you can't see the a:/drive, click on the green arrow icon at the top of the left side of the FTP screen
open up the public_html directory on the right side of the screen by clicking on the "public_html" line
click once on the saved image file on the left side of the screen
press the arrow key in the center of the FTP screen that is moving in the direction you want the file to move (right to move from the pc to the web site files)(left to move a file from the web site files back to the pc)
close the FTP software
get into the web site files by accessing your comp account.
comp% public_html
comp% index.html (or whatever file you wish to move your image to; as your web page gets larger you will want to learn how to make additional files)
move to the location in your web site file where you want your graphic to appear. Then add the html tag to that location on your web page <img src="garf-present.gif">
Ctrl-O to save
Ctrl-X to exit from working with the pico program (the program you use to build your web page on-line)
at comp% prompt, "set the permissions" for the graphic you just added: chmod a+rx garf-present.gif
EXIT at the comp% prompt, especially if you are working in a public lab.
Load your web site to make sure the graphic transferred properly; if it did not, double check your html tags for missing pairs of <> or "" or any type of misspelling. Also check to make sure the "paired" tags have proper closure.<header></header>
To double-check yourself, you have two options that I know about: (1) Netscape - View - Page Source; and (2) the comp web page file itself,using the pico progam.
Enter comp.
comp% cd public_html
comp% pico index.html
scan you html tags; look for mistakes; change them; Ctr-O and enter to save changes; minimize telnet-comp screen; reload your web site and see if it worked!
when finished, remember to exit your comp account (especially if you are working in a public lab)
comp% exit

Some Reminders

ls -al to see if your graphic moved Set the permissions: chmod a+rx garf-present.gif Now add the image to your web page
<img src="garf-present.gif">
image source
If you have forgotten the name, do the ls -al in your comp account and scan down the list of files to recall what the file name is.
<img src="garf-present.gif" border=0> the border note returns any ready-made borders around grahic
<img src="garf-present.gif" alt="this is Garfield">
The alt is being kind to folks whose machines don't load graphics.

USING SCANNERS TO MAKE YOUR OWN GRAPHICS

SCANNERS for gifs and jpegs. NOTE: I have not tried the scanners yet, so the I cannot provide additional insights I will develop from my own mistakes, when I do try to use the scanner.
Two machines that have scanners are in the Gibson Lab. They work like a copy machine. Place the picture face down. The software at Gibson will save as tif, bmp - don't go on a web page. (The Young Law Library also has a black and white scanner)
.jpg and .gif are presently the only two formats that web pages will accept.
To convert the scanner, use a shareware program. One program recommended by the web page instructor allows for a 21-day trial period before the software developers ask for a paid subscription.

However, LViewPro1.D2 is awfully easy to use, and you ought to give it a try. Download the older program; it's very straightforward. LViewPro converts scanned files (that will save from the scanner in formats that you can't use on your web site) to different file formats the web page can accept (.jpg and .gif); resizes your picture; crooked edges, can crop out the ugly edges.
Also, paintshopro - does more, let's you draw, a little harder to use because it does more than lviewpro. No link here, check the short course page if you want to move beyond LViewPro.
Photoshop is a great program; but it costs some money.

Some details about what these programs do and why they are relevant when you use a scanner to develop your own graphics

.jpg's are for photographs (hold more colors; higher resolution)
.gif's are for graphics (a photo in .gif will lose some color and will look grainy)

Transparent backgrounds are functional in .gif and in lviewpro

Using the scanner:
Save as .tif
Convert to a .jpg or to .gif, using lview pro or other software.
Problem with a tif file is that it is huge; sometimes it won't even fit on a disk.
Solution: upload to comp account (using FTP software)
Download from comp (using FTP software); use something like lview pro to convert.

.jpg's are little, they are compressed.
.tif's are huge; hard to carry on a disk.
.jpg and .gif are the only kinds of files that we can place on our page.

MISCELLANEOUS HTML TECHNIQUES

Review the short course web page: lots of information on that page that can't be covered in the introductory course.
Lview pro- get the older version; it's easier to use. Paintshop pro. Guide to paint shop pro is good.

Placing text next a graphics requires the use of TABLES
Refer to short course web page.
BARE BONES GUIDE (note; no one likes blinking tags)
-add a counter to your page (right now it's broken) (Kevin Robinson is supposed to be fixing it) (give him your name; put on list of folks who are waiting for the counter) (he will contact by e-mail and let you know when it's fixed)
-personal pages; can get counters from other sources; some lee-way with counters, even though they have some advertising on them.

TABLES
<table border=4 cellspacing=8% cellpadding=15>
<tr><td><img src="rebecca.gif"></td>
<td><img src-"rebecca.gif"></td>
<td>My niece, Rebecca.</td>
<td>Another view, moving to the right.</td>
</tr>
</table>

My niece, Rebecca. Another view, moving to the right.

Because, I am a little shaky about how to build a table, I checked the University of Arkansas School of Law web site, clicked "view" and "page source" on the netscape screen to get the "table tags" I used to place the squares around the picture.
tr=table row (moves down)
td=table cell (moves to right)

To remove lines:
<table border=0> (removes table lines completely)
<table border=5> (to give you a thicker border)

CHECK THE BARE BONES GUIDE FOR ADDITIONAL INFORMATION ABOUT HTML TAGS.
- it has a tables section that will help you build a table.
- can nest material in your tables
- can place a table within a table; you can nest tables within tables; like arranging pictures on the wall.

Bulleted Lists

BULLETED LISTS
<ul> unordered list
<li>
<li> places bullet
</ul> ends unordered list

Here is a bulleted list.

First item.
Second item.

NUMBERED LISTS
<ol> ordered list
<li>
<li>places number
</ol> ends numbered list

Here is a numbered list.

First item.
Second item.

<pre>returns or spaces</pre>
allows you to have the text appear just as you wish on the page. BUT NOTE: these tags remove the internal text-wrapping mechanism and may cause different results on different web browswers.

To move graphics or text around on the page you can change the alignment.
<IMG SRC="rebecca.gif" ALIGN=right> will move a picture to the right of the page.

May need to also use <pre></pre> to arrange images horizontally or vertically. When you activate the <pre> function, any space bar spaces and any return/enter spaces will appear on the screen just as you have supplied them on the pico program. Note, however, that the <pre> function also "turns off" the wrap functions and may create absurd results on some web browsers regarding page appearance.

CHECK THE BARE BONES GUIDE IN THE SHORT COURSE MATERIALS FOR ADDITIONAL HTML TAGS.

emember; when you are working with your webpage on line, all of the material you want to show up on your page must appear between the BODY tags and between the HTML tags.

Final note: if you want to do something on your web page that you see on someone else's web page, you can see the HTML tags that person used by clicking on the View button across the top of the Netscape screen and then choosing "Page Source" or its equivalent. I have not discovered a method for printing out these codes, yet, so there is still some use to be made of that pencil on your desk!

Sampson Home