Mar 20, 2008

HTML Headers and Paragraphs

HTML Headers and Paragraphs

HTML Headings

There are 6 levels of HTML headings (H1 through H6). H1 is the largest. Headings are always displayed as bold text (Unless modified using the STYLE attribute or style sheets). Headings with numbers above the <h3> tag such as <h4><h5> and <h6> are not normally used since they are so small.

<h1> - Start heading of level 1.

</h1> - End level 1 heading.

Heading attributes are the same as the paragraph attributes, below. No attributes are supported by strict HTML 4.0 other than common attributes such as STYLE which are used to set color and position.

HTML Paragraph

The paragraph element begins with the <P> tag and ends with the </P> tag. It should not contain tables and other block elements. A sample is shown below.

<p>
This is a sample paragraph element. Any text in a paragraph goes here.
</p>

Paragraph Attributes

  • ALIGN="CENTER" - (Depreciated) Sets the alignment of the paragraph with respect to the page size. Values are LEFT, RIGHT, and CENTER.
  • STYLE="font: 16pt courier" - Sets the style or color of the text. This statement starts a paragraph with color, blue: <p style="color: green">. The STYLE attribute is common to most HTML elements (See the "Common Attributes" section).

Paragraph Examples

This is the HTML code for a paragraph demonstrating use of the STYLE attribute along with the SPAN element.

<p style="text-align: 'center'; font: '16pt'; courier; color: 'blue'">
The color of the sky is blue, but if you look at the <span style="color: 'green'">trees, they are green</span>. This effect is produced using the &#60span&#62 element with the style ="color: 'green'" attribute set.
</p>

This is how it looks:

The color of the sky is blue, but if you look at the trees, they are green. This effect is produced using the <SPAN> element with the STYLE ="color: 'green'" attribute set.

An example HTML document using Headers and Paragraphs

This example is from "The CTDP Linux User's Guide":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Arachnophilia 3.9">
<meta name="description" content="Comprehensive Documentation and information about Linux.">

<title>The CTDP Linux User's Guide</title>

</head>
<body>
<center><h1>Logging in, Logging Out, and Shutting down</h1></center>
<h3>Logging in</h3>
<p>
Once you have completed your system install and booted your system, you should see a login prompt on your monitor. When you did your Linux install you should have set a root password. You may have also created a user with a password. Therefore to log in, you will want to type the name of a user or "root" for the login name and enter the appropriate password. If you logged in as a normal user and know the root password and want to use administration commands, you may use the command "su" to become a "super user". Some systems also support the "sudo" command, which allows administrative privileges on a command by command basis.
</p>
<h3>Logging out</h3>
<p>
Use the command "logout" to exit a given session. If you have logged in, then typed "su" to become a super user or another user, you may need to type "exit" until your SHLVL environment value is 1. Then you can type "logout" to exit your session. The "exit" command will take you back to previous shell levels.
</p>
<h3>Shutting Down</h3>
<p>
The system is intended to be shutdown by the system administrator using the shutdown command in one of the forms shown below. Many systems are set up to capture the &#60CTRL&#62&#60ALT&#62&#60DEL&#62 keystroke combination to issue the shutdown command through the init program. This will work on most systems if the root user is logged in. Examples of using the shutdown command are shown below.
<blockquote>
shutdown -h now<br>
shutdown -r +10 "Rebooting in 10 minutes"<BR>
shutdown -r 13:00<BR>
</blockquote>
The first command will shutdown and halt the system immediately. The second will reboot the system in 10 minutes and send the message to all users. The third command will shut the system down and do a reboot at 1:00 in the afternoon.
</p>
</body>
</html>

Although this document is about paragraphs and headers, there are a few things worth noting here.

  1. In the last paragraph, there is a <blockquote>...</blockquote> element embedded. Although this works, the use of BLOCKQUOTE in this instance is improper. Not only should it be done using style sheets, as follows, the use of BLOCKQUOTE inside the paragraph element, P, is also not proper. The text where the blockquote is should be changed to:

<p class="indent">
shutdown -h now<br>
shutdown -r +10 "Rebooting in 10 minutes"<br>
shutdown -r 13:00<br>
</p>

Of course the previous paragraph would need to be terminated with the </p> tag and the following paragraph started with the <p> tag. The style sheet should contain:

."indent" { margin-right: '5%'; margin-left: '5%'; color: '#0000ff' }

This defines a class called ""indent"" with specific margin characteristics and color which, when defined in the starting <P> tag, causes the contents of the element to have the attributes declared for that class.

  1. In the last paragraph, the following line:

Many systems are set up to capture the &#60CTRL&#62&#60ALT&#62&#60DEL&#62 keystroke combination to issue the shutdown command through the init program.

appears as follows when displayed on the web browser:

Many systems are set up to capture the <CTRL><ALT><DEL> keystroke combination to issue the shutdown command through the init program.

This is because there are characters with special meaning in HTML and since HTML uses the < and > characters to set up tags, there must be a special character combination to display them so they are not used as part of a tag. These special characters are listed in the section on text formatting.

  1. The <center> and </center> tags are used to center the header, <h1>...</h1>, at the top of the page. This can also be done with the following code using the STYLE attribute which conforms to HTML 4.01 by not using depreciated attributes.

<h1 style="text-align: 'center'">Logging in, Logging Out, and Shutting down</h1>

No comments:

Post a Comment

Popular Posts