Differences

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

--- playground:playground [2016/05/09 21:49]
bedutra
+++ playground:playground [2019/01/06 01:29] (current)
@@ Line 1: / Line 1: @@
-<html>
+====== PlayGround ======
-<div align="center">
-<h1>A Webpage Tutorial for<br>
-   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>
-   <br>
-<hr width="100%" size="2" align="left">
-<h2><a name="Getting_Started"></a>
-    Get Started</h2>
-<hr width="100%" size="2" align="left">
-<h3><a name="Creating"></a>      Create Your Page (Out of Thin Air!)</h3>
-<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>
-  </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
- 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
- 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">
-<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>
-</ul>
-          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.<br>
-         <br>
-         <a href="#Started_Contents">   (contents)</a>
-<hr width="100%" size="2" align="left">
-<br /><br />
-<h2><a name="Features"></a>Keep Going</h2>
-<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>
-          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. <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>
-    <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>
-<ul>
-                  <li>medium</li>
-                  <li><font size="+1">large</font></li>
-                  <li><font size="+2">x-large</font></li>
-</ul>
-          Colors, bold, Italics...<br>
-<ul>
-                  <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>
-</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>

Galois Group

User Tools

Site Tools

Differences

Page Tools