If a terminal window isn't open, open one by clicking on the
icon that looks like a little computer monitor. Type the commands given
in step 3 into the terminal window.
Follow the official instructions from our computing staff.
If you're not
familiar with pico, don't worry -- the commands will appear at the
bottom of the window. You will probably just need "WriteOut" (a.k.a
Save), which is Ctrl-o, and "Exit," which is Ctrl-x. Don't skip the
"chmod" part of the instructions -- and you might have to repeat this
step whenever you create a new page.
Check the success of step 3, and get a feel for where your website
files will live:
Type "ls" to see all the directories under your home directory,
including the new one called public_html.
Type "cd public_html" to move into the directory.
Type "ls" to list the files in the directory (index.html should
be the only one).
As you generate more files for your website (additional pages,
images, etc.), you will save them in this directory.
Send an e-mail to help@math.ucdavis.edu asking them to activate
the link from the directory to your new page. When you hear back from them
later today or tomorrow, check out the link by going to the math department
directory and clicking on your name.
As it stands, your web page is just a generic placeholder. You need to
edit the file index.html to make it into a real web page; here we will
just add your
name. The main principle at work is: whatever file you cook up and save
as index.html in your public_html directory, that's what will appear
when anyone looks you up on the web.
To edit your index.html file, we will use Mozilla's Composer program.
It runs a lot like many Windows programs you might be familiar with.
Click on the mozilla-looking icon.
At the top of the screen, click on "Windows," and then click "Composer."
A new window should appear.
Click on "File," and choose "Open File." Find your index.html
file in your public_html directory, and open it.
Delete the text that appears, and replace it with
your name. Save the file in the usual way (File, Save).
Now, check out the new page that appears when you
type in your URL. (If you still have your page open from a previous step,
you can just click on the "reload" button.) As long as you remember
to save your file as index.html after making changes, the changes will
appear instantly on your "live" webpage.
A webpage is meant to be viewed from anyone's screen. So, you
should avoid features that are particular to your computer. For example:
avoid using colors which make the page unreadable under
some settings;
don't set your page to be a certain width which may
be too wide or too narrow for other people;
don't rely on fancy fonts that aren't standard on everyone's
machine.
To avoid all these pitfalls without even thinking about it, use
a good html editor like Composer. You will find that your choices are
somewhat restricted and simple compared to a program like MS Word, but
this is good. You are being restricted to the features that will look good
anywhere.
Highlight the text on your page using your mouse in the usual way,
and experiment with the available font options.
One main difference between webpages and Word documents is that
here we don't deal in "12 point" fonts. Instead, the web favors the use
of "heading" styles, which keep your words proportional to each other, no
matter who is viewing your page or how big their browser window is.
You will find the heading style choices in a drop-down box in the upper
left corner of you Composer window.
Heading 1
Heading 2
Body Text
Fonts on the web also come in small-medium-large. Look in the
Format menu, under Size.
medium
large
x-large
Colors, bold, Italics...
Red
Green and Bold
Teal and Italicized
Font choices are limited to the most universal ones.
Click on the button labeled H.Line at the top of the Composer window.
(contents)
Add an image
If you already have an image somewhere in your account
(or attached to an e-mail), save a copy in your public_html directory.
Or, find an image on the web that you would like to use.
If you don't have any ideas, you could go to Google, click on the Images
tab, and search for "fractal," or "Mobius," or "Golden Poppy." Click once
on your image with the right mouse button, choose Save Image
As...
and save it in your public_html directory.
In Composer, click where you would like your image to go.
From the Insert menu, choose Image (or just click on the
"Image" button), click on the Choose File button, and select your image.
Take a look at the checkbox that talks about a "relative" address.
This should be affirmative. Check out the next section to see
how this frequently goes wrong, even if you do
everything right.
If your picture is the wrong size there are two methods
for adjusting it:
(The Worse Way) In Composer, click on the image with the right
mouse button and select Image Properties to adjust. This leaves your
image file alone and just changes the appearance of the image on the
page. This can cause your page to load very slowly!!
(The Better Way) In the terminal window, move to where your image is
saved (e.g., the public_html directory). Use the Linux utility "Convert"
to
change the actual file, so that the image will be the right size. You can
use pixels, or you can use percentage of the original size:
convert -geometry 300x200 picture.jpg picture_new.jpg
convert -geometry 50%x50% picture.jpg picture_new.jpg
To read more about convert (it can do a lot of things besides change the
size of an image) type "man convert" in the terminal window to read the
"manual" entry about it. Use the space bar to move forward a page, "b" to
move back a page.
When your page makes reference to another file (like when you "paste" in an
image, or add a link to your C.V., or a link to Google), the editor needs to
make a distinction between files that are local (like the image or your
C.V.) and files that aren't local (i.e. you don't own them, like
Google). When you add an image or file, you may notice a checkbox that
talks about a "relative" address. This box is supposed to take care of the
local/not local detail, but unfortunately it seems to be buggy. So we
might need to go in by hand to make adjustments.
Click on the "Source" tab at the bottom of your Composer
window. This reveals the HTML code that Composer has been writing for
you.
Identify the images or links you have added to your page. If
you're having trouble, search for the name of the file, like
"bluebird.gif" or "CV.html", etc.
Take a closer look at the text surrounding your file. Has your
local file been given a very long name that starts with something like
"h:" ? This is a problem, and it will result in a broken link
when you're not viewing your web page from the math department
machines. The
concept at work is that we don't actually want the general public reaching
into our user accounts to pull out our files -- we only want them to
navigate around in our public_html folder. So local files have to have a
"short" name, while external things (like a link to Google) need the whole
long address.
Delete the offending extra stuff. All you want is something
like: img src="SW_Portrait.jpg" in angle-brackets.
Save your changes and check out the results. If you're in the
lab on campus, it shouldn't look any different than it did. Check out your
page from home to double-check how it looks to everyone else.
Type the text that will make up the link. For example,
type "Search Engine." Highlight the text.
From the Insert menu, choose Link. Type in (or
copy-and-paste) the URL
for the site you are linking to, e.g. "http://www.google.com". (You
have to type in the whole address, including the "http".)
You can't test your link in Composer -- nothing happens
when you click on it. To test your link, save your work and then click
on the Browse button at the top of the Composer window.
Create another page (about your hobbies,
etc.) and make a link to it
From the File menu choose New Composer Page.
Save this new file in your public_html directory. For
example, you could call it "Hobbies.html." Notice that Composer prompts
you to enter a title for your new page. By default, the filename will
be the same as the title, but you can change this.
Check out the permissions of this new page. In the terminal window, go
to the public_html directory and type
ls -l *.html
to show the permissions of your various html files. There is space for each
file to have
-rwxrwxrwx
but some of these 9 "permissions" may be dashed out. The letters stand for
"read, write, execute," and there are 3 sets because the first set is
for you, the second
set is for your "group," (obscure) and the third set is for the public. The
only permission you really need to worry about is the public's execute
permission. As you did when you created your index.html page, use the chmod
command to update the permissions:
chmod -R go+r ~/public_html
Put some text and/or images on this page.
Back on your main page, type the text or insert the image
that will make up the link. Highlight the text or image.
From the Insert menu, choose Link. Click on the Choose
File... button, and select your new page.
If you have a question about this tutorial, you could e-mail me,
sawilliams.
For more general computer help, e-mail help@math.ucdavis.edu, and
the computer folks upstairs will answer your question. Include: where
you're sitting, what you're doing, and how the computer responded. If
applicable to your problem, copying and pasting from the command line directly
into your e-mail message (both your command and the computer's error message)
is best.