Up and Running With Linux and Komodo Edit

If you have any problem following the directions in this section, ask for help! You want to get up and running as soon as possible so that you can start work on your web pages.

The Math/CS department uses the Linux operating system, a free alternative to Windows and Mac OS. The computers in Gulick 208 are "dual-boot." That is, they can run either Linux or Windows. Ordinarily, they are running Windows, and to get into Linux, you have to restart the computer. To restart, hit CONTROL-ALT-DELETE. Then select "Restart" from the popup menu on the lower right of the screen. As the computer restarts, there is a point where you can select "Windows" or "Linux Mint". To use Linux, press the down-arrow key to select "Linux Mint", and press return. You have 30 seconds to do this, or Windows will be selected automatically.

After starting Linux, you will see a Linux log-in screen. Enter your user name, press return, enter your password, and press return again. After some time, you will see the Linux desktop. There will be an annoying popup introducing Linux Mint; I suggest that you uncheck the box that says to show the popup at login and close the popup.

It shouldn't be hard to find your way around the Linux desktop. There is an application menu in the lower right. You can explore it later if you want. For now, you want to start working your web pages. I suggest that you use Komodo Edit, the program that I demonstrated briefly in class. Komodo Edit is a free editor for Web development (although they will try to sell you Komodo IDE, the non-free version). You can download it for use on your own computer at http://www.activestate.com/komodo-edit/downloads.

You can find Komodo Edit in the application menu under "Programming." An easy way to open it is to open the menu and start typing k-o-m... until it is selected, then press return.

It will take a minute for Komodo Edit to start. Once the Komodo Edit window has opened, you can use the command "File" / "New" / "HTML 5.html" to start a new web page, and you can use "File" / "Open" / "File..." to open an existing web page.

Your web site is stored in the folder named www. Anything that you put in that folder will be visible on the Web. It already contains a copy of the sample page that we looked at in class, in a file named index.html in your www folder. Index.html is a common name for the home page of a web site.

You should use the Open command in Komodo Edit to open the file index.html from your www folder.

Your First Web Page

Your index.html page should be about you, although you are certainly not required to get too personal. At a minimum, the page should contain some text, several links, at least one picture (not the one that's already there), and a list. For example, you might have a list of links to Web sites that you like, or that you think are interesting. You should apply your own style to the page, using CSS in the <style> section.

To add a picture to the page, you should save the picture file to your www directory. To this that, you can open Firefox, find a picture on the web, and save the picture by right-clicking it and using the "Save Image As" command. Make sure to use pictures that you can use legally, either because your own them or because the creator has made them free for public use. A possible source of free images is the Wikimedia commons, http://commons.wikimedia.org.

There is no example of lists on the web page that I gave you, but they were mentioned in class. A list can be made using a combination of <ul> and <li> tags. For example:

For more help with HTML and CSS, I suggest the Web site http://w3schools.com, which has references for HTML and CSS. In particular, you will want to consult their color reference at http://w3schools.com/tags/ref_colornames.asp. Note that many colors have names, but to get arbitrary colors you have to use codes such as #8A2BE2. You can use either names or codes in CSS.

Your Second Web Page

You should make one additional web page besides index.html. The page should be about something (a sport, a team, a brand of car, an organization, a cause, an event—anything at all). The page should be non-trivial; it should have information and/or pictures. It should use some CSS styling.

There should be a link on index.html to your second page.

Continuing Your Work

You should not expect to finish both web pages during class. You can continue your work in the Math/CS computer lab in room Lansing 310. The computers in that lab only run Linux and do not have to be restarted. There are TA's in that lab from 7:00 to 10:00 PM, Sunday through Thursday who might be able to help, although they aren't required to know about creating web pages. You can also use the Gulick 208 lab in the evening. And of course, you are encouraged to visit my office hours for help!

It is possible to work on your own computer and to transfer work back and forth between your computer and the Linux server. If you are interested in doing that, let me know, or see http://math.hws.edu/about_linux/sftp.html.