Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.
-
Upload
eleanor-morris -
Category
Documents
-
view
221 -
download
0
Transcript of Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.
![Page 1: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/1.jpg)
Creating and Publishing Your own website
PC Version
SEAS 001
Professor Ahmadi
![Page 2: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/2.jpg)
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
![Page 3: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/3.jpg)
Overview of Creating a Website
STEP1: Create webpage on your personal workstation
STEP2: Upload “publish” webpage to webserver(at GWU: cobweb.seas.gwu.edu)
STEP2
STEP1
STEP3: Webpage can now be viewed anywhere on the
Internet
STEP3
STEP3
STEP3
![Page 4: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/4.jpg)
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
![Page 5: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/5.jpg)
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
![Page 6: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/6.jpg)
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>
Opening TAG
Closing TAG
![Page 7: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/7.jpg)
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
![Page 8: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/8.jpg)
Writing HTML – Adding a Link
• To add a “Link” to a webpage, we use the following TAG sequence:
<a href="http://www.gwu.edu">GWU Website</a>
• This will add “HYPERLINK” to your webpage
T:\website\index.html
![Page 9: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/9.jpg)
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:• 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/
![Page 10: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/10.jpg)
Open up SFTP ClientConnect to webserver
1. From Desktop, click on:SSH Secure File Transfer Client
2. Once the SFTP Client opens,Click on the “QUICK CONNECT” buttonHost: cobweb.seas.gwu.eduUsername: your seas username, then connect!
![Page 11: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/11.jpg)
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
![Page 12: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/12.jpg)
Viewing your website
• 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 willBe able to view them!
Change: tfarmer to your seas username
![Page 13: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/13.jpg)
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
![Page 14: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/14.jpg)
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
![Page 15: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/15.jpg)
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
![Page 16: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/16.jpg)
Startup Editor
• Run file: c:\temp\nvu\nvu-1.0\NVU.EXE
![Page 17: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/17.jpg)
Using the HTML Editor
• Open the file: T:\website\index.html
![Page 18: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/18.jpg)
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
![Page 19: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/19.jpg)
Creating Schedule Webpage
• Create a new page • Save it as: T:\website\
schedule.html
![Page 20: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/20.jpg)
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
![Page 21: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/21.jpg)
Link to schedule.html1. Click on “Choose File”
2. Choose the schedule.html file, then click open
3. Click on OK when done
![Page 22: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/22.jpg)
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
![Page 23: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/23.jpg)
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
![Page 24: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/24.jpg)
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
![Page 25: Creating and Publishing Your own website PC Version SEAS 001 Professor Ahmadi.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649d8d5503460f94a75057/html5/thumbnails/25.jpg)
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