Logo for UC Davis Galois GroupGalois Group

User Tools

Site Tools

Trace:
webpage

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
webpage [2016/02/16 17:18] – jasnyderwebpage [2026/04/20 19:35] (current) – ARCHIVED asimons
Line 1: Line 1:
-<html> +~~NOTOC~~ 
-<div align="center">          +====== ARCHIVED MATERIAL ====== 
-<h1>A Webpage Tutorial for<br> +===== A Webpage Tutorial =====
-   the UC Davis Department of Mathematics</h1> +
- +
-   <br> +
-    <font size="+1">by Sarah Williams</font><br> +
-         updated 9/14/03<br> +
-   </font> </div> +
-                  +
-          <font size="+1"><a name="Started_Contents"></a>  <a +
- href="#Getting_Started"> Get Started</a></font>             +
-<ul> +
-              <li><a href="#Creating"> Create Your Page (Out of Thin Air!)</a></li> +
-              <li><a href="#Editing">Make it Yours</a></li> +
-              <li><a href="#Good_Practices"> Good Practices</a></li> +
- +
-                   +
-</ul> +
-          <a name="Features_Contents"></a> <a href="#Features"><font +
- size="+1"> Keep Going</font></a>                           +
-<ul> +
-              <li><a href="#font">     Change the font style</a></li> +
-              <li><a href="#HLine"> Add a horizontal line (or "rule")</a></li> +
-              <li><a href="#Image"> Add an image</a></li> +
- +
-       <li><a href="#Rel_Links"> Fix a common bug</a></li> +
-              <li><a href="#Background"> Change the webpage background</a></li> +
-              <li><a href="#External_Link"> Add a link to a page on the web  +
- (like a site you search all the time)</a></li> +
-              <li><a href="#Internal_Link"> Create another page (about your  +
- hobbies, etc.) and make a link to it</a></li> +
-              <li><a href="#link_same_page"> Add a link that jumps to another  +
- location on the same page</a></li> +
- +
-        +
-</ul> +
-   <a name="More_Resources"></a><a href="#Resources"><font size="+1">More  +
-Resources</font></a>    +
-<ul> +
-     <li><a href="#Sites">Other websites about web authoring</a></li> +
-     <li><a href="#Help">Help with the math department computers</a></li> +
-  <li><a href="#Legal">Legality<br> +
-    </a></li> +
            
-</ul> +==== Create Your Page ====
-   <br> +
-                 +
  
  
 +  - Log in to your math account on one of the department computers, open a terminal window.
 +  - Follow [[https://www.math.ucdavis.edu/resources/comp/comp-faq/#website_setup|these instructions]] from our computing staff. Don't skip the ''chmod'' part, if you want your page to be publicly accessible.
 +  - Your webpage will be visible at ''www.math.ucdavis.edu/~mathusername''
  
-<hr width="100%" size="2" align="left">               +==== Editing the Webpage ====
-<h2><a name="Getting_Started"></a> +
-    Get Started</h2> +
-       +
  
-<hr width="100%" size="2" align="left">               +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. 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. 
-<h3><a name="Creating"></a>      Create Your Page (Out of Thin Air!)</h3>+
  
-                      +There are two main options for customizing your webpage:
-<ol> +
-    <li>Log in to your math account.</li> +
-    <li>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.</li> +
-    <li>Follow the <a href  +
-="https://www.math.ucdavis.edu/resources/comp/comp-faq/#website_setup"  +
-target="blank">official instructions</a> 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.</li>+
  
-    <li>Check the success of step 3, and get a feel for where your website 
- files will live:</li> 
-                                            
-  <ol type="a"> 
-    <li>Type "ls" to see all the directories under your  home directory, 
-including    the new one called public_html. </li> 
-    <li>  Type "cd public_html" to move into the directory. </li> 
-    <li>  Type "ls" to list the files in the directory (index.html should  
-be  the only one).</li> 
-    <li>  As you generate more files for your website (additional pages, 
-images,  etc.), you will save them in this directory.</li> 
  
-              +=== Option 1: Make it yourself. ===
-  </ol> +
-                       <li>Look at your new webpage online: Launch Mozilla +
- (click once on the Mozilla icon), and type in your URL: <a href="http://www.math.ucdavis.edu/~yourusername">http://www.math.ucdavis.edu/~yourusername</a></li> +
-    <li>Send  an e-mail to <span class="nospam1">&#104elp<!-- foobar --></span>&#64;<span class="nospam2">math.ucdavi&#115;&#46;edu</span> 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.</li> +
-                      +
-</ol> +
-          <a href="#Started_Contents">(contents)</a><br> +
-        +
-<hr width="100%" size="2" align="left">              +
-<h3><a name="Editing"></a> Make it Yours</h3>+
  
-    As it stands, your web page is just a generic placeholder. You need to +The internet is graced by a billion website design tutorials. At the time of writing, [[https://developer.mozilla.org/en-US/docs/Web|Mozilla's documentation]] is perhaps the best of them. 
- 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.<br> +
-   <br> +
-    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.  +
-                      +
-<ol> +
-     <li>Click on the mozilla-looking icon.</li> +
-     <li>At the top of the screen, click on "Windows," and then click "Composer."  +
- &nbsp;A new window should appear. &nbsp;<br> +
-     </li>+
  
-     <li>Click on "File," and choose "Open File." Find your index.html +=== Option 2: Use a third-party ===
- file in your public_html directory, and open it.</li> +
-     <li>Delete the text that appears, and replace it with  +
- your name. Save the file in the usual way (File, Save).</li> +
-     <li>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.</li> +
-                      +
-</ol> +
-         <a href="#Started_Contents">   (contents)</a>  <br> +
-                 +
  
-<hr width="100%" size="2" align="left">             +Another good option is to use some website-hosting application and just have your math URL redirect users. Some good options include 
-<h3><a name="Good_Practices"></a>  Good Practices</h3> +
-           A webpage is meant to be viewed from anyone's screen. So, you +
- should    avoid features that are particular to your computer. For example:<br> +
-                    +
-<ul> +
-                  <li>avoid using colors which make the page unreadable under  +
-  some  settings;    </li> +
-                  <li>don't set your page to be a certain width which may  +
-be  too  wide or too narrow for other people;</li> +
-                  <li>don't rely on fancy fonts that aren't standard on everyone's  +
-   machine.</li>+
  
-                    +  * [[https://www.google.com/sites/overview.html|Google Sites]] 
-</ul> +  * [[https://wordpress.com|WordPress]] 
-          To avoid all these pitfalls without even thinking about it, use  +  * [[https://www.blogger.com|Blogger]] 
-a  good   html  editor like Composer. You will find that your choices are +  * Or search online for "free website"
-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.<br> +
-         <br> +
-         <a href="#Started_Contents">   (contents)</a>                 +
-<hr width="100%" size="2" align="left">          +
  
 +To redirect ''www.math.ucdavis.edu/~yourusername'' to your real website, the ''index.html'' file in ''public_html'' should be the file
 +<file>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +<!-- HTML meta URL redirect -->
 +<meta http-equiv="refresh" content="0; url=http://my.real.website.com/">
 +</head>
 +<body>
 +</body>
 +</html>
 +</file>
  
  
-<br /><br />          +====  Good Practices ====
  
-<h2><a name="Features"></a>Keep Going</h2> +**A good website is an accessible one.** Some ways to promote accessibility are pretty intuitive, e.g.
-<hr width="100%" size="2" align="left"> +
-           +
-<h3>Change the font style</h3> +
-          Highlight the text on your page using your mouse in the usual way, +
-  and   experiment  with the available font options.<br>+
  
-          <br> +   * Avoid text content in images. 
-          One main difference between webpages and Word documents is that  +   * Don't have flashing elements. 
-here   we  don't deal in "12 point" fonts. Instead, the web favors the use  +   * Avoid relying solely on color to distinguish elements.
- 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. <b><br> +
-   <br> +
-   You  will find the heading style choices in a drop-down box in the upper  +
- left corner of you Composer window.</b><br> +
-                    +
-<ul> +
-                  <li>                                                   +
-    <h1><font color="#000000">Heading 1</font></h1> +
-            </li>+
  
-                  <li>                                                   +Other aspects of accessibility would be pretty hard to guess if you weren't familiar with the situation. e.g.
-    <h2>Heading 2</h2> +
-            </li> +
-                  <li>Body Text</li> +
-                    +
-</ul> +
-          <br> +
-          Fonts on the web also come in small-medium-large. <b>Look in the +
-  Format   menu, under Size.</b><br>+
  
-                    +   * **Don't use HTML tables to layout your website.** 
-<ul> +   * Use ''<p> </p>'' tags instead of ''</br>'' ones to break up lines. 
-                  <li>medium</li> +   * Include meaningful alt-text descriptions for your images.
-                  <li><font size="+1">large</font></li> +
-                  <li><font size="+2">x-large</font></li> +
-                    +
-</ul> +
-          Colors, bold, Italics...<br> +
-                   +
  
-<ul> +See [[https://developer.mozilla.org/en-US/docs/Web/Accessibility|Mozilla's Accessibility Guide]] for many practical tutorials and guidelines on this topic.  
-                  <li><font color="#ff0000">Red</font></li> +                   
-                  <li><b><font color="#33cc00">Green and Bold</font></b></li> +             
-                  <li><font color="#339999"><i><font>Teal and Italicized</font></i></font></li> +For more general computer help, e-mail IT <help@math.ucdavis.edu>
-                    +
-</ul> +
-          Font choices are limited to the most universal ones.<br> +
-                    +
-<ul> +
- +
-                  <li>Variable Width<br> +
-            </li> +
-                  <li><tt>Fixed Width</tt><br> +
-            </li> +
-                  <li><font face="Helvetica, Arial, sans-serif">Helvetica/Arial</font></li> +
-                  <li><font face="Times New Roman, Times, serif">Times</font></li> +
-                  <li><font face="Courier New, Courier, monospace">Courier</font></li> +
- +
-                    +
-</ul> +
-         <a href="#Features_Contents">(contents)</a>  <br> +
-                    +
-<hr width="100%" size="2" align="left">           +
-<h3><a name="HLine"></a>  Add a horizontal line (or "rule")</h3> +
-          Click on the button labeled H.Line at the top of the Composer window.<br> +
-         <a href="#Features_Contents"><br> +
-         (contents)</a>  <br> +
- +
-                    +
-<hr width="100%" size="2" align="left">           +
-<h3><a name="Image"></a>  Add an image</h3> +
-                  +
-<img src="Flicker20.jpg" alt="Flicker"> +
-                  +
-<ol> +
-              <li>If you already have an image somewhere in your account +
-(or  attached to an e-mail), save a copy in  your public_html  directory.</li> +
-              <li>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 <i>right</i> mouse button, choose Save Image  +
-As...  +
- and  save  it in your public_html directory.<br> +
- +
-           </li> +
-              <li>In Composer, click where you would like your image to go.<br> +
-           </li> +
-              <li>From the Insert menu, choose Image (or just click on the +
- "Image" button), click on the Choose File  button,   and select your image. +
- &nbsp;Take a look at the checkbox that talks about a "relative" address. +
-&nbsp;This should be affirmative.  Check out the next section to see +
-how <a href="#Rel_Links">this frequently goes wrong</a>, even if you do +
-everything right.</li> +
-              <li>If your picture is the wrong size there are two methods  +
-for adjusting it:</li> +
- +
-<ol> <li>(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!!</li> +
-<li>(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:<br> +
-convert -geometry 300x200 picture.jpg picture_new.jpg<br> +
-convert -geometry 50%x50% picture.jpg picture_new.jpg<br> +
-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.</li> +
-</ol> +
-</li> +
-</ol> +
- +
-<a href="#Features_Contents"> (contents)</a> <br> +
- +
-<hr width="100%" size="2" align="left">           +
-<h3><a name="Rel_Links"></a>A Bug You May Encounter (and how to fix it)</h3> +
- +
-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. +
-<ol> +
- <li>Click on the "Source" tab at the bottom of your Composer +
-window.  This reveals the HTML code that Composer has been writing for +
-you.</li> +
- <li>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.</li> +
- <li>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 <b> +
-when you're not viewing your web page from the math department +
-machines</b>.  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.</li> +
- +
- <li>Delete the offending extra stuff.  All you want is something +
-like: img src="SW_Portrait.jpg" in angle-brackets.</li> +
- <li>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.</li> +
-</ol>  +
- +
-         <a href="#Features_Contents">   (contents)</a>  <br> +
-                       +
-<hr width="100%" size="2" align="left">           +
-<h3><a name="Background"></a>   Change the page background</h3> +
-          Backgrounds are really repeated small tiles.<br> +
- +
-                    +
-<ol> +
-                  <li>Go to Google and search for something like "free background  +
-   webpage."  I used the site <a href ="  +
-http://www.webpagebackground.com"  +
-target="blank">www.webpagebackground.com</a>, but there are   tons +
- of sources.  </li> +
-                  <li>When you find a tile you like, click once on it with +
- the       <i> right</i>    mouse button, choose Save Image As... and save  +
-it +
- in your   public_html directory.  </li> +
-                  <li>Back in Composer, go to the Format menu and choose +
-Page   Colors  and Background...</li> +
- +
-                  <li>At the bottom of this window, click on the Choose File...  +
-   button and  select your tile file.</li> +
- <li>Follow <a href="#Rel_Links">these directions</a> ("A Bug You +
-May Encounter...") to make sure you're not the only one who can see your +
-lovely background.</li> +
-                    +
-</ol> +
-         <a href="#Features_Contents">   (contents)</a>  <br> +
-                    +
- +
-<hr width="100%" size="2" align="left">           +
-<h3><a name="External_Link"></a>  Add a link to a page on the web (like a  +
-   site you search all the time)</h3> +
-          <a href="http://www.google.com/"><font size="+1">Search Engine</font></a>  +
-        <br> +
-                    +
-<ol> +
-                  <li>Type the text that will make up the link. For example,  +
-   type "Search Engine." Highlight the text.</li> +
-                  <li>From the Insert menu, choose Link. Type in (or +
-copy-and-paste) the URL +
- for  the site  you are linking to, e.g. <a href=""http://www.google.com">"http://www.google.com</a>". &nbsp;(You  +
-have   to type in the whole address, including the "http".)</li> +
- +
-                  <li>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.</li> +
-                                +
-</ol> +
-         <a href="#Features_Contents">   (contents)</a>  <br> +
-                     +
-<hr width="100%" size="2" align="left">           +
-<h3><a name="Internal_Link"></a>  Create another page (about your hobbies,  +
-   etc.) and make a link to it</h3> +
-                  +
-<ol> +
- +
-              <li>From the File menu choose New Composer Page.</li> +
-              <li>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.</li> +
-<li> Check out the permissions of this new page.  In the terminal window, go  +
-to the public_html directory and type<br> +
-ls -l *.html<br> +
-to show the permissions of your various html files.  There is space for each  +
-file to have<br> +
--rwxrwxrwx<br> +
-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:<br> +
- +
-chmod -R go+r ~/public_html</li> +
-              <li>Put some text and/or images on this page.</li> +
-              <li>Back on your main page, type the text or insert the image  +
- that   will  make up the link. Highlight the text or image.</li> +
-              <li>From the Insert menu, choose Link. Click on the Choose +
- File...   button, and select your new page.<br> +
-           </li> +
-                  +
-</ol> +
-         <a href="Hobbies.html" onClick="return false;">My Hobbies</a>       <br> +
- +
-         <br><br> +
- +
-    <a href="#Features_Contents">(contents)</a><br> +
-                  +
-<hr width="100%" size="2" align="left">          +
-<h3><a name="link_same_page"></a>  Add a link that jumps to another   location  +
- on the same page</h3> +
-                  +
-<ol> +
-              <li>Click your mouse at your link "target," then in the Insert  +
-menu choose Named Anchor. </li> +
- +
-              <li>Give the "anchor" a name that describes its location.</li> +
-              <li>Now select the image or text that will make up the link +
- pointing to this target.</li> +
-              <li>From the Insert menu, choose Link. Click on the Choose +
- File...   button, and select your anchor.<br> +
-           </li> +
-</ol> +
-                  +
-<hr width="100%" size="2" align="left"><br> +
-      +
- +
- +
-<br /><br /> +
- +
-<h2><a name="Resources"></a>More Resources</h2> +
-      +
-<hr width="100%" size="2">    +
-<h3><a name="Sites"></a> Other websites about web authoring</h3> +
-      +
-<ol> +
-     <li><a href ="http://werbach.com/barebones/">Just the facts</a></li> +
-     <li><a href =" http://werbach.com/web/wwwhelp.html">Lots more links</a> +
- +
-   </li> +
-      +
-</ol> +
-   <a href="#Started_Contents">  (contents)</a>    +
-<hr width="100%" size="2">    +
-<h3><a name="Help"></a> Help with the math department computers</h3> +
-      +
-<ul> +
-     <li>If you have a question about this tutorial, you could e-mail me,  +
-sawilliams.</li> +
- +
-     <li>For more general computer help, e-mail <span class="nospam1">&#104elp<!-- foobar --></span>&#64;<span class="nospam2">math.ucdavi&#115;&#46;edu</span>, and +
- the computer folks upstairs will answer your question. &nbsp;Include: where  +
-you're sitting, what you're doing, and how the computer responded. &nbsp;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.</li> +
-  +
-</ul> +
- <a href="#Started_Contents">(contents)</a><br> +
-  +
-<hr width="100%" size="2"><br> +
-  +
-<h3><a name="Legal"></a> Legality</h3> +
-  +
- +
-<ul> +
-   <li>You can check the "<a +
- href="http://www.mrak.ucdavis.edu/web-mans/ppm/310/310-16.htm">Electronic  +
-Commuications Policy</a>" for details about what is or isn't  +
-acceptable use.<br> +
-   </li> +
-  +
-</ul> +
-  <a href="#Started_Contents">(contents)<br> +
-</a> <br> +
-</html>+
webpage.1455643101.txt.gz · Last modified: by jasnyder