User Tools

Site Tools


webpage

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
webpage [2016/08/25 17:28]
jgcorliss
webpage [2019/12/09 09:41]
brown Accessibility best practices, formatting changes.
Line 1: Line 1:
 ~~NOTOC~~ ~~NOTOC~~
  
-====== A Webpage Tutorial ​for the UC Davis Department of Mathematics======+====== A Webpage Tutorial ======
            
-===== Step 1: Create Your Page (Out of Thin Air!) =====+===== Create Your Page =====
  
  
-  - Log in to your math account+  - Log in to your math account ​on one of the department computers, open a terminal window. 
-  - If a terminal window isn't open, open one by clicking on the icon that looks like little computer monitor. ​ Type the commands given  in step 3 into the terminal window. +  - Follow [[https://​www.math.ucdavis.edu/​resources/​comp/​comp-faq/#​website_setup|these instructions]] from our computing staff. Don't skip the ''​chmod'' ​part, if you want your page to be publicly accessible
-  - 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. +  - Your webpage will be visible ​at ''​www.math.ucdavis.edu/​~mathusername''​
-  - 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 =====+===== Editing the Webpage =====
  
-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. +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 interested 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 solutions1) 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.+There are two main options for customizing your webpage:
  
  
-==== Option 1: Learning HTML and writing code in index.html ====+==== Option 1: Make it yourself. ====
  
-Search online for "basic HTML tutorial"​ and maybe "basic CSS tutorial"​Once you have played with these technologies and know the basicsSearch online for "one page website template free" and use a modern looking template+The internet is graced by a billion website design tutorialsAt the time of writing, [[https://​developer.mozilla.org/​en-US/​docs/​Web|Mozilla'​s documentation]] is perhaps the best of them
  
-==== Option 2: Not Learning HTML and using a third-party ====+==== Option 2: Use 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 ​ Another good option is to use some website-hosting application and just have your math URL redirect users. Some good options include ​
Line 32: Line 30:
   * Or search online for "free website"​   * 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+To redirect ​''​www.math.ucdavis.edu/​~yourusername'' ​to your real website, the ''​index.html'' ​file in ''​public_html'' ​should be the file
 <​file>​ <​file>​
 <​!DOCTYPE html> <​!DOCTYPE html>
Line 48: Line 46:
 =====  Good Practices ===== =====  Good Practices =====
  
-webpage ​is meant to be viewed from anyone'​s screenSo, you should avoid features that are particular ​to your computerFor example: +**good website ​is an accessible one.** Some ways to promote accessibility are pretty intuitive, e.g.
-                   +
  
-  ​avoid using colors which make the page unreadable under some  settings +   Avoid text content in images. 
-  don'​t ​set your page to be a certain width which may be too wide or too narrow for other people +   ​Don'​t ​have flashing elements. 
-  don't rely on fancy fonts+   ​Avoid relying solely ​on color to distinguish elements.
  
 +Other aspects of accessibility would be pretty hard to guess if you weren'​t familiar with the situation. e.g.
 +
 +   * **Don'​t use HTML tables to layout your website.**
 +   * Use ''<​p>​ </​p>''​ tags instead of ''</​br>''​ ones to break up lines.
 +   * Include meaningful alt-text descriptions for your images.
 +
 +See [[https://​developer.mozilla.org/​en-US/​docs/​Web/​Accessibility|Mozilla'​s Accessibility Guide]] for many practical tutorials and guidelines on this topic. ​
 +                  ​
             ​             ​
 For more general computer help, e-mail IT <​help@math.ucdavis.edu>​ For more general computer help, e-mail IT <​help@math.ucdavis.edu>​
webpage.txt · Last modified: 2019/12/09 09:41 by brown