Build a Web Site

In this lab, you will create a personal web site which, ultimately, you will share with your friends. Your instructor will provide you with a checklist to follow as you go through the lab, but it is only a checklist. These are the instructions! For the first part of this lab, though, the site will only be on your laptop. The sharing will come later. Initially, your website will consist of two files (which should be in in a folderC:\Users\m179999\Desktop\si110\www on your laptop, which you'll have to create!):

index.html This will be the front page of your site. (The name "index.html" has a special meaning, which will be explained later.) The page is an introduction to who you are. Cover the basics of why you came to the Naval Academy and what you hope to service select some day.
interests.html This page should include information pertaining to your interests: sports, academics, clubs, music, etc.

basic layout of an html file	basic html formatting tags
<html> <head> <title>Your title here</title> </head> <body> Content of web page here </body> </html>	<h1>...</h1> - formats as a chapter heading (goes from h1 all the way to h6) <b>...</b> - formats as bold <i>...</i> - formats as italics <u>...</u> - formats as underlined <p>...</p> - formats as a separate paragraph <span style="color: #ff0000">...</span> - formats as red, check this color picker for other colors. Info on lists, tables, and much more

Note: to open your webpages just press ctrl-o in your browser and choose one of the two newly created files.

Add images

If you find a picture you like on a webpage, you can right-click on it and choose Copy Image Location/URL to get the image's URL, or you can choose Save Image As ... and save the image as a file on your machine.

To make your web page more interesting, you are going to add images. You need to choose four pictures/images. Two of them have to be stored in a directory called img within your C:\Users\m179999\SI110\www directory — of course you'll have to create the img directory. The other two images should be out on the web somewhere, and you just need the URLs for those images. Images are embedded with the img element (which has no closing tag). You give a value to the src attribute that is either a URL for the image somewhere on the web, or a relative path to the image starting from that html document's directory. So for example:

image via a full URL: ← <img src="http://intranet.usna.edu/images/facebook_icon_00115.png">
image via a relative path within your home directory: ← <img src="../../larr.png">

You need to embed your two locally saved images using relative paths, and the two images you've found on the web using URLs.

Warning! You should not use an image URL that requires a password to access! So, if you have a photo on your facebook account, don't use its URL for one of your photos. Anyone visiting your website would need your facebook username and password to actually view the thing.

Add links

One of the most fundamental properties of the web is that we can navigate from one page to another via links. You are going to add links to your pages. A link is created with the a element. The structure is like this

<a href="location-of-thing-you're-linking-to">text-that-is-clickable</a>

As with images, link locations given in the href attribute can be URLs or relative paths.

full URL link: click me ← <a href="http://oeis.org/">click me</a>
relative path within your homedirectory link: click me ← <a href="boring.html">click me</a>

You are required to add four links to your website (though encouraged to add more!) First, your index.html needs to have a link to your interests.html page, and your interests.html page needs to have a link back to your index.html. Second, you will need to add links to two of your classmates' pages. However, these will have to be added after you finish with the following section. To get started right now, you should add a link to some webpage outside of usna.

Upload to Web Server

So far, all of your work has only been on your local computers. This is convenient for the creation and modification process, but no one can see your web page yet. To let others access your web pages, we need to transfer them to the web server — in fact we'll put them on rona.cs.usna.edu, which is the same server as is hosting these notes. We'll transfer files using WinSCP, a program that should already be on your machines. If not, it can be downloaded from winscp.net.

double click on	Fill in, then click on Save	Click on OK	Login
or type WinSCP in the Windows Orb search box.

Once you are connected, you will be presented with a view of two file systems. The left panel is the file system of your local computer (your laptop). The right side is the file system of the remote system, in this case the web server rona.cs.usna.edu. In the left pane, navigate to your web page files that you've been working on. In the right pane, double click on the www folder to enter that directory. In the left pane, highlight all of the files and folders that comprise your website (hold down control and click on them one at a time) and drag them to the right pane (which should be your www directory opened). Do NOT select the entire www directory on the left...just the contents of that directory. You are duplicating the contents in the www directory on your computer into the www directory on rona. You should see an indication that the transfer is taking place. Once completed, you will see your files in the right pane, meaning that those files are now also on the web server.

Important1: recall that a process can only access a file if its owner is the same as the file's owner. You are not the owner of the webserver process, but you are the owner of your files, which means the webserver can't access your files to send them to browsers. So, you have to grant others permission to access these files. You can do this within WinSCP by right-clicking on the file (on rona) and checking the R (i.e. read permission) box next to others, as shown in the image to the right. Note that for any dirctories, you need to check X (i.e. execute), not just R.

Important2: The URL for your index.html file is http://rona.cs.usna.edu/~m179999/index.html. So, to link to your site someone would do something like this: <a href="http://rona.cs.usna.edu/~m179999/index.html">MIDN Doe</a>

Important3: If you modify files from your site on your laptop, you need to copy the new versions over to rona!

Ship Webpages Revisited

Recall, that ships and submarines do not host their websites on the ship, instead shore sites host ship and submarine websites. But we said that an Officer from the ship controls the content of the website, but how? The Web Officer uploads files from a computer on the ship to the shore server that is hosting the ship's website, just like you upload files from your laptop to rona.

Requirements of Lab

You are required to implement the following features in your web site:

Pages index.html and interests.html
A relative path link from index.html to interests.html and a relative path link from interests.html back to index.html.
full URL links to two classmates' pages
Two images via relative paths and two images via full URLs
Italicized text, bold text, and underlined text
Correct use of a paragraph tag (<p>)
Use either an ordered list (<ol>) or an unordered list (<ul>)

To spice things up a bit, embed in index.html the si110 animation:

<script type="text/Javascript" src="http://rona.cs.usna.edu/~si110/resources/lb/colorMorph.js"></script>

and the introspection window:

<script type="text/Javascript" src="http://rona.cs.usna.edu/~si110/resources/lb/introspection.js"></script>

While not required, it would be nice if you added some color. See the table at the top of the page for details.

Have a classmate pull up your rona site on their computer to verify that everything works OK. Then show your instructor so they can verify that you filled the requirements. Save these files for later in the course!

Reference

Use the following web resources to help with your HTML building.