Will Bontrager Blogs Website Techniques

The dl HTML tag seems to hardly be used anymore. But it's still good. It still works as well as it always has.

It can be used when you have terms and definitions to publish.

The letters "DL" stand for "Description List". Between the opening and closing dl tags are dt ("term") and dd ("description") tags.

Browsers have default formats for the dl HTML tag, which CSS can modify. Screen readers know what to expect when they encounter dl HTML tags.

Here is an example, rendered with your browser's default format. (I added the background color separately.)

The dl HTML tag contains one or more dt and dd tag sets.

<dl>
<dt>title</dt>
<dd>description</dd>
<dt>another title</dt>
<dd>another description</dd>
</dl>

With the above construction of the dl tag at hand, here is the code for the example provided near the biginning of this article.

<dl>
<dt>Will Bontrager</dt>
<dd>A software developer who also writes non-fiction articles and fiction books. His books and writer tools are at <a href="https://willbontrager.com/">his author website.</a></dd>
<dt>Vern Harrison</dt>
<dd>Vern Harrison is a pen name of author Will Bontrager. <a href="https://vernharrison.com/">Vern Harrison books</a> are all dark Old West novels.</dd>
</dl>

Code as many dt and dd tag sets as you need for your list of terms and definitions.

If you'll put the dt { font-weight:bold; } CSS definition into your style sheet, the terms will become bold. That and other CSS can be applied to any of the dl, dt, and dd tags.

The description list tags are designed to be used when terms and definitions are to be published.

(This content first appeared in Possibilities newsletter.)

This article is a quick review of common and handy ways to use the 'A' tag. Some may be new to you.

To describe everything related to an 'A' tag would require a huge article. One has already been written, the anchor element article by the Mozilla people.

(If you landed here when you really were looking for how to link without using the 'A' tag, the information you want may be at the Linking Without an 'A' Tag article.)

While it can link to various types of destinations, the 'A' tag is mostly used for linking to other web pages or to other locations on the same web page.

For linking to other web pages, you need to know their URL. For other locations on the same web page, you'll need to know the id value of the HTML element being linked to.

The href is a required attribute. It tells the 'A' tag where to link to.

Here is how to link an 'A' tag to a URL.

<a href="http://example.com/the-URL-of-a-web-page.html">Another web page</a>

The text (or image) between the <a...> tag and the ending </a> tag is called anchor text (or anchor image). In the above illustration, the anchor text is Another web page.

To link to a location on the same page, the href value begins with # and ends with the id value of the HTML element being linked to.

Here is an illustration. First, an element with an id value and then the 'A' tag link.

<div id="location-to-link-to">[stuff here]</a>

<a href="#location-to-link-to">Scroll to 'stuff'</a>

Assuming the above code is on the same page, when the Scroll to 'stuff' link is tapped then the browser scrolls until the top of the div with id="location-to-link-to" is at the top of the browser's screen. If the browser cannot scroll to that location, it will scroll as close as it can.

Below is code for linking places or things that are not web pages. You can probably guess what the code does. Nevertheless, I'll mention them below the code box.

<a href="tel:212-555-1987">Call me!</a>
<a href="mailto:name@example.com">Email me!</a>
<a href="sms:222-555-7819">Text me!</a>
<a href="javascript:alert('hello')">Run this JavaScript</a>

Yes, you are right:

• The first one dials your phone when the browser is set up to do so. Otherwise, it asks for information related to your phone.

• The second one launches your email software, when it can, with the address pre-filled in. If it cannot launch your email software, it will ask for information.

• The third one either sends a text message or asks for information related to sending a text.

• The fourth one runs the JavaScript code that follows javascript:

All fun stuff.

The HTML 'A' tag is, in essence, a linking element. The above describes some of the most common ways it is used.

(This content first appeared in Possibilities newsletter.)

On web pages, there are various space widths that can be specified between words and characters or images.

The normal or default space is the spacing you see between the words in this paragraph. The spacing is generally referred to as medium spacing. There are also hair spacing, thin spacing, and thick spacing.

Here is a list of various spacing that is available. Each is specified by a named character.

⁽¹⁾When a medium space is specified with   and the text is justified, the medium space adjusts its width to match the adjusted default spacing between words for that line. Here is an example.

Publish as space with a named character when you want a specific amount of space or when two words must stay together on one line.

I generally use &thinsp between radio buttons and their label text. Also checkboxes and text. Radio buttons and checkboxes generally have margins, so I remove those first.

Here is an example of that, followed by the source code:

<style type="text/css">
input[type="checkbox"], input[type="radio"] { margin:0; }
</style>

<input type="checkbox">&thinsp;For a label

As another example of use,   can be used between images to insert a twitch of space between them — so they don't bang up against each other yet don't have the normal amount of space.

Here is an example and the source code:

 

<div>
<img src="https://willbontrager.com/coverimages/Truffles-22-recipes/20201122-cover-200w.jpg" style="max-width:125px;" 
alt="book #1 cover">&hairsp;<img src="https://willbontrager.com/coverimages/First-candy-book/BookCoverARccc(200w).jpg" 
style="max-width:125px;" alt="book #2 cover">
</div>

(The books repesented by the example images can be found at WillBontrager.com.)

When additional space is needed, the named characters can be doubled or tripled or more. As an example, A      B      C      D      E      F uses        for each space between the letters.

A      B      C      D      E      F

When spacing is important, one of the named characters for publishing space may be exactly right for the situation.

(This content first appeared in Possibilities newsletter.)

"CSV" stands for "Comma-Separated Values". CSV is a popular plain text format often used especially for exporting and importing data to and from various spreadsheet software.

This article is for PHP programmers. I'll show you how to format CSV with PHP.

Do it with a function. Here is one that will do the trick.

function MakeCSVline($array)
{
   $formattedarray = array();
   foreach( $array as $chunk )
   {
      if( preg_match('/[\"\'\r\n\,]/',$chunk) )
      {
         $s = str_replace('"','""',$chunk);
         $formattedarray[] = '"' . $s . '"';
      }
      else { $formattedarray[] = $chunk; }
   }
   return implode(',',$formattedarray);
} # function MakeCSVline()

In a PHP script, call the function with an array of values. The function returns a line of CSV-formatted text.

Here is an example.

<?php
$testarray = array( 'chocolate', 'Tom "Smiley" Thumb', 'The fortune, the freedom' );
$CSVline = MakeCSVline($testarray);
echo $CSVline;
function MakeCSVline($array)
{
   $formattedarray = array();
   foreach( $array as $chunk )
   {
      if( preg_match('/[\"\'\r\n\,]/',$chunk) )
      {
         $s = str_replace('"','""',$chunk);
         $formattedarray[] = '"' . $s . '"';
      }
      else { $formattedarray[] = $chunk; }
   }
   return implode(',',$formattedarray);
} # function MakeCSVline()
?>

The example script turns this array:

Array
(
    [0] => chocolate
    [1] => Tom "Smiley" Thumb
    [2] => The fortune, the freedom
)

Into this CSV line:

chocolate,"Tom ""Smiley"" Thumb","The fortune, the freedom" 

The MakeCSVline() function handles multi-line values as well as values that contain quotation marks or commas.

The CSV-creating function is a handy little tool for you PHP programmers.

(This content first appeared in Possibilities newsletter.)