remote_web_site

Download Report

Transcript remote_web_site 

Creating a Remotely-Hosted Web Site
Fort Collins, CO
Creating Your First
Remotely-Hosted
Web Site
Instructor: Joseph DiVerdi, Ph.D., M.B.A.
Copyright © XTR Systems, LLC
Local vs. Remote Serving
Creating a Remotely-Hosted Web Site
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
Web Site vs. Page
Creating a Remotely-Hosted Web Site
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
New Developer Skills
Creating a Remotely-Hosted Web Site
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
Student Accounts
Creating a Remotely-Hosted Web Site
Fort Collins, CO
• Ulltra Technology-owned server
• Account at host name:
linus.ulltra.com
• HTTP access at URL:
http://linus.ulltra.com/~account_name/
• Account name is:
your last name, all lower case, no spaces
• No password (at least for now)
Copyright © XTR Systems, LLC
Creating a Remotely-Hosted Web Site
Fort Collins, CO
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
Copyright © XTR Systems, LLC
First Remote Web Page
Creating a Remotely-Hosted Web Site
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
First Remote Web Page
•
•
•
•
Creating a Remotely-Hosted Web Site
Fort Collins, CO
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
Copyright © XTR Systems, LLC
First Web Page
Creating a Remotely-Hosted Web Site
Fort Collins, CO
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>My First Page</TITLE>
</HEAD>
<BODY>
<H1>This is my first page</H1>
<H2>It's quite modest but it's sincere</H2>
</BODY>
</HTML>
Copyright © XTR Systems, LLC
First Remote Web Page
Creating a Remotely-Hosted Web Site
Fort Collins, CO
• Save file to remote server
• Test page using your most favorite browser
• Test page using your least favorite browser
– Always use both browsers
Copyright © XTR Systems, LLC
Add Simple Navigation Tool
Creating a Remotely-Hosted Web Site
Fort Collins, CO
<BODY>
<H1>This is my first page</H1>
<H2>It's quite modest but it's sincere</H2>
<DIV ALIGN=CENTER>
<HR>
<A HREF="index.html">First Page</A> |
<A HREF="second.html">Second Page</A> |
<A HREF="third.html">Third Page</A> |
<A HREF="directory/fourth.html">Fourth Page</A>
</DIV>
</BODY>
Copyright © XTR Systems, LLC
Create More Pages
Creating a Remotely-Hosted Web Site
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
fourth.html Navigation
Creating a Remotely-Hosted Web Site
Fort Collins, CO
<DIV ALIGN=CENTER>
<HR>
<A HREF="../index.html">First Page</A> |
<A HREF="../second.html">Second Page</A> |
<A HREF="../third.html">Third Page</A> |
<A HREF="fourth.html">Fourth Page</A>
</DIV>
Copyright © XTR Systems, LLC
Test, test, test, ...
Creating a Remotely-Hosted Web Site
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
Add An Image
Creating a Remotely-Hosted Web Site
Fort Collins, CO
• 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
<BODY>
<IMG WIDTH=xxx HEIGHT=xxx ALT="xxx xxx"
SRC="images/my_image.jpeg>
<H1>This is my first page</H1>
<H2>It's quite modest but it's sincere</H2>
• Note the attributes
Copyright © XTR Systems, LLC
What about fourth.html
Creating a Remotely-Hosted Web Site
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC
Using Absolute Paths
Creating a Remotely-Hosted Web Site
Fort Collins, CO
• 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
Copyright © XTR Systems, LLC