Galois Group

User Tools

Site Tools

Trace: • webpage

Sidebar

webpage

This is an old revision of the document!

A Webpage Tutorial for
the UC Davis Department of Mathematics


by Sarah Williams
updated 9/14/03
Get Started Keep Going More Resources

Get Started

Create Your Page (Out of Thin Air!)

  1. Log in to your math account.
  2. 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.
  3. 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.
  4. Check the success of step 3, and get a feel for where your website files will live:
    1. Type "ls" to see all the directories under your home directory, including the new one called public_html.
    2. Type "cd public_html" to move into the directory.
    3. Type "ls" to list the files in the directory (index.html should be the only one).
    4. As you generate more files for your website (additional pages, images, etc.), you will save them in this directory.
  5. Look at your new webpage online: Launch Mozilla (click once on the Mozilla icon), and type in your URL: http://www.math.ucdavis.edu/~yourusername
  6. 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.
(contents)

Make it Yours

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.
  1. Click on the mozilla-looking icon.
  2. At the top of the screen, click on "Windows," and then click "Composer."  A new window should appear.  
  3. Click on "File," and choose "Open File." Find your index.html file in your public_html directory, and open it.
  4. Delete the text that appears, and replace it with your name. Save the file in the usual way (File, Save).
  5. 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.
(contents)

Good Practices

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.

(contents)


Keep Going

Change the font style

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.
  • Variable Width
  • Fixed Width
  • Helvetica/Arial
  • Times
  • Courier
(contents)

Add a horizontal line (or "rule")

Click on the button labeled H.Line at the top of the Composer window.

(contents)

Add an image

Flicker
  1. If you already have an image somewhere in your account (or attached to an e-mail), save a copy in your public_html directory.
  2. 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.
  3. In Composer, click where you would like your image to go.
  4. 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.
  5. If your picture is the wrong size there are two methods for adjusting it:
    1. (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!!
    2. (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.
(contents)

A Bug You May Encounter (and how to fix it)

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.
  1. Click on the "Source" tab at the bottom of your Composer window. This reveals the HTML code that Composer has been writing for you.
  2. 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.
  3. 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.
  4. Delete the offending extra stuff. All you want is something like: img src="SW_Portrait.jpg" in angle-brackets.
  5. 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.
(contents)

Change the page background

Backgrounds are really repeated small tiles.
  1. Go to Google and search for something like "free background webpage." I used the site www.webpagebackground.com, but there are tons of sources.
  2. When you find a tile you like, click once on it with the right mouse button, choose Save Image As... and save it in your public_html directory.
  3. Back in Composer, go to the Format menu and choose Page Colors and Background...
  4. At the bottom of this window, click on the Choose File... button and select your tile file.
  5. Follow these directions ("A Bug You May Encounter...") to make sure you're not the only one who can see your lovely background.
(contents)

Add a link to a page on the web (like a site you search all the time)

Search Engine
  1. Type the text that will make up the link. For example, type "Search Engine." Highlight the text.
  2. 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".)
  3. 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.
(contents)

Create another page (about your hobbies, etc.) and make a link to it

  1. From the File menu choose New Composer Page.
  2. 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.
  3. 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
  4. Put some text and/or images on this page.
  5. Back on your main page, type the text or insert the image that will make up the link. Highlight the text or image.
  6. From the Insert menu, choose Link. Click on the Choose File... button, and select your new page.
My Hobbies


(contents)

Add a link that jumps to another location on the same page

  1. Click your mouse at your link "target," then in the Insert menu choose Named Anchor.
  2. Give the "anchor" a name that describes its location.
  3. Now select the image or text that will make up the link pointing to this target.
  4. From the Insert menu, choose Link. Click on the Choose File... button, and select your anchor.



More Resources

Other websites about web authoring

  1. Just the facts
  2. Lots more links
(contents)

Help with the math department computers

  • 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.
(contents)

Legality

(contents)

webpage.1455643101.txt.gz · Last modified: 2016/02/16 09:18 by jasnyder

Page Tools

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki