BRAND: Build-a-Web-Site Lab

Build a Website




Now that you have a set of terms to use, and understand the basic syntax of HTML Elements and HTML Tags, it's time to start writing your first web site. As you go through the steps of building a web site you will use various HTML Elements, HTML Tags, and HTML Attributes. Additionally, the activity will reinforce the concepts of file systems, and client-server applications, in that you will upload the HTML documents that you write to the web server's file system so the web server process on can read the files from the file system and serve the files via HTTP across the network.

In this lab, you will create a personal web site which, ultimately, you will share with your classmates. You may wish to consult with this checklist 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 a folder C:\Users\m9999\Desktop\www on your laptop, which you'll have to create!):

Additionally, make another folder with the path C:\Users\m9999\Desktop\www\img. This is where you will put some of the pictures you use on your website.

Basic steps:

  1. Create your home page
    • Case matters when naming files that will be served from a web server. index.html, Index.html, and INDEX.HTML are all different files on the web server.
      Use Notepad++ to create a new file using the template below (copy and paste the template into the Notepad++ window).
    • If Notepad++ is not installed you can find it in the Software Center or here: Notepad++ (v.8.8.3)
      • HTML File Template 
      <!DOCTYPE html>
<HTML>
  <HEAD>
    <TITLE>Title of Web Page</TITLE>
  </HEAD>
  <BODY>
    Content of Web Page: Headings,
    Paragraphs, Links, Images, etc.
  </BODY>
</HTML>
    • Save the file to your laptop's newly created www directory with the file name index.html. Do not name your home page any other name. This is the default name for web pages in any directory on a web server. When you go to a URL without a file named at the end, the server looks for a default file, either index.html, index.htm, or default.htm , and displays that automatically, just as if you had typed in that file name in the URL. Every directory should have a default file and, for this lab, your default file name must be index.html.
    • To open your web pages just press Ctrl-o in your browser and choose the HTML file you want to have rendered by the browser. You should do this regularly as you work to check your progress!
      Now you need to add content to your web page. This page is about you, so include information about where you are from, why you came to USNA, what you hope to service select (if you have any idea yet), and any other interesting details about your life up to this point.
    • Using the various format elements discussed in class, add formatting to your text. Ensure you include at a minimum the following basic formatting elements on either your home page or your interests page (created next), or both: Italicized text, bold text, and underlined text, correct use of a paragraph tag (<p> and </p>), use either an ordered list (<ol> and </ol>) or an unordered list (<ul> and </ul>). Whichever list you create, ensure it contains more than one list item using <li> and </li>. Follow instructions on the w3schools site carefully for how to create lists. You can nest lists in lists to create outlined lists too!
    • To spice things up a bit, embed in your index.html the below sy110 animations. Copy and paste the following into your index.html file in Notepad++ (you can split the animations up or put all three together): 
      <script type="text/Javascript" src="https://courses.cyber.usna.edu/SY110/calendar.php?key=65da45dd8d4215603d0c0df4e690c49ea6c3c0c8&type=resources&event=22"></script>
      <script type="text/Javascript" src="https://courses.cyber.usna.edu/SY110/calendar.php?key=ef85e5663bd19142416072a848a2ac09a68ddbd0&type=resources&event=22"></script>
      <script type="text/Javascript" src="https://courses.cyber.usna.edu/SY110/calendar.php?key=d9a0f308b58b49b43f93dc5b61267d3a323e06b3&type=resources&event=22"></script>
    • While not required, it would be nice if you added some color - use the <span> element.
    • You can use Chrome (press ctrl-o in the browser) to view your progress and refresh the browser window when you make changes to see the results. Keep Notepad++ and this file in Notepad++ open as you move on to the next step.
  2. Check your work

    You can browse to this page and use the auto grading script to determine if your pages contain all of the required elements, or if you are still missing something.


  3. Upload to Web Server

    You should go through the process of uploading your index.html file, setting file permissions correctly, and viewing your index.html before you leave class. The URL for your front page is: https:///~{yourUserName}/index.html. Remember our convention from labs, the {}'s aren't included in the final text!

    You now have a basic web page, and enough content to upload to the web server that will host your site.

    • So far, all of your work has only been on your local computer. 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, you need to transfer them to the web server — in fact you'll put them on , which is the same server that is hosting these notes. You'll transfer files using WinSCP, a program may already be on your laptop. If not, it can either be downloaded here: WinSCP-6.5.3-Setup.exe
      1. Open WinSCP by double clicking on this icon on your Desktop: 2. Fill in, then click on Save:
      winscp icon

      or type WinSCP in the Windows search box.
      		 another winscp screenshot


      3. Click on OK: 4. Login:
      another winscp screenshot How to save the session screenshot
    • 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 . You may even recognize the files and directories there from the Operating Systems lesson when you connected via ssh to your account.
    • In the left pane, navigate to your web page files that you've been working on.
    • In the right pane, double click on the public_html folder to enter that directory. You may already have an index.html file in this folder. It is only a placeholder, and can be overwritten by with the index.html file from your laptop. All files related to your website must go in this folder!
    • In the left pane, highlight all of the files and folders that comprise your website (hold down the control (Ctrl) key and click on them one at a time), including both web pages and your img folder.
    • Drag them to the right pane (which should be your public_html directory already 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 public_html directory on .
    • 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.
    setting the permissions screenshot
  4. Create your second web page
    • Use Notepad++ to create a second new file using the template above - on the left (copy and paste the template into the Notepad++ window).
    • Save the file to your laptop's newly created www directory with the file name interests.html - watch your spelling!
    • Again, add content to your web page. This page should be about your interests: sports, academics, clubs, music, hobbies, etc. both before coming to USNA and after.
    • Use the various format elements as desired.
  5. Add images
    If you find a picture you like on a web page, you can right-click on it and choose Copy Image URL to get the image's URL, or you can choose Save Image As ... and save the image as a file on your machine.
    Spaces matters when naming files that will be served from a web server. You should not use spaces in directory or file names that will be served from a web server.
    • To make your web pages more interesting, you are going to add images. You need to choose at least four pictures/images. Two must be linked using a relative path to a locally stored image, two must be linked using an absolute path (full URL) to images on the web.
    • Create a new directory called img within your C:\Users\m9999\www directory. You need to put at least two images in this directory. These are locally stored images, you can use relative paths to reference the location of these files.
    • One of the images you link to that is locally stored shall be a picture of you on the Yard. It is recommended that you use your smart phone and email it to yourself; if you do not have a smart phone, collaborate with a classmate to take the picture.
    • The other two images should be out on the web somewhere, and you just need the URLs for those images.
    • Images are embedded into your web pages with the img tag, which only has a start tag, no end 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 the HTML document's [current working] directory on the web server. So for example:
      • Image via a full URL: facebook icon←<img src="https://www.usna.edu/templates/standardv2/images/fb_32.png">
      • Image via a relative path within your home directory: a left pointing arrow←<img src="img/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 absolute paths (full URLs). Watch out for spaces in file names!
    • 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 image. Download the file to your img directory.
    • You can change the size of your images using the width or height attributes, which are placed in the img tag. Use this link for more information. Do not change both width and height for an image, because your image will be distorted or warped.
  6. 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 or anchor 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 relative paths or absolute paths which are URLs. Absolute URLs contain all the parts of a URL, the protocol, the server, and the file system path!
      • Absolute Reference: click me←<A href="https://oeis.org/">click me</A>
      • Relative Reference: 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 relative link to your interests.html page, and your interests.html page needs to have a relative link back to your index.html.
      Second, you will need to add links to two of your classmates' pages. The links to classmates pages won't work until they upload their web pages to the web server. You will need to use absolute reference, full URLs, to link to their web pages. Their web page URLs will be similar to yours, except for their alpha code. So, if you ask a classmate for their alpha code, then you can make the href: https:///~m9999/index.html replacing the 9999 with their alpha code.
  7. Also important:
    The URL for your index.html file is like: https:///~m9999/index.html. So, to link to your site someone would do something like this: <a href="https:///~m9999/index.html">MIDN Doe</a>
  8. If you modify files for your site on your laptop, you need to copy the new versions over to !

Ship Web Pages Revisited


Recall, that ships and submarines do not host their web sites on the ship, instead shore sites host ship and submarine web sites. 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 .

Requirements of Lab

You are required to implement the following features in your web site (go back and edit your files, as needed to ensure you include all elements):
  • 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
    • One of the images shall be a picture of you on the Yard
  • Italicized text, bold text, and underlined text
  • A set of paragraph tags (<P>...</P>)
  • Use either an ordered list (<OL>) or an unordered list (<UL>)
  • To spice things up a bit, embed in index.html the three SY110 animations: 
    <SCRIPT type="text/javascript" src="https://courses.cyber.usna.edu/SY110/calendar.php?key=65da45dd8d4215603d0c0df4e690c49ea6c3c0c8&type=resources&event=22"></SCRIPT>
    <SCRIPT type="text/javascript" src="https://courses.cyber.usna.edu/SY110/calendar.php?key=ef85e5663bd19142416072a848a2ac09a68ddbd0&type=resources&event=22"></SCRIPT>
    <SCRIPT type="text/javascript" src="https://courses.cyber.usna.edu/SY110/calendar.php?key=d9a0f308b58b49b43f93dc5b61267d3a323e06b3&type=resources&event=22"></SCRIPT>

Have a classmate pull up your 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!

References

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

Website Checklist

Website Grading Script

(note: this tool is to assist you on your lab, it DOES NOT guarantee any grade on the website lab)

HTML Guide