1. Introductions to UTEP s Geology Pub directory

Transcription

1 L AB 1 W EB P AGES The purpose of this lab exercise is to create your own web page that will be hosted on the Geology Department web server commonly referred to as geo. If you do not currently have a web page, this lab will walk you through the basics of web page editing and posting pages to the Internet. If you already have a web page on the Department server (let me know), please work through this lab as directed and use any extra time to update your existing website accordingly. Note: I will use the terms web page and website interchangeably. Technically, a website is a collection of web pages, however I will not likely hold to this definition. We will use a free webpage editor called NVu for creating/editing web pages. NVu is available on both PCs and Macs and has been installed on the classroom PCs and Macs in Geol 409. You can also download NVu software for your own personal computer at 1. Introductions to UTEP s Geology Pub directory Launch your favorite web browser (Macs: Safari, Firefox; PCs: Explorer, Mozilla/Firefox) and navigate to the following website: The additional pub part of the web address is critical it will take you to our Geology public directory where faculty and students 1) store/share files and 2) host web pages. You are about to explore the pub directory. Note that all of these files are public, so anything that you store here is available to (nearly) the entire world. Double click on the folder named barud. Wow, there s a lot of stuff in this folder! Notice how the web address grew to when you entered barud s folder. Go back and double click on the folder named bkonter. Notice how this takes you directly to my web page, and that the web address is now So how come a click on the

2 bkonter folder sends you to a nice website, but a click on the jasper folder sends you to a list of files? Answer: The bkonter folder has a magical file in its immediate directory (that you can t see) named index.html, while the barud folder does not contain such a file. Your web browser knows to look for this index.html file! If there is one, it will display the webpage with the content in the index.html file. If there is no index.html file in a folder, then a list of files will be displayed. Note that the bkonter folder still has oodles of files in it (which are links to my website), but you just can t see them. You should each have a pub folder of your own. Your folder should be labeled with your last name. For future reference, we are going to call this name your unix name. Note that it may be different (shorter) than your user folder name on geotwo. If you previously accessed your pub directory, then you *should* know your password (talk to Carlos if you need to re-set your password). If your pub folder is new, then your password can be found in a file in your geotwo folder. Look for a file named WEB SERVER LOGIN INFORMATION. Open this up and you will find the password needed to access your pub account. Double click on your pub folder. out in the space below) What is your web page address? (write it In this lab, you will create an index.html file (and a few other files) that you will eventually copy over to your pub directory. We will go over this part near the end of the lab, so stay tuned. But keep in mind that this is where you files will eventually end up. 2. Mount the \\geotwo\geo4315 class workspace directory Before you begin working on your web page, you will first need to connect to the geotwo class workspace. Please see handout titled Accessing Class Workspace: Geotwo Server for directions.

3 Check to make sure that you are still connected by navigating to your geotwo folder. 3. Create a pub folder in your geotwo folder You are next going to create a folder on geotwo where you will store your web page materials while you are editing them. We want to create a folder system similar to the one on where you have a user folder (your unix name) within the pub folder. Double click on your geotwo user folder, add a new folder, and name it pub. Then double click on the pub folder and add a new folder inside it named your_unix_name. Make sure that this folder name is identical to the folder you have on pub. This folder is where you will store all of your web page materials. At the end of the lab you will transfer these files over to That s all the set up now you re ready to start editing your web page! 4. Introduction to HTML code for web pages Web pages are written in a computer language called HTML. HTML is not a WYSIWYG (What-You-See-Is-What-You-Get) language, but rather is a set of symbols and commands that is read and translated by a web browser (like Internet Explorer, Safari, Firefox, etc.) and displayed on the Internet in a readable format. To view the original HTML commands (or source code ) for a web document, navigate to the UTEP Geological Sciences homepage: Depending on your web browser choice, from the top, click on View Page Source (or View Source) (or Source). This will pop up a new window with lots of text and symbols. actually HTML code. This gibberish is

4 5. Writing your own HTML code & introduction to NVu It is important to note that there are many software applications that will allow you to create and save files as HTML for the web (i.e., MS Word, Mozilla, Adobe DreamWeaver, etc.). Thus, it is not necessary to learn the HTML language in detail, however it is useful, in the least, to recognize some of the basic commands. Today we will practice using the NVu editor application to create a web page. NVu is a great program, as it is freely downloadable, fairly easy to learn, and reasonably flexible. NVu also has several modes for developing web page. Here we will first practice entering commands in the Source mode, then will edit in the Preview/Normal mode, which displays test in a WYSIWYG format. To create your own simple HTML code, will need to start up the NVu software. PCs: Start All Programs Nvu Macs: From your desktop, Macintosh HD Applications Nvu For future convenience, drag and drop the NVu icon to your desktop dock. Please let me know if you don t know how to do this. Double click on NVu After NVu is launched, close any extra windows that display Tips and ask for your permission to track your use of their software. You should then be left with a large NVu window, which may remind you of the layout of Microsoft software. At the bottom of the window, click on the Source tab Highlight all of the text that appears and hit the delete key on your keyboard Now type in the following HTML commands (next page) in place of the text that you just deleted:

5 <html> <head> <title> My first HTML document </title> </head> <body> <h2> My first HTML document </h2> Hello, <i> WWW! </i> <p> Greetings from the <br> <a href= UTEP Geology Department </a> <p> Composed with care by: <cite> (enter your name here) </cite> <br> Last updated: August 25, 2010 </body> <html> Note that most commands begin with < > and end with </ >. Paragraphs are separated with <p>. Web links are represented by <a href= > Text-2-be-linked </a>. ** For basic information on HTML language commands (or tags ), please refer to the handout Basic HTML Tags. ** Take a good look at what you just typed and try to guess what each command does or represents. Click on the Save icon in the top menu bar. Name the file test.html and make sure you save it to your pub/unixname/ folder on geotwo. If you need help with this, please let me know.

6 Congratulations. You have now officially created a web page using HTML code. Next you will display your page as you might see it on the Internet: If your file has not already been re-displayed, click on the Normal tab at the bottom of the NVu window. Now you should see a page displayed with different text sizes and formats. This is the regular editing view that you will use to modify future web pages. You can also click on the Preview tab, which is often used to display a preview of a web page with more elaborate text and features. For the simple file we have created now though, Preview mode should look identical to Normal mode. 6. Exploring NVu in Normal Mode Now play around with the features of NVu for a few minutes with your test.html file. First add a page title. Click on the top menu Format Page Title and Properties Enter a simple title for your page. Something like your-name s test webpage. This will show up in the web browser for viewers to see and easily identify your webpage. Change the background colors and text. Click on the top menu Format Page Colors and Background. Click on the Custom Colors button and choose your favorite color scheme. You can also manually edit text color by double clicking on the text you want to colorize and then click on the two small overlapping box icons in the 2 nd menu bar. If the text was originally black, the overlapping boxes will likely be black-filled and transparent/white. This will change as you edit the text color. DO NOT WORRY ABOUT MESSING THIS UP. THIS IS FOR PRACTICE. Try adding new text (simply type in the window like you did before) and stylizing it (change the font size, make bold, etc.). DO NOT WORRY ABOUT MESSING THIS UP. THIS IS FOR PRACTICE. Test out the link feature by double clicking on the example link in your file. To link to a different website, simply erase the address and enter a different one. (We ll test these links out next.) DO NOT WORRY ABOUT MESSING THIS UP. THIS IS FOR PRACTICE. Try adding a new link by highlighting a piece of text, clicking the Link icon in the menu bar, and typing in an example website into the address window. DO NOT WORRY ABOUT MESSING THIS UP. THIS IS FOR PRACTICE. Try adding an image by going to in your web browser, and click-n-drag (or save) the picture of Dr. Velasco to your

7 pub/unixname folder. Let me know if you need further directions for doing this. Next click on the Image icon in the menu bar and choose the picture you just saved. You ll probably have to click the button that says Don t use alternate text before completing this task. DO NOT WORRY ABOUT MESSING THIS UP. THIS IS FOR PRACTICE. Try entering a table. Tables are helpful for cleanly grouping and aligning text, in addition to displaying information in a tabular format. To enter a table, click on the Table icon and choose a 2x2 cell table. Then you can enter text or drag/enter pictures into each of the table cells. You can manually adjust the dimensions of the table with your mouse and the size adjustor panels, or you can right click in the table cell and play with the table and cell properties here. DO NOT WORRY ABOUT MESSING THIS UP. THIS IS FOR PRACTICE. When you are satisfied with your test web page, move on to the next step. 7. Going Live: Posting your web page to the Internet Next you will need to copy your test.html file (plus any image files you may have included in the page) FROM your geotwo pub/unixname folder TO your folder. To do this, we will use a file transfer protocol, or ftp, tool. Here s what we want to do: FROM - TO \\geotwo\geo4315\user\pub\unixname There are many ways to ftp files. Different software exists on the Macs and PCs though. Below are directions for both: PCs: 1. Navigate to FileZilla: Start Programs FileZilla FTP Client Filezilla 2. Enter the following in the appropriate boxes: Host: Username: unix name (lower case) Password: unix password 3. Click on Quickconnect button. 4. Left Panel (from = Local site) In Local site panel, click on My Computer

8 In the Filename panel below, navigate to your folder on geotwo: Z drive user pub unixname 5. Right Panel (to = Remote site) In the Remote site panel, click on the very top folder icon in the given list (represented by / icon) Double click on the pub folder Double click on your unix name folder Any files you already have there should appear 6. Now drag/drop your.html file and any images from your geotwo/username/pub/unixname folder (left panel) to the pub/unixname folder on (right panel) Macs: Applications Utilities X11 Drag X11 to your Desktop dock for future use Double click on X11 At the prompt (represented by % here), type the following: % cd /Volumes/GEO4315/username/pub/unixname % scp r * unixname@ % password: (enter it) Now return to your web browser and type in your web address. A list of file should appear. Why doesn t your web page show up automatically? Double-click on the test.html file. Your test website should now appear! Always check your links to make sure that they are correct. 8. Homework Assignment: Create your real website. Back in NVu, open up a new file by clicking on the New icon in the top menu bar. Click on the Save icon next, name this file index.html, and save it in your pub/unixname folder in the geotwo workspace.

9 From here on, you re on your own - create your personalized web page as you like. Use color, styles, pictures, tables whatever you like. Your webpage should be professional and organized, but should also reflect your creative side as much as possible. Your web page must include the following: 1. Your full name 2. Your major & student status (i.e., Masters student in Geology) 3. Your contact information 4. Past education (i.e., B.S. Geology, 200x, Univ. of X) 5. Your research interests (bullets or a few sentences is fine) 6. A link to your resume or CV (more info about this below) 7. A brief paragraph describing yourself where you are from, where you received your undergraduate/graduate degrees, what your hobbies are, how you became interested in geology/geophysics, what kind of job you are looking for after you complete you Masters/PhD., anything else that you don t mind sharing with the world You are encouraged to look at other student web pages for ideas and formats. Some examples: Creating a CV If you don t have one already, you will need to create a resume or CV for your web page. Below are a few examples of CVs from various people in the department. These should serve as examples, but yours should be about you. Don t worry if you don t have a long list of items you eventually will. Create your CV in MS Word, then save this document as a pdf file. this, To do PCs: File Save & Send Create PdF/XPS Document click Create PDF/XPD button name it Lastname_CV_2010.pdf. Save it to your pub/unixname folder on geotwo. Macs:

10 Print PDF button Save as PDF name it Lastname_CV_2010.pdf. Save it to your pub/unixname folder on geotwo. Linking your CV to your web page To link your CV to your index.html web page, you will need to add some text somewhere on your web page that says something like CV or Click here for my CV. Then highlight this text and click on the Link icon. Click on Choose file and select your Lastname_CV_2010.pdf file. Click OK. Finally, you ll need to transfer your index.html file, your CV pdf file and any other images you have included, to Follow the directions in step #7, but now copy over your new files instead. Check your work by revisiting your website in your web browser. Now that you will have an index.html file in your directory, you shouldn t need to click on any files, the web browser should automatically load your webpage. Check to make sure that your links work properly (you will be graded on this!), your CV displays properly, and that spelling and grammar are correct. For full credit, please do the following: 1. Turn in this hard copy lab document (with your name on it) next week at the beginning of class. Make sure that you have provided answers in where requested. 2. Check your web page (online) and make sure that it meets all of the directions above. 3. Create a Lab1 folder for the DROPBOX (make sure to name it as directed in the hand out) and include in this folder a copy of your test.html file and your index.html file. Make sure you copy/paste these files in this new folder if you just drag them around, you ll lose them in your pub folder. Finally, drag this folder into the DROPBOX.