Webpage Guide - Revision history

Coca: /* Setting up a web page (Deprecated) */

2024-08-16T15:58:19Z

‎Setting up a web page (Deprecated)

Coca: /* Setting up a web page */

2024-08-16T15:57:43Z

‎Setting up a web page

Brandon: Add note that Cyberduck is available for Windows.

2019-08-22T21:29:42Z

Add note that Cyberduck is available for Windows.

Igor: /* Hello World page */

2015-12-08T18:58:55Z

‎Hello World page

Igor: /* Potential problems */

2015-08-04T21:40:50Z

‎Potential problems

Igor: /* Unix command line method */

2015-05-27T18:55:40Z

‎Unix command line method

Igor: /* GUI method */

2015-05-27T18:54:53Z

‎GUI method

Igor: /* Unix command line method */

2014-07-25T00:49:19Z

‎Unix command line method

Igor: /* Unix command line method */

2014-07-25T00:48:29Z

‎Unix command line method

Igor: /* Hello World page */

2014-07-25T00:46:13Z

‎Hello World page

@@ Line 1: / Line 1: @@
 This page provides a tutorial on how to manually create your own web page on the Math department server. You have to learn basics of [http://en.wikipedia.org/wiki/HTML HyperText Markup Language (HTML)] language to do that. It would be nice to know elements of [http://en.wikipedia.org/wiki/CSS Cascading Style Sheets (CSS)], if you care about presentation aspects of your web page.
-== ''Setting up a web page'' (Deprecated)==
+== Setting up a web page (Deprecated)==
 ===Hello World page===

@@ Line 1: / Line 1: @@
 This page provides a tutorial on how to manually create your own web page on the Math department server. You have to learn basics of [http://en.wikipedia.org/wiki/HTML HyperText Markup Language (HTML)] language to do that. It would be nice to know elements of [http://en.wikipedia.org/wiki/CSS Cascading Style Sheets (CSS)], if you care about presentation aspects of your web page.
-== Setting up a web page ==
+== ''Setting up a web page'' (Deprecated)==
 ===Hello World page===
@@ Line 32: / Line 32: @@
 * You can edit this file with any Unix editor. To use emacs, for example, type
   <tt>emacs public_html/index.html</tt>
-* An alternative to <tt>emacs</tt> is <tt>pico</tt>, which is used for writing emails in alpine. Other popular command line editors are <tt>vi</tt>, <tt>vim</tt>, and <tt>nano</tt>. 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>http://math.berkeley.edu/~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>http://math.berkeley.edu/~USERNAME/math1b.html</nowiki></tt>.
+* An alternative to <tt>emacs</tt> is <tt>pico</tt>, which is used for writing emails in alpine. Other popular command line editors are <tt>vi</tt>, <tt>vim</tt>, and <tt>nano</tt>. 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 file server and what the permissions mean, see the page on [[File Management|file management]].
@@ Line 46: / Line 46: @@
 * Similarly verify the index files permissions: right-click on newly created index.html icon and select Properties, then select Permissions tab in the Properties dialog window. Make sure the owner can "read and write" while group and others can "read-only".
 * Edit the index document: right-click on newly created index.html icon and select Open with "Bluefish Editor" (or chose any other GUI editor you are comfortable with).
-* You may copy the above [[#Hello World page | sample page]] and paste to the editor window, save the document and view it in the web browser (URL: <tt><nowiki>http://math.berkeley.edu/~USERNAME/index.html</nowiki></tt>).
+* You may copy the above [[#Hello World page | sample page]] and paste to the editor window, save the document and view it in the web browser (URL: <tt><nowiki>/~USERNAME/index.html</nowiki></tt>).
 : '''Note:''' All your changes become visible to the world the moment you save the file. It is not recommended to use this error and try approach with the <tt>index.html</tt> file. Use a different file instead, e.g. <tt>test.html</tt>, and rename it to <tt>index.html</tt> when you are satisfied with changes.

@@ Line 55: / Line 55: @@
 # Login to <tt>login.math.berkeley.edu</tt> via SFTP and go to you home directory. Use any GUI or text-based SFTP client software available for your platform.
 #: Here are some popular free SFTP clients:
-#:* [http://cyberduck.io/ Cyberduck] - GUI client for Mac.
+#:* [http://cyberduck.io/ Cyberduck] - GUI client for Mac or Windows.
 #:* [http://winscp.net/eng/download.php WinSCP] GUI client for Windows.
 #:* Linux [http://en.wikipedia.org/wiki/GNOME GNOME] file browser [http://en.wikipedia.org/wiki/Nautilus_%28file_manager%29 Nautilus] comes with a built-in "Connect to Server" feature.

@@ Line 5: / Line 5: @@
 ===Hello World page===
-Below is a minimal example of well formed ([http://validator.w3.org/ W3C]-compliant) HTML document. It includes a handy HTML markup validation button.
+Below is a minimal example of well formed ([http://validator.w3.org/ W3C]-compliant) HTML document.
 <pre>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+<!DOCTYPE html>
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head>
-<head>
+    <title>Hello World</title>
-<title>Hello World</title>
+  </head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+  <body>
-<meta http-equiv="content-style-type" content="text/css"/>
+    <h2>Hello, World!</h2>
-</head>
+   </body>
 </html>
 </pre>

@@ Line 84: / Line 84: @@
 * 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.
 * Error 403 while accessing a subdirectory of <tt>public_html</tt>: Again, this means incorrect permissions or missing index.html file.
-: '''Note:''' The automatic directory listing has been recently turned off for security reasons.
+: '''Note:''' The automatic directory listing is turned off by default for security reasons but can be turned on if needed (you have to learn how).
 ==Basic HTML==

@@ Line 33: / Line 33: @@
 This section explains how to create a webpage from a Unix terminal session, assuming you already know a little of Unix commands and HTML. For an introduction to HTML, see [[#Basic HTML|below]].
-* First you need to login to <tt>login.math.berkeley.edu</tt> (department Unix shell server) via SSH terminal emulator or start the Terminal application (menu item: Applications/Accessories/Terminal) if you are logged in to Math thin client server <tt>beyonce.math.berkeley.edu</tt>.
+* First you need to login to <tt>login.math.berkeley.edu</tt> (department Unix shell server) via SSH terminal emulator or start the Terminal application (menu item: Applications/Accessories/Terminal) if you are logged in to Math thin client server <tt>keira.math.berkeley.edu</tt>.
 * 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>

@@ Line 49: / Line 49: @@
 ===GUI method===
-This method works from any Math thin client computer connected to <tt>beyonce.math.berkeley.edu</tt>. The steps are essentially the same but no knowledge of Unix commands is necessary.
+This method works from any Math thin client computer connected to <tt>keira.math.berkeley.edu</tt>. The steps are essentially the same but no knowledge of Unix commands is necessary.
 * Start GUI file manager (a.k.a. Nautilus): either double-click on home folder icon on your desktop or select Home Folder from Places menu.

@@ Line 41: / Line 41: @@
 * All files and directories for your webpage should be placed 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.
 * 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 with any Unix editor. To use xemacs, for example, type
+* You can edit this file with any Unix editor. To use emacs, for example, type
   <tt>emacs public_html/index.html</tt>
-* An alternative to <tt>xemacs</tt> is <tt>pico</tt>, which is used for writing emails in alpine. Other popular command line editors are <tt>vi</tt>, <tt>vim</tt>, and <tt>nano</tt>. 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>.
+* An alternative to <tt>emacs</tt> is <tt>pico</tt>, which is used for writing emails in alpine. Other popular command line editors are <tt>vi</tt>, <tt>vim</tt>, and <tt>nano</tt>. 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 file server and what the permissions mean, see the page on [[File Management|file management]].

@@ Line 7: / Line 7: @@
 Below is a minimal example of well formed ([http://validator.w3.org/ W3C]-compliant) HTML document. It includes a handy HTML markup validation button.
 <pre>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
@@ Line 21: / Line 21: @@
      <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10"
-         alt="Valid XHTML 1.0 Transitional"
+         alt="Valid XHTML 1.0 Strict"
          style="border: 0; height: 31px; width: 88px" />
      </a>