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

Basic Block-level Elements (1)

[The purpose of this section]
Learn the meaning of and how to use the most basic block-level elements.

Obtaining Template Files (including HTML Grammar Check)

From now on, we are going to do some practices in relation to a range of HTML elements. However, before that, let us download some template files for the practices.

[Practice: Downloading and checking the template files]

Please follow the steps below to download the HTML template files.

First of all, create a folder called “week07”.
Click >here< and save the compressed templates file, naming it “template.zip”.
When you double click the icon of “template.zip”, you can see “template.html” icon. Right click that icon and select “Cut” to paste it in the “week07” folder as “week07\ex1.html”.

(Note) As template.html is encoded in SHIFT-JIS, you will get an error message if you try to open it on the Hidemaru editor. (This is because you specified the type of encoding for an HTML file as UTF-8 in Session 6, 4.1: Configuration of the Editor for HTML File Creation).
In that case, please follow the steps below to re-specify it to be UTF-8.

Please set the encoding type to be SHIFT-JIS for the time being.
Rewrite the following segment
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
to become like this
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Select “Save as” to save the file while making sure that UTF-8 is selected in the “encoding type” box.

Most Basic Block-level Elements (h1-h6, p, hr, and blockquote)

From now on, we are going to do some practices in relation to a range of HTML elements. Please use the downloaded template.html as a base to check each element’s behavior on the Web Browser. Make a copy of template.html and add/save the same element as shown in the sample HTML to see how the element is displayed on the Web Browser. Repeat this process to understand the behavior of each element.

[Practice: Most basic block-level elements]

Please study the most basic block-level elements which are explained below.

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” that you have created on the Hidemaru editor.
Rewrite the content of the title element so that it becomes more realistic for this practice (as the content is “Please write a title here” in the template file, please delete it and input something more appropriate).
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.
When you have finished adding the element, save the file and check the display on the Web Browser.

Heading (h1-h6 element)

Explanation of the element: 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.
The h1-h6 elements are block-level elements which can contain inline elements and/or texts; however, they cannot contain any block-level element.
(Note) On the Web Browser, in many cases, the font size of the h1 element is the largest and that of the h6 element is the smallest. However, you should not use these elements to change the font size.
Sample HTML: This is the top level heading (h1).

This is the second level heading (h2).

This is the third level heading (h3).
The results displayed on the Web Browser

Paragraph (p element)

Explanation of the element: A paragraph means “a block of text”. The p element is used to define a paragraph.
Although the p element is a block-level element which can contain inline elements and/or texts, it cannot contain any block-level element.
Sample HTML: 
This is the tag to create a paragraph. You should enclose ordinary texts with this tag. If you input this tag, an empty line is inserted.


Were you able to confirm that an empty line has been inserted here?
The results displayed on the Web Browser

Line break (br element) [inline element]

Explanation of the element: This element is used to break the line in a paragraph. The “br” element does not require an end tag. Although the
br element is an inline element, it is explained here, because it is used in the p element most of the time.
(Note 1) If you repeat the br element, you can produce empty lines. However, you should not use this element for this purpose. Instead, use the br element only when you want to keep sentences together inside a paragraph.

(Note 2) An element without an end tag is called an “empty element”. Normally an HTML element has “content” between the start tag and the end tag. However, in the case of “empty element”, there is no “content” part.
Sample HTML: 
Even if you break the line
in the HTML file,
there is no line break
when displayed on the Web Browser. 
However, if you input where you want to end the line, a new line starts like this.
The results displayed on the Web Browser

Horizontal rule (hr element)

Explanation of the element: This element is used to display a horizontal rule in the document. It is used to distinguish two blocks with different contents by inserting a rule between the blocks
Although the “hr” element is a block-level element, it is an empty element requiring no end tag.
Sample HTML: 
So far we discussed such things.

<hr>

From now on, we will discuss different things.
The results displayed on the Web Browser

Block quotation (blockquote element)

Explanation of the element: If you want to define a text as a block of quotation, use the blockquote element.
Although the blockquote element is a block-level element, it cannot contain texts or inline elements directly.
Sample HTML: 
Quotation begins after this.

<blockquote>
This part is the quotation.
On the Web Browser, the quotation part is surrounded by white spaces.
</blockquote>

End of quotation.
The results displayed on the Web Browser