This page has been robot translated, sorry for typos if any. Original content here.

Additional HTML features

Additional Features

Dave Ragett , August 29, 2000

Having studied the main possibilities, let's move on to more complex ones. Now you will learn:

  • use forced line breaks
  • use non-breaking spaces
  • use codes for special characters
  • create links to text fragments
  • use preformatted text
  • place text around images
  • define in the images of the district links
  • create tables
  • use roll-overs also other techniques

ps To maintain the routine in the markup I recommend using HTML Tidy .

Forced line breaks

Sometimes you may need to force line breaks. This is done using the br elements. For example, you want to include a mailing address:

 <p> The Willows <br>
 21 Runnymede Avenue <br>
 Morton-in-the-marsh <br>
 Oxfordshire OX27 3BQ </ p>

Element br does not own the final tag. Common elements that do not have finite tags are called empty .

Using non-breaking spaces

Browsers automatically break the text so that it matches the fields. Line breaks are produced in spaces of spaces. Sometimes it is necessary to prevent a line break between certain words. For example, between the words of the company name - "Coke Cola". To do this, you must use the & nbsp; , eg:

 Sweetened carbonated drinks such as Coke & nbsp; Cola have become popular throughout the universe.

Do not use multiple non-breaking spaces in a row to offset the text. Displacement should be organized using style rules.

Special character codes

For the designation of copyrights or trademarks, it is convenient to use the appropriate signs:

Symbol Combination Example
Copyright mark & copy; Copyright © 1999 W3C
Registered Trademark & gt; MagiCo ®
Trademark & # 8482; Webfarer ™

Note that in HTML 4.0, the combination of trade is defined to mean a trade mark, but it is not as widely supported as & # 8482;

Other useful combinations:

Symbol Combination Example
The sign "less" & lt; <
The sign "more" & gt; >
Ampersand & amp; &
indissoluble gap & nbsp;
long dash & # 8212; -
quotation mark & quot; "

In addition, there are combinations for symbols with diacritic marks also for various other Latin-1 character sets:

& nbsp; & # 160; A & ETH; & # 208;
¡ & iexcl; & # 161; Ñ & Ntilde; & # 209;
¢ & gt; & # 162; N & Ograve; & # 210;
£ & pound; & # 163; Ó & Oacute; & # 211;
¤ & curren; & # 164; Ô & Ocirc; & # 212;
¥ & yen; & # 165; Q & Otilde; & # 213;
| | & brvbar; & # 166; Ö & Ouml; & # 214;
§ & sect; & # 167; × x & gt; & # 215;
¨ & uml; & # 168; Ø & Oslash; & # 216;
© & copy; & # 169; Ù & Ugrave; & # 217;
ª & ordf; & # 170; Ú & Uacute; & # 218;
« & laquo; & # 171; Û & Ucirc; & # 219;
¬ & not; & # 172; Ü & Uuml; & # 220;
& shy; & # 173; Ý & Yacute; & # 221;
® & gt; & # 174; Þ & THORN; & # 222;
¯ & macr; & # 175; ß & szlig; & # 223;
° & gt; & # 176; à & agrave; & # 224;
± & gt; & # 177; á & aacute; & # 225;
² & sup2; & # 178; â & acirc; & # 226;
³ & sup3; & # 179; ã & atilde; & # 227;
' & amp; & # 180; ä & auml; & # 228;
μ & micro; & # 181; å & amp; & # 229;
& para; & # 182; æ & aelig; & # 230;
· & lt; / RTI & gt; & # 183; ç & ccedil; & # 231;
¸ & cedil; & # 184; è & egrave; & # 232;
¹ & sup1; & # 185; é & eacute; & # 233;
º & ord; & # 186; ê & ecirc; & # 234;
" & raquo; & # 187; ë & euml; & # 235;
¼ & frac14; & # 188; Ð & igrave; & # 236;
½ & frac12; & # 189; í & iacute; & # 237;
¾ & frac34; & # 190; î & icirc; & # 238;
¿ & iquest; & # 191; ï & iuml; & # 239;
À & Agrave; & # 192; ð & eth; & # 240;
Á & Aacute; & # 193; ñ & nt; & # 241;
 & Acirc; & # 194; ò & ograve; & # 242;
à & Atilde; & # 195; ó & oacute; & # 243;
Ä & Auml; & # 196; ô & ocirc; & # 244;
Å & Amp; Aring; & # 197; õ & otilde; & # 245;
Æ & AElig; & # 198; ö & ouml; & # 246;
Ç & Ccedil; & # 199; ÷ & divide; & # 247;
È & Egrave; & # 200; ø & oslash; & # 248;
É & Eacute; & # 201; ù & ugrave; & # 249;
Ê & Ecirc; & # 202; ú & uacute; & # 250;
Ë & Euml; & # 203; û & ucirc; & # 251;
Ì & Igrave; & # 204; ü & uuml; & # 252;
Í & Iacute; & # 205; ý & yacute; & # 253;
Î & Icirc; & # 206; þ & thorn; & # 254;
Ï & Iuml; & # 207; ÿ & yuml; & # 255;

For Greek mathematical symbols defined in Unicode, it is allowed to use numeric references. This is discussed in more detail in the HTML 4 specification. Note that the combination names are not recognized in Navigator 4, so it is recommended to use numeric references.

References to fragments of Web pages

Imagine that you wrote a long Web page with a table of contents at the beginning. How to make the table of contents links to the relevant sections?

Suppose that each section starts with a header, for example:

 <h2> Local Night Spots </ h2>

To make the heading the purpose of the hypertext link is possible using the following code: lt; a name = identifier > .... </a>

 <h2> <a name="night-spots"> Local Night Spots </a> </ h2>

The name attribute specifies the name used to identify the target of the link, in this case: "night-spots". In essence now it is allowed to include the following link:

 <ul> ... <li> <a href="#night-spots"> Local Night Spots </a> </ li> ... </ ul> 

The symbol # before the target name is required. If the target of the link is in the friend of the act, put the web address of this act before the # symbol. For example, if the act is located at "http://www.bath.co.uk/", the link should exist as follows:

 <a href="http://www.bath.co.uk/#night-spots"> Local Night Spots </a>

In the future, it will be possible to define link targets without the <a> element. The newly-made method is much simpler, because you only need to add the id property to the header, for example:

 <h2 id = "night-spots"> Local Night Spots </ h2>

This method does not work for the 4th generation of browsers or even older browsers, so it should be used carefully!

Formatted text

One of the advantages of the Web is the automatic division of text into lines according to the current window size. But sometimes it starts to avoid it. For example, if the program code is displayed. This is done using the pre element. For example:

 <pre>
  void Node :: Remove ()
  {
  if (prev)
  prev-> next = next;
  else if (parent)
  parent-> SetContent (null);

  if (next)
  next-> prev = prev;

  parent = null;
  }
 </ pre>

which is presented in the following form:

  void Node :: Remove ()
  {
  if (prev)
  prev-> next = next;
  else if (parent)
  parent-> SetContent (null);

  if (next)
  next-> prev = prev;

  parent = null;
  }

Colors of text and background are set using the style sheet. Note that all line breaks are also generated as exactly as they are in the HTML code. The exception is the line feed immediately after the initial <pre> tag, also immediately before the end tag </ pre> , which is not taken into account. This means that the next pair of samples will be generated identically:

 <pre> formatted text </ pre>

 <pre>
 formatted text
 </ pre>

Typically, formatted text is generated using a monospaced font, in which all characters have the same width. If you define the position of the style for the pre element, some browsers do not use the monospaced font in any way, so you should definitely define the font-family property. For example, if you want, so that all elements of pre are represented in green, you can define the following position of the style:

 <style type = "text / css">
  pre {color: green;  background: white;  font-family: monospace;  }
 </ style>

When setting the color of the text, it is recommended that you also set the background color. This ensures that there are no situations, at what time it is difficult to distinguish the background paint from the color of the text. Instead of setting the background color for the pre element, you can set it for the body element, for example:

 <style type = "text / css">
  body {color: black;  background: white;  }
  pre {color: green;  font-family: monospace;  }
 </ style>

Placing text around images

In HTML, you can choose whether the image will be considered part of the current line of text or become attached to the right or left margin. This is determined by the align attribute. If the align attribute is left , the image is attached to the left margin. If set to right , to the right. For example:

 <p> <img src = "sun.jpg" alt = "sunburst graphic"
 width = "32" height = "21" align = "left"> This text wraps the image to the right. </ p>

It will be presented like this:

sunburst graphic This text wraps around the image on the right.

Here's how to use align = "right"

 <p> <img src = "sun.jpg" alt = "sunburst graphic"
 width = "32" height = "21" align = "right"> This text wraps the image on the left. </ p>

It will be presented like this:

sunburst graphic This text wraps around the image on the left.

In order for text generation to continue under the attached image, it is allowed to use the <br clear=all> element, for example:

  <p> <img src = "/ img / site / sun.jpg" alt = "sunburst graphic"
 width = "32" height = "21" align = "right"> This text starts to the left of the image. 
<br clear="all"> Here begins a new line, located under the attached image. </ P>

It will be presented like this:

sunburst graphic This text starts to the left of the image.
Here begins a new line, located under the attached image.

Image areas as links

The following image is a map of several Web pages. To go to the appropriate page, you need to click on the mug.

Site MapНачало работы Немного стиля Дизайн Web-страниц Углубленный курс HTML

Such a map is marked as follows:

 <p align = "center">
  <img src = "pages.gif" width = "384" height = "245"
  alt = "sitemap" usemap = "# sitemap" border = "0">
  <map name = "sitemap">
  <area shape = "circle" coords = "186,44,45" 
  href = "Overview.html" alt = "Getting Started">
  <area shape = "circle" coords = "42,171,45" 
  href = "Style.html" alt = "A little bit of style">
  <area shape = "circle" coords = "186,171,45"
  alt = "Web Design">
  <area shape = "circle" coords = "318,173,45"
  href = "Advanced.html" alt = "Advanced HTML Course">
  </ map>
 </ p>

The src attribute of the img element defines the image "pages.gif". The usemap attribute specifies a reference to the map element. The Web address is used for this, so the # symbol is also used. For the border attribute, set the value to "0", so that the blue border does not appear around the image.

The map element determines which areas of the image will serve as references. The name attribute corresponds to the usemap attribute of the img element, which also acts in much the same way as the name property of the <a> element. In practice, the map element is forced to be in that good file, which is also an img element.

The area element is used to determine the county of the image and also associate it with the Web address. The shape attribute defines the shape of the circle: "rect", "circle" or "poly". The coords attribute determines the coordinates of the county depending on the form.

  • rect: coordinate x of the left edge, coordinate y of the upper edge, coordinate x of the right edge, coordinate y of the left edge
  • circle: the x coordinate of the center, the y coordinate of the center, the radius
  • poly: x 1 , y 1 , x 2 , y 2 , ... x n , y n

The left upper speckle is considered to be the source of the image, the x-coordinate is also y equal to zero, the x-coordinate is increased along the course to the right, the y-coordinate is down. Most of the tools for labor with images allow you to acquire the coordinates of any given point of the image.

If several regions intersect, the priority is assigned to the area determined by the first of the intersecting (ie, the corresponding action will result from the click of the mouse). To obtain more complex figures, the district's share can be made inactive by overlapping it with another district using the nohref attribute, for example:

  <area shape = "circle" coords = "186,44,50" nohref>
  <area shape = "circle" coords = "186,44,100" 
  href = "Overview.html" alt = "Getting Started">

The first circle creates an inactive circle in a circle of larger diameter created by the second area element. In order for an inactive district to have an effect, it must exist until it is active, otherwise the priority will become the active region.

Why use the alt property

The alt attribute of the area element is used to specify a text reference for the link. Without this attribute, the map will not be accessible to people who for some reason will not see the images in any way.

Tables

Tables are used for information also for the arrangement of elements on the page. You can draw tables to populate fields, set them to a fixed width, or allow the browser to automatically resize the tables according to their occurrence.

Tables consist of one or more rows of cells. Here is a simple example:

Year Sales
2000 $ 18M
2001 $ 25M
2002 $ 36M

Here's the markup for this table:

 <table border = "1">
 <tr> <th> Year </ th> <th> Sales </ th> </ tr>
 <tr> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <tr> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 <tr> <td> 2002 </ td> <td> $ 36M </ td> </ tr>
 </ table>

The table element serves as the table container. The border attribute specifies the thickness of the face in pixels. The element tr serves as the container of the table row. The elements of th also td serve as containers for the headers of the data cells, respectively.

Fields in a cell

Increase the fields in all cells at once is allowed by using the cellpadding attribute for the table element. For example, set the fields to 10 pixels:

 <table border = "1" cellpadding = "10">

it will look like this:

Year Sales
2000 $ 18M
2001 $ 25M
2002 $ 36M

Distance between cells

The cellpacing attribute specifies the spacing between cells. Set the gap between cells to 10:

 <table border = "1" cellpadding = "10" cellspacing = "10">

The table will look like this:

Year Sales
2000 $ 18M
2001 $ 25M
2002 $ 36M

Table Width

You can set the width of the table using the width attribute. Its value can be either a width in pixels, or a percentage value representing the percentage of space between the left and right fields. For example, we set the width of the table to 80% of the gap between the fields:

 <table border = "1" cellpadding = "10" width = "80%">

The table will look like this:

Year Sales
2000 $ 18M
2001 $ 25M
2002 $ 36M

Align text in cells

By default, browsers smooth the text in the header cells (th) in the center, but in the data cells (td) to the left. The alignment is allowed with the align attribute, which can be applied to a cell or to a row (tr element). It can hold the values ​​"left", "center" (center) or "right" (right):

 <table border = "1" cellpadding = "10" width = "80%">
 <tr align = "center"> <th> Year </ th> <th> Sales </ th> </ tr>
 <tr align = "center"> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <tr align = "center"> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 <tr align = "center"> <td> 2002 </ td> <td> $ 36M </ td> </ tr>
 </ table>

The table will look like this:

Year Sales
2000 $ 18M
2001 $ 25M
2002 $ 36M

The valign attribute exactly determines the vertical alignment of the contents of the cell. It is used with the values ​​"top", "middle" or "bottom" can also be used with any cell or line. By default, the content of the header cells (th) is centered, but the contents of the data cells are aligned to the left margin also at the top of the cell.

Empty Cells

Browsers differently process empty cells. Compare:

Year Sales
2000 $ 18M
2001 $ 25M
2002 $ 36M
2003

a plus

Year Sales
2000 $ 18M
2001 $ 25M
2002

The latter results if the cell is empty:

 <td> </ td>

To avoid this, put a non-breaking space in it:

 <td> & nbsp; </ td>

Cells that occupy several rows or columns

Let's complete the previous sample by dividing the sales in the northern also southern region:

Year Sales
North South Total
2000 $ 10M $ 8M $ 18M
2001 $ 14M $ 11M $ 25M

The heading "Year" now takes two lines, but the heading "Sales" - three columns. This is achieved by the route of setting the rowspan attributes as well colspan, respectively. Here's the markup for this example:

 <table border = "1" cellpadding = "10" width = "80%">
 <tr align = "center"> <th rowspan = "2"> Year </ th> <th colspan = "3"> Sales </ th> </ tr>
 <tr align = "center"> <th> North </ th> <th> South </ th> <th> Total </ th> </ tr>
 <tr align = "center"> <td> 2000 </ td> <td> $ 10M </ td> <td> $ 8M </ td> <td> $ 18M </ td> </ tr>
 <tr align = "center"> <td> 2001 </ td> <td> $ 14M </ td> <td> $ 11M </ td> <td> $ 25M </ td> </ tr>
 </ table>

This can be simplified by taking advantage of the fact that browsers do not in any way require end tags for cells, as well as table rows:

 <table border = "1" cellpadding = "10" width = "80%">
 <tr align = "center"> <th rowspan = "2"> Year <th colspan = "3"> Sales
 <tr align = "center"> <th> North <th> South <th> Total
 <tr align = "center"> <td> 2000 <td> $ 10M <td> $ 8M <td> $ 18M
 <tr align = "center"> <td> 2001 <td> $ 14M <td> $ 11M <td> $ 25M
 </ table>

Note that since the "Year" header occupies two lines, the main element th in the other row is located in another column, but not in the first column.

Tables without borders

Such tables are widely used for formatting pages and also creating a grid on them. To do this, you just need to add the border = "0" property and cellspacing = "0" to the table element:

Year Sales
2000 $ 18M
2001 $ 25M
2002 $ 36M

This is achieved using the following markup:

 <table border = "0" cellspacing = "0" cellpadding = "10">
 <tr> <th> Year </ th> <th> Sales </ th> </ tr>
 <tr> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <tr> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 <tr> <td> 2002 </ td> <td> $ 36M </ td> </ tr>
 </ table>

If you do not specify the cellspacing property, there will be a space between the cells, as shown below:

Year Sales
2000 $ 18M
2001 $ 25M
2002 $ 36M

Use in color tables

On this page, a style sheet is used to set a different background color for the header cells of data. Here are the style positions we used:

 table {
  margin-left: -4%
  font-family: sans-serif;
  background: white;
  border-width: 2;
  border-color: white;
 }
 th {font-family: sans-serif;  background: rgb (204, 204, 153)}
 td {font-family: sans-serif;  background: rgb (255, 255, 153)}

The last two lines set the background paint for cells th also td according to the specified red / green / blue colors. Numbers should lie in the range from 0 up to 255 (fully saturated color).

In another way, you can set background paint with the bgcolor attribute. This method works in almost all browsers and does not require any support for style sheets. First determine the hexadecimal values ​​of the scarlet, green, and blue components of the color that you want to use. The Style Guide contains a converter .

 <table border = "0" cellspacing = "0" cellpadding = "10">
  <tr>
  <th bgcolor = "# CCCC99"> Year </ th>
  <th bgcolor = "# CCCC99"> Sales </ th>
  </ tr>
  <tr>
  <td bgcolor = "# FFFF66"> 2000 </ td>
  <td bgcolor = "# FFFF66"> $ 18M </ td>
  </ tr>
  <tr>
  <td bgcolor = "# FFFF66"> 2001 </ td>
  <td bgcolor = "# FFFF66"> $ 25M </ td>
  </ tr>
  <tr>
  <td bgcolor = "# FFFF66"> 2002 </ td>
  <td bgcolor = "# FFFF66"> $ 36M </ td>
  </ tr>
 </ table>

Access to tables

If you do not observe the table in any way, it is difficult to understand what the word is about in it. It makes sense to specify information about the assignment of the table structure as well. The caption element allows you to specify a title to also place it above or below the table. The caption element is forced to be located later than the tr element of the first line.

Estimated revenue from sales by year
Year Sales
2000 $ 18M
2001 $ 25M

This table is specified by the following markup:

 <table border = "1" cellpadding = "10" width = "80%">
 <caption> Estimated revenue from sales by year </ caption>
 <tr align = "center">
  <th> Year </ th> <th> Sales </ th>
 </ tr>
 <tr align = "center"> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <tr align = "center"> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 </ table>

Here is that blah blah table, but the caption element added the property align = "bottom" :

Estimated revenue from sales by year
Year Sales
2000 $ 18M
2001 $ 25M

The summary attribute of the table element should be used to describe the table structure for those who can not view the table in any way. For example: "in the main column years are given, but in another - the arrival for this year."

 <table summary = "in the main column years are given, but in another - arrival for this year">

Determine the relationship between the cells of the headers also of the data

If the table is generated on the audio device or on the device to enclose the Braille alphabet, it makes sense to specify which cell which headers belong to. For example, an audio browser can also move upwards either downward or to the right and to the left along the cells of a table with a prefixed message before each cell of the corresponding header.

To do this, you need to provide each header / data cell with an annotation. The easiest way is to add the scope property to the header cells. It can be used with the following values:

  • row : The cell contains the title for the remaining elements of the current row.
  • col : The cell contains the title for the remaining elements of the current column.

Apply this to our table:

 <table border = "1" cellpadding = "10" width = "80%">
 <caption> Estimated revenue from sales by year </ caption>
 <tr align = "center">
  <th scope = "col"> Year </ th>
  <th scope = "col"> Sales </ th>
 </ tr>
 <tr align = "center"> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <tr align = "center"> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 </ table>

For more complex tables, it is allowed to use the headers property for individual data cells to also specify a space-separated list of header cell identifiers. Each header cell must own the id property with the corresponding identifier.

And in the end, consider using the abbr attribute to define abbreviations for long headers. This will make it easier to listen to the headers lists for cells, for example:

 <th abbr = "W3C"> World Wide Web Consortium </ th>

Roll-Overs also other techniques

A small JavaScript can significantly revitalize the page. Here's how to create "rollovers", at what time the appearance of the link changes when the mouse pointer is placed on it. In addition, you will learn how to create cyclic banners that will help you redirect visitors to your sponsor's sites

Roll-Overs

Most often, roll-over is an image serving as a hypertext link. When the mouse pointer pleases this image, it changes to attract attention to the link. For example, you can add a glow effect, a shadow, or just change the background color. Here is an example:

 <script type = "text / javascript">
 if (document.images)
 {
  image1 = new Image;
  image2 = new Image;
  image1.src = "enter1.gif";
  image2.src = "enter2.gif";
 }

 function chgImg (name, image)
 {
  if (document.images)
  {
  document [name] .src = eval (image + ". src");
  }
 }
 </ script>

 ...

 <a href = "/" onMouseOver = 'chgImg ("enter", "image2")'
 onMouseOut = 'chgImg ("enter", "image1")'> <img name = "enter"
 src = "enter1.gif" border = "0" alt = "Come in if you risk!"> </a>

and that's how it looks ...

Come in if you risk it!

I created image data using a royalty-free graphics editor, adding a hot wax effect also to the shadow. with the help of search engines on the Web is allowed to find a lot of tips also for royalty-free images.

Banners

If your site owns several sponsors, it is allowed to use a cyclic change of banners of all sponsors in turn. First of all, you should create a banner for each sponsor. All images must exist the same size. The corresponding image URLs of the sites are then placed in arrays with the names adImages also adURLs defined in the source of the script. The element img for each link is forced to be initialized by the main image from the array. The loop starts with the onload event in the body element.

 <html>
 <head>
 <title> cyclic banners </ title>
 <script type = "text / javascript">
 if (document.images)
 {
  adImages = new Array ("/ img / site / mit.gif",
  "/img/site/inria.gif", "/site/img/keio.gif");
  adURLs = new Array ("www.lcs.mit.edu",
  "www.inria.fr", "www.keio.ac.jp");
  thisAd = 0;
 }

 function cycleAds ()
 {
  if (document.images)
  {
  if (document.adBanner.complete)
  {
  if (++ thisAd == adImages.length)
  thisAd = 0;

  document.adBanner.src = adImages [thisAd];
  }
  }

  // change banner every 3 seconds
  setTimeout ("cycleAds ()", 3000);
 }

 function gotoAd ()
 {
  document.location.href = "http: //" + adURLs [thisAd];
 }
 </ script>
 </ head>
 <body onload = "cycleAds ()">
 ...

 <a href="javascript:gotoAd()"> <img name = "adBanner"
 src = "/ img / site / mit.gif" border = "0" alt = "Our sponsors"> </a>

Our sponsors: Our sponsors

Note: I recommend checking whether all images have the same height as the width. You can also set the width and height attributes for the img element to ensure the same size of all images.

And what if browsers do not support scripts in any way?

The content of the noscript element is displayed only if the browser does not support the scripts in any way. It has to be used if you want to give people access to information that would otherwise be inaccessible to them, if the browser does not support scripts in any way. Suppose you want to link to sponsors in text form:

 <noscript>
 Our sponsors: <a href="/click?http://www.lcs.mit.edu/"> MIT <,
 <a href="/click?http://www.inria.fr/"> INRIA </a>, and
 <a href="/click?http://www.keio.ac.jp/"> Keio University </a>.
 </ noscript>

A lot of gratuitous information about scripts can be found in the search engine help.