Transcript PC Version

Creating and Publishing Your
own web site
PC Version
SEAS 001
Professor Ahmadi
Project Overview
• Create a basic web page using a “text editor”
• Publish web page to GW school server
• Edit web page using an open source HTML
editor
• Create several links from basic web page to:
– Your ECE001, MAE001, APS001 presentation
– Your resume
– Your schedule
• Present web site to SEAS 001 classmates
Overview of Creating a web site
STEP2: Upload “publish” web
page to web server
(at GWU:
cobweb.seas.gwu.edu)
STEP1: Create web page
on your personal workstation
STEP3: Web page can
now be viewed anywhere
on the Internet
Create Folder to store web pages
on Local PC
• Open up “My Computer” icon
• Look for the “T:” drive
• Create a Folder called: web site
Do this by going to “File->New Folder”
If you do not have a “T:” drive, simply use
the “C:” drive
• You will save all your web related work in this
folder.
• With the T: drive, you can login to any seas
machine and see your web site folder
Creating Main Web page
• The main web page must be called:
index.html
• It is a simple text file, we can use any text
editor to create
• On a PC, we use Notepad to create this
file, DO NOT use an editor like MSWord
Writing HTML
• HTML is the language web browsers like
the Internet Explorer, Firefox, or Safari can
read
• It uses opening and closing “TAGS” to
identify different sections of a web page.
• Example, to mark the TITLE of a web
Closing TAG
page:
<title>Main web page</title>
Opening TAG
Writing HTML
• Open Up Notepad type what you see below
• Save the file as: T:\web site\index.html
• Open a web browser and view the file by typing:
T:\web site\index.html
Writing HTML – Adding a Link
• To add a “Link” to a web page, we use the
following TAG sequence:
<a href="http://www.gwu.edu">GWU web site</a>
• This will add “HYPERLINK” to your web page
T:\web site\index.html
Uploading web page to web server
• To “publish” our web page, we transfer the file: index.html to
the GWU SEAS web server
• To do this, we use a “Secure File Transfer Client” or SFTP
• The SEAS’s SFTP server is called: cobweb.seas.gwu.edu
• Your seas username and password are required to login
•
•
•
•
•
•
•
For Home, free SCP clients are available from:
PC users:
http://www.seas.gwu.edu/~seas001/fall07/downloads/winscp405.exe
http://winscp.net/eng/download.php
Mac users:
http://www.seas.gwu.edu/~seas001/fall07/downloads/Cyberduck-2.8.1.dmg
http://cyberduck.ch/
Open up SFTP Client
Connect to web server
1. From Desktop, click on:
SSH Secure File Transfer Client
2. Once the SFTP Client opens,
Click on the “QUICK CONNECT” button
Host: cobweb.seas.gwu.edu
Username: your seas username, then connect!
Uploading web page to web server
• Type in T:\web site in the box at the top
• Drag index.html to public_html folder
YOUR PC
SEAS Server: cobweb.seas.gwu.edu
Viewing your web site
• Open a web browser, and open the web
address:
• http://www.student.seas.gwu.edu/~tfarmer/index.html
index.html is now
published on the Internet
Any file placed under the
folder: public_html will
be published on the
Internet, so anyone will
Be able to view them!
Change: tfarmer to your seas username
HTML Editors
• Manually typing HTML files is tedious
• To produce more interesting web pages,
quickly, an HTML editor is needed
• There are many different commercial HTML
editors: Dreamweaver, Microsoft Front Page
• For this class, we will use an “open source”
editor called: N View
• We must download and install this editor on
your local workstation
Download Open Source HTML
Editor
• Download PC version from:
•
http://net2.com/nvu/download/nvu-1.0-win32-full.zip
• Download MAC version from:
• http://net2.com/nvu/download/nvu-1.0-mac.dmg.zip
• Download other versions from:
http://net2.com/nvu/download.html
• Download the ZIP file to your Desktop, or press “open” to
install
14
Install Open Source Editor on PC
• After downloading…
• Double click on: nvu-1.0-win32-full.zip
• Extract all files to c:\temp\nvu
•Click NEXT…
•this takes about
30 seconds
Startup Editor
• Run file: c:\temp\nvu\nvu-1.0\NVU.EXE
Using the HTML Editor
• Open the file: T:\web site\index.html
Using the HTML Editor
• index.html is shown as it
would be in a web
browser
• You no longer need to
use “TAGS”, one can
simply enter text or
graphics
• By clicking on the
“Source” tab, the HTML
code can be viewed
Creating Schedule web page
• Create a new page
• Save it as: T:\web
site\schedule.html
Linking index.html to schedule
• Switch back to index.html
• Type “My Schedule” and
highlight the text
• Click on the “LINK” button
• Save the changes
Link to schedule.html
1. Click on “Choose File”
2. Choose the schedule.html file,
then click open
3. Click on OK when done
Links
• Links can be to:
– 1) Another web page
– 2) Another web site
– 3) Any type of file
• Example: a power point presentation, document,
excel file, movie file, etc.
• The link we just created is an example of
linking index.html to another “file” called:
schedule.html
Update Schedule Page
• Switch back to your
“schedule” page
• Use the “Table” icon to
create a schedule similar
to the one on the left
• Save the changes when
have finished making
changes
• Click on the “Source” tab
to see the HTML code for
the table
Publish Schedule web page
• Using the SFTP client, upload index.html
and schedule.html to public_html
• Any changes you make to the files on your
PC must be “re-uploaded” to publish the
changes
To Do During Lab
•
•
•
•
•
•
•
•
•
•
•
Create a page called: resume.html
–
If you already have a resume, download it to the T:\web site folder
Link resume.html to your index.html page
Create a power point presentation describing your ECE001, MAE001, APS001,
etc. project
–
Create a link from index.html to your presentation file
Add your Matlab results in the form of a word document from the SEAS matlab
project from week 3
Class Schedule (This semester or next semester)
Personal (Major/Interests/Photo); can be deleted after the presentation.
Major and Its Description
Link to:
–
–
–
–
Department web site
Student Activity Groups
Professional Associations
Hobbies/Interests
Customize your index.html (Professional Look)
Publish all the above files to your web site
Be prepared to present your web site, and power point presentation in two
weeks.
NOTE: All presentations should be done from the web page. Large videos may be
an exception.