webpage
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
| webpage [2016/02/16 17:16] – created jasnyder | webpage [2026/04/20 19:35] (current) – ARCHIVED asimons | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | < | + | ~~NOTOC~~ |
| - | <div align=" | + | ====== |
| - | <h1>A Webpage Tutorial for< | + | ===== A Webpage Tutorial |
| - | the UC Davis Department of Mathematics</ | + | |
| - | + | ||
| - | < | + | |
| - | <font size=" | + | |
| - | <font size=" | + | |
| - | updated 9/ | + | |
| - | </ | + | |
| - | + | ||
| - | <font size=" | + | |
| - | href="# | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | + | ||
| - | + | ||
| - | </ | + | |
| - | <a name=" | + | |
| - | size=" | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | (like a site you search all the time)</ | + | |
| - | < | + | |
| - | | + | |
| - | < | + | |
| - | | + | |
| - | + | ||
| - | + | ||
| - | </ | + | |
| - | <a name=" | + | |
| - | Resources</ | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | </ | + | ==== Create Your Page ==== |
| - | < | + | |
| - | + | ||
| + | - Log in to your math account on one of the department computers, open a terminal window. | ||
| + | - Follow [[https:// | ||
| + | - Your webpage will be visible at '' | ||
| - | <hr width=" | + | ==== Editing the Webpage ==== |
| - | < | + | |
| - | Get Started</ | + | |
| - | + | ||
| - | <hr width=" | + | As it stands, your web page is just a generic placeholder. You need to edit the file '' |
| - | < | + | |
| - | + | There are two main options for customizing | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | 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, | ||
| - | + | === Option 1: Make it yourself. === | |
| - | </ | + | |
| - | < | + | |
| - | | + | |
| - | < | + | |
| - | 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 | + | |
| - | | + | |
| - | + | ||
| - | </ | + | |
| - | <a href="# | + | |
| - | + | ||
| - | <hr width=" | + | |
| - | < | + | |
| - | As it stands, your web page is just a generic placeholder. You need to | + | The internet |
| - | | + | |
| - | 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. | + | |
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | & | + | |
| - | </ | + | |
| - | < | + | === Option 2: Use a third-party === |
| - | 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 " | + | |
| - | + | ||
| - | </ | + | |
| - | <a href="# | + | |
| - | + | ||
| - | <hr width=" | + | Another good option |
| - | < | + | |
| - | A webpage | + | |
| - | | + | |
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | | + | |
| - | < | + | |
| - | be too wide or too narrow for other people;</ | + | |
| - | < | + | |
| - | | + | |
| - | + | * [[https://www.google.com/ | |
| - | </ul> | + | |
| - | To avoid all these pitfalls without even thinking about it, use | + | |
| - | a good | + | * Or search online for "free website" |
| - | somewhat restricted and simple | + | |
| - | this is good. You are being restricted to the features that will look good | + | |
| - | anywhere.<br> | + | |
| - | < | + | |
| - | <a href="# | + | |
| - | <hr width=" | + | |
| + | To redirect '' | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <!-- HTML meta URL redirect --> | ||
| + | <meta http-equiv=" | ||
| + | </ | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| - | <br /><br /> | + | ==== Good Practices ==== |
| - | < | + | **A good website is an accessible one.** Some ways to promote accessibility are pretty intuitive, e.g. |
| - | <hr width=" | + | |
| - | + | ||
| - | < | + | |
| - | Highlight the text on your page using your mouse in the usual way, | + | |
| - | and | + | |
| - | <br> | + | * Avoid text content in images. |
| - | One main difference between webpages and Word documents is that | + | * Don' |
| - | here | + | * Avoid relying solely on color to distinguish elements. |
| - | of " | + | |
| - | | + | |
| - | < | + | |
| - | | + | |
| - | left corner of you Composer window.</ | + | |
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </li> | + | |
| - | < | + | Other aspects of accessibility would be pretty hard to guess if you weren' |
| - | < | + | |
| - | </ | + | |
| - | < | + | |
| - | + | ||
| - | </ | + | |
| - | < | + | |
| - | Fonts on the web also come in small-medium-large. < | + | |
| - | Format | + | |
| - | + | * **Don' | |
| - | <ul> | + | * Use '' |
| - | < | + | * Include meaningful alt-text descriptions for your images. |
| - | < | + | |
| - | < | + | |
| - | + | ||
| - | </ | + | |
| - | Colors, bold, Italics...< | + | |
| - | + | ||
| - | < | + | See [[https://developer.mozilla.org/en-US/docs/Web/Accessibility|Mozilla's Accessibility Guide]] |
| - | < | + | |
| - | < | + | |
| - | < | + | For more general computer help, e-mail |
| - | + | ||
| - | </ | + | |
| - | Font choices are limited to the most universal ones.< | + | |
| - | + | ||
| - | < | + | |
| - | + | ||
| - | < | + | |
| - | </ | + | |
| - | < | + | |
| - | </ | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | + | ||
| - | + | ||
| - | </ | + | |
| - | <a href="# | + | |
| - | + | ||
| - | <hr width=" | + | |
| - | < | + | |
| - | Click on the button labeled H.Line at the top of the Composer window.< | + | |
| - | <a href="# | + | |
| - | | + | |
| - | + | ||
| - | + | ||
| - | <hr width=" | + | |
| - | < | + | |
| - | + | ||
| - | <img src=" | + | |
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | (or attached to an e-mail), save a copy in your public_html | + | |
| - | < | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | As... | + | |
| - | | + | |
| - | + | ||
| - | </li> | + | |
| - | < | + | |
| - | </ | + | |
| - | < | + | |
| - | " | + | |
| - | & | + | |
| - | & | + | |
| - | 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.</ | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | <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. | + | |
| - | < | + | |
| - | < | + | |
| - | 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.</ | + | |
| - | </ol> | + | |
| - | + | ||
| - | <a href="# | + | |
| - | + | ||
| - | <hr width=" | + | |
| - | < | + | |
| - | Backgrounds are really repeated small tiles.< | + | |
| - | + | ||
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | | + | |
| - | http:// | + | |
| - | target=" | + | |
| - | of sources. | + | |
| - | < | + | |
| - | | + | |
| - | it | + | |
| - | in your | + | |
| - | < | + | |
| - | Page | + | |
| - | + | ||
| - | < | + | |
| - | | + | |
| - | < | + | |
| - | May Encounter..." | + | |
| - | lovely background.</ | + | |
| - | + | ||
| - | </ | + | |
| - | <a href="# | + | |
| - | + | ||
| - | + | ||
| - | <hr width=" | + | |
| - | < | + | |
| - | site you search all the time)</ | + | |
| - | <a href=" | + | |
| - | < | + | |
| - | + | ||
| - | <ol> | + | |
| - | | + | |
| - | type " | + | |
| - | < | + | |
| - | copy-and-paste) the URL | + | |
| - | | + | |
| - | have to type in the whole address, including the " | + | |
| - | + | ||
| - | < | + | |
| - | | + | |
| - | | + | |
| - | + | ||
| - | </ | + | |
| - | <a href="# | + | |
| - | + | ||
| - | <hr width=" | + | |
| - | < | + | |
| - | etc.) and make a link to it</ | + | |
| - | + | ||
| - | < | + | |
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | 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 ~/ | + | |
| - | < | + | |
| - | < | + | |
| - | | + | |
| - | < | + | |
| - | | + | |
| - | </ | + | |
| - | + | ||
| - | </ | + | |
| - | <a href=" | + | |
| - | + | ||
| - | < | + | |
| - | + | ||
| - | <a href="# | + | |
| - | + | ||
| - | <hr width=" | + | |
| - | < | + | |
| - | on the same page</ | + | |
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | menu choose Named Anchor. </ | + | |
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | | + | |
| - | < | + | |
| - | | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | <hr width=" | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | <br /><br /> | + | |
| - | + | ||
| - | < | + | |
| - | + | ||
| - | <hr width=" | + | |
| - | < | + | |
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | + | ||
| - | </ | + | |
| - | + | ||
| - | </ | + | |
| - | <a href="# | + | |
| - | <hr width=" | + | |
| - | < | + | |
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | 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.</ | + | |
| - | + | ||
| - | </ | + | |
| - | <a href="# | + | |
| - | + | ||
| - | <hr width=" | + | |
| - | + | ||
| - | < | + | |
| - | + | ||
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | | + | |
| - | Commuications Policy</ | + | |
| - | acceptable use.< | + | |
| - | </ | + | |
| - | + | ||
| - | </ | + | |
| - | <a href="# | + | |
| - | </a> < | + | |
| - | </html> | + | |
webpage.1455643009.txt.gz · Last modified: by jasnyder