1. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC Creating Your First Remotely-Hosted Web Site Instructor: Joseph DiVerdi, Ph.D., M.B.A.

2. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC Local vs. Remote Serving A Web browser renders pages from anyplace Place an HTML file on your desktop and point your browser to it –You can view it but nobody else can –Locally served page Place an HTML file on a Web server and point your browser to it –Now everyone can view it –Remotely served page

3. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC Web Site vs. Page It is one thing to create a single free standing Web Page It is another to create a Web Site –A set of interrelated Web Pages With Navigation Tools With Common Look & Feel Extending Over Several Directories Using Site-wide Resources

4. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC New Developer Skills Able to log into a Linux server using Telnet and make changes Able to upload files from local computer to Linux server using FTP and make changes Able to quickly and efficiently edit files directly on a Linux server without making a local copy of the files

5. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC Student Accounts DTT-owned server Account at host name: sparky.xtrsystems.com HTTP access at URL: http://sparky.xtrsystems.com/~account/ Account name is: your last name, all lower case, no spaces No password (at least for now)

6. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC Student Account Setup Use Tera Term Pro to login Use username: your last name, all lower case, no spaces Change password using: passwd Logout using: logout Login to check password –You only need to perform this once in a while

7. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC First Remote Web Page Use: FTPeditor Please note that most operations are case-sensitive Make a new directory named html Check its permissions to allow server access Equivalent numeric code: 755 Equivalent abbreviated code: rwxr-xr-x owner: read write execute group: read execute world: read execute All directories must have these permissions

8. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC First Remote Web Page Navigate inside html directory Make a new file index.html Type in the contents on the next page Change its permissions to world readable Equivalent numeric code: 644 Equivalent abbreviated code: rw-r--r-- owner: read write group: read world: read All HTML files must have these permissions

9. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC First Web Page My First Page This is my first page It's quite modest but it's sincere

10. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC First Remote Web Page Save file to remote server Test page using your most favorite browser Test page using your least favorite browser –Always use both browsers

11. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC Add Simple Navigation Tool This is my first page It's quite modest but it's sincere First Page | Second Page | Third Page | Fourth Page

12. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC Create More Pages Copy index.html into second.html, etc. Edit each page appropriately –Change Title –Change H1 Create a new directory named directory Copy index.html into directory/fourth.html Edit fourth.html appropriately –Change Title –Change H1 –Change Anchors

13. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC fourth.html Navigation First Page | Second Page | Third Page | Fourth Page

14. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC Test, test, test,... Check out every link on every page –Verify that each and every one works Use a Browser –Hover over each link & examine the status bar –Click on it & confirm that it isn't a dead end

15. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC Add An Image Create a directory named images in html –Confirm the correct permissions Put an image inside of it Create a linkage to it on every page <IMG WIDTH=xxx HEIGHT=xxx ALT="xxx xxx" SRC="images/my_image.jpeg> This is my first page It's quite modest but it's sincere Note the attributes

16. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC What about fourth.html This is OK for pages in the html directory <IMG WIDTH=xxx HEIGHT=xxx ALT="xxx xxx" SRC="images/my_image.jpeg> This is OK for pages in the html/directory directory <IMG WIDTH=xxx HEIGHT=xxx ALT="xxx xxx" SRC="../images/my_image.jpeg> However, these linkages will break if the files are moved into other directories

17. Creating a Remotely-Hosted Web Site Fort Collins, CO Copyright © XTR Systems, LLC Using Absolute Paths Use an absolute path relative to the server root <IMG WIDTH=xxx HEIGHT=xxx ALT="xxx xxx" SRC="/~diverdi/images/my_image.jpeg> This will work for every directory in the site