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

Additional HTML features

Additional features

Dave Raguette , August 29, 2000

Having studied the basic features, we turn to more complex. Now you will learn:

  • use forced line breaks
  • use non-breaking spaces
  • use codes for special characters
  • create links to text snippets
  • use preformatted text
  • place text around images
  • define in the image of reference districts
  • create tables
  • use roll-overs also other tricks

ps I recommend using HTML Tidy to maintain the layout.

Forced line breaks

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

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

The br element does not own the end tag. Common elements that have no end tags in any way are called empty .

Using non-breaking spaces

Browsers automatically break the text so that it matches the fields. Line breaks are made in spaces. Sometimes it is necessary to prohibit a line break between certain words. For example, between the words of the company name - "Coke Cola". To do this, instead of a space, use the combination of symbols & 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. Offsets should be organized using style rules.

Special character codes

For designations of copyright or trademarks it is convenient to use the appropriate signs:

Symbol Combination Example
Copyright sign & copy; Copyright © 1999 W3C
Registered trademark & reg; MagiCo ®
Trademark & # 8482; Webfarer ™

Please note that the combination of & trade; is defined in HTML 4.0 to denote a trademark, but it is not as widely supported as & # 8482;

Other useful combinations:

Symbol Combination Example
Less than sign & lt; <
Sign "more" & gt; >
Ampersand & amp; &
non-breaking space & nbsp;
long dash & # 8212; -
quotation mark & quot; "

In addition, there are combinations for accented characters and various other Latin-1 characters:

& nbsp; & # 160; Ð & ETH; & # 208;
¡ & iexcl; & # 161; Ñ & Ntilde; & # 209;
¢ & cent; & # 162; Ò & Ograve; & # 210;
£ & pound; & # 163; Ó & Oacute; & # 211;
¤ & curren; & # 164; Ô & Ocirc; & # 212;
¥ & yen; & # 165; Õ & Otilde; & # 213;
| & brvbar; & # 166; Ö & Ouml; & # 214;
§ & sect; & # 167; × * times & # 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;
® & reg; & # 174; Þ & Thorn; & # 222;
¯ & macr; & # 175; ß & szlig; & # 223;
° & deg; & # 176; à & agrave; & # 224;
± & plusmn; & # 177; á & aacute; & # 225;
² & sup2; & # 178; â & acirc; & # 226;
³ & sup3; & # 179; ã & atilde; & # 227;
´ ; & # 180; ä & auml; & # 228;
µ & micro; & # 181; å & aring; & # 229;
& para; & # 182; æ & aelig; & # 230;
· & middot; & # 183; ç & ccedil; & # 231;
¸ & cedil; & # 184; è & egrave; & # 232;
¹ & sup1; & # 185; é & eacute; & # 233;
º & ordm; & # 186; to & 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; ñ & ntilde; & # 241;
 & Acirc; & # 194; to & ograve; & # 242;
à & Atilde; & # 195; ó & oacute; & # 243;
Ä & Auml; & # 196; ô & ocirc; & # 244;
Å & 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;
Ï & Imuml; & # 207; ÿ & yuml; & # 255;

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

Links to 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 title, for example:

 <h2> Local Night Spots </ h2>

You can make the header of a hypertext link using the following code: lt; a name = identifier > .... </a>

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

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

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

The # character in front of the target name is required. If the target of the link is in the act of a friend, place the web address of this act before the # character. For example, if the act is located at the address "http://www.bath.co.uk/", the link should exist like this:

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

In the future, it will be possible to set targets for links without the <a> element. The new method is much simpler, since you just 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 splitting of text into lines according to the current window size. But sometimes the need to avoid it begins. For example, in the case of the conclusion on the display of the program code. 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 represented as follows:

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

  if (next)
  next-> prev = prev;

  parent = null;
  }

Text colors and backgrounds are set using the style sheet. Notice that all line breaks and spaces are generated just as they are in HTML. The exception is a newline immediately after the initial <pre> tag, also directly before the final </ pre> tag , which are not taken into account. This means that the following sample pairs will be generated identically:

 <pre> formatted text </ pre>

 <pre>
 formatted text
 </ pre>

Typically, formatted text is generated using a monospace 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 a monospaced font in any way, so you must define the font-family property. For example, if you want all the pre elements to appear in green, you can define the following style position:

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

When setting the text color, it is recommended to set the background paint in the same way. This ensures that there is no situation at which time the background paint is difficult to distinguish from the text color. Instead of setting the background color for the pre element, it is allowed to 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, it is allowed to choose whether this image will be considered part of the current line of text or will be attached to the right or left margin. This is determined by the align attribute. If the align attribute is set to left , the image is attached to the left margin. If set to right , to right. For example:

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

It will be presented as:

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

This is how align = "right" is used.

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

It will be presented as:

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

To continue the text generation 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 as:

sunburst graphic This text starts to the left of the image.
Here begins a new line located below 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 circle.

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

This 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 bit of style">
  <area shape = "circle" coords = "186,171,45"
  alt = "Web Page 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 "pages.gif" image. The usemap attribute gives a link to the map element. The web address is used for this, therefore the # symbol is also used. For the border attribute is set to "0", so that around the image does not seem blue edge.

The map element defines which county of the image will serve as links. The name attribute corresponds to the usemap attribute of the img element also acts in approximately the same way as the name property of the <a> element. In practice, the map element is forced to be in the blah blah file, which is also an img element.

The area element is used to define the image's district and to associate it with a web address. The shape attribute defines the shape of a neighborhood: "rect" (rectangle), "circle" (circle) or "poly" (polygon). The coords attribute defines the coordinates of the district depending on the form.

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

The left upper speck is considered the source of the image, the x coordinates and its y are equal to zero, the x coordinate increases along the course to the right, and the y coordinate decreases. Most of the tools for working with images allow you to find the coordinates of any given point of the image.

If several areas intersect, the priority is determined by the area determined by the first of the intersecting ones (that is, the corresponding act will begin to occur when you click the mouse). To obtain more complex figures, the share of the district is allowed to be made inactive by blocking 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 district in a larger circle created by the second area element. In order for an inactive district to take effect, it must exist indicated up to the active one; otherwise, the priority will become the active area.

Why use the alt property

The alt attribute of the area element is used to specify the text label for the link. Without this attribute, the map will become inaccessible to people who for no reason will not see the image.

Tables

Tables are used for information also for the location of elements on the page. You can stretch the tables to fill the fields, set their fixed width, or allow the browser to automatically resize the tables according to their occurrence.

Tables consist of one or several rows of cells. Here is an unsophisticated example:

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

Here is 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 a table container. The border attribute defines the thickness of the face in pixels. The tr element serves as a container for the table row. The th elements also td serve as containers for the headers and also data cells, respectively.

Fields in the cell

Enlarge the fields in all cells at once is allowed 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

Cell spacing

The cellspacing attribute defines the gap between cells. Set the gap between the 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

The width of the table is allowed to be set using the width attribute. Its value can exist or the width in pixels, or a percentage value representing the percentage of the space between the left and right margins. For example, we set the width of the table to be 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 text in the header cells (th) in the center, but in the data cells (td) to the left. Alignment is allowed using the align attribute, which can be applied to a cell or to a line (element tr). It can have the values ​​"left" (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 defines the vertical alignment of the cell contents exactly like a blah blah. It is used with the values ​​"top" (up), "middle" (middle) or "bottom" (down) can also be used with any cell or row. By default, the contents of the header cells (th) are centered, however, the contents of the data cells are aligned on the left margin also at the top of the cell.

Empty cells

Browsers handle empty cells differently. 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 an unbreakable space in it:

 <td> & nbsp; </ td>

Cells spanning multiple rows or columns

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

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

The heading "Year" now takes up two lines, but the heading "Sales" has three columns. This is achieved by setting the rowspan attributes to colspan, respectively. Here is 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 is allowed to be simplified by taking advantage of the fact that browsers do not require end tags for cells and 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” heading occupies two lines, the main element th in the other line is located in another column, but not in the first column.

Borderless Tables

Such tables are widely used for formatting pages and creating grids on them. To do this, just add the property border = "0" 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, the style sheet is also used to set a different background color for the header cells. Here are the provisions of the style 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 th cells also td in accordance with the set red / green / blue values. Numbers should be in the range from 0 down to 255 (fully saturated color).

In a different way, the background paint can be set using the bgcolor attribute. This technique works in approximately all browsers also does not require support for style sheets. First, determine the hexadecimal values ​​of the scarlet, green, and blue components that you want to use. The style guide has 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 see the table, it is difficult to understand what the word is moving in it about. It makes sense to specify the assignment information and the structure of the table. The caption element allows you to specify a header as well as place it above or below the table. The caption element is forced to be located after the tr element of the first line.

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

This table is defined 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 the table, but the align = "bottom" property has been added to the caption element:

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’t see the table at all. For example: "in the main column are given years, but in the other - the arrival of this year."

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

Defining relationships between cells of data headers

If the table is generated on a sound device or on a device for concluding the Braille alphabet, it makes sense to indicate which cell the headings belong to. For example, a sound browser can also move up and down or right to the left in the table cells, pronouncing a corresponding heading in front of each cell.

For this, you need to annotate each cell of the header / data. 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 a header for the remaining elements of the current row.
  • col : The cell contains a header 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 list of identifiers of header cells separated by spaces. Each cell of the header must have an id property with a corresponding identifier.

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

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

Roll-Overs are also other tricks.

A little javascript can significantly revive the page. Below is shown how to create "rollovers", at what time the external appearance of the link changes when the mouse pointer is placed on it. In addition, you will learn how to create cyclical banners that will help redirect visitors to your sponsors' sites.

Roll overs

Most often, roll-over is an image that serves as a hypertext link. When the mouse pointer caters to this image, it changes to bring care to the link. For example, you can add a glow effect, a shadow, or just change the background paint. 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 take a chance!"> </a>

and this is what it looks like ...

Come in if you take the risk!

I created the image data using a free graphic editor, adding the effect of hot wax and also a shadow. With the help of search engines on the Web, it is allowed to find a lot of tips and free images.

Banners

If your site is owned by 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 in the same size. The corresponding image URLs of the sites are then placed in arrays named adImages and adURLs , defined in the source of the script. The img element for each link has to be initialized with the main image from the array. The loop starts with the onload event in the body element.

 <html>
 <head>
 <title> circular 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];
  }
  }

  // banner change 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 to check whether all images are the same height and width also. You can also set the width and height attributes for the img element to ensure that all images are the same size.

And what if browsers do not support scripts?

The contents of the noscript element is displayed, only if the browser does not support scripts. It is forced 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. Suppose you want to make links 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 is allowed to be found on the search engines.