B CUSP 110C – Digital Thinking

Exercise 2: Set up your personal web-page

 

 

In this exercise we will explore and experience:

·         Enabling web-page service on your MyUW account

·         Transferring files between your desktop client and UW web server

·         Reading, understanding, and editing HTML <tags> to customize a personal web-page for yourself.

In the following we will go through these steps:

1.      Step 1: gain access to UW NetID content manager from your MyUW main page.

2.      Step 2: enable the web service for your account: enabling your Student Web Publishing.

3.      Step 3: modify a simple HTML file on your local desktop machine.

4.      Step 4: transfer files between your desktop and UW web server

Let’s begin!!

 

Step 1: Gain access to your UW NetID manager from your MyUW page:

·         Open your web-browser and serve to your myUW page:

o   http://myuw.washington.edu/

o   Proceed and login with your MyUW login and password.

·         On the main page of your MyUW, click on Add Content to add in the content manager sub-window for UW NetID:

·         You will see a list of content managers you can add to your main page, when you have time (at home) try some of these out. Fun! For now, scroll to find: UW NetID, click on Add to add this content manager to your MyUW main page.

·         Now, go back to your MyUW main page (by clicking on MyFrontPage on the top-left corner)

·         On your MyUW main page, you will see a new content manager box with titled: UW NetID

 

Step 2: enabling the web service for your account: enabling Student Web Publishing:

·         In the UW NetID content manager sub-window, click on : Change Your UW NetID Password

·         This will bring you to your UWNet ID manager page, click on Computing Service

·         Under “Inactive Services” you should see “Student Web Publishing”, click on the check box to enable this service (the above screen shot shows the result after the service is enabled).

·         You should see a new page of some graphics working and telling you the progress. This may take a while to complete. Now, in the meantime, we can begin creating our main page content.

 

Step 3: modify a simple HTML file on your local desktop machine.

·         Download this zip file to your desktop and unzip the file: you should see a PersonalWebPage folder on your desktop. WARNING: Make sure you remember to unzip the file!! DO NOT work with the zip file!

·         Go into the PersonalWebPage folder to see four files:

o   index.html,

o   MyPhoto.jpg

o   MyPrincipal.docx

·         Double click on index.html, what do you see? Notice the following 5 bad-items:

1.      The title bar: (Someone important’s personal home page):

2.      The name of the person is “blah blah blah”

3.      The picture of the person: notice this is MyPhoto.jpg

4.      The link to this person’s value: notice this is linked to MyPrincipal.docx

5.      Notice: this person’s BFF: Big Head is in bold.

·         To prepare to customize your own page, go gather the following two items and place them into the PersonalWebPage folder:

o   A picture: you want to show as yourself.

o   Your MyValue essay from second week of class.

Gather the above as two files, name these anything you want and place them in the PersonalWebPage folder.

·         Now, we want to open and edit the HTML text!! Now, open the index.html file with the Notepad++ text editor by right-mouse-button click on the index.html file and select Edit with Notepad++:

·         Now, you are seeing the raw text of index.html!

·         Notice

o   this is a text file with <tags>. Notice that <tags> comes in pairs <beginTab> </endTag>.

o   the content between title tag is the title: <title> Title </title>

o   <h1> is first level header (<h2> is second level header)

o   <p> to start a new paragraph …

·         Easy to read this file?!

·         Now, customize the content of this file such that the 5 bad-items are corrected.

o   Remember to “save” the content as your change the html file!

·         At any point, you can double click on the index.html file to examine your changes! Cool?

 

Step 4: transfer files between your desktop and UW web server

·         When you are happy with your editing, you are ready to transfer your personal web-page content to the UW server!

·         Let’s verify your personal page is set up: browse to http://students.washington.edu/YourNetID (REMEMBER to replace YourNetID!) to see: (exciting eh?)

·         Now, start a file transfer program, WinSCP (in All Programs):

·         Open WinSCP (this is the file transfer program), and click on New to begin a new file transfer session

·         You want to connect to the web-page server machine (dante.u.washington.edu), with your login and password: