1. Creating and Publishing Your own website
PC Version
SEAS 001
Professor Ahmadi

2. Project Overview Create a basic web page using a “text editor”
Publish webpage to GW school server
Edit web page using an open source HTML editor
Create three links from basic webpage to:
Your ECE001, MAE001, APS001 presentation
Your resume
Your schedule
Present web site to SEAS 001 classmates

3. Overview of Creating a Website
STEP3
STEP3
STEP2
STEP3
STEP2: Upload “publish” webpage to webserver
(at GWU: cobweb.seas.gwu.edu)
STEP1
STEP1: Create webpage
on your personal workstation
STEP3: Webpage can now be viewed anywhere on the Internet

4. Create Folder to store Webpages on Local PC
Open up “My Computer” icon
Look for the “T:” drive
Create a Folder called: website
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 website folder

5. Creating Main Webpage The main webpage 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

6. 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 webpage.
Example, to mark the TITLE of a webpage:
<title>Main Webpage</title>
Closing TAG
Opening TAG

7. Writing HTML Open Up Notepad type what you see below
Save the file as: T:\website\index.html
Open a web browser and view the file by typing:
T:\website\index.html

8. Writing HTML – Adding a Link
To add a “Link” to a webpage, we use the following TAG sequence:
<a href=" Website</a>
This will add “HYPERLINK” to your webpage
T:\website\index.html

9. Uploading webpage to webserver
To “publish” our webpage, we transfer the file: index.html to the GWU SEAS webserver
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:
Mac users:

10. Open up SFTP Client Connect to webserver
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!

11. Uploading webpage to webserver
Type in T:\website in the box at the top
Drag index.html to public_html folder
YOUR PC
SEAS Server: cobweb.seas.gwu.edu

12. Viewing your website Open a web browser, and open the web address:
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

13. HTML Editors Manually typing HTML files is tedious
To produce more interesting webpages, quickly, an HTML editor is needed
There are many different commercial HTML editors: Dreamweaver, Microsoft Front Page
For this class, we will use an “opensource” editor called: N View
We must download and install this editor on your local workstation

14. Download Open Source HTML Editor
Download PC version from:
Download MAC version from:
Download other versions from:
Download the ZIP file to your Desktop, or press “open” to install

15. 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

16. Startup Editor
Run file: c:\temp\nvu\nvu-1.0\NVU.EXE

17. Using the HTML Editor
Open the file: T:\website\index.html

18. 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

19. Creating Schedule Webpage
Create a new page
Save it as: T:\website\schedule.html

20. 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

21. Link to schedule.html 1. Click on “Choose File”
2. Choose the schedule.html file, then click open
3. Click on OK when done

22. Links
Links can be to:
1) Another webpage
2) Another website
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

23. 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

24. Publish Schedule Webpage
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

25. To Do During Lab Create a page called: resume.html
If you already have a resume, download it to the T:\website 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
Customize your index.html (add color!)
Publish all the above files to your website
Be prepared to present your website, and power point presentation next week