Web Development
Getting Started | Beginner Level | Intermediate Level | Advanced Level
Workshops Available | Web Policy
Stony Brook University students have 20MB of storage space on Sparky Unix server.
If you are just getting started you need to know that you must have a Sparky Unix account.
Don't have one?
Request a Stony Brook (Sparky) email account and follow the steps below to find out the countless resources Stony Brook has to offer!
This is an important one. When you are creating your website, you should create a directory specifically for your website and store everything there (in other words, everything having to do with your website should all be in one folder on your personal computer). This is important because when you are inserting images, they are easier to locate.
Another reason this is important is because after uploading your website the structure of your website on the web server should mirror the structure of the site on your computer.
For example, let's say your website is stored in a folder called "My Webpage" on your computer. Inside the folder you have another folder called "images" in which you have stored all the images you used in your website. Now when you go to upload your website to your web directory on the web server to make it public, you upload everything inside your "My Webpage" folder, including the "images" folder and all the images inside it. Your web directory should look exactly like what is in your "My Webpage" folder on your computer.
Organization is key to good web design, especially if you are working with large sites.
{ top }
It is good practice to have one directory (folder) where all images stored for your site labeled images or something similar. Why?
Assumption: The file displaying the image is at the same level on the web server as the directory labeled "images".
To insert an image called "picoftblair.jpg", the HTML code is as follows:
<img src="images/picoftblair.jpg">
Other properties you can change are the image's width, height, whether you want a border around the image, and the image's positioning. If you wanted your image to have a width of 250px, height of 150px, a border, and left aligned, the HTML code would look like the following:
<img src="images/picoftblair.jpg" width="250" height="150" alt="Tony Blair" border="1" >
If you don't want a border you would simply replace the value 1 with a 0 for the border and if you wanted the image right-aligned instead of left, replace the value "left" with the value "right" where specified. Note that changing an image's width and height in the HTML may distort the image.
Linking to images already on the web:
If you wanted to insert an image into your webpage that was already on the web,
for example, this image:
Your code would look like the following:
<img src="http://www.ic.sunysb.edu/images/picoftblair.jpg">
"http://www.ic.sunysb.edu/images/picoftblair.jpg" is the location of the image on the Web, just like above, "images/picoftblair.jpg" was the location of the image in the directory storing your website.
{ top }
There countless ways to build your webpage, if you are using a PC at the SINC Sites you may use the Macromedia Dreamweaver, a what you see is what you get (WYSIWYG) tool for creating HTML files. Macromedia Dreamweaver is one of the HTML editors on the market. It is user friendly and offers you the ability to work both with the code and with layout design (overall appearance).
You may also choose to type your own HTML code using a text editor.
Instructional Computing also offers public computer classes throughout the semester that focus on many different applications, including Macromedia Dreamweaver.
To check what computer classes are offered for the current semester, visit:
http://www.sinc.sunysb.edu/helpdesk/workshops.shtml.
For more information on Macromedia Dreamweaver and other Macromedia applications,
visit their website: http://www.adobe.com/
Another HTML editor you could use is Microsoft FrontPage. FrontPage is included in the Microsoft Office 2000 Suite. Visit the FrontPage website: http://www.microsoft.com/frontpage/
Some designers also use simple text editors, such as Notepad, for their HTML and coding.
This requires knowing HTML and understanding layout properties.
{ top }
{ top }
{ top }
{ top }
What is it?
The Common Gateway Interface, or CGI, is a standard for external gateway programs to interface with information servers such as HTTP servers. Basically it is one way to receive information from the visitors to your website via an email form, for example.
To learn more about CGI, visit The Common Gateway Interface page.
CGIWrap - User Instructions
The following are instructions for setting up your account to be able to use cgiwrap to execute cgi scripts. It is assumed that you are familiar with writing CGI scripts and HTML.
EXAMPLE
The following information is assumed:
| Element | Information in the Sparky server |
|---|---|
| UserID: | tblair |
| HTML Directory: | /usr/www/Stu/tblair |
| CGI Directory: | /usr/www/Stu/tblair/cgi-bin |
| Name of Script: | script.pl |
| Web Server: | www.sinc.sunysb.edu |
| Location of Perl: | "/usr/local/bin/perl" |
| Location of csh: | "/bin/csh" |
If you do not already have a cgi-bin directory set up, create one:
Create the script in the cgi-bin directory, and set the proper execution permissions on the file (If you are uploading a script, be sure to upload it to your cgi-bin as ASCII, not binary).
The script is executed using the following URL:
For a fabulous CGI script archive, including an email form that is widely used on the Web (FormMail), visit: Matt's Script Archive
{ top }