Creating and Publishing Your own web site

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

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

3. Overview of Creating a web site STEP3 STEP3 STEP2 STEP3 STEP2: Upload “publish” web page to web server (at GWU: cobweb.seas.gwu.edu) STEP1 STEP1: Create web page on your personal workstation STEP3: Web page can now be viewed anywhere on the Internet

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

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

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

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

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

9. 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/

10. Open up SFTP ClientConnect to web server 2. Once the SFTP Client opens, Click on the “QUICK CONNECT” button Host: cobweb.seas.gwu.edu Username: your seas username, then connect! 1. From Desktop, click on: SSH Secure File Transfer Client

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

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

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

14. Download Open Source HTML Editor • Download PC version from: http://www.seas.gwu.edu/~seas001/fall07/downloads/nvu-1.0-win32-full.zip • Download MAC version from: http://www.seas.gwu.edu/~seas001/fall07/downloads/nvu-1.0-mac.dmg • Download other versions from: http://nvudev.com/download.php • 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:\web site\index.html

18. 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 Using the HTML Editor

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

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

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

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