Benchmark: ThisThatCouture - MeasureThat.net

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<table border="0" width="100%">
<tr>
	<td><img src="../Images/slis_logo_06.gif" align="left" alt="[IMAGE] IU SLIS logo" /></td>
</tr>
<tr>
	<td height="5"><br /></td>
</tr>
<tr>
	<td align="center"><img src="../Images/demologo.gif" width="700" height="110" usemap="#demo" border="0" alt="Demo page logo" /></td>
</tr>
</table>

<map name="demo">
<area shape="rect" coords="57,26,360,52" href="DemoCon.html" />
<area shape="rect" coords="390,0,645,21" href="../L571/syll/syll16.html" />
<area shape="default" nohref="nohref" />
</map>

<h2>Paired and Unpaired Tags</h2> 

The <b>purpose</b> of this page is to demonstrate some of the features of <b>html</b> that you should be using in your work.
<p>
The following <b>tables</b> will help you move around this page (which is quite long). Clicking on any <b>cell</b> in the first <b>table</b> will take you to that section of the page. Click on any <b>cell</b> in the second <b>table</b> will take you to an explanation of that <b>tag</b>. 
</p>
<p>
<a name="45">There</a> is a link <b>&lt;</b><font size="2">Return to <b>top</b></font><b>&gt;</b> which will return you to these <b>tables</b>. 
</p>
<p>

<table border="2" width="100%" bordercolor="#000000">
<caption><b>Major sections</b></a></caption>
<tr>
	<td><a href="html.html">What</a> is HTML?</td>
	<td><a href="#11">How</a> HTML works</td>
	<td><a href="#12">Unpaired tags</a></td>
	<td><a href="#13">Paired tags</a></td>
	<td><a href="Demo13.html">Examples</a></td>
	<td><a href="UNIX.html">UNIX help</a></td>
</tr>
</table>

</p>
<p>

<table border="2" width="100%" align="center" bordercolor="#000000">
<caption><b>HTML Tags</b></caption>
<tr>
	<th bgcolor="black"><font color="#ffffff">unpaired tags</font></th>
	<td><a href="#47">&lt;doctype&gt;</a></td>
	<td><a href="#16">&lt;br&gt;</a></td>
	<td><a href="#17">&lt;hr&gt;</a></td>
	<td><a href="#18">&lt;basefont<font color="#ff0000">*</font>&gt;</a></td>
	<td><a href="#19">&lt;meta&gt;</a></td>
</tr>
<tr>
	<th rowspan=6 bgcolor="black" valign="top"><font color="#ffffff">paired tags</font></th>
	<td><a href="#20">&lt;html&gt;</a></td>
	<td><a href="#21">&lt;head&gt;</a></td>
	<td><a href="#22">&lt;title&gt;</a></td>
	<td><a href="#23">&lt;body&gt;</a></td>
	<td><a href="#15">&lt;p&gt;</a></td>
</tr>
<tr>
	<td><a href="#25">&lt;h#&gt;</a></td>
	<td><a href="#26">&lt;address&gt;</a></td>
	<td><a href="#27">&lt;nobr&gt;</a></td>
	<td><a href="#28">&lt;center<font color="#ff0000">*</font>&gt;</a></td>
	<td><a href="#29">&lt;blockquote&gt;</a></td>
</tr>
<tr>
	<td><a href="#30">&lt;pre&gt;</a></td>
	<td><a href="#31">&lt;font<font color="#ff0000">*</font></a>&gt;</td>
	<td><a href="#32">&lt;b&gt;</a></td>
	<td><a href="#33">&lt;i&gt;</a></td>
	<td><a href="#34">&lt;big&gt;</a></td>
</tr>
<tr>
	<td><a href="#35">&lt;small&gt;</a></td>
	<td><a href="#36">&lt;strike<font color="#ff0000">*</font>&gt;</a></td>
	<td><a href="#37">&lt;sub&gt;</a></td>
	<td><a href="#38">&lt;sup&gt;</a></td>
	<td><a href="#39">&lt;tt&gt;</a></td>
</tr>
<tr>
	<td><a href="#48">&lt;samp&gt;</a></td>
	<td><a href="#40">&lt;u<font color="#ff0000">*</font>&gt;</a></td>
	<td><a href="#41">&lt;cite&gt;</a></td>
	<td><a href="#42">&lt;code&gt;</a></td>
	<td><a href="#43">&lt;em&gt;</a></td>
</tr>
<tr>
	<td><a href="#46">&lt;lists&gt;</a></td>
	<td><a href="#24">&lt;div&gt;</a></td>
	<td><a href="#44">&lt;strong&gt;</a></td>
	<td><br /></td>
	<td><br /></td>
</tr>
</table>

<br />
<br />
<br />

<h2><a name="11">How</a> HTML works</h2>

Basic markup involves the use of a set of tags, which can be described intwo ways. 
<ul>
<p>
<li>First, there are <b>block-level</b> and <b>inline</b> tags. A <b>block-level</b> tag will be interpreted by the browser as having a line break, so you don't have to include one. Examples include <b>&lt;h#&gt</b>;, and <b>&lt;ul&gt;</b>. An <b>inline</b> tag does not have an automatic line break. Examples include <b>&lt;b&gt;</b>, and <b>&lt;img&gt;</b>.</li>
</p>
<p>
<li>Second, there are <b>paired</b> and <b>unpaired</b> tags. Unpaired tags are opened and do not have to be closed. They stand alone. Examples include <b>&lt;b&gt</b>;, and <b>&lt;img&gt;</b>. <b>Paired</b> tags must always be opened and closed. A front slash <b>&lt;/&gt;</b> is used to close the pair. Examples include <b>&lt;DOCTYPE&gt;</b>, and <b>&lt;hr&gt;</b>.</li>
</p>
</ul>
<p>
Tags can be modified with <b>attributes</b> which have <b>values</b>. Before looking at some of these tags, a word or two about <b>attributes</b>; these are elements of <b>HTML</b> that allow you to have more control over the way your pages look. For example, instead of simply placing a horizontal rule &lt;<b>hr</b>&gt; on the page and letting it take the default value, you can specify its length and alignment using <b>attributes</b> with different <b>values</b>.
</p>
<p>
The generic form of an attribute is:
</p>
<p>
<blockquote>
&lt;<b>html_tag attribute="value"</b>&gt;
</blockquote>
</p>
<p>
So, in the example mentioned above, to instruct the browser to display a horizontal line that will extend across three-quarters of the page from the left margin, you would use:
</p>
<p>
<blockquote>
&lt;<b>hr width="75%" align="left"</b>&gt;
</blockquote>
</p>
<p>
As we go through some of the common forms of <b>HTML</b> markup, you will notice that many tags have sets of <b>attributes</b> that you can use. 
</p>
<p>
As you get better at marking up documents, you'll begin to experiment with 
<b>nesting</b> tags. This means that you can instruct a browser to display an 
element of your page with multiple effects. For example, you can make a phrase 
</p>

<center>
<p>
<font size="5"><b>larger and bold</b></font> 
</p>
<p>
or 
<p>
<font size="1"><i>smaller and italicized</i></font>.
</p>
</center>

<p>
What you must remember is that you should end your <b>nested</b> tags in the exact reverse order as you started them. The markup for the first example above would then look like this:
</p>
<p>
<blockquote>
&lt;<b>font size="5"</b>&gt;&lt;<b>b</b>&gt;larger and bold&lt;<b>/b</b>&gt;&lt;<b>/font</b>&gt;
</blockquote>
</p>
<p> 
You can include <b>comments</b> within your html markup that will not be displayed by the browser. You can use this tag to place information about the document (or you) that only will be visible to people who view your source markup. It is also possible to include commands that instruct servers that access your page to perform different functions (which is beyond what we will do here).
</p>
<p>
The <b>comment</b> tag uses an opening markup of <b>&lt;!--</b> and a closing of <b>--&gt;</b>.  There must be one space after the second <b>-</b> of the opening markup and one space before the closing <b>-</b>. The comment is the text that appears in between the markup.  Here's an example of a <b>comment</b> used in these demonstration pages:
</p>
<p>
<blockquote>
<b>&lt;!--</b> These pages are intended to help you learn HTML markup<b> --&gt;</b> 
</blockquote> 
</p>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<h2>Some common markup tags (unpaired and paired)</h2> 

Some of the common tags are:
<p>
<font size="4"><b><a name="12">Unpaired</a></b></font>, which appear alone in your markup. These include:
</p>
<p>
<ul>
<li><a name="47"><b>&lt;DOCTYPE&gt;</b></a> This <b>unpaired tag</b> is actually the first line of your <b>HTML</b> document. This tag is important because it alerts the browser that is accessing your page that you are using a particular version of <b>HTML</b>. This tag is <b>required</b> in all <b>HTML</b> pages. Since we will be working mostly with <b>HTML 4.01</b>, this is the <b>DOCTYPE</b> we will use:
</p>
<blockquote>
<p>
<b>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;<br />
"http://www.w3.org/TR/html4/loose.dtd"&gt;</b>
</p>
<p>
<b>!DOCTYPE</b> identifies the document as having a specific type
</p>
<p>
<b>HTML PUBLIC</b> specifies the document type as an <b>HTML</b> file
</p>
<p>
<b>"//W3C//DTD HTML 4.0 Transitional//EN"</b> further specifies that the file uses elements defined in the World Wide Web Consortium's document type definition (DTD) for <b>HTML 4.0</b>. The term <b>Transitional</b> means that the document still used some <b>deprecated</b> elements
</p>
<p>
<b>"http://www.w3.org/TR/html4/loose.dtd"</b> is the locatioon of the <b>DTD</b> that describes this bersion of the markup language
</p>
</blockquote>
<p>
You can cut and paste this declaration and those tht follow directly into your <b>HTML</b> and <b>XHTML</b> documents.
</p>
There is a version of this tag that we must use when we work with strict <b>HTML 4.01</b>. This means that we are following the rules of this version and are not using any <b>deprecated</b> tags. When you have clean <b>CSS</b> markup, this would be the <b>DOCTYPE</b> declaration that you would use:
</p>
<p>
<blockquote>
<p>
<b>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"&gt;</b>
</p>
</blockquote>
<p>
There is also a version to use when following the rules of <b>HTML 4.01</b> and using <b>frames</b>:
</p>
<p>
<blockquote>
<p>
<b>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"&gt;</b>
</p>
</blockquote>
<p>
There is another set of <b>DOCTYPE</b> declarations for use with <b>XHTML</b>. There is one for <b>transitional XHTNML</b>, where you are following the rules of this version but using some <b>deprecated</b> tags:
<p>
<blockquote>
<p>
<b>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /&gt;</b>
</p>
</blockquote>
<p>
There is a version to use when closely following the rules of this version of the markup language:
</p>
<p>
<blockquote>
<p>
<b>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" /&gt;</b>
</p>
</blockquote>
<p>
Finally, there is a version to use with <b>frames</b>:
</p>
<p>
<blockquote>
<p>
<b>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" /&gt;</b>
</p>
</blockquote></li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="16">br</a>&gt;</b><br /> 
[In <b>XHTML</b>: <b>&lt;br /&gt;</b>]
</p>
<p> 
Use <b>line breaks</b> to control the way in which you want the text to appear on the screen. The <b>&lt;br&gt;</b> tag is used in this sentence to break the line here<br /> 
exactly where you want it to break - in this case, after the word "here". 
</p>
<p>
The amount of space that is inserted by the browser after a line break<br />
is much less than the amount of space that is inserted 
</p>
<p>
after a paragraph break.
</p>
<p>
The <b>&lt;br&gt;</b> tag takes one <b>attribute</b> called <b>&lt;clear&gt;</b>, which is often used in conjunction with <b>images</b> (which we'll get to on another page). This <b>attribute</b> will cause the text to break around an image and continue below it, relative to the appropriate page margin. It takes three <b>values</b>:
</p>
<ol>
<p>
<li><b>&lt;br clear="left"&gt;</b> Use this tag if the image is aligned along the left margin</li>
</p>
<p>
<li><b>&lt;br clear="right"&gt;</b> Use this tag if the image is aligned along the right margin </li>
</p>
<p>
<li><b>&lt;br clear=all&gt;</b>Use this tag if there are images aligned along both margins</li>
</p>
</ol></li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="17">hr</a>&gt;</b><br /> 
[In <b>XHTML</b>: <b>&lt;hr /&gt;</b>]
</p>
<p>
<a name="2">Horizontal</a> rule, to which <b>attributes</b> can be added, such as: 
</p>
<p>
<ol>
<li>aligned left, right, and center <b>&lt;hr align="direction"&gt;</b></li>
</p>
<p>
<li>Adjusted for size <b>&lt;hr size="n"&gt;</b>, where <b>n</b> is the <b>size</b> in pixels</li>
</p>
<p>
<li>Adjusted for width <b>&lt;hr width="w"&gt;</b> where <b>w</b> is the <b>width</b> in pixels or a percentage of the width of the page</li>
</p>
<p>
<li>Made a solid bar <b>&lt;hr noshade&gt;</b><br />
[In <b>XHTML</b>: <b>&lt;hr noshade="noshade" /&gt;</b>]</li>
</p>
</ol>
<p>
There are different types of <b>horizontal rules</b> on the <a href="Demo13.html#1">example</a> page.</li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="18">basefont <font color="#ff0000">*</font></a> size=n&gt;</b> This sets the <b>font size</b> for the entire page based on a value from <b>1</b> to <b>7</b>, with <b>3</b> being the default. This is the <b>absolute</b> value for the tag. This tag has been <font color="#ff0000">deprecated</font> in <b>HTML 4.01</b>.
<p>
You can use a <b>relative value</b> for the <b>basefont</b> by using a <b>size="+ or -n"</b>. This will be displayed by the browser relative to the default <b>font size</b>, which is 3. <b>basefont size="+2"</b> would produce a <b>font size</b> of 5.
</p>
<p>
You should only have one <b>basefont</b> tag on the page, and it should be placed after the opening <b>body</b> tag. The markup might look like this:
</p>
<blockquote>
<p>
<b>&lt;body&gt;<br />
&lt;basefont size="4"&gt;</b>
</p>
</blockquote>
<p>
The <b>basefont</b> tag only affects text. It will not affect the text that is enclosed in certain other tags, for example, text in a paired <b>H#</b> tag or in a <b>table</b>.</li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="19">meta</a>&gt;</b><br /> 
[In <b>XHTML</b>: <b>&lt;meta /&gt;</b>]
</p>
<p>
The <b>meta</b> tag must be included within the document's <b>header</b> and is used to supply additional information about your document which is sent out to the remote server by your server, just before it sends out the document. This information is supplied by including one or more of the following <b>attributes</b>.
</p>
<ol>
<p>
<li><b>&lt;http-equiv&gt;</b> This <b>attribute</b> will supply information to the server through which another browser is attempting to access your page. The default information defines your document as <b>content-type: text/html</b>.
</p>
<p>
A required <b>http-equiv</b> declaration that should be in every <b>HTML</b> or <b>CXHTML</b> page that you write specifies the <b>character encoding</b> that you are using. This information allows a browser to correctoyl render your page. Use this one:
</p>
<blockquote>
<p>
<b>&lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;</b>
</p>
</blockquote>
<p>
You can copy and paste this declaration directly into the <b>&lt;head&gt;</b> container in your pages.
</p>
<p>
You could also use this tag to indicate that such information as <b>keywords</b>, or <b>author's name</b> is available.</li>
</p>
<p>
<li><b>&lt;name&gt;</b> This <b>attribute</b> can also be used to define the types of information that will be sent to the server through which the browser is requesting your page. 
</p>
<p>
Note that you must use either the <b>&lt;http-equiv&gt;</b> tag or the <b>&lt;name&gt;</b> tag, but <b>not</b> both. In addition, many servers cannot process this information and will ignore it.</li>
</p>
<p>
<li><b>&lt;content&gt;</b> This <b>attribute</b> provides the <b>values</b> associated with the names defined by  <b>&lt;http-equiv&gt;</b> or <b>&lt;name&gt;</b>
</p>
</ol>
<p>
For example, to include several keywords for this document, the author's name, and the date it expires, the following markup would be used:
</p>
<blockquote>
<p>
&lt;<b>meta http-equiv</b>="keywords" <b>content</b>="html, paired, unpaired
tags"<b>&gt;<br />
&lt;meta name</b>="author" <b>content</b>="Rosenbaum"<b>&gt;<br />
&lt;meta name</b>="expires" <b>content</b>="1 Jan 2006"<b>&gt;</b>
</p>
</blockquote>
<p>
If using <b>XHTML</b>, the markup would look like this:
</p>
<blockquote>
<p>
&lt;<b>meta http-equiv</b>="keywords" <b>content</b>="html, paired, unpaired
tags" <b>/&gt;<br />
&lt;meta name</b>="author" <b>content</b>="Rosenbaum" <b>/&gt;<br />
&lt;meta name</b>="expires" <b>content</b>="1 Jan 2006" <b>/&gt;</b>
</p>
</blockquote>
<p>
The information sent to server through which the browser is requesting your page would be:
</p>
<blockquote>
<p>
<b>content-type:</b> text/html<br />
<b>keywords:</b> html, paired, unpaired, tags<br />
<b>author:</b> Rosenbaum</br />
<b>expires:</b> 1 Jan 2006
</p>
</blockquote>
<p>
<a name="Back">For</a> another interesting use of the <b>meta http-equiv</b> tag, let's quickly go to another <a href="Demo11.html">page</a>. Don't worry, we'll be right back.
</p></li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

</p>
<font size="4"><b><a name="13">Paired</a></b></font>, which always must be <b>opened</b> and <b>closed</b>:
</p>
<p>
There are <font color="#ff0000"><b>four paired tags</b></font> which should <font color="#ff0000"><b>always</b></font> appear in your web documents.
</p>
<ul>
<p>
<li><b>&lt;<a name="20">html</a>&gt;</b> and <b>&lt;/html&gt;</b> The opening part of the <b>html</b> tag should  be the second tag used in your document. It alerts a browser to the presence of an html document. The closing <b>html</b> tag should be the last line of your document.</li>
</p>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
</p>
<li><b>&lt;<a name="21">head</a>&gt;</b> and <b>&lt;/head&gt;</b> The <b>header</b> tag is the third tag to use because it defines a section of your document that will not be displayed by the browser. This allows you to place other types of information in your document, such as a document <b>title</b> or <b>meta-information</b> that can be picked up by search engines</li>
</p>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="22">title</a>&gt;</b> and <b>&lt;/title&gt;</b> The <b>title</b> tag allows you to place text across the top of the browser window. The text between the opening and closing tags will be the title of your document.
</p>
<p>
Do not use any special formatting or markup tags in the <b>title</b> of your document.</p>
</p>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="23">body</a>&gt;</b> and <b>&lt;/body&gt;</b> The <b>body</b> tag defines the text area of your document. The opening <b>body</b> tag follows the closing <b>head</b> tag; the closing <b>body</b> tag precedes the closing <b>html</b> tag, unless you are working with <b>frames</b>
</p>
<blockquote>
<p>
You would use these standard tags in the following way:
<p>
<b>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;</b><br />
&lt;<b>html</b>&gt;<br />
&lt;<b>head</b>&gt;<br />
&lt;<b>title</b>&gt;Demo Page: Tags&lt;<b>/title</b>&gt;<br />
&lt;<b>/head</b>&gt;<br />
&lt;<b>body</b>&gt;<br />
This is where the text would go<br />
&lt;<b>/body</b>&gt;<br />
&lt;<b>/html</b>&gt;
</p>
</blockquote></li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<p>
Here are some other <b>paired</b> tags that you can use:
</p>
<ul>
<p>
<li><b>&lt;<a name="15">p</a>&gt;</b> and <b>&lt;/p&gt;</b> Paragraph break. This tag marks the beginning of a paragraph, not the end of one. It instructs the browser to place a blank line after the preceeding paragraph.
<br />
<p>
The closing <b>&lt;/p&gt;</b> is typically omitted, and this does not violate the standard. However, when using <b>cascading style sheets</b>, the closing <b>&lt;/p&gt;</b> tag is needed to mark the end of the application of a style.
<br />
<p>
All text between two <b>&lt;p&gt;</b> tags are considered to be in the same paragraph. The block of text is called an <b>element</b>.
</p>
<p>
A paragraph break <b>&lt;p&gt;</b> has one <b>attribute</b> which can take
three <b>values</b>:
</p>
<ol>
<p>
<li><b>&lt;p align="left"&gt;</b> The default is to be <b>aligned</b> to the left side, so you don't have to use this one.</li>
<p>
<li><b>&lt;p align="center"&gt;</b> will <b>center</b> the paragraph</li>
</p>
<p>
<li><b>&lt;p align="right"&gt;</b> will place the paragraph on the <b>right</b> 
margin</li>
</ol>
<p align="right">
<b>Note</b> that you can't stack paragraph breaks to add extra lines between paragraphs. The second <b>&lt;p&gt;</b> is considered a <b>redundant tag</b> by the browser and is ignored. There are other ways to control white space, such as the use of <b>cascading style sheets</b>. By the way, this paragraph and the one that follows are preceded by the following markup: 
</p>
<p align="right">
<b>&lt;p align="right"&gt;</b>
</p>
<p align="right">
That's why these words are right justified and there is a ragged edge along the left side of these words.</li>
</p>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="24">div</a>&gt;</b> and <b>&lt;/div&gt;</b> <a name="6">This</a> tag is used to create <b>divisions</b> or <b>containers</b> in the document, each of which may have different <b>attributes</b>, such as alignment, font size, and font type. Many elements can be included between the opening and closing <b>&lt;div&gt;</b> tag including paragraphs, tables, and lists. 
</p>
<p>
This tag is most useful when working with <b>HTML 4.01</b>, <b>cascading style 
sheets</b> and <b>XHTML</b>.
</p>
<p>
There's an example of the use of the <b>div</b> tag on the <a href="Demo13.html#5">example</a> page.</li>
</p>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="25">h#</a>&gt;</b> and <b>&lt;/h#&gt;</b> This tag defines the <b>headers</b> in the document, where <b>#</b> is a number from <b>1</b> (the largest) to <b>6</b> (the smallest). <b>Headers</b> will place an automatic paragraph break after the last of the text, so you don't have to use a <b>&lt;p&gt;</b> in conjunction with this tag.
</p>
<p>
Here are two examples:
<blockquote> 
<h1>This is the largest header (h1)</h1> 
<h6>This is the smallest header (h6)</h6>
</blockquote>
<p>
<b>Headers</b> can be positioned using the <b>align attribute</b>, which takes three <b>values</b>:
</p>
<ol>
<p>
<li><b>&lt;h# align="left"&gt;</b> The default is to be <b>aligned</b> to the
left side, so you don't have to use this one.</li>
</p>
<p>
<li><b>&lt;h# align="center"&gt;</b> will <b>center</b> the <b>header</b></li>
</p>
<p>
<li><b>&lt;h# align="right"&gt;</b> will start the <b>header</b> from the <b>right</b> margin</li>
</p>
</ol>
<p>
For example:
<p>
<h1 align="center">Here is a large, centered header</h1>
<h6 align="right">Here is a tiny, right-aligned header</h6>
<p>
You can nest other <b>html tags</b> inside of <b>h#</b> markup; remember to close them in reverse order! Also, don't use <b>h#</b> markup to change the <b>font</b> characteristics of the page - there are better ways to this.</li>
</p>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="26">address</a>&gt;</b> and <b>&lt;/address&gt;</b> The <b>address</b> tag  is used to create a block of text containing information about the document and its author. It will <i>italicize</i> all of the text included between the tags. The <b>address</b> is typically used at the bottom of the page and looks like this:
<blockquote>
<p>
<b>&lt;address&gt;</b>This page prepared by Howard Rosenbaum<b>&lt;br&gt;</b>
Last update:12.31.99<br />
<b>&lt;/address&gt;</b>
</p>
</blockquote>
<p>
It is displayed like this:
</p>
<blockquote>
<p>
<address>This page prepared by Howard Rosenbaum<br />
Last update:12.31.99<br />
</address>
</blockquote></li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="27">nobr</a>&gt;</b> and <b>&lt;/nobr&gt;</b> The <b>no break</b> tag can be used to prevent the browser from breaking the line at the edge of the browser window (which can be set by the user).  A line of text will not wrap if it is enclosed within this tag.
</p>
<p>
<nobr>For example, the use of the <b>&lt;nobr&gt;</b> tag can be really annoying because the reader will try to make the browser window as wide as possible, but if you make the sentence long enough, he or she will still have to use the scroll bar to get to the end of the sentence. Obviously, use this one with care.</nobr></li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="28">center<font color="#ff0000">*</font></a>&gt;</b> and <b>&lt;/center&gt;</b> This tag 
</p>
<p>
<center>centers text</center>
</p>
<p>
The <b>center</b> tag also will center whatever else you include on your pages,including images, tables, and forms. You use one set of <b>center</b> tags to enclose all of the consecutive elements on the page that you want to appear in the center of the page. This term has been <font color="#ff0000">deprecated</font> in <b>HTML 4.01</b></li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="29">blockquote</a>&gt;</b> and <b>&lt;/blockquote&gt;</b> <a name="8">This</a> tag sets off text by indenting a block of text the equivalent of one tab stop from the left margin. It can also separating it from the preceeding paragraph with an empty line and indentation.  
</p>
<blockquote>
<p>
To use it properly, you should use another tag, such as the <b>&lt;p&gt;</b> after the opening <b>&lt;blockquote&gt;</b> tag. As you can see, this paragraph has been enclosed in a pair of <b>&lt;blockquote&gt;</b> tags.
</p>
</blockquote>
There's another example of a <b>blockquote</b> on the <a href="Demo13.html#7">example</a> page. 
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="30">pre</a>&gt;</b> and <b>&lt;/pre&gt;</b> <a name="10">This</a> tag preserves the formatting of the text, but displays it in a <font face="courier"> <b>monospaced font</b> like <b>Courier</b></font>, so it will not look the same as the <b>font</b> or <b>fonts</b> used on the rest of the page. 
</p>
<p>
You can use some <b>HTML</b> tags inside the paired <b>pre</b> tags. Those that force line and paragraph breaks cannot be used, but <b>physical</b> and <b>logical</b> tags can be used, although browsers will always use the <b>monospaced font</b>.
</p>
<p>
An interesting use of the <b>pre</b> tag is to insert a block of blank lines into a document. For example, here will be six blank lines after this sentence because of the use of the  <b>&lt;pre&gt;</b>tag. 
</p>
<pre>








</pre>
There's another example of the <b>pre</b> tag on the <a href="Demo13.html#9"> example</a> page that shows how it preserves original spacing in an ASCII document.</li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><b>&lt;<a name="31">font<font color="#ff0000">*</font></a>&gt;</b> and <b>&lt;/font&gt;</b> This tag provides some control over characteristics of the text display. It is a <font color="#ff0000">deprecated</font> tag in <b>HTML 4.01</b>. <b>font</b> characteristics can be controlled with <b>cascading style sheets</b>. 
</p>
<p>
There are three main attributes that will work with this tag, <b>size</b>, <b>face</b>, and <b>color</b>. The first two will be discussed here, the third will be discussed on the <b>Image and Color</b> page.
</p>
<ul>
<p>
<li><b>&lt;font size=n&gt;</b> <a name="4">This</a> tag will change the <b>font size</b> based on a value from number from 1 (<font size="1">the smallest</font>) to 7 (<font size="7">the largest</font>). A font size of <b>3</b> is the default. 
</p>
<p>
You can use the <b>font size</b> tag to change a single character, a word, a sentence, or a paragraph.</li>
</p>
<p>
<li><b>&lt;font face="Fontname<sub>1</sub>, Fontname<SUb>2</sub>, Fontname<sub>n</sub>&gt;</b> This tag will suggest a series of <b>font</b> styles to a browser, which will try to display the first one it can find on the user's computer. If it can't find any of them, it uses the default <b>font</b> set by the user.
</p>
<p>
The order of fonts should be from a specific font face (Times-Roman) to a general font family (Serif). The browser will go through the suggested fonts in order. The markup looks like this:
</p>
<blockquote>
<p>
<b>&lt;font face="Times-Roman, Palatino, New York"&gt;</b>text<b>&lt;/font&gt;</b>
</p>
</blockquote>
</ul>
<p>
You can use this tag and its <b>attributes</b> as many times as you want in a document. You can also combine these <b>attributes</b>, for example:
</p>
<blockquote>
<p>
<b>&lt;font face="Times-Roman, Palatino, New York" size="5"&gt;</b>text<b>
&lt;/font&gt;</b> 
</p>
</blockquote>
<p>
Remember that it must always have the closing <b>&lt;/font&gt;</b> tag
</p>
<p>
There are some examples of the <b>font</b> tag with the <b>size</b> and <b>face</b> attributes on the <a href="Demo13.html#3">example</a> page.</li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li>There is a set of <b>physical style</b> tags which can be used to mark up documents. These tags force different browsers to display the marked up elements in the same way. This is a short list which is not complete because some of these tags are only supported by a single browser or are part of proposed standards not yet in use.
</p>
<p>
<ol>
<li><b>&lt;<a name="32">b</a>&gt;</b> and <b>&lt;/b&gt;</b> <b>Bold</b> text, which the user's browser <b>cannot</b> change.</li>
</p>
<p>
<li><b>&lt;<a name="33">i</a>&gt;</b> and <b>&lt;/i&gt;</b> This tag produces <i>italicized</i> text</li>
</p>
<p>
<li><b>&lt;<a name="34">big</a>&gt;</b> and <b>&lt;/big&gt;</b> This tag will make the text <big>bigger</big> than surrounding text</li>
</p>
<p>
<li><b>&lt;<a name="35">small</a>&gt;</b> and <b>&lt;/small&gt;</b> This tag will make the text <small>smaller</small> than surrounding text</li>
</p>
<p>
<li><b>&lt;<a name="36">strike<font color="#ff0000">*</font></a>&gt;</b> and <b>&lt;/strike&gt;</b> Strike out text by placing a <strike>line</strike> through it. Note that not all browsers can display this, so be careful about using it. This term has been <font color="#ff0000">deprecated</font> in <b>HTML 4.01</b></li>
</p>
<p>
<li><b>&lt;<a name="37">sub</a>&gt;</b> and <b>&lt;/sub&gt;</b> This tag produces <sub>subscript </sub></li>
</p>
<p>
<li><b>&lt;<a name="38">sup</a>&gt;</b> and <b>&lt;/sup&gt;</b> This tag produces <sup>superscript </sup></li>
</p>
<p>
<li><b>&lt;<a name="39">tt</a>&gt;</b> and <b>&lt;/tt&gt;</b> This tag produces a <font size="+1"><tt>fixed width font that resembles typing</tt></font>.</li>
</p>
<p>
<li><b>&lt;<a name="48">samp</a>&gt;</b> and <b>&lt;/samp&gt;</b> This tag also produces a monospaced display and is used to indicate text that is part of a computer process. For example, type </samp>exit</samp> to quit the editor</li>
</p>
<p>
<li><b>&lt;<a name="40">u<font color="#ff0000">*</font></a>&gt;</b> and <b>&lt;/u&gt;</b> This tag produces <u>underlined</u> text. Since many browsers indicate links with <u>underlined text</u>, you should probably use this sparingly. This term has been <font color="#ff0000">deprecated</font> in <b>HTML 4.01</b></li>
</p>
</ol></li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li>There are also <b>logical</b> or <b>content-based</b> markup tags that will make text stand out,but they will vary with the browser used to view them. <b>Logical</b> or <b>content-based</b> markup is concerned more with the meaning and intent of the document than with its appearance.
</p>
<ol>
<p>
<li><b>&lt;<a name="41">cite</a>&gt;</b> and <b>&lt;/cite&gt;</b> This tag can be used for citations, such as:
</p>
<p>
<cite>Rosenbaum. (1996). html Demonstration Pages.</cite></li>
</p>
<p>
<li><b>&lt;<a name="42">code</a>&gt;</b> and <b>&lt;/code&gt;</b> This tag uses a <code>fixed width font to display text</code>, but has the advantage of allowing the coded text (typically actual lines of code) to be extracted from the page by a search tool. This text is smaller than the default text displayed by the browser. If you are not displaying computer code, you should use the <b>&lt;tt&gt;</b> tag.</li>
</p>
<p>
<li><b>&lt;<a name="43">em</a>&gt;</b> and <b>&lt;/em&gt;</b> This tag produces <em>emphasized text </em> which is rendered differently by different browsers.</li>
</p>
<p>
<li><b>&lt;<a name="44">strong</a>&gt;</b> and <b>&lt;/strong&gt;</b> This tag produces <strong>strong text</strong> which is rendered differently by different browsers.</li>
</p>
</ol></li>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

<ul>
<p>
<li><a name="46">You</a> can also use <b>paired</b> and <b>unpaired</b> tags to organized text into different types of <b>lists</b>. This <a href="Demo8.html"> page</a> has an explanation of the different types of <b>lists</b> you can use in your markup with examples of each type. </li>
</p>
</ul>

<p>
<font size="2">Return to <a href="#45">top</a></font>
</p>

Want to know more? Here are <a href="Demo6.html"> links</a> to other pages 
about <b>HTML</b>.
</p>
<p>
Use the <b>Back</b> button to return to this page when you are ready to continue.
</p>

<p>
<hr noshade="noshade" />
</p>

<center>
<p>

<table border="2" bordercolor="#000000" width="85%">
<tr>
	<td rowspan="2" bgcolor="#cccccc"><b>Demo Page<br />
	Navigation:</b></td>
	<td><a href="DemoCon.html">DemoPage contents</a></td>
	<td><a href="html.html">About html</a></td>
	<td><a href="UNIX.html">UNIX help</a></td>
	<th bgcolor="black" align="left"><font color="#ffffff">HTML tags</font></th>
	<td><a href="Demo8.html">Lists</a></td>
	<td><a href="Demo2.html">Links</a></td>
	<td><a href="Demo3.html">Images</a></td>
</tr>
<tr>
	<td><a class="mesLiens" href="Demo12.html">Imagemapping</a></td>
	<td><a class="mesLiens" href="Demo4.html">Tables</a></td>
	<td><a class="mesLiens" href="Demo9.html">Forms</a></td>
	<td><a class="mesLiens" href="Demo5.html">Frames</a></td>
	<td><a class="mesLiens" href="Demo18.html">Javascript</a></td>
	<td><a class="mesLiens" href="../Workshops/CSS/Demo/csshome.html">CSS (style sheets)</a></td>
	<td><a class="mesLiens" href="../Workshops/XML/Demo/home.html">XML</a></td>
</tr>
</table>

</p>
<p>
<hr noshade="noshade" />
</p>
<p>

<table border="0" width="100%">
<tr>
	<td valign="top"><font size="2">Page by Howard Rosenbaum</font></td>
	<td align="right"><font size="2">
	<script language="JavaScript">
	<!-- Hide JavaScript...
	var LastUpdated = document.lastModified;
	document.writeln ("Untouched since " + LastUpdated);
	// End Hiding -->
	</script></font></td>
</tr>
<tr>
	<td align="left" valign="top"><font size="2">Find me at <a href="mailto:hrosenba@indiana.edu">hrosenba@indiana.edu</a></font></td>
	<td align="right"><font size="2">http://www.slis.indiana.edu/hrosenba/www/Demo/Demo.html</font></td>
</tr>
</table>

</p>
</center>
Tests:
Avec that
$(".mesLiens").each(function () { var lien = $(this); lien.css("color", "red"); });
Sans That
$(".mesLiens").each(function () { $(this).css("color", "red"); });
Rendered benchmark preparation results:
Suite status: <idle, ready to run>

Previous results
Test case name	Result
Avec that
Sans That
Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.
Website Performance Monitoring by Request Metrics
Latest run results:
Run details: (Test run date: 5 years ago)
User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
Browser/OS: Chrome 67 on Windows
View result in a separate tab
Test name	Executions per second
Avec that	44976.8 Ops/sec
Sans That	45397.0 Ops/sec
ThisThatCouture (version: 1)

Comparing performance of: Avec that vs Sans That

Created: 5 years ago by: Registered User

Jump to the latest result

Avec that

Sans That

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A
