/Cyber Battlefield/Build-a-Web-Site Lab

Reference content has been updated. Perform a full reload of the web page, press: Ctrl-Shift-R.

HTML Elements and HTML Tags

Before you start designing and coding your first web site we need to first explore HTML Elements and HTML Tags in more detail.

Recall that HTML source code is plain text, just like JavaScript; so we can use any text editor to create or modify HTML source code, we can use any text editor to create a web page. HTML is a different type of programming language than JavaScript; JavaScript statements lead to the execution of code, HTML is a mark up language meaning it is used to mark up content in a document. In fact HTML stands for HyperText Markup Language, HyperText refers to the linking between documents (i.e. the links on a web page). Even though HTML is a different type of programming language you will see similarities between some of the other topics we have learned about: file systems, variables. The markups in HTML specify how the content should be interpreted, and rendered by a web browser; this web page (and all the web pages on the website) are written in HTML. Tags in HTML are used to mark sections of content.

Different HTML Elements mean different things, different elements specify different types of content within the document. Before we see how different tags are rendered, we first need to discuss the syntax of HTML Elements and HTML Tags. Much like there is a syntax to JavaScript statements and shell commands, there is a syntax to HTML Elements and HTML Tags.

The below diagram illustrates the basic HTML terms; formal definitions of the terms follow the diagram.

                     ____ Start Tag _________
                    /                        \              End Tag
                   /       _Attribute Value_ | _Inner HTML_  __|
                  /       /                 \|/            \/  \
I like to shop at <A href="">Joe's Hardware</A> in Joesville.
                  |  \__/- Attribute Name                      |
                  \  |______________________|                  /
                   \         Attribute                        /
                    \________________________________________/
                                  Element
HTML Element
The block of HTML source code that includes the tags, and content between the tags.
Most HTML Elements include a start tag and an end tag, there are a few HTML Elements that only include a start tag.
Syntax: Start-Tag Inner-HTML End-Tag
E.g. <A href="https://www.google.com">LMGTFY</A>
HTML Tag
Used to mark (identify) content within an HTML document.
HTML uses a Start Tag to mark the beginning of the content, and an End Tag to mark the end of the content.
HTML Tags follow a specific syntax, start tags and end tags have a similar but different syntax.
Angle brackets (<, >) to indicate the beginning and end of an HTML Tag.
A < is used to indicate the beginning (opening) of an HTML Tag.
A > is used to indicate the end (closing) of an HTML Tag.
Start Tag
Marks the start of the HTML Element.
Start Tags may contain amplifying information about the marked content using attributes.
The element type follows the tag opening, <, the tag type indicates what kind of element the HTML Element is.
Attributes follow the element type.
Syntax: <ELEMENT-TYPE list-of-attributes>
E.g. <A href="https://www.google.com">
End Tag
Marks the end of the HTML Element.
Does not contain attributes.
A / precedes the element type after the tag opening, <.
An end tag is paired with a start tag, in the same way ( ) are paired in math and the same way { } are paired in programming languages like JavaScript.
Syntax: </ELEMENT-TYPE>
E.g. </A>
Inner HTML
The inner HTML is the content that is being marked by the start and end tags.
Inner HTML can contain other elements; that is HTML Elements can be nested in the inner HTML or a parent HTML Element, simiar to the way we can nest if statements and loops in JavaScript.
Syntax: (Mix of plain text content and/or other HTML Elements)
E.g. LMGTFY
Attribute
Used to specify amplifying information associated with the marked inner HTML.
Some attributes can be used in any HTML Element, other attributes are specific to certain HTML Elements.
Attributes appear in a start tag, valid HTML does not have attributes in end tags.
Most attributes are comprised of name-value pairs, there a a few attributes that are just a name.
An equal sign (=) is used between an attribute name and the attribute value; exactly like assigning a value to a variable in JavaScript, in fact HTML used the concept of variable assignment statements when designing name-value pairs.
You can think of a name-value pair as assigning the value to the attribute named name.
Syntax: attribute-name=value
E.g. href="https://www.google.com"
Attribute Name
Specifies the name of the attribute being set.
Appears to the left of the equal sign if a value is being assigned to the attribute.
Attribute names are a part of the HTML specification, the name of the attribute means something in HTML.
E.g. href
Attribute Value
The value being assigned to the attribute.
Appears to the right of the equal sign.
The value is interpreted based on attribute name, sometimes the value may be interpreted as a URL, sometimes as a value from a set.
E.g. "https://www.google.com"

Build-a-Web-Site

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, 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 up to '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.

Your Build-a-Web-Site worksheet is due to your instructor at the beginning of class on the day listed on the course calendar, typically a week from the date assigned.

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

Basic Layout of an HTML file Basic HTML Tags
<HTML>
  <HEAD>
    <TITLE>Title of Web Page</TITLE>
  </HEAD>
  <BODY>
    Content of Web Page: Headings,
    Paragraphs, Links, Images, etc.
  </BODY>
</HTML>
  • <BR>: Break, force a line break in the rendered content. Recall, rendered HTML compresses all contiguous white space (spaces, tabs, line breaks) in the HTML source code to a single space character.
  • <H1>...</H1>: Heading, formats as a chapter heading (goes from H1 [highest in hierarchy] all the way to H6 [lowest in hierarchy]).
  • <B>...</B>: Bold, formats text as bold.
  • <I>...</I>: Italics, formats text as italics.
  • <U>...</U>: Underline, formats text as underlined.
  • <P>...</P>: Paragraph, formats text as a paragraph (rendered line break before and after content).
  • <SPAN style="color:#FF0000;">...</SPAN>: Style, formats various attributes of content; e.g. text color red. See Color Picker for other colors.
  • Lists:

    There are two main types of HTML Lists: ordered, and unordered. An HTML List makes use of nested tags. The main list tag specifies what type of list (ordered <OL>, unordered <UL>). Within the list tags each item in the list is specified with an <LI> tag. Ordered lists are for sequential items, such as directions for dissecting a PC. Unordered lists are for non-sequential items, such as things to buy from the MIDN Store. For Example:

    <OL>
      <LI>First step</LI>
      <LI>Second step</LI>
    </OL>

    Renders as:

    1. First step
    2. Second step

    See also: Lists.

  • See also:

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 in the table 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 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.
      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 given in the table above, in the right column, 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="http:///~sy110/resources/lb/colorMorph.js"></script>
      <script type="text/Javascript" src="http:///~sy110/resources/lb/sy110Animation.js"></script>
      <script type="text/Javascript" src="http:///~sy110/resources/lb/introspection.js"></script>
    • While not required, it would be nice if you added some color - use the <span> element. See the table at the top of the page for details.
    • 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. Upload to Web Server

    You should go through the process of uploading your index.html file to , setting file permissions correctly, and viewing your index.html from before you leave class. The URL for your front page on is: http:///~yourUserName/index.html.

    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 that should already be on your laptop, you installed it at the beginning of the course. If not, it can be downloaded from the course resources page here.
      1. Open WinSCP 2. Fill in, then click on Save 3. Click on OK 4. Login
      by double clicking on this icon on your Desktop: winscp icon
      or type WinSCP in the Windows orb search box.
      another winscp screenshot 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 Extra lesson when you ssh'd 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 www folder to enter that directory.
    • 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 www directory already opened with nothing in it). 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 .
    • 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
  3. Setting Permissions - IMPORTANT!
    • 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 web server process, but you are the owner of your files, which means the web server (not a browser, but a user on that owns the web server process) 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 the side) and checking the R (i.e. read permission) box next to others, as shown in the image to the right.
    • For any directories, (like your img directory), you need to check X (i.e. execute), not just R to allow the web server to OPEN the directory. Then for each image file in that directory you will also need to check the R (i.e. read permission) box next to others.
  4. Create your second web page
    • Use Notepad++ to create a second new file using the template in the table 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 given in the table above, in the right column, 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\sy110\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="http://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="http://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: http:///~m9999/index.html replacing the 9999 with their alpha code.
  7. Also important:
    The URL for your index.html file is like: http:///~m9999/index.html. So, to link to your site someone would do something like this: <a href="http:///~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):

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!

Reference

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