Information Processing Fundamentals [Session7]Text-decoration, bulleted list, table, and frame

Emphasis and Superscript/Subscript, etc. (em, strong, del, ins, sup, sub, etc.)

[The purpose of this section]
Learn the meaning of and how to use other important inline elements.

Emphasis (em element and strong element) and Deleting/Inserting Statement (del element and ins element)

Emphasis (em element and strong element)

Explanation of the element

The em element or strong element is used to emphasize a particular text (word or sentence). Whereas the em element is used to place general emphasis, the strong element is used to place an even stronger emphasis than the em element.
Both are inline elements and can contain inline elements and/or texts.
On most browsers, the text defined by the em element is displayed in italics and that defined by the strong element in bold. However, you should not use these elements for the sole purpose of displaying the text in italics or bold。 . When you want to make changes to the font style, please use the CSS that will be discussed in and after Session 9.

Sample HTML

<p>
  In Information Processing Fundamentals, please submit
 <em> the assurance test </em>at each session.
  In addition, as for the assignment,
  <strong>you are supposed to submit it without fail.</strong>
</p>

The results displayed on the Web Browser

強調の例

Deleting and inserting statement (del element and ins element)

Explanation of the element

You can let other users of the Web Browser know which part of the document has been deleted or inserted by defining a text as a deleted text or an inserted text.
The del element is used to define a text as a deleted text, whereas the ins element is used to define a text as an inserted text. Most browsers automatically display the text defined by the del element as “struck-through” and “underline” the text defined by the ins element. However, you should not use these elements for the sole purpose of creating struck-through or underlined text. When you want to do text decoration, please use the CSS that will be discussed in and after Session 9.
The del element and ins element are special elements which can either be a block-level element or inline element, depending on the situation. In other words, if they are used in a block-level element, they become an inline element. However, they become a block-level element when they are used in a place where only block-level elements are allowed. When they are used as a block-level element, they can contain any element. However, when used as an inline element, they can only contain inline elements or texts.

Sample HTML

<p> The example below is a case where they are used as an inline element.
  This is a typical example of how people use them.  </p>
<p>
  Special discount just for today
  <del>20% discount </del><ins>40% discount </ins>
  Special Bargain!
</p>

<p> 
  When you want to change a block of text at one stroke, 
use them as a block-level element. 
</p>
<del>
  <p> 
 The starting date of Block 2 is May 15. 
  </p>
</del>
<ins>
  <p> 
 The starting date of Block 3 is June 12.
  </p>
</ins>

The results displayed on the Web Browser

削除・挿入

Other Important Inline Elements (sup/sub element, abbr element, and acronym element)

[Practice: Other main inline elements]

Please study the elements explained below.

First of all, please make sure that you go through the textbook to understand the meaning of each element.

After that, please open “week07\ex1.html”, which you are using in this practice, on the Hidemaru editor (If it is already open, you do not have to reopen it), and make an additional input of sample texts which use the element being discussed to the main body (i.e., the content of the body element) while referring to the samples presented below.
When you have finished adding the element, save the file and check the display on the Web Browser to understand the behavior of each element.

Superscript and subscript (sup element and sub element)

Explanation of the elements

A sup element is used to define a part of the text as superscript and a sub element is used to define a part of the text as a subscript.
Both the sup element and the sub element are inline elements and can contain inline elements and/or texts.
For example, it would be more appropriate if the power “x” in “8x” is a superscript and “2” in the molecular formula of water “H2O” is a subscript. The sup element and sub element are used in such cases.

Sample HTML

<p> Xth power of 8  → 8<sup>X</sup> </p>
<p> The molecular formula of water → H<sub>2</sub>O </p>

The results displayed on the Web Browser

上付き・下付き文字

Abbreviated form and acronym (abbr element and acronym element)

Explanation of the elements

You use the abbr element to define a term in the text as an abbreviated form and the acronym element to define it as an acronym. The difference between the abbr element and the acronym element is that the former defines a term whose characters that constitute the term are pronounced one by one; for example, “HTML” or “URI”, whereas the latter defines a term which is pronounced as one word; for example, “LAN” or “SOHO”. Usually you attach the title attribute to specify the unabbreviated/full term as an attribute value.
These element are inline elements and can contain inline elements and/or texts.
Most browsers add dotted underline, etc. to display the content of these elements, and when you place the mouse pointer there, the value of the title attribute will be displayed.

Sample HTML

<p>
  Thanks to the widespread use of broadband networks,
 even large-volume data can be transferred through
  <abbr title="File Transfer Protocol">FTP</abbr>
  and so on without much problem.  As a result,
  <acronym title="Small Office/Home Office">SOHO</acronym>
  can function more efficiently as a work place for housewives, etc.
</p>

The results displayed on the Web Browser

省略語

(Note) The image above shows what happens if you place the mouse pointer on “SOHO”. You can confirm that “Small Office/Home Office” which has been specified by the title attribute is popped up, can’t you?