HTML PRIMER
by Jim Gordley
2008-2016

<p> <br> <hr> Lists <h1> <blockquote> <div> <cite> <! -->

Paragraphs <p></p>

Formatting documents is a very important part of web page design. Without proper formatting, reading a web page would be difficult. Studies have shown that holding a readers interest requires proper formatting and good design. The most basic of the formatting tags is the paragraph <p></p> tag set.

Defining Paragraphs
The HTML

<p>Paragraphs are contained within the &lt;p&gt; and &lt;/p&gt; tag set.</p>

<p>
Use of the 
&lt;p&gt; and &lt;/p&gt;tag set cause a double line break separating one paragraph from the other.</p>
Notice that the paragraph tag forces a line break before and after giving space between paragraphs.

Aligning Paragraphs
The HTML

<p style="text-align:left;">This short paragraph is left aligned.</p>

<p style="text-align:center;">This short paragraph is aligned to the center.</p>

<p style="text-align:right;">This short paragraph is right aligned.</p>

<p style="text-align:justify;">This paragraph is just a little bit longer to show that the alignment is justified, much the same as you would see in a newspaper.</p>

The Results
 

Paragraphs are contained within the <p> and </p> tag set.

Use of the <p> and </p> tag set cause a double line break separating one paragraph from the other.

Use CSS to define the presentation attributes of the <p></p> tag set.
 

 

The Results


This short paragraph is left aligned.
 

This short paragraph is aligned to the center.
 

This short paragraph is right aligned.
 

This paragraph is just a little bit longer to show that the alignment is justified, much the same as you would see in a newspaper.

 


Line Breaks <br>

The <br> tag is unpaired meaning that it does not have a closing tag. Use this tag to force a single line break.

THE HTML

THE RESULTS

<p>Unlike the <span style="text-weight:bold;">&lt;p&gt;</span> tag that forces a double line break, the <span style="text-weight:bold;">&lt;br&gt;</span> tag forces a single line break.<br>Keeping line spacing under control.</p><p>If the <span style="text-weight:bold;">&lt;p&gt;</span> is used a double space is forced. Unlike the <p> tag that forces a double line break, the <br> tag forces a single line break.
Keeping line spacing under control.

If the <p> is used a double space is forced.

   

Horizontal Rules <hr>

The <hr> is a separator used to aid in the formatting of web pages. A good example can be seen at the bottom of many web pages.  The <hr> tag is not a paired set, therefore a closing tag is not required. A line break is forced by use of the <hr> tag.


HomeSpun Internet Enterprises
P.O. Box 38082
Cleveland, Ohio 44138


Presentation attributes have been deprecated for this tag. Use of Style Sheets is highly encouraged when anything other than default attributes are desired.

Presentation Attributes of the <hr> tag

THE HTML

THE RESULTS

<hr>

 

<hr style="color:#ff0000;">

 

<hr style="width:50%;">

 

<hr style="height:7px;">

 

<hr style="text-align:right;
width:50%;">

 

   

Lists <ul></ul> <li></li> <ol></ol>

Lists are very useful when it comes to keeping things organized. Placing items in a list helps to prioritize them, make them easier to find, and helps readers understand the flow of information being presented.
 
Use CSS to define the presentation attributes of these tag sets.

List Style Types

  • disc
  • circle
  • square
    none
  1. decimal
  2. upper-roman
  3. lower-roman
  4. upper-alpha
  5. lower-alpha
bullet image
 

HTML SYNTAX

Unordered List

<ul style="list-style-type:disc;">
<li>
First list item</li>
<li>
Second list item</li>
</ul>

Ordered List

<ol style="list-style-type:decimal;">
<li>
First list item</li>
<li>
Second list item</li>
</ol>

Custom Bullets

<ul style="list-style-image:url('file')">
<li>
First list item</li>
<li>
Second list item</li>
</ul>
 


Click on the image to view the actual web page
and the HTML for the web page above.


 

THE RESULTS

Unordered List

  • First list item
  • Second list item
     

Ordered List

  1. First list item

  2. Second list item

     

Custom Bullets

bullet

First list item

bullet

Second list item

 

 


Headings <h1></h1> - <h6></h6>

THE HTML

THE RESULTS

<h1>level 1 heading</h1>

level 1 heading

<h2>level 2 heading</h2>

level 2 heading

<h3>level 3 heading</h3>

level 3 heading

<h3>level 4 heading</h3>

level 4 heading

<h3>level 5 heading</h3>
level 5 heading
<h3>level 6 heading</h3>
level 6 heading

THE HTML

THE RESULTS

<h2>THE GETTYSBURG ADDRESS</h2>
<p>
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation or any nation so conceived and so dedicated can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting-place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. But in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow this ground. The brave men, living and dead who struggled here have consecrated it far above our poor power to add or detract. The world will little note nor long remember what we say here, but it can never forget what they did here. It is for us the living rather to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us--that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion--that we here highly resolve that these dead shall not have died in vain, that this nation under God shall have a new birth of freedom, and that government of the people, by the people, for the people shall not perish from the earth.</p>

 

THE GETTYSBURG ADDRESS

Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation or any nation so conceived and so dedicated can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting-place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. But in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow this ground. The brave men, living and dead who struggled here have consecrated it far above our poor power to add or detract. The world will little note nor long remember what we say here, but it can never forget what they did here. It is for us the living rather to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us--that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion--that we here highly resolve that these dead shall not have died in vain, that this nation under God shall have a new birth of freedom, and that government of the people, by the people, for the people shall not perish from the earth.

   

Aligning Blocks of Content <blockquote></blockquote> & <div></div>

The <blockquote></blockquote> tag set increases both the left and right margins of the content. This has the affect of setting that content in its own space.

Click on the image to the left to view a full sized example along with the HTML.

The <div></div> tag provides a way of controlling some display properties of anything contained within them. Using the <div></div> tag set forces a line break.

Contents of the <div></div> will be separated from other areas by a line break. Use the style attribute to control the presentation properties of this tag.

Clicking the image on the right will open a new browser window. View the browser window and then the source code to better understand the <blockquote> and <div> tag sets.

CITE

HTML RESULT
<p style="text-align:center;">
<cite>The Flood</cite> by Jim Gordley &copy;2005-2016
<br><img src="images/theflood.jpg" style="width:"325px; height:428;" alt="The Flood image and manipulation by Jim Gordley all rights reserved" title="The Flood image and manipulation by Jim Gordley all rights reserved">

The Flood by Jim Gordley ©2005-2016
The Flood image and manipulation by Jim Gordley all rights reserved

The eyes really look spooky in The Flood

Comments <!--  -->

As web pages are being created they get larger and more complex. The HTML may get difficult to read as the page grows in complexity. Fortunately there is a way to add comments that will not be displayed to the web page audience, the <!--  --> tag.

THE HTML

THE RESULTS

<p>Olmstead Falls Ohio has wonderful access to the Metro Parks.<br>
<!-- I need the image of the boy on the bridge for the space below  -->
<img src="images/boyonbridge.jpg" height="245" width="350" alt="Olmstead Falls Metro Parks Bridge."><br>
As you can see from the photograph above the area is beautiful and there are plenty of fun things to do.</p>

Image on the right is purposely not shown.
Click here to view the image.

Olmstead Falls Ohio has wonderful access to the Metro Parks.
Olmstead Falls Metro Parks Bridge.
As you can see from the photograph above the area is beautiful and there are plenty of fun things to do.

Notice how the text within the <!--  --> tag is not displayed in the results area.

   


2008 HomeSpun Internet Enterprises