IRLS 504 Student Webpage Tutorial By: Nicole Pagowsky & Sara Hayden Summer 2008

Size: px

Start display at page:

Download "IRLS 504 Student Webpage Tutorial By: Nicole Pagowsky & Sara Hayden Summer 2008"

Cornelia Hill
5 years ago
Views:

IRLS 504 Student Webpage Tutorial By: Nicole Pagowsky & Sara Hayden Summer 2008 These steps follow from setting up a Net ID, U-System Account, and initializing your web space through

1 IRLS 504 Student Webpage Tutorial By: Nicole Pagowsky & Sara Hayden Summer 2008 These steps follow from setting up a Net ID, U-System Account, and initializing your web space through PuTTy (SSH Client). Zoom in to better view images and text. Step 1: Open Notepad (an HTML editor) by clicking Start--All Programs--Accessories Notepad, then start entering your HTML.

---- HTML You can now enter your HTML. Here are some important tags that you will need in order to complete your webpage assignment. A. Inserting an image <img src="mypic.

2 ---- HTML You can now enter your HTML. Here are some important tags that you will need in order to complete your webpage assignment. A. Inserting an image <img src="mypic.jpg" alt=" (Here I am enjoying some quality reading time.)" /> For more information: Here is how this tag will show up on your webpage: B. Insert Link You can also <a href="mailto: you@ .com"> me</a> here! Here is how this tag will show up on your webpage:

3 For more information: C. Inserting a link to a document on your webpage <a href="careerinterests.doc"> Click here</a> to read a little bit more about my career interests. Here is how this tag will show up on your webpage: For more information: nks D. Inserting a link to another website <a href=" Here is how this tag will show up on your webpage: For more information: nks E. Creating an unordered list: A list of websites: <ul> <li> SIRLS</li> <li>american Library Association</li> <li>i Can Has Cheezburger</li> </ul> Here is how the tag will show up on your web page:

4 For more information: ts4 F. Creating an ordered list: A list of websites: <ol> <li> SIRLS</li> <li>american Library Association</li> <li>i Can Has Cheezburger</li> </ol> Here is how this tag will show up on your webpage: For more information: ts G. Sample webpage: <HTML> <HEAD> <TITLE>Riff-Raff!</TITLE> </HEAD> <BODY> <body bgcolor=bed3e9> <p align="center"><img src="mypic.jpg" alt= "(Here I am enjoying some quality reading time.)" /> </p>

<p align="left"> Hi! My name is Riff-Raff. I'm a new graduate student in the School of Information Resources and Library Science. I'm especially interested in pawblic librarianship.

5 <p align="left"> Hi! My name is Riff-Raff. I'm a new graduate student in the School of Information Resources and Library Science. I'm especially interested in pawblic librarianship. <a href="careerinterests.doc"> Click here</a> to read a little bit more about my career interests. You can also <a href="mailto:nfp@ .arizona.edu"> me</a> here! In the meantime, below are some of my favorite websites for you to check out. </p> <ul> <li><a href=" <li><a href=" Library Association</a></li> <li><a href=" Can Has Cheezburger</a></li> </BODY> </HTML> Here is how these tags will show up on your webpage: ----

Step 2: After you have coded your HTML, you will need to save it in HTML format: save the document as index.html after clicking the Save as Type mini-dropdown menu, and selecting All Files.

6 Step 2: After you have coded your HTML, you will need to save it in HTML format: save the document as index.html after clicking the Save as Type mini-dropdown menu, and selecting All Files. Then, save to an appropriate location. To review, the steps are: Notepad--File Save As All Files -- index.html. Make sure to save this to a place you know will be secure and/or that you will remember (if necessary, write down the location, especially if using the public computers in the library! If you have a thumb drive, be sure to use it.). For extra backup, save the index.html to your D2L locker. Do not completely close Notepad until you are certain you are finished with it, because you can continue to edit after saving. To see what your web page will look like before using WinSCP, you can open a web browser (Firefox, Internet Explorer, etc.), go to File Open, and then open your saved index.html. Every time you make a change to that document, you can refresh the browser window after re-saving to see the changes you have made.

7 Step 3: Log in to WinSCP. You can locate this program either on the desktop in File Transfer Software/Telnet or via Start, also under File Transfer Software/Telnet. The Host Name is u.arizona.edu, The User Name is your Net ID, and The Password is your password. Then, click Login.

8 Step 4: This screenshot is what the WinSCP window looks like when you are logged in. The left-hand side is local (what is on your computer or thumb drive); the right-hand side is public, and where your files will be placed so they show up, publicly, on your U-System account web space. Locate your index.html from the left by clicking on the drop down menu in this screenshot where you see C: Local Disk, and navigate through the left pane until your saved location and index.html is listed. Single-click and drag it over to the right-hand pane, and drop it into the public_html folder. You will also do this with your resume or career goals document and picture. Open a web browser and view your web page. Your web page URL is If you are not satisfied or something is broken, you can edit your page by following the remaining steps.

Step 5: If you have closed your index.html, you can make changes by opening Notepad again, going to File Open, and then selecting your index.html document from where you saved it.

9 Step 5: If you have closed your index.html, you can make changes by opening Notepad again, going to File Open, and then selecting your index.html document from where you saved it. You will need to, again, select All Files from the format dropdown menu in the dialog box to be able to find your index.html. Your HTML will appear again as it did before; from there, you can make appropriate changes. When satisfied with your editing, go back to File Save As, select All Files from the dropdown, and save again as index.html. It will ask you if you want to replace the existing copy, and you do, so choose OK/YES. You can, again, preview your web page before using WinSCP by opening a browser window and going to your web page URL, or if you left the browser window up from before, you can just click Refresh.

10 Step 6: Go back to WinSCP, navigate to your index.html on the left pane, and then drag it over again to the right pane, into the public_html folder. It will ask if you want to overwrite, and you do, so click YES. Your web page has now been updated, and you can view the changes from your web page URL in a browser window. It is a good idea to check your web page from a couple different browsers, as differences in formatting can occur. Make sure you are satisfied with the format and that your links are all working and active, your picture displays appropriately, and your PDF or DOC with your resume or career interests is a working link to the correct item. Please check TS-02 and Unit 2 in Content in D2L to make sure you have completed all requirements for this assignment. If everything looks good, then you are finished after submitting the assignment to the D2L Dropbox.

FIT 100 LAB Activity 3: Constructing HTML Documents

FIT 100 LAB Activity 3: Constructing HTML Documents Winter 2002.pdf version of this lab (may be better formatted) Required Reading for Lab 3 Chapter 4 of the FIT course pack Additional helpful references