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-gtNew 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
• lttitlegtMain web pagelt/titlegt

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
• lta href"http//www.gwu.edu"gtGWU web sitelt/agt
• 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 SEASs 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
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 U
sername your seas username, then connect!
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.htm
  l

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//net2.com/nvu/download/nvu-1.0-win32-full.z
  ip
• Download MAC version from
• http//bluegriffon.org/freshmeat/1.5.2/bluegriffon
  -1.5.2.mac.dmg
• Download other versions from http//net2.com/nvu/
  download.html
• 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
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 web page

• Create a new page
• Save it as T\web site\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 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
  ECE, MAE, EMSE, 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 weeks
  2 and 5
• Class Schedule (This semester or next semester)
• Personal (Major/Interests/Photo) can be deleted
  after the presentation.
• Major and Its Description
• Links 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 on Dec. 7th
• NOTE All presentations MUST be done from the web
  page. Large videos may be an exception. (We
  recommend uploading videos to YouTube for easy
  access)
• NOTE This is the suggested assignment for your
  work during the lab. However, please refer to the
  project presentation and report guidelines for
  the detailed list of required content for your
  webpage.