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 05:34] – bedutra | playground:playground [2019/01/06 09:29] (current) – created - external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== | + | ====== |
| - | + | ||
| - | ===== 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. | ||
| - | - Follow the [[https:// | ||
| - | - Currently, the " | ||
| - | - Look at your new webpage online. Launch a browser and type in your URL: " | ||
| - | |||
| - | ===== 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" | ||
| - | |||
| - | ==== 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:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * Or search online for "free website" | ||
| - | |||
| - | To redirect " | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <!-- HTML meta URL redirect --> | ||
| - | <meta http-equiv=" | ||
| - | </ | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | <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.1462858450.txt.gz · Last modified: by bedutra