BRAND: Build-a-Web-Site Lab

Build a Website

Academic Integrity

You may not copy or submit another person’s work, nor Generative AI output*, as your own for this assignment. If you use any resource to help complete the lab - including the course notes, W3Schools, another reference website, or code you inspect from another website - you must include a comment in your webpage identifying the source(s) you used.

*Generative AI may only be used where explicitly required in the Leveraging Generative Artificial Intelligence portion of this lab. It may not be used for any other part of the assignment.

Your instructor is well aware that GenAI can complete this lab in minutes, and probably create a better website than you in the process - but that's not the point! The goal is not to make you an expert web developer; the goal is to use this as an opportunity to reinforce more fundamental material. Using GenAI as a crutch will significantly impair your learning! Furthermore, failure to follow these requirements will be considered a violation of the course’s academic honor policy. Midshipmen are persons of integrity: They stand for that which is right.

Lab Overview

Now that we have introduced some basic terms, syntax, and concepts regarding the World Wide Web and HTML, we will reinforce the material by having you build your own websites! This will involve working with HTML elements, tags, and attributes, editing and uploading files and folders, and even leveraging generative artificial intelligence. (Note: AI may only be used when and as explicitly directed - any further usage will be considered a violation of the course's honor policy.)

Successful completion of the lab will involve both creating and uploading your website, as well as uploading material and answering questions on Blackboard. Read through this webpage entirely before proceeding to Blackboard.

Web Roots, File Systems, and Servers

In the HTML lecture, you learned that a website is really a collection of files, such as HTML pages, images, JavaScript code, and more, and all those files are stored on a web server. When a client - such as you on your browser - wants to visit a site, the client makes a request to the server for those files. The URI specifies the resource you are requesting, including the path to that resource. For a simple website like the one you'll build in this lab, that path often corresponds to a file or folder within the web server's web root.

The web server hosting content is just a computer (albeit one whose hardware and software are optimized for delivering web content). All the basic components are there, though they might not look like those on your personal laptop. Like any computer, a web server has storage components and a file system made up of directories and files. Some of those files are made accessible to clients over the web. (Remember: at its core, a website is just a collection of files!)

When a web server hosts web content, the server software typically designates a specific directory within its file system to act as the web root directory. (If the server hosts multiple websites, there may be multiple web roots - one per site.) For example, Apache servers usually treat /var/www/html as the web root, while other platforms (including the one you will use in lab) may use public_html (the exact location on the file system may vary, and if the server hosts multiple websites, there may be multiple public_html folders configured to support different sites. (Review: What type of file path is /var/www/html , and for which OS? What type of filepath is public_html?)

Just as absolute file paths start at a root directory (C:\ or /), the path component of a URI starts at the web root. (One key difference: the actual name of the web root directory (e.g., public_html) is usually omitted from the URI.) Consider the screenshot below, taken from the USNA homepage.

USNA Homepage

The URI for that page is https://www.usna.edu/homepage.php. This means that inside the web root directory, there is a file named homepage.php - and when you browse to the link above, that's the file your browser is requesting, receiving, and rendering. If you look around the website (and poke around in the source code), you will find additional photos and links. For instance, the background image is located at https://www.usna.edu/_files/images/hero/Raft_water_250513-N-UG127-680.jpg and the link to the Academics page is https://www.usna.edu/Academics/index.php. (To include the image, you would typically use the <img> tag, whereas to make a link to the Academics page, you would typically us the <a> tag.) Based on these absolute links, if we assume the web root is public_html, the file system would resemble the photo below:

USNA Web Root

Relative links could have also been used; from the homepage, for instance, the Academics page could be referenced as just Academics/index.php. From the Academics page, meanwhile, the homepage background image could be referenced as ../_files/images/hero/Raft_water_250513-N-UG127-680.jpg. You can learn more about relative and absolute file paths on web servers in this article. In this lab, you will use both absolute and relative links, so make sure you understand the concept!

You might be wondering when you would use one type of image source versus another. Absolute links are required if the image is not hosted locally (e.g., it is hosted on another site). If you are hosting the image locally, relative links can make it easier to adjust content. For example, if we decide to move a course lecture around and we use relative links (like <img src="img/comp_arch.jpg">), we might just need to rename the parent folder (e.g., 01_Computer_Architecture), and we can avoid having to update all of the images on our webpage (like <img src="https://courses.cyber.usna.edu/SY110/class/01.Computer Architecture/img/comp_arch.jpg">)

Lab Setup

Before diving into web development, it will help to have two pieces of software:

  1. Notepad++ - this will serve as your text editor, allowing you to edit and save your HTML documents.
  2. WinSCP - similar to the ssh command in Lab 2, this will allow us to make a secure, remote connection to the Linux (web) server. Unlike SSH, WinSCP provides a GUI, and will allow us to neatly upload files to the Linux web server.

Both programs can be downloaded from the Software Center. To download them:

  1. Open the Software Center (type the Windows key, then search for Software Center)
  2. In the Software Center, under Applications, search for "Notepad++" and "WinSCP". Click on each program and install it.
    • If the programs do not show up in Software Center, it is possible they are already downloaded on your computer. Click the Windows key, then search for both programs directly on your computer. If they are already installed, you do not need to re-download them from the Software Center. (You can also verify if they are downloaded already by searching for the programs under the Installation Status tab of the Software Center).
    • Downloading and installation may not be instantaneous, but it should not take prohibitively long. If it appears the download is making absolutely no progress, restart your computer (make sure to save anything you have open!) and try again. You may need to restart your computer a few times (this is often required to apply various software updates, which may be needed before downloading new software).

Creating Initial Webpages

  1. Create a local folder (www)
    • On your desktop, create a folder named www. All the files and folders created for this lab will be placed in this www folder.
  2. Create your home page (index.html)
    • Open Notepad++ and copy and paste the HTML File Template (shown below) into a blank document.
    • Save this new document as index.html, and save it into the previously created www folder (on your Desktop).
      • You must name the file index.html. This is the default name for web pages in any directory on a web server. When you go to a URI without a file name at the end, the server looks for a default file 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.
      • Pay attention - case matters when naming files that will be served from a web server! This means that index.html, Index.html, and INDEX.HTML will be treated as different files on the web server.
      • Saving the file as index.html will also override Notepad++'s assumption about the file type (a text file, with a .txt extension). If you save the file properly, you should notice colors change, as Notepad++ attempts to give you visual clues to aid in using HTML properly.

      HTML File Template 
      <!DOCTYPE html>
<HTML>
  <HEAD>
    <TITLE>Title of Web Page</TITLE>
  </HEAD>

  <!--
  Comments can go here, such as any references used:
  Name:
  Alpha:
  Sources:
  etc...
  -->

  <BODY>
    Content of Web Page: Headings,
    Paragraphs, Links, Images, etc.
  </BODY>
</HTML>
  3. Add content to your webpage
    • Using Notepad++, edit your webpage to add content! This page is about you, so include information about where you are from, why you came to USNA, what you hope to service select, what you want to major in, etc.
    • You don't want your website to just be boring text, so use HTML elements to make it more interesting! This can include italicized text, bold text, and underlined text, paragraph tags (<p></p>), lists (<ol></ol> and <ul></ul> for ordered and unordered lists, respectively) with list items (<li>li> and </li>), links, and so on! A full list of requirements for your webpage is given towards the end of this page, and resources are provided to explore HTML in more depth, but for now, start with some basic experimentation! Don't forget to adjust attribute values, such as the style attribute, to change things like font types, sizes, and colors.
    • When you begin, your website just exists on your local hard drive, but you can still view the rendered HTML. To do so, you can open up your index.html from your file explorer, or click Ctrl-o (Ctrl and o (OSCAR) key at the same time) in your browser and select your index.html file. As you make edits to your file (in Notepad++), save the file, and refresh the webpage in your browser to observe the changes! (Note: Since the website is not being hosted on a server, only you can view it at the moment - not your classmates, instructor, or anyone else on the web.)
  4. Create an image folder (img) and add images to your webpage
    • Among other items, you will need to add images to your webpage. Before doing that, let's create a standardized location for your images. Inside your www folder, create a subfolder named <img>, and save any relatively-linked images there.
    • The most basic syntax for including an image on your website is:<img src="{image_locaton}">. Tying back to the earlier discussion of the web root and file systems on a server, the {image_location} value can take a few different forms. For instance, you could link to another image on the web (an absolute reference) with the following code:

      <img src="https://www.usna.edu/CyberDept/_files/images/cys_logo_sm.jpg">

      Which would be rendered as:




      Alternatively, if you had a copy of the image locally - say, in your img subfolder, you could use a relative reference:

      <img src="img/cys_logo_sm.jpg">

      Which would be rendered as:

    • Notes regarding 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.
      • For reasons that will be mentioned later, do not use the absolute file path of a local image (such as C:\Users\m309999\Desktop\www\img\img/cys_logo_sm.jpg) as the src of an image. This Windows file path will not function properly on the Linux server!
      • Spaces and case (upper vs. lowercase) will matter when naming and uploading content to the Linux server.
      • 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.
      • Apple's default image formatting (a .HEIC, or high-efficiency image file format) may not render properly on all browsers. Consider changing the image format if using a picture from an Apple device.
  5. Create a second webpage (interests.html)
    • Using the same steps for creating index.html, create a second website, named interests.html, also saved in your www folder. Again, add some content to the page, such as your interests and hobbies. Have fun with it!
    • Just like with your index.html page, you can observe the rendering of the file in your browser, although it has not been uploaded to a server for others to see yet.

Uploading Content to the Web Server

  1. Once you've added some content to both pages, it's time to upload your webpages to the server so everyone can view them. Completing this lab will be an iterative process - make some edits, verify them locally, upload your web content, check them on the server, and so on.
  2. Open the WinSCP program (click the Windows key, then search for WinSCP). The program icon is: winscp icon
  3. Fill in the login information as shown below (update the username value with your alpha), then click Save, and OK. This will save some login information (server and username) for the next time you need to login.

    4. another winscp screenshot

    another winscp screenshot

  4. Click Login, then enter your password on the prompt, then click OK.

    How to save the session screenshot

  5. 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 Lab 2.
  6. In the left pane, open your www folder, which is where all your work for this lab should reside.
  7. 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. This is your web root directory - files and folders in this public_html folder will be visible on your website!
  8. Highlight all the contents of your www folder (on the left of the WinSCP screen) and drag them into the public_html folder (on the right of the WinSCP screen). If there is already an index.html file in the folder, you will be asked about overwriting it; you may do so.
    • Drag the contents of the www folder (on your laptop), not the wwwfolder itself!
    • This is how you will update your website for this lab - make edits locally, login through WinSCP, and drag the new files onto the server. While funcitonal, it will overwrite the contents of the server - consider saving backup copies periodically, to revert to 'known good' files if needed.
  9. 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.
  10. If successful, your index page should now be accessible at https://midn.cyber.usna.edu/~m309999/index.html and your interests page should be accessible at https://midn.cyber.usna.edu/~m309999/interests.html (adjusting the alpha codes as needed). Browse to your website an verify!

Leveraging Generative Artificial Intelligence

Though most of this website will be your own creation, you will need to incorporate Generative AI (GenAI) into your website as described here. A common error students make is creating images with source attributes that point to locations on their laptop hard drives (such as src="C:\Users\m309999\Desktop\www\on_the_yard.jpg"). Unfortunately, that file path will not function properly once you copy your webpage over to the Linux server - that file path does not exist there! Instead, you will receive a broken image link: As such, we will leverage GenAI to help us avoid this common pitfall, while not simply asking it to generate our webpage for us.

Part 1: Generate an imageCheck() Function

Copy and paste the exact prompt below into a GenAI tool of your choosing (Gemini, ChatGPT, etc.). As described, the GenAI tool will (hopefully) generate a script that can help check your webpage for Windows file paths.

Write a standalone JavaScript function named imageCheck(). The function must: 1. Select all <img> tags on the current HTML page. 2. Inspect the 'src' attribute of each image for local Windows file paths (check for "C:" or backslashes "\"). 3. If an invalid path is found, trigger a browser alert saying: "Windows file path found: {first Windows file path found}" 4. If no invalid paths are found across any images, trigger a browser alert saying: "No Windows file paths found" Provide only the clean JavaScript function inside a <script> block and a brief 2-sentence explanation of how it works. Do not rewrite the rest of the HTML document.

Part 2: Add the Script and Trigger Button to index.html

Copy the generated <script> block and paste it inside the <body> section of your local index.html file. Then add the following HTML button to your index.html page, which will trigger the imageCheck() function:


<button onclick="imageCheck()";>Check Image Paths</button>

Part 3: Create and Link a Log of Your AI Interactions

AI is an incredibly powerful tool, but it's important to acknowledge its use, and to use it appropriately and responsibly. As such, you must provide a single PDF, named AI_Log.pdf that includes the following:

  1. All interactions with Gemini (including the given prompt in Part 1)
  2. Screenshots demonstrating the imageCheck() functionality working properly (e.g., show it catching an incorrect image source, and working when all images are correct.)
Once complete, you must upload your AI_Log.pdf file to the web server, and you must include a link to it on your index.html page (PDFs can be uploaded, and linked to, just like other files, such as HTML files).

Acceptable AI Usage Limits

You may only use GenAI to generate the imageCheck() function as described above, to troubleshoot any errors with incorporating it into your website, and assist with with assembling your AI_Log.pdf file. Any additional usage of AI will be considered a violation of the course honor policy.


Full Webpage Requirements

You are required to implement the following features in your web site (go back and edit your files as needed, upload the edited versions to the web server, and verify they render as desired):

Sanity Check!

Have a classmate pull up your website on their computer to verify that everything works OK. Your instructor will see exactly what your classmate sees, not how it looks on your laptop.

References

You may wish to use the following web resources to help with your HTML coding. There are plenty of additional resources available on the web - you are welcome to explore, provided you credit them, and do not simply copy and paste someone else's work.

Additionally, you may wish to check your progress with this tool. Be advised, this site does NOT guarantee a particular grade on the lab. Your instructor has full discretion in grading. Additionally, this site does not have checks for the Leveraging Generative Artificial Intelligence components, nor can it perform checks like verifying your images have been uploaded. There is no substitute for your own due diligence and attention to detail!


Website Component Checker