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

Basic Block-level Elements (2)

[The purpose of this section]
Learn the meaning of and how to use the most basic block-level elements. However, you learn the table element in the next chapter, because this element is a little bit complicated.

A Range of Lists to List up Items (ul, ol, and dl)

[Practice: Various lists]

Please study the lists to list items which are explained below.

First of all, please make sure that you go through the textbook to learn how to create a list (bulleted list) in HTML.

For each element, there will be explanatory comments about the element, Sample HTML, and the image of the Sample HTML displayed on the Web Browser. Please make sure that you actually go through the whole process yourself starting from inputting the text into the HTML file and saving it, followed by displaying it on the Web Browser and checking the format displayed on the screen. If it is difficult for you to understand the behavior, try to add two or more elements or increase the amount of content, then display the file again on the Web Browser until you have a complete understanding of it.

The following are the processes you are actually required to go through:

Open “week07\ex1.html” on the Hidemaru editor.
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 below.
(Note) Please do not delete the sample element whose behavior you have checked; instead, leave it there. When you want to try a new element, additionally input it in the document. As a matter of course, if you made an input mistake or other mistakes, correct them and save the final corrected version.
When you have finished adding the element, save the file and check the display on the Web Browser.

Unordered list and ordered list (ul element, ol element, and li element).

Explanation of the element

The ul element or ol element is used to make a list. The ul list means an unordered list, which means that this is a type of list where items are listed without any set order. In contrast, the ol list means an ordered list which shows the order or rank of items. For both elements, list items are defined one by one using the li element.
Although both ul and ol elements are block-level elements, they cannot contain anything but li elements.
The li element is a block-level element which can contain inline elements, text, or even block-level elements.
The whole ul or ol element is indented down when it is displayed on the Web Browser. A bullet “?” is added at the top of each li element included in the ul element, and numbers such as “1.”, “2.” and so on are automatically added to the top of each li element included in the ol element.

Sample HTML

<p>First of all, let us try a sample unordered list (ul element). 
 This is the code of conduct for the PC lab at Kumamoto University. </p>
<ul>
  <li>No drinking and No eating, including chewing gum.</li>
  <li>No shoes are allowed in most rooms.</li>
  <li>Use the computer carefully.  Follow the prescribed order to shut down 
the computer.</li>
</ul>
<p>
Next, let us try a sample ordered list (ol element). This is the proceeding 
of the lecture, “Introduction to Information Technology A/B”.
</p>
<ol>
  <li>Log on to the PC and register your attendance via WebCT no later than 
20 minutes from the start of the lecture.</li>
  <li>Listen to the lecture outline, notes on the important points, and the 
proceedings of the lecture.</li>
  <li>Do the tutorial assignment while reading through the textbook
from the beginning and understanding what is written there. </li>
  <li>By the end of the lecture, submit the result of the tutorial assignment
 for the day via WebCT. </li>
</ol>
<p>End of the sample unordered list and sample ordered list. </p>

The results displayed on the Web Browser

ul_ol

A list contained in another list (nesting of the list)

By placing an ul element or an ol element inside a li element, you can create a list inside a list. This kind of structure is called nesting of the list.

Sample HTML

<ol>
  <li>Chapter 2
    <ul>
      <li>Basic block-level elements (2) </li>
      <li>Table element </li>
    </ul>
  </li>
  <li>Chapter 3
    <ul>
      <li> Inline elements </li>
      <li>Emphasis, superscript, subscript, etc.</li>
    </ul>
  </li>
</ol>

The results displayed on the Web Browser

ulol_nest

Definition list (dl element, dt element, and dd element)

Explanation of the element

A list comprising a term to be defined and explanation of it is called a “definition list”. The definition list is defined by a dl element, while it can contain a dt element which specifies the definition term and a dd element which is definition description. The dd element is indented down on Web Browser display. Although the dl element is a block-level element, it cannot contain anything but a dt element or a dd element. The dt element is an inline element which can contain inline elements and/or texts.
The dd element is a block-level element which can contain inline elements, texts, or even block-level elements.

(Note) The definition list can be used not just for a term and the explanation of the term, but also for a variety of other purposes including reference materials and their descriptions as well as for an address book.

Sample HTML

<dl>
  <dt> Heading (h1-h6 element)</dt>
  <dd>
    <p>There are 6 levels of elements which specify the heading; i.e., 
       h1 element, h2 element, … h6 element. The h1 element is the topmost 
       level (the highest in terms of significance) and the h6 element is the 
       lowest level. </p>
    <p> Although h1-h6 elements are block-level elements which can contain 
       inline elements and/or texts, they cannot contain any block-level 
       element. </p>
  </dd>

  <dt>Paragraph (p element) </dt>
  <dd>
    <p> A paragraph means “a block of text”. The p element is used to define
       a paragraph. </p>
    <p> Although the p element is a block-level element which can contain inline
       elements and/or texts, it cannot contain any block-level element. </p>
  </dd>
</dl>

The results displayed on the Web Browser

Other Block-level Elements (address and pre)

[Practice: address element and pre element]

Please study the two elements which are explained below.

First of all, please make sure that you go through the textbook and study the meanings and the functions of the address element and pre element.

What you are actually required to do is to open “week07\ex1.html”, which you used in the practice above, on the Hidemaru editor 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.

Author information (address element)

Explanation of the element

You can use an address element to define a text block as information about the author of the Web page. People use the address element to write the copyright information, contact addresses, the date the page was initially published, the date it was revised, etc., at the end of the page.
Although the address element is a block-level element which can contain inline elements and/or texts, it cannot contain any block-level element.

Sample HTML

<address>
 Date published: 23 Oct 2005, Date revised: 25 Oct 2005<br>
  Copyright (C) Senta Soujou 2005, All Rights Reserved.
</address>

Webブラウザでの表示結果

address

Preformatted text (pre element)

Explanation of the element

You can use the pre element to define a text block as a preformatted text. A preformatted text is a text (document) in which line breaks and spaces in the HTML document are displayed as it is on the Web Browser.
Generally, this element is used to introduce the source code of programming languages or HTML languages. Although the pre element is a block-level element which can contain inline elements and/or texts, it cannot contain any block-level element.
Further, it cannot contain those elements that are used for text decoration including the sup element and the del element which will be discussed later in this course.

Sample HTML

<pre>
       If you put spaces          like this, or
start a new line like this in a pre element, it is displayed as is.
You don’t need any br element which breaks the line in the pre element, do you?
</pre>

The results displayed on the Web Browser

pre

Things to be noted when you use the pre element

When you use the pre element, unlike other usual elements, “spaces” and “line breaks” in the element will be displayed as is on the Web Browser. For this reason, you have to be aware of the following:

The space immediately after the start tag or line break as well as the space immediately before the end tag or line break will be displayed as is on the Web Browser. Therefore,
Including start tags and end tags, you should not use any indentation. Start inputting right from the top of the line.
If you make indentations using the TAB key as you have been doing, the indent size will be 8 characters; i.e., the default TAB size of the Web Browser. Therefore,
If you want to indent in the main body of the pre element, please use the normal space key to make the indentation.

An example of improper use of pre element

<div>
  <pre>
    Author: Senta Soujou
   Date published: 23 Oct 2005, Date revised: 25 Oct 2005
  </pre>
    Copyright (C) Senta Soujou 2005, All Rights Reserved.
</div>

As the contents (the lines showing the author and the date published) of the pre element are indented 4 characters worth, these lines will be indented 4 characters worth on display. On the other hand, as the line containing Copyright is outside of the pre element, there will be no indentation for this line. In addition, as the end tag of the pre element () is indented, an empty line will be inserted after the line containing the date published, because of the existence of the space.

(Note) A div element, which has not yet been introduced, is used above. The div element has a function of making a range of texts into a block. However, as we are going to discuss it later in Session 10, at this stage, please just think that it is something similar to the p element. (We cannot use the p element here instead of the div element, because the p element cannot contain any block-level element).

The results displayed on the Web Browser

pre_NG