Difference between revisions of "Webpage Guide"
m |
(More detailed instructions for setting up a page) |
||
| Line 1: | Line 1: | ||
| − | This page provides a basic tutorial on how to create your own webpage on the math department server | + | This page provides a basic tutorial on how to create your own webpage on the math department server. |
| − | + | ==Setting up a page== | |
| − | + | This section explains how to create a webpage on the math department's servers, assuming you already know a little HTML. For some an introduction to HTML, see [[#Basic HTML|below]]. | |
| − | + | In your home directory, you need to create a directory called <tt>public_html</tt> with the appropriate permissions. You can do this from a math department computer or over [[File Management#SSH|SSH]] by typing: | |
| + | <pre> | ||
| + | mkdir public_html | ||
| + | chmod 755 public_html | ||
| + | </pre> | ||
| + | All files and directories for your webpage will go in the <tt>public_html</tt> directory, and the directory and all its contents must have their [[File_Management#Permissions|permissions set]] so that others can read the files and read and execute the directories. | ||
| − | ===Basic HTML | + | Additionally, inside <tt>public_html</tt>, you should have a file called <tt>index.html</tt>, which will be your homepage, i.e. the first page that pops up when someone visits your website. |
| + | You can edit this file in emacs by typing <tt>emacs public_html/index.html</tt>. An alternative to <tt>emacs</tt> is <tt>pico</tt>, which is very similar to the interface for writing emails in pine. When you're done, type <tt>chmod 644 public_html/index.html</tt> to give the file the right permissions. Your page should now be visible at <tt><nowiki>/~USERNAME/</nowiki></tt>. You can create other pages by creating other files in the <tt>public_html</tt> directory. For example, the file <tt>public_html/math1b.html</tt> will have the URL <tt><nowiki>/~USERNAME/math1b.html</nowiki></tt>. | ||
| + | |||
| + | For more information on managing files on the math department's computer and what the permissions mean, see the page on [[File Management|file management]]. | ||
| + | |||
| + | ===Potential problems=== | ||
| + | |||
| + | Some thing which might go wrong when you try to view the page in a browser: | ||
| + | * Error 403: This means that you don't have the permission set correctly. To make sure the permissions are correct for your homepage, type: | ||
| + | <pre> | ||
| + | chmod 755 public_html | ||
| + | chmod 644 public_html/index.html | ||
| + | </pre> | ||
| + | * Error 404: This means that the web server couldn't find your file at all. Make sure you have the files in the <tt>public_html</tt> directory. | ||
| + | * Instead of your homepage, you get a page with a name like "Index of": This is what the web server does when there's no <tt>index.html</tt> file. | ||
| + | |||
| + | ==Basic HTML== | ||
Each individual webpage on your site corresponds to a file of the form <tt>name.html</tt> . An HTML file just consists of plain text with a couple commands that tell the browser to do something to the display (for example, make the text bold font). Just like in LaTeX, there are some special characters that tell the browser "I am giving you a command"; they are <, > and /. Every command takes the form <code><command></code>, and most commands also allow you to turn them off by typing <code></command></code>. For example, if you want to turn on bold font, type <code><b></code>. When you are done typing the text that you'd like bold, turn off bold font with <code></b></code>. | Each individual webpage on your site corresponds to a file of the form <tt>name.html</tt> . An HTML file just consists of plain text with a couple commands that tell the browser to do something to the display (for example, make the text bold font). Just like in LaTeX, there are some special characters that tell the browser "I am giving you a command"; they are <, > and /. Every command takes the form <code><command></code>, and most commands also allow you to turn them off by typing <code></command></code>. For example, if you want to turn on bold font, type <code><b></code>. When you are done typing the text that you'd like bold, turn off bold font with <code></b></code>. | ||
| Line 18: | Line 39: | ||
* <code><br></code> and <code><p></code> Notice that if you just type text in an HTML file, the browser will ignore all enter keystrokes. In general, browsers treat extra "whitespace" as just one click of the spacebar. To tell a browser that you would like a line break, use br. If you would furthermore like a blank line to start of the next paragraph of text, use p instead. | * <code><br></code> and <code><p></code> Notice that if you just type text in an HTML file, the browser will ignore all enter keystrokes. In general, browsers treat extra "whitespace" as just one click of the spacebar. To tell a browser that you would like a line break, use br. If you would furthermore like a blank line to start of the next paragraph of text, use p instead. | ||
* <code><b></code>, <code><i></code>, <code><u></code>, and <code><s></code>. Bold, italic, underlined and strikethrough text, respectively. | * <code><b></code>, <code><i></code>, <code><u></code>, and <code><s></code>. Bold, italic, underlined and strikethrough text, respectively. | ||
| − | |||
| − | |||
* <code><font size="n" color="rrggbb" align="rcl"></code> Set many optional properties on the font. Size takes a number as an argument; align takes one of "right", "center" or "left" as its argument; and color takes an RGB value as its argument. An RGB (red-green-blue) value is simply a 6 digit base-16 number, which means the digits can take any value from 0 to 9 and A to F. The first two digits give you the amount of red, the next two give you green, the last two give you blue. For example, fa8072 yields a tasty salmon color. To turn all these properties off, you just have to type <code></font></code>. | * <code><font size="n" color="rrggbb" align="rcl"></code> Set many optional properties on the font. Size takes a number as an argument; align takes one of "right", "center" or "left" as its argument; and color takes an RGB value as its argument. An RGB (red-green-blue) value is simply a 6 digit base-16 number, which means the digits can take any value from 0 to 9 and A to F. The first two digits give you the amount of red, the next two give you green, the last two give you blue. For example, fa8072 yields a tasty salmon color. To turn all these properties off, you just have to type <code></font></code>. | ||
| − | |||
| − | |||
* <code> <body background="file/URL" bgcolor="rrggbb" link="rrggbb" vlink="rrggbb"></code> The optional properties for the BODY command, which set the background and the colors of links. Background takes either a filename (from you public_html directory) or a URL of another website, and sets that as the background. If it is too small of an image, it will be tiled. Bgcolor sets the background to a solid color if you don't want an background image. It, like link and vlink, takes an RGB value to set the color. Link is the color of an unclicked link; vlink is the color of a clicked link. | * <code> <body background="file/URL" bgcolor="rrggbb" link="rrggbb" vlink="rrggbb"></code> The optional properties for the BODY command, which set the background and the colors of links. Background takes either a filename (from you public_html directory) or a URL of another website, and sets that as the background. If it is too small of an image, it will be tiled. Bgcolor sets the background to a solid color if you don't want an background image. It, like link and vlink, takes an RGB value to set the color. Link is the color of an unclicked link; vlink is the color of a clicked link. | ||
| − | |||
| − | |||
* <code> <img src="file/URL"></code> For inserting an image onto you webpage. The argument for src is either a filename or pathname for an image in your public_html directory, or else a complete URL to an image elsewhere. | * <code> <img src="file/URL"></code> For inserting an image onto you webpage. The argument for src is either a filename or pathname for an image in your public_html directory, or else a complete URL to an image elsewhere. | ||
| − | |||
* <code> <A HREF="URL">text</A> </code>. For links to pages on your site or on other sites. This can also be used to link to a PDF file or some other file for download. The URL is either the full URL for some other website (including the initial <tt>http://</tt>), or else just a pathname for an html file in your public_html directory. When the link is clicked, this is the page the browser directs you to. "Text" is just the text of hyperlink. For example, you may want the text to say "Solutions to Homework 9", but the URL will be something like "solutions9.pdf". | * <code> <A HREF="URL">text</A> </code>. For links to pages on your site or on other sites. This can also be used to link to a PDF file or some other file for download. The URL is either the full URL for some other website (including the initial <tt>http://</tt>), or else just a pathname for an html file in your public_html directory. When the link is clicked, this is the page the browser directs you to. "Text" is just the text of hyperlink. For example, you may want the text to say "Solutions to Homework 9", but the URL will be something like "solutions9.pdf". | ||
| + | * <code> <mailto: emailaddress></code>. Creates a link that when clicked will open up the user's email program to send an email to "emailaddress". It is highly advised that you do NOT use this, but instead use Javascript to conceal your email address from spammers. See [[#Concealing_Your_Email_From_Spammers | below]] for ways to conceal your email address. | ||
| − | + | ==Learning More HTML== | |
| − | |||
| − | |||
If you come across a webpage and want to know how they did that, you can try looking at the webpage's source. Most browsers have a View Source option in their menu; this will bring up the HTML page which you can examine. | If you come across a webpage and want to know how they did that, you can try looking at the webpage's source. Most browsers have a View Source option in their menu; this will bring up the HTML page which you can examine. | ||
| Line 38: | Line 51: | ||
Also, there are many other HTML tutorials and reference guides. One reference can be found [http://www.htmlhelp.com/reference/wilbur/ here]. | Also, there are many other HTML tutorials and reference guides. One reference can be found [http://www.htmlhelp.com/reference/wilbur/ here]. | ||
| − | + | ==Concealing Your Email From Spammers== | |
Spammers use automated programs called webcrawlers to browse through webpages searching for email addresses. If your email address is just written in plain text in the HTML file (especially if you use the <code>mailto</code> command) a webcrawler will pick it up and you will get more spam. There are a few ways to conceal your email address from webcrawlers. We have listed them below, in increasing difficulty of implementation (which also happens to be increasing order of strength). | Spammers use automated programs called webcrawlers to browse through webpages searching for email addresses. If your email address is just written in plain text in the HTML file (especially if you use the <code>mailto</code> command) a webcrawler will pick it up and you will get more spam. There are a few ways to conceal your email address from webcrawlers. We have listed them below, in increasing difficulty of implementation (which also happens to be increasing order of strength). | ||
* Use words instead of punctuation. Many primitive webcrawlers are designed to look for the @ symbol and then copy the text around it. If you write words, like <code>mgsa AT math DOT berkeley DOT edu</code>, many webcrawlers will not realize it is an email address. This is a pretty commonly implemented trick to fool webcrawlers, but it's easy for a spammer to adapt and include searches for "AT <word> DOT" and still find your email. However, if your email address has some natural form, then you can use that in the description and webcrawlers will not be able to get it. For example: <code>my last name AT math DOT berkeley DOT edu</code>. | * Use words instead of punctuation. Many primitive webcrawlers are designed to look for the @ symbol and then copy the text around it. If you write words, like <code>mgsa AT math DOT berkeley DOT edu</code>, many webcrawlers will not realize it is an email address. This is a pretty commonly implemented trick to fool webcrawlers, but it's easy for a spammer to adapt and include searches for "AT <word> DOT" and still find your email. However, if your email address has some natural form, then you can use that in the description and webcrawlers will not be able to get it. For example: <code>my last name AT math DOT berkeley DOT edu</code>. | ||
| − | |||
* Another way to fool webcrawlers who search for @ is to replace @ with an image of the symbol @. Webcrawlers cannot "see" what an image says, so this method completely works. The only downside is that someone trying to copy your email address has to remember to add the @ symbol. A large selection of images can be found doing an Google advanced image search for "at.gif" with the requirement that all images be small size. | * Another way to fool webcrawlers who search for @ is to replace @ with an image of the symbol @. Webcrawlers cannot "see" what an image says, so this method completely works. The only downside is that someone trying to copy your email address has to remember to add the @ symbol. A large selection of images can be found doing an Google advanced image search for "at.gif" with the requirement that all images be small size. | ||
| − | |||
* Javascript is used to embed Java programs in HTML and we can use it in a very simple way to conceal the <code>mailto:</code> command from spammers. This is the method used by the math department and MGSA to hide email addresses on their websites. This method also allows viewers to simply copy and paste email addresses into their email programs. To use it for a math.berkeley.edu email address, copy the following code into your HTML file where you would normally have a <code>mailto:</code> command. | * Javascript is used to embed Java programs in HTML and we can use it in a very simple way to conceal the <code>mailto:</code> command from spammers. This is the method used by the math department and MGSA to hide email addresses on their websites. This method also allows viewers to simply copy and paste email addresses into their email programs. To use it for a math.berkeley.edu email address, copy the following code into your HTML file where you would normally have a <code>mailto:</code> command. | ||
<code><script type="text/javascript"><br> | <code><script type="text/javascript"><br> | ||
Revision as of 13:01, 15 August 2008
This page provides a basic tutorial on how to create your own webpage on the math department server.
Contents
Setting up a page
This section explains how to create a webpage on the math department's servers, assuming you already know a little HTML. For some an introduction to HTML, see below.
In your home directory, you need to create a directory called public_html with the appropriate permissions. You can do this from a math department computer or over SSH by typing:
mkdir public_html chmod 755 public_html
All files and directories for your webpage will go in the public_html directory, and the directory and all its contents must have their permissions set so that others can read the files and read and execute the directories.
Additionally, inside public_html, you should have a file called index.html, which will be your homepage, i.e. the first page that pops up when someone visits your website. You can edit this file in emacs by typing emacs public_html/index.html. An alternative to emacs is pico, which is very similar to the interface for writing emails in pine. When you're done, type chmod 644 public_html/index.html to give the file the right permissions. Your page should now be visible at /~USERNAME/. You can create other pages by creating other files in the public_html directory. For example, the file public_html/math1b.html will have the URL /~USERNAME/math1b.html.
For more information on managing files on the math department's computer and what the permissions mean, see the page on file management.
Potential problems
Some thing which might go wrong when you try to view the page in a browser:
- Error 403: This means that you don't have the permission set correctly. To make sure the permissions are correct for your homepage, type:
chmod 755 public_html chmod 644 public_html/index.html
- Error 404: This means that the web server couldn't find your file at all. Make sure you have the files in the public_html directory.
- Instead of your homepage, you get a page with a name like "Index of": This is what the web server does when there's no index.html file.
Basic HTML
Each individual webpage on your site corresponds to a file of the form name.html . An HTML file just consists of plain text with a couple commands that tell the browser to do something to the display (for example, make the text bold font). Just like in LaTeX, there are some special characters that tell the browser "I am giving you a command"; they are <, > and /. Every command takes the form <command>, and most commands also allow you to turn them off by typing </command>. For example, if you want to turn on bold font, type <b>. When you are done typing the text that you'd like bold, turn off bold font with </b>.
The nice thing about HTML is that it is very forgiving--even if you make a mistake it will try its best to render something in the browser. This makes it easy to see the mistake and usually makes it easy to see how to fix the mistake too. Commands are case-insensitive.
<HTML>In principle, every .html file should begin with<HTML>and end with</HTML>to let the browser know that you are going to use HTML commands. But if you plan on just writing plain text, then this is not necessary.<Title>This is the title of the webpage--what appears in the top bar of the browser window. Be sure to turn it off after using it, so that all the text doesn't appear in that one bar!<Body>This delineates the body of the webpage: all the text, images, etc that you want to appear on the page should go in between the Body on and off commands.<br>and<p>Notice that if you just type text in an HTML file, the browser will ignore all enter keystrokes. In general, browsers treat extra "whitespace" as just one click of the spacebar. To tell a browser that you would like a line break, use br. If you would furthermore like a blank line to start of the next paragraph of text, use p instead.<b>,<i>,<u>, and<s>. Bold, italic, underlined and strikethrough text, respectively.<font size="n" color="rrggbb" align="rcl">Set many optional properties on the font. Size takes a number as an argument; align takes one of "right", "center" or "left" as its argument; and color takes an RGB value as its argument. An RGB (red-green-blue) value is simply a 6 digit base-16 number, which means the digits can take any value from 0 to 9 and A to F. The first two digits give you the amount of red, the next two give you green, the last two give you blue. For example, fa8072 yields a tasty salmon color. To turn all these properties off, you just have to type</font>.<body background="file/URL" bgcolor="rrggbb" link="rrggbb" vlink="rrggbb">The optional properties for the BODY command, which set the background and the colors of links. Background takes either a filename (from you public_html directory) or a URL of another website, and sets that as the background. If it is too small of an image, it will be tiled. Bgcolor sets the background to a solid color if you don't want an background image. It, like link and vlink, takes an RGB value to set the color. Link is the color of an unclicked link; vlink is the color of a clicked link.<img src="file/URL">For inserting an image onto you webpage. The argument for src is either a filename or pathname for an image in your public_html directory, or else a complete URL to an image elsewhere.<A HREF="URL">text</A>. For links to pages on your site or on other sites. This can also be used to link to a PDF file or some other file for download. The URL is either the full URL for some other website (including the initial http://), or else just a pathname for an html file in your public_html directory. When the link is clicked, this is the page the browser directs you to. "Text" is just the text of hyperlink. For example, you may want the text to say "Solutions to Homework 9", but the URL will be something like "solutions9.pdf".<mailto: emailaddress>. Creates a link that when clicked will open up the user's email program to send an email to "emailaddress". It is highly advised that you do NOT use this, but instead use Javascript to conceal your email address from spammers. See below for ways to conceal your email address.
Learning More HTML
If you come across a webpage and want to know how they did that, you can try looking at the webpage's source. Most browsers have a View Source option in their menu; this will bring up the HTML page which you can examine.
Also, there are many other HTML tutorials and reference guides. One reference can be found here.
Concealing Your Email From Spammers
Spammers use automated programs called webcrawlers to browse through webpages searching for email addresses. If your email address is just written in plain text in the HTML file (especially if you use the mailto command) a webcrawler will pick it up and you will get more spam. There are a few ways to conceal your email address from webcrawlers. We have listed them below, in increasing difficulty of implementation (which also happens to be increasing order of strength).
- Use words instead of punctuation. Many primitive webcrawlers are designed to look for the @ symbol and then copy the text around it. If you write words, like
mgsa AT math DOT berkeley DOT edu, many webcrawlers will not realize it is an email address. This is a pretty commonly implemented trick to fool webcrawlers, but it's easy for a spammer to adapt and include searches for "AT <word> DOT" and still find your email. However, if your email address has some natural form, then you can use that in the description and webcrawlers will not be able to get it. For example:my last name AT math DOT berkeley DOT edu. - Another way to fool webcrawlers who search for @ is to replace @ with an image of the symbol @. Webcrawlers cannot "see" what an image says, so this method completely works. The only downside is that someone trying to copy your email address has to remember to add the @ symbol. A large selection of images can be found doing an Google advanced image search for "at.gif" with the requirement that all images be small size.
- Javascript is used to embed Java programs in HTML and we can use it in a very simple way to conceal the
mailto:command from spammers. This is the method used by the math department and MGSA to hide email addresses on their websites. This method also allows viewers to simply copy and paste email addresses into their email programs. To use it for a math.berkeley.edu email address, copy the following code into your HTML file where you would normally have amailto:command.
<script type="text/javascript">
GoFish=new Array()
GoFish[0]="%3c%61%20%68%72%65%66%3d%" + "22%6d%61%69%6c%74%6f%3a"
GoFish[1]="YOUR_NAME_HERE" + "%40%6d%61%74%68%2e%62%65%72%6b%"
GoFish[2]="65%6c%65%79%2e%65%64%75%22%3e" + "YOUR_NAME_HERE"
GoFish[3]="%40%6d%61%74%68%2e%62%65%" + "72%6b%65%6c%65%79%2e%65%6"
GoFish[4]="4%75%3c%2f%61%3e" + ""
OutString="";
for (j=0;j<GoFish.length;j++){
OutString+=GoFish[j];
}document.write(unescape(OutString));
</script>
In the two spots where it says YOUR_NAME_HERE you have to put the hexadecimal code for your username. This hex generator will output the hexadecimal code for your username.
