B CUSP 110B – Digital Thinking Exercise 8: 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
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
o
ScreenShotOfFinalProject.jpg
· Double click on index.html, what do you see? Notice the following 6 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. The screen shot of this person’s final project: notice this is ScreenShotOfFinalProject.jpg!
6. Notice: this person’s friend: Big Head is in bold.
· To prepare to customize your own page, go gather the following three 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.
o A screenshot of your final project (or from any of your projects).
Gather the above as three 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 our VisualStudio text editor by right-mouse-button click on the
index.html file and select Open With à
Microsoft Visual Studio 2010:
·
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 6 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:
·
You should something like the following (left
panel is your local machine, and right panel is content on dante)!,
for the left panel, go to your desktop and go into PersonalWebPage
folder:
·
On dante (right panel),
go into the public_html folder (the following is a screen shot
of my account, yours will look slightly different, but you will have the public_html folder, double click on that to go
into that folder):
· Now, you can drag the four files you need from the PersonalWebPage folder (the left panel) over to the right panel! This “dragging” motion is the transferring of files!!
o Notice, when you drag a file from left to right, you are transferring from local desktop to web-server: up-loading a file!
o If you drag files from right to left, you will be transferring a file from the web-server to your local machine: down-loading a file!
· Now, go to http://students.washington.edu/YourNetID (REMEMBER to replace YourNetID!) again to see your personal creation!! Exciting? Send this link to your grandma! J
In this
exercise you have practiced:
· Adding content manager to your MyUW page
· Enabling the UW web-server for your account
· Understanding and editing simple html file
· Transferring files between a local host and web-server
· More information on setting up and about your peronsal web-page: http://www.washington.edu/lst/help/web/intro/uwservices
· More information about HTML tags (I did a google search on HTML Tags): http://www.w3schools.com/html/html_primary.asp