2. More HTML Tags

Comment Tags | List Tags | Table Tags

Comment Tags

Comment tags are used to write something in the HTML file that is meant to be read by the person editing the HTML document which may be you, or in a work environment, someone else working on the web design project. The information that you might write in the comment tags might identify what section of the document follows, why you used a particular tag, or a reminder of what standard you were following. In bigger projects, particularly when many people are on the team, the comments become critical to the person trying to edit someone else's work. Even for an individual though, it easy to forget how you were approaching the document.

The following example shows the syntax. It is different than a p tag in that the text is in the middle of the tag, between the < and > rather than between a beginning and ending tag. Your comments would be written when the example shows My comment. Note the browser will simply ignore the text in these tags. They are just for the person editing the page.

<!-- My comment. -->

Return to top of page.

List Tags

Want to include a list on your page? It could be a bullet list or some numbered items. It can even include sub bullets, meaning secondary bullet items under the main bullet items. To make a list just use the list tags. The only new concept compared with the tags above is the the list as a whole has begin and end tags while each item within the list also has its own begin and end tags. So the list and list item tags work together to give a working list.

The example below use the begin and end tags for the unordered list or ul. The unordered list is a bullet point list. Substitute ol for ordered list and it will be numbered. In both cases, the list items are delimited with the li tags. Be careful of the order here. Each begin li tag must have an end li tag before the next li can begin and all the li tags need to be within the ul (or ol) tags.

 

<ul>

  <li>The Saints</li>

  <li>The Patriots</li>

</ul>

The Saints

The Patriots

It should also be pointed out that it is possible to put a list within a list to make a list after some or all of the main list items. Look at the next example where the players are set up as lists within the main list.

 

<ul>

   <li>The Saints</li>

   <ul>

      <li>Quarterback: Drew Breeze</li>

   </ul>

   <li>The Patriots</li>

   <ul>

      <li>Quarterback: Tom Brady</li>

   </ul>

</ul>

The Saints

Quarterback: Drew Breeze

The Patriots

Quarterback: Tom Brady

Make note of the indentation in the above example. The example shows three space characters for each level of indentation. The importace of indentation is to see how the beginning and ending tags match so you can keep that straight when you have several tags nested within other tags. Note also, each tag must be fully nested within another tag meaning the cloding tag of the inner start tag must be before the closing tag of the outer end tag. A little like matching the parenthsis in algebra.

 

Table Tags

Table tags are used, well, to make tables, but they can be used for more. So a typical table with column headings and rows of data would be a good example of the use of table tag. Table tags were used to present the Saints stats on the Saints Stats page. If you use a browser to view the source for that page, you can search for the comment "Start Team Statistics" to find where the table tags are being used. Note also, that page shows a good use of the comment tags as well.

In the past, table tags were used extensively for page layout. So if you think of the columns and rows of a table, if you were to put whole sections of s document in the cells, you could create the parts of web page and make it look like CNN.com. For example the top row of the table could really be your page header information or logo and the second row might be your menu. Today, the div tag is the better way to go for page layout. The div tag will be described later in this document. This is just an alert that you may find web pages coded using the table tags for page layout.

The table tags, somewhat like the list tags, have multiple levels of tags nested within each other. Again, notice that indentation helps line up begin and end tags. The begin and end table tags surround the entire table. The table is then developed row wise. The tr tags begin and end the definition of a row. Within a row, the columns are defined. Two different way fo definging the columns are the th and td tags. They are similar except that th is intended for table headings and the text defaults to bold. td is intended for a data cell which defaults to not bold.

 

Notice also the border attribute. Many tags have attributes within the start tag that modify its options. The border attribute sets the size of the border drawn around cells. If it is left out, it defaults to 0 so there is no line around the cells which sometimes looks better. I set it to 1 here to show how the borders are different in the next two examples.

Table Example

Sometimes a cell, column, or row needs to span multiple columns or rows. Within the td tag you can specify a value for rowspan or colspan which are the numbers of rows or columns that need to be spanned instead of the default 1. Look at the Data Col. 1 cell. It uses rowspan="2" so that it is 2 rows high. Then look Data Col. 2. It is two columns wide. You can see when the third row id defined, the first cell ends up in column 2 because the row above it already defined the first cell as being double height. When coding this, it can be confusing to keep rows and columns straight, therefore you may want to go back to my advice in doing this piece wise. Just enter the first row or the first span and see if it works right. If it does, add on.

 

<table border="1">

   <tr>

      <th>Heading Col. 1</th>

      <th>Heading Col. 2</th>

      <th>Heading Col. 3</th>

   </tr>

   <tr>

      <td rowspan="2">Data Col. 1</td>

      <td colspan="2">Data Col. 2</td>

   </tr>

   <tr>

      <td>Data Col. 2</td>

      <td>Data Col. 3</td>

   </tr>

</table>

Heading Col. 1 Heading Col. 2 Heading Col. 3

Data Col. 1 Data Col. 2

Data Col. 2 Data Col. 3

The Links that Make the Web a Web - <a> tags

 

Now that you know what tags and attributes are in general, it becomes easier to exaplain new tags such as the <a> tag. The tag name is a. The href attribute is assigned the value of the URL of the link and the text between the beginning and ending tag is what is displayed on the screen as a link.

 

See the example below where the href attribute was set to the URL of the CNN web site while the text that is displayed to the user is just CNN.

 

<a href="http://www.cnn.com">CNN</a>

CNN

A tags can also be used to link within a page. That is how I set up the table of contents for this page. The location on the page is defined by the <a> tag with an id attribute. The link is defined by an a tag with the href attribute where the URL has a # symbol and the id to link to.

 

The first line below is how I defined the Introduction heading. The <a> tag is inside the <h2> tag because I was also formatting it as a first level heading. The second line shows how I link to it in the table of contents and the third line shows and example of the link.

 

<h2><a id="A1">Introduction to HTML</a></h2>

<a href="#Introduction">Introduction</a>

Introduction

Using <a> Tags to Make a Web Site

 

A web site is nothing more than a collection of web pages linked together. The separate pages are often stored in the same folder or possible within folders with the root folder. The pages are then linked together with <a> tags. For example, the menu often seen at the top of a web site that lets the user select between the different pages of the site is done with <a> tags.

 

In the case of a web site menu, the <a> tags link to other pages on the site, instead of completely different sites. The below example shows how the <a> tag would be used in a menu. The main difference is that the href parameter has a relative URL. The above example, pointing to CNN was an absolute URL. The difference is the absolute URL shows the complete exact link to a page on the web. The relative URL assumes the page is in the same place as the page that it was linked from. So the link below only works if apage.html is on the same server and in the same folder as this page. Note that when used as a menu, usually the menu is written for one page first and then copied to the other pages so that all menus look consistent.

 

<a href="apage.html">Go to page 2 of site</a>

Go to page 2 of site

The Phrase Tags b, strong, i, and em

 

The tags described in the prevous section are considered block tags because they occupy a rectanglular space. The p and h1 tags are considered block tags as they occupy a rectenagualr space. The body tag is also a block tag because it defines a rectangualr space within which the the other rectangles can be placed. If this defintion sounds a little vague at this point, that's fine. Later we will discuss th eblock model that will make those rectangles visible on the web page.

 

Phrase tags, on the other hand, do not define a block, but change the look of a portion of the text within a block. They can be used for highlighting or emphasizng a work or phrase within text. For example, keywords are often shown in bold using the <b> tags. For example:

 

<p>This text will explain <b>HTML</b>.<p>

This text will explain HTML.

 

The strong, i, and em phrase tags are coded in the same way as the b tag. The strong tag generally is rendered in the same way as the b tag. The i and em tags are generally rendered as italics.

 

Semantics vs. Style

 

Semantics referes to the meaing or role of piece of information and style referes to how it looks on the screen. As new HTML coders, we usually think about getting the page to look right, but the HTML language is designed to identify what the things are on the screen and not how they look. That is why we identify a top level heading with the h1 tag rather than sepcifying its font size and font weight. Ideally we just want to identify what it is so that the browser can then decide what a top level heading should look like. This is an important point in cross-platform compatibility because it allows the browser on a mobile device to display an element, such as an h1 element, differently than the browser on a desktop platform.

 

The Cascading Style Sheets (CSS) allow you to define a style to be used for an element. By defining the style in a separate document, the style can be used for mutiple page or sites that should look alike and can be changed easily if a different style in need for a different device. CSS is covered later in this page.

 

Note that one point where the semantic rules get a little fuzzy is with the b tag where the b stands for bold. Technically bold is a style, not a meaning. In early drafts of HTML 5 it was thought that the b tag should be replaced with the strong tag. Strong having a sematic meaning of something that is strongly emphasized. Later people made the argument that b and strong have different meanings. Strong is something that needs stong emphasis such as in the command "Use a potholder, the pan wil be hot!" Where as b is used to point out an important term as in the phrase "This section will introduce students to HTML." On most browsers will display both as the same bold, but they are coded with their respective tags. This brief discussin was intended to point out the strange way that b is considered semantic. A good article describing it in more depth is "Bold, italic, em and strong. Understanding the difference between these HTML tags".

 

Images

 

Most sites often have imageseither as specific content or has a way to make the site look cool. Although, you see the image embedded in the web page, it is not in the HTML file. The HTML file only has the ability to reference an image stored in its own file and cannot literally store the image in the same file. The image tag written <img> is used to reference the image, either on the same site or located on another site.

 

An imporatnt attribute of the img tag is href. href is assigned the location of the image file. If the image is stored in the same folder as the html file, it can be referenced by simply its file name. If an image is stored in a folder within the folder conataing the html file, then the reference needs to include the folder name and the file name. Both of those types of references are called relative references because they are realtive to the original file. If the file is on another web server, then the full URL of the file is used for the reference. In this case it would be called an absolute reference because it is the full name of the reference and it does not matter where the HTML file is.

 

Height and width attributes determine the height and width that the image is displayed. If the original image has different dimensions, then it is scaled by the browser. In some cases, it may be safer to scale the image to the size needed using an image edtting because you would have more control over how it is scaled.

 

The alt attribute is used for text that is displayed while the image is loading. It is particularly useful if the download is slow or there is an error displaying the image because the user will see the text and have some idea what should have been displayed.

 

The examples below show the OldStateCap jpeg displayed using realtive references. In the the first case, the file would need to be in the same folder as this html page that is referencing it. In the second case, an images folder is conatined with the folder that has the HTML file. In both cases, the image is displayed the same as shown below. Note that the line break within the tag was used because of the width of this document. In general, line breaks can occur between most pieces of the tag. They should not occur between the quotation marks becuase then the line break and other characters would be considered part of the quote.

 

<img src="OldStateCap.jpg" alt="Old State Capital, Baton Rouge"

   height="200" width="200">

<img src="images/OldStateCap.jpg" alt="Old State Capital, Baton Rouge"

   height="200" width="200">

Old State Capital, Baton Rouge

In the example below, an absolute reference is used for the image. Notice that when only the height attribute is named, the width is scaled proportionatly. The reference itself should not be broken across line. It is shown that way below because it is longer than the width of the wriing area.

 

<img src="http://www.americanbluesscene.com/wp-content/uploads/2013/05/Rolling-Stones.jpg"

   alt="The Rolling Stones" height="200">

The Rolling Stones

 

MANG 3788 course available online for credit at University of New Orleans (Summer 2016)