Introduction to Computer Concepts
CSIT 100
LAB: Creating a Webpage
For this lab, please save also the HTML file you are creating, in your flash drive. Follow the instructions.
In this lab, you will create a webpage. Mozilla Composer should be used to create your web page. Note that Mozilla Composer will be found on the Menu Bar of SeaMonkey in the Window tab, (therefore you should open SeaMonkey first). If you don’t have SeaMonkey at home, you can download it. It is free. If you are using Mozilla, be sure that you open the Mozilla suite, because if you start Mozilla Firefox instead of the SeaMonkey suite, you will not find the composer. The icon for the
SeaMonkey’s shortcut looks like this: (You may also use Netscape Composer, which you can start from inside Netscape to create a single Web page. Please do not use Word to create your web page. I will check that. Again, if you are at home you could use Netscape Composer, but it is not in the RI-108 lab). You may describe yourself, placing your name, your interests, etc... inside the web page. Do not provide too much personal data if not necessary. Be aware of the location where you save your file, in your flash drive, normally the E: drive. The file should be named index.html., and be sure that the computer does not add a file extension of rtf., or another html. If this is the case, the browser will not be able to interpret your page. You must also insert a picture. Images inside Web pages: If you are going to include picture in your web page, you must upload the pictures to the same website where your index.html is located. Or you may use external images. An external image is an image that is already published on the Web elsewhere. It can be included in an HTML-page in the same way as a local image. For example, in order to place the Computer Science Department logo in a web page, use:
In Mozilla Composer use Insert|Image and type the URL into the Image Location field, when using external images. The best approach is to right click on the original image, and select Copy Image Location. In the URL of the Image Location, just paste the address location that you copied a moment ago. Check the Leave image at the original location box.
Note: A number of Web sites track a feature of HTTP (“redirection”) to detect whether a posted image is linked into another HTML file. With such an image, a student who will use the above method to include an image to his/her Web site will see no image or a different (sometimes offensive) image. Check your page before posting it. To look at your page locally, double click on the file that you saved in your flash drive.
If you want to insert a picture that you have, and you are going to upload it your website, you must insert the image using the html editor, and supply the name of the file that contains the picture. Just the name, without any reference to the folder where the image is located.
Save the index.html file in your flash drive, CSIT 100xx folder, and upload it to Canvas
Your website
It is locate on the MSUWEB place. If the MSUWEB drive is connected, it will look like:
(NetID) W:\\msufiles.montclair.edu\pubweb_vol1 in your Windows Explorer. It will look like another drive in Windows, and you can copy and/or move a file between folders.
(NetID) will show your own NetID (the one you use for login to Canvas, for instance). Note that the letter assigned to this drive could be Y instead of W, or some other letter. The key point to know that you are connected to the drive of the website is that you see msufiles.montclair.edu\pubweb_vol1.
Upload the index.html file, and the picture files you need (if any) to your MSUWEB storage area.
If the MSUWEB area is not connected, you need to make the connection before you upload the files to your MSUWEB storage area. See the syllabus for information about how to access it, how to upload files, and how to display your webpage ( Accessing Your Web Files on MSUWEB from Windows 7).
Try out your webpage:
Once you know that your file is working, and it displays perfectly on the browser, we are going to modify it a little, to accept input from the user.
1 Open the index.html file, you just created, using any text editor (Notepad, WordPad, etc., see below). The file should be in your flash drive, normally drive E:
2 Start a text editor. (You can find a primitive one called Notepad in the Accessories folder on the Windows Start menu. In the same location you could find WordPad)1. If you try to use any of
1 If you use WordPad or Word, make sure you save as “Plain Text” at the end, not in the Document-format. Change the file the Web composers from any of the browsers, it could happen that they will change your code. So stay with Notepad or other text editor..
3 Look at the code and try to understand how the HTML code in front of you represents the Web page that you have created.
4 Locate the end of your HTML code (at the end, there should be a