Reference content has been updated.
Perform a full reload of the web page, press:
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.
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.
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 /
- 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.
Start-Tag Inner-HTML End-Tag
- 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.
< is used to indicate the beginning (opening) of an HTML Tag.
> 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.
- End Tag
- Marks the end of the HTML Element.
- Does not contain attributes.
/ precedes the element type after the tag opening,
- 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
- Syntax: (Mix of plain text content and/or other HTML Elements)
- 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 (
- You can think of a name-value pair as assigning the value to the attribute named name.
- 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.
- 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.
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!):
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 Tags
<TITLE>Title of Web Page</TITLE>
Content of Web Page: Headings,
Paragraphs, Links, Images, etc.
<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.
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
<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:
- First step
- Second step
See also: Lists.
- See also:
- Create your home page
Case matters when naming files that will be served from a 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).
INDEX.HTML are all different files on the web server.
- 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
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.
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.
- 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):
- 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.
- Upload to Web Server
You should go through the process of uploading your
index.html file to
, setting file permissions correctly, and viewing your
before you leave class. The URL for your front page on
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
|by double clicking on this icon on your Desktop:
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
. 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 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.
- 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.
- 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: ←
- Image via a relative path within your home directory: ←
- 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
- You can change the size of your images using the
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.
- Add links
- 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>
- 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):
- A relative path link from
interests.html and a relative path link from
interests.html back to
- 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 (
- Use either an ordered list (
<OL>) or an unordered list (
- To spice things up a bit, embed in
index.html the three SY110 animations:
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!
Use the following web resources to help with your HTML coding.