User Tools

Site Tools


playground:playground

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
playground:playground [2016/05/09 22:34]
bedutra
playground:playground [2019/01/06 01:29] (current)
Line 1: Line 1:
-====== ​A Webpage Tutorial for the UC Davis Department of Mathematics====== +====== ​PlayGround ​======
-      +
-===== Step 1: Create Your Page (Out of Thin Air!) =====+
  
- 
-  - Log in to your math account. 
-  - 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 [[https://​www.math.ucdavis.edu/​resources/​comp/​comp-faq/#​website_setup|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). You might have to repeat this step whenever you create a new page. 
-  - Currently, the "​public_html"​ folder only contains one file, "​index.html"​. Every webpage you write will be placed in this folder. Also, every file in this folder can be seen from the web. 
-  - Look at your new webpage online. Launch a browser and type in your URL: "​www.math.ucdavis.edu/​~yourusername"​ 
- 
-===== Step 2: Editing the Webpage: 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. 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.  
- 
-If you are interesting in writing HTML code in the index.html file to make a real website, some caution is advised. It will take some time to learn the HTML tags that produce thinks like links, titles, paragraphs, color, etc. Modern websites use many advance technologies to make them look good. It will take a lot of effort to make a website that does not look like it was made in 1990. I recommend two different solutions: 1) learn enough HTML to use a nice looking template, or 2) Host your website on a third-party and have your math URL forward the user. These options are described next. 
- 
- 
-==== Option 1: Learning HTML and writing code in index.html ==== 
- 
-Search online for "basic HTML tutorial"​ and maybe "basic CSS tutorial"​. Once you have played with these technologies and know the basics. Search online for "one page website template free" and use a modern looking template. ​ 
- 
-==== Option 2: Not Learning HTML and using a third-party ==== 
- 
-Another good option is to use some website-hosting application and just have your math URL redirect users. Some good options include ​ 
- 
-  * [[https://​www.google.com/​sites/​overview.html|Google Sites]] 
-  * [[https://​wordpress.com|WordPress]] 
-  * [[https://​www.blogger.com|Blogger]] 
-  * Or search online for "free website"​ 
- 
-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://​brandons-tutoring.appspot.com/">​ 
-</​head>​ 
-<​body>​ 
-</​body>​ 
-</​html>​ 
-</​file>​ 
- 
- 
-<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>​ 
playground/playground.1462858450.txt.gz · Last modified: 2016/05/09 22:34 by bedutra