HTML Text Elements for Text on Analysis

Text Elements in HTML – Part 3

Foreword: In this part of the series, I talk about the presentation of text used for analysis; I talk about the variable, keyboard, sample, code and data elements.

By: Chrysanthus Date Published: 31 May 2015

Introduction

This is part 3 of my series, Text Elements in HTML. In this part of the series, I talk about the presentation of text used for analysis; I talk about the variable, keyboard, sample, code and data elements. I say how these elements are used to present their kind of texts. No computerized calculations or computerized analysis are involved, only presentation. You should have read the previous parts of the series before reaching here, as this is a continuation.

var
This is a double tag element. Consider the following sentences:

There are n rooms in the hostel, so there are n students.
If a hostel has 25 rooms, it means it has 25 students; if a hostel has 40 rooms it means it has 40 students; if it has 50 rooms it means it has 50 students.

This means the number of rooms is equal to the number of students in a hostel (building), assuming that there should be one student per room. That information has been placed in two sentences. n has been used in two places in the first sentence. In the second sentence, instead of writing n in two places, for a clause, 25 has been written twice; 40 has been written twice and 50 has been written twice. So, in the first clause of the second sentence, n is 25; in the second it is 40, and in the third it is 50. The above two sentences are better coded in two paragraphs as follows

There are <var>n</var> rooms in the hostel, so there are <var>n</var> students
If a hostel has 25 rooms, it means it has 25 students; if a hostel has 40 rooms it means it has 40 students; if it has 50 rooms it means it has 50 students.

I tried the code and my browser displayed the n’s in italic. Text like n is called a variable. A variable is a placeholder for a number or some literal. In mathematics a common variable is x, a placeholder for an unknown number. In this tutorial, the interest is on how to present variables and not how to do any calculation or solve any equation with variables.

Consider the following three lines:

The perimeter of a rectangle is given by the formula:

P = 2(L+W) 

where P is the perimeter, L is the length and W is the width.

So to obtain perimeter, add the length to the width and multiply the result by 2.

In the second line, P is a variable; that is, it is a placeholder for a number. L is a variable; that is, it is a placeholder for another number. W is a variable; that is, it is a placeholder for yet another number.

It is advisable to place your variables of a web page in var elements. In this way the browser or you can give a particular style to all the variables; for example, you can give all of them, a particular color. The above three lines is better coded as follows:


The perimeter of a rectangle is given by the formula: 
 
<var>P</var> = 2(<var>L</var>+<var>W</var>) 
 
where P is the perimeter, L is the length and W is the width. 
 
So to obtain perimeter, add the length to the width and multiply the result by 2.


I tried the code and the variables were displayed in italic by my browser. A variable can be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a programming function parameter, or just be a term used as a placeholder in prose. If the variable is in a mathematical expression that is not simple, then use the MathML namespace (see later).

kbd
This is a double tag element. Imagine that you are to produce a web page that teaches someone how to use the computer or how to play a computer game. You have to be telling the person to type keyboard key sequences. In that situation, each key indicated in the sequence goes into a kbd element. All the keys in the sequence have to be enclosed in another kbd element. The following paragraph giving instruction in a computer game illustrates this:

To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd>

I tried the code in my computer and I had “Shift+F3” in a font different from that of the text in the rest of the paragraph.

The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands). So the kbd element is used to display computer input instructions at the web page. The following instruction sequence explains how to save a file:

To save the file, select <kbd>File | Save As...</kbd>

As you can see the kbd element can be used for mouse input. Since we are not dealing with the keys of the keyboard here, you can place the instruction sequence in one kbd element.

The question you may ask is this: can these keys or clicks not be typed ordinarily in a paragraph? – The answer is that HTML5 wants any entity or entity sequence to have its own element. When you do this, the style of the entity or entity sequence is different from the rest of the text around it. That adds to clarity and better understanding for the reader.

samp
This is a double tag sample element. In the teaching of computer programming, output of the sample (test) program is usually sent to the console. The console is the black-and-white screen or the command prompt black-and-white window. If you are teaching using the web page, then you have to display the sample output of the computer program in the samp element. The following code illustrates this:

The computer said <samp>Variable not declared</samp> but I didn't know what that meant.

I tried this code and my browser displayed the text of the sample element in a different font compared to the rest of the text.

code
This is a double tag element. If you use the web page to teach computer programming, then you have to type any code fragment in the code element. The following illustrates this:

<code class="language-pascal">var i: Integer;
begin
 i := 1;
end.</code>

The problem with the code element is that the newlines and multiple spaces are not maintained at the web page. To maintain these you have to put the code element in the pre element. The following illustrates this:

<pre><code class="language-pascal">var i: Integer;
begin
 i := 1;
end.</code>
</pre>

Remember, the spaces and newlines in the pre element are displayed as typed.

data
This is a double tag element. The number 255 in hexadecimal (base 16) is 0xff. Humans prefer to see 255 than 0xff. The computer (machine) uses but 0xff and not 255. The data element has an attribute called the value attribute. The value attribute is always used with its data element. The data element gives you a way of having a human-readable format and a machine-readable format of a value at the web page. For example, if 255 is the content of the data element, then 0xff will be the value of the value attribute. The following code illustrates this:

 255

At the web page, the reader sees 255 and not 0xff. Some software can be used to read the value of the value attribute and use it in the machine.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

HTML Text Elements for Text on Analysis

Text Elements in HTML – Part 3

Introduction

Related Links

Comments