playground:playground
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| playground:playground [2016/05/10 04:49] – bedutra | playground:playground [2019/01/06 09:29] (current) – created - external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | < | + | ====== PlayGround ====== |
| - | <div align=" | + | |
| - | <h1>A Webpage Tutorial for< | + | |
| - | the UC Davis Department of Mathematics</ | + | |
| - | < | ||
| - | <font size=" | ||
| - | | ||
| - | </ | ||
| - | |||
| - | <font size=" | ||
| - | | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | |||
| - | | ||
| - | </ul> | ||
| - | <a name=" | ||
| - | | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | (like a site you search all the time)</ | ||
| - | < | ||
| - | | ||
| - | < | ||
| - | | ||
| - | |||
| - | |||
| - | </ul> | ||
| - | <a name=" | ||
| - | Resources</ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | |||
| - | |||
| - | </ul> | ||
| - | < | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | <hr width=" | ||
| - | < | ||
| - | Get Started</ | ||
| - | |||
| - | |||
| - | <hr width=" | ||
| - | < | ||
| - | |||
| - | |||
| - | <ol> | ||
| - | < | ||
| - | < | ||
| - | icon that looks like a little computer monitor. | ||
| - | in step 3 into the terminal window.</ | ||
| - | < | ||
| - | =" | ||
| - | target=" | ||
| - | If you're not | ||
| - | familiar with pico, don't worry -- the commands will appear at the | ||
| - | bottom of the window. | ||
| - | Save), which is Ctrl-o, and " | ||
| - | " | ||
| - | step whenever you create a new page.</ | ||
| - | |||
| - | < | ||
| - | files will live:</ | ||
| - | |||
| - | <ol type=" | ||
| - | < | ||
| - | including | ||
| - | < | ||
| - | < | ||
| - | be the only one).</ | ||
| - | < | ||
| - | images, | ||
| - | |||
| - | |||
| - | </ol> | ||
| - | < | ||
| - | | ||
| - | < | ||
| - | 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 | ||
| - | | ||
| - | |||
| - | </ol> | ||
| - | <a href="# | ||
| - | |||
| - | <hr width=" | ||
| - | < | ||
| - | |||
| - | 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' | ||
| - | It runs a lot like many Windows programs you might be familiar with. | ||
| - | |||
| - | <ol> | ||
| - | < | ||
| - | < | ||
| - | & | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | file in your public_html directory, and open it.</ | ||
| - | < | ||
| - | your name. Save the file in the usual way (File, Save).</ | ||
| - | < | ||
| - | type in your URL. (If you still have your page open from a previous step, | ||
| - | you can just click on the " | ||
| - | to save your file as index.html after making changes, the changes will | ||
| - | appear instantly on your " | ||
| - | |||
| - | </ol> | ||
| - | <a href="# | ||
| - | |||
| - | |||
| - | <hr width=" | ||
| - | < | ||
| - | A webpage is meant to be viewed from anyone' | ||
| - | | ||
| - | |||
| - | <ul> | ||
| - | < | ||
| - | some settings; | ||
| - | < | ||
| - | be too wide or too narrow for other people;</ | ||
| - | < | ||
| - | | ||
| - | |||
| - | |||
| - | </ul> | ||
| - | To avoid all these pitfalls without even thinking about it, use | ||
| - | a good | ||
| - | somewhat restricted and simple | ||
| - | this is good. You are being restricted to the features that will look good | ||
| - | anywhere.< | ||
| - | < | ||
| - | <a href="# | ||
| - | <hr width=" | ||
| - | |||
| - | |||
| - | |||
| - | <br /><br /> | ||
| - | |||
| - | < | ||
| - | <hr width=" | ||
| - | | ||
| - | < | ||
| - | Highlight the text on your page using your mouse in the usual way, | ||
| - | and | ||
| - | |||
| - | <br> | ||
| - | One main difference between webpages and Word documents is that | ||
| - | here | ||
| - | | ||
| - | | ||
| - | < | ||
| - | | ||
| - | left corner of you Composer window.</ | ||
| - | |||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | </li> | ||
| - | |||
| - | < | ||
| - | < | ||
| - | </li> | ||
| - | < | ||
| - | |||
| - | </ul> | ||
| - | <br> | ||
| - | Fonts on the web also come in small-medium-large. < | ||
| - | Format | ||
| - | |||
| - | |||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | |||
| - | </ul> | ||
| - | Colors, bold, Italics...< | ||
| - | |||
| - | |||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | |||
| - | </ul> | ||
| - | Font choices are limited to the most universal ones.< | ||
| - | |||
| - | <ul> | ||
| - | |||
| - | < | ||
| - | </li> | ||
| - | < | ||
| - | </li> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | |||
| - | |||
| - | </ul> | ||
| - | <a href="# | ||
| - | |||
| - | <hr width=" | ||
| - | < | ||
| - | Click on the button labeled H.Line at the top of the Composer window.< | ||
| - | <a href="# | ||
| - | | ||
| - | |||
| - | |||
| - | <hr width=" | ||
| - | < | ||
| - | |||
| - | <img src=" | ||
| - | |||
| - | <ol> | ||
| - | < | ||
| - | (or attached to an e-mail), save a copy in your public_html | ||
| - | < | ||
| - | | ||
| - | | ||
| - | | ||
| - | As... | ||
| - | | ||
| - | |||
| - | </ | ||
| - | < | ||
| - | </ | ||
| - | < | ||
| - | " | ||
| - | & | ||
| - | & | ||
| - | how <a href="# | ||
| - | everything right.</ | ||
| - | < | ||
| - | for adjusting it:</ | ||
| - | |||
| - | <ol> < | ||
| - | mouse button and select Image Properties to adjust. | ||
| - | image file alone and just changes the appearance of the image on the | ||
| - | page. This can cause your page to load very slowly!!</ | ||
| - | < | ||
| - | saved (e.g., the public_html directory). | ||
| - | 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" | ||
| - | " | ||
| - | move back a page.</ | ||
| - | </ol> | ||
| - | </li> | ||
| - | </ol> | ||
| - | |||
| - | <a href="# | ||
| - | |||
| - | <hr width=" | ||
| - | < | ||
| - | |||
| - | When your page makes reference to another file (like when you " | ||
| - | 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). | ||
| - | talks about a " | ||
| - | local/not local detail, but unfortunately it seems to be buggy. | ||
| - | might need to go in by hand to make adjustments. | ||
| - | <ol> | ||
| - | < | ||
| - | window. | ||
| - | you.</ | ||
| - | < | ||
| - | you're having trouble, search for the name of the file, like | ||
| - | " | ||
| - | < | ||
| - | local file been given a very long name that starts with something like | ||
| - | " | ||
| - | when you're not viewing your web page from the math department | ||
| - | machines</ | ||
| - | 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. | ||
| - | " | ||
| - | long address.</ | ||
| - | |||
| - | < | ||
| - | like: img src=" | ||
| - | < | ||
| - | lab on campus, it shouldn' | ||
| - | page from home to double-check how it looks to everyone else.</ | ||
| - | </ | ||
| - | |||
| - | <a href="# | ||
| - | | ||
| - | <hr width=" | ||
| - | < | ||
| - | Backgrounds are really repeated small tiles.< | ||
| - | |||
| - | |||
| - | <ol> | ||
| - | < | ||
| - | | ||
| - | http:// | ||
| - | target=" | ||
| - | of sources. | ||
| - | < | ||
| - | | ||
| - | it | ||
| - | in your | ||
| - | < | ||
| - | Page | ||
| - | |||
| - | < | ||
| - | | ||
| - | < | ||
| - | May Encounter..." | ||
| - | lovely background.</ | ||
| - | |||
| - | </ol> | ||
| - | <a href="# | ||
| - | |||
| - | |||
| - | <hr width=" | ||
| - | < | ||
| - | site you search all the time)</ | ||
| - | <a href=" | ||
| - | <br> | ||
| - | |||
| - | <ol> | ||
| - | < | ||
| - | type " | ||
| - | < | ||
| - | copy-and-paste) the URL | ||
| - | | ||
| - | have to type in the whole address, including the " | ||
| - | |||
| - | < | ||
| - | | ||
| - | | ||
| - | |||
| - | </ol> | ||
| - | <a href="# | ||
| - | | ||
| - | <hr width=" | ||
| - | < | ||
| - | etc.) and make a link to it</ | ||
| - | |||
| - | <ol> | ||
| - | |||
| - | < | ||
| - | < | ||
| - | example, | ||
| - | | ||
| - | | ||
| - | <li> 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. | ||
| - | file to have< | ||
| - | -rwxrwxrwx< | ||
| - | but some of these 9 " | ||
| - | "read, write, execute," | ||
| - | for you, the second | ||
| - | set is for your " | ||
| - | only permission you really need to worry about is the public' | ||
| - | permission. | ||
| - | command to update the permissions:< | ||
| - | |||
| - | chmod -R go+r ~/ | ||
| - | < | ||
| - | < | ||
| - | | ||
| - | < | ||
| - | | ||
| - | </ | ||
| - | |||
| - | </ol> | ||
| - | <a href=" | ||
| - | |||
| - | < | ||
| - | |||
| - | <a href="# | ||
| - | |||
| - | <hr width=" | ||
| - | < | ||
| - | on the same page</ | ||
| - | |||
| - | <ol> | ||
| - | < | ||
| - | menu choose Named Anchor. </li> | ||
| - | |||
| - | < | ||
| - | < | ||
| - | | ||
| - | < | ||
| - | | ||
| - | </ | ||
| - | </ol> | ||
| - | |||
| - | <hr width=" | ||
| - | |||
| - | |||
| - | |||
| - | <br /><br /> | ||
| - | |||
| - | < | ||
| - | |||
| - | <hr width=" | ||
| - | < | ||
| - | |||
| - | <ol> | ||
| - | < | ||
| - | < | ||
| - | |||
| - | </ | ||
| - | |||
| - | </ol> | ||
| - | <a href="# | ||
| - | <hr width=" | ||
| - | < | ||
| - | |||
| - | <ul> | ||
| - | < | ||
| - | sawilliams.</ | ||
| - | |||
| - | < | ||
| - | the computer folks upstairs will answer your question. & | ||
| - | you're sitting, what you're doing, and how the computer responded. & | ||
| - | applicable | ||
| - | into your e-mail message (both your command and the computer' | ||
| - | is best.</ | ||
| - | |||
| - | </ul> | ||
| - | <a href="# | ||
| - | |||
| - | <hr width=" | ||
| - | |||
| - | < | ||
| - | |||
| - | |||
| - | <ul> | ||
| - | < | ||
| - | | ||
| - | Commuications Policy</ | ||
| - | acceptable use.< | ||
| - | </ | ||
| - | |||
| - | </ul> | ||
| - | <a href="# | ||
| - | </a> <br> | ||
| - | </ | ||
playground/playground.1462855798.txt.gz · Last modified: by bedutra