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

Creating and Publishing Your own website

  • Upload
    dagan

  • View
    23

  • Download
    0

Embed Size (px)

DESCRIPTION

Creating and Publishing Your own website. PC Version SEAS 001 Professor Ahmadi. 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: - PowerPoint PPT Presentation

Citation preview

Page 1: Creating and Publishing Your own website

Creating and Publishing Your own website

PC Version

SEAS 001

Professor Ahmadi

Page 2: Creating and Publishing Your own website

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Startup Editor

• Run file: c:\temp\nvu\nvu-1.0\NVU.EXE

Page 17: Creating and Publishing Your own website

Using the HTML Editor

• Open the file: T:\website\index.html

Page 18: Creating and Publishing Your own website

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

Creating Schedule Webpage

• Create a new page • Save it as: T:\website\

schedule.html

Page 20: Creating and Publishing Your own website

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

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

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

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

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

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