Header Search Widget
IRIS

Instructional & Research Information Systems

Homepages

Instructions for…

Instructions for EECS Staff

Staff who would like to have their own homepage can host it on the EECS dept. web server. To get started, follow the directions in the Preliminary Steps section below. Once those steps have been completed, proceed to Designing and Building Your Homepage to learn how to create a basic website. Even those who don’t know HTMLwill be able to follow the directions, and advanced users will benefit from technical details about our web server configuration.

Instructions for EECS Faculty

A departmental homepage, available via the EECS Faculty List, will be automatically created for all EECS Faculty. You can add or edit information on this homepage via My EECS Info. If you wish to have a personal homepage in addition, you may follow the directions in the Staff section above to create a homepage using HTML. When your personal homepage is complete, you can add the URL to your departmental homepage using My EECS Info or by sending the URL to eecsfac-updates [at] eecs [dot] berkeley [dot] edu and requsting that your page be added to the faculty database.

To create a class homepage, follow the instructions provided by the Instructional Systems Support Group on How To Set Up a Class Homepage.

Instructions for EECS Students

Graduate students with an account on an EECS research machine should follow the directions in the Preliminary Steps and Designing and Building Your Homepage sections below. Graduate students with an account on cory.eecs.berkeley.edumay create a homepage there by following the directions on How to Set Up a Personal Home Page. Grad students who wish to have their homepage publicly listed on the EECS website can do so by logging into My EECS Info or by emailing acg [at] eecs [dot] berkeley [dot] edu.

Undergraduate students should contact the Computer Science Undergraduate Association (CSUA) for information about setting up a homepage.

Preliminary Steps

Before you create your homepage, you must create the directory where it will live, and modify it to be publicly accessible. The procedure varies depending on whether you are a Windows or a Unix/Linux user.

WINDOWS USERS

  1. Open your home directory, usually mapped locally to the H: drive. Right-click in the background of this directory, and then click New-> Folder. Name your new folder public_html.
  2. Right-click on the newly-created folder and then click Properties and then the Security tab. Click on Edit, then Add… and type webuser@eecs.berkeley.edu in the box that appears. Click OK.
  3. In the Permissions for webuser box, make sure that the box labelled Read & Execute is checked. If not, click on it. Finally, click OK to finalize your changes and close the window.

MAC USERS

Mac Users should follow the instructions for Unix/Linux users below. If you need assistance in opening a terminal window to login.eecs.berkeley.edu, please contact the helpdesk.

Alternatively, you can make a Remote Desktop connection to the department Windows server winterm.eecs.berkeley.edu and follow the instructions for Windows users above.

UNIX/LINUX USERS

  1. First, adjust the permissions on your home directory to make it world-searchable. This can be done by logging into a UNIX machine such as login.eecs.berkeley.edu and typing at the command prompt
    chmod o+x ~.
  2. Create a directory called public_html in your home directory. Once you have done this, make it world-searchable by typing from a UNIX command prompt
    chmod o+x public_html
  3. Create a file called index.html in your public_html directory. This is where the HTML for your homepage will go. If you already have a homepage created, you should set index.html to point to it, or rename your homepage to index.html. The reasons for doing this will become clear below. Make this file world-readable by typing from a UNIX prompt:
    chmod o+r index.html

Now you are ready to create your homepage. Once it is finished, you will be able to open it in a browser by typing in the following URL:

http://people.eecs.berkeley.edu/~<your login>

Effective May 24, 2016, the below URLs now redirect to the canonical personal web page server people.eecs.berkeley.edu. Their use is still supported but discouraged when publishing new articles.

  • http://eecs.berkeley.edu/~<your login>
  • http://cs.berkeley.edu/~<your login>
  • http://www.eecs.berkeley.edu/~<your login>
  • http://www.cs.berkeley.edu/~<your login>

If you used the index.html naming convention for your homepage, users will be automatically directed to it when they type one of the URLs above. If you did not, then the user will have to type, e.g., http://www.eecs.berkeley.edu/~<your login>/<filename> in order to view your page.

Designing and Building Your Homepage

Once you have finished the Preliminary Steps above, you can begin creating your homepage. Your homepage can be as simple or complex as you’d like within the technical limits of the departmental web server.

BASIC USERS

Users who have no knowledge of HTML or who wish to set up a simple homepage may do so by following a few easy steps.

  • Design your page. Brainstorm a bit–think about what information you want to include, and how that information should be arranged on the page. Remember that simple designs are usually easier to understand and use than complicated designs. Keep in mind the logical divisions in your page: what should be considered part of the heading? where will the main content live? etc.
  • Create your content. Write up the text and create the images that will comprise the content of your page. You can use your favorite software to do this. Keep in mind that images should be optimized for the web in order to ensure fast downloads; see the Resources section below for information about how to do this.
  • Markup your content. Using the index.html (or whatever you chose to call it) file you created earlier in the public_html directory, paste in your text and tag it according to its function in the page: is it a paragraph? then enclose it in a <p> and </p> tag pair. Reference your images using <img> tags. Tag the different logical visions in your site using <div> tags and the like. Tutorials and detailed information about using HTML can be found in the Resourcessection below.
  • Style your content. An important principle in web design is to separate content from presentation. That way, if one of these changes, the other will not have to be changed. This principle is implemented through the use of Cascading Style Sheets (CSS). You can use a style sheet to make your page look however you want, by specifying the look of each kind of element–paragraphs, headings, images, etc.–in your page. Style sheets are very powerful, and with them you can achieve a wide range of easy-to-change looks for your page. Information and examples can be found in the Resourcessection.
  • Validate your page. Once you have created and styled your page, run the W3 Consortium’s validation programs on your HTML and CSS files. This will ensure that your page will be displayed as you intended, and that it doesn’t use any outdated HTML or CSS code. The validation programs are web-based and can be found at the W3 Consortium’s website: HTML or CSS.
  • See the final product. Navigate to http://www.eecs.berkeley.edu/~<your login> and admire your handiwork. If your page doesn’t look exactly as you’d like, spend some time tweaking the HTML and/or CSS. Like any skill, coding good webpages requires lots of practice.

ADVANCED USERS

Advanced users may wish to add specialized functionality to their website. To this end, detailed information about the IRIS web server, including CGI and .htaccess information, can be found in the IRIS Web Technical Notes.

If the IRIS web server is inadequate for your needs, you might wish to set up a local web server and serve your pages from there. In this case, it is highly recommended that you consult with IRIS’s Computer User Support Group (CUSG) before configuring your server. CUSG will advise you on securing your machine according to department- and campus-wide policies, and if desired can set up your server on a Time and Materials basis. If you choose to proceed on your own, you will need to submit a System Update Request to classify your machine as a server, request a fixed IP address, and ask that port 80 be opened for your machine.

Resources

BASIC WEBPAGE DESIGN

  • W3 Schools Home Page. Features tutorials and reference material on a wide range of technologies used in building modern web pages.
  • A List Apart. Great magazine with lots of articles on all aspects of web design.
  • Optimizing Images for the Web. An introduction to the concepts and techniques involved in optimizing images for use on the web.

HTML

CSS

SPECIAL IMAGES AND GRAPHICS