Select A State

What does all this code mean?

Paragraph: <p>These are Paragraph Tags</p>  Use them when you add text. Many html editors put them in automatically, but you may have to add some manually.

Coding:

<p>This section of text is a paragraph line without a break. It continues until you hit "enter" on your keyboard to move to the next line of text. There will be no spaces between this line and the above line of text, since it is in the same paragraph. The paragraph will run to the width of the page before it returns to the next line.</p>

<p>Once you hit "enter" on your keyboard, your text will begin a new paragraph.</p>

Breaks: <br> This tag is used when you do not wish to start another paragraph, but want the text to start on a new line.

Coding:

<p>This section uses "breaks" to separate text.<br>
The text breaks and begins on the next line without going to the width of the page or creating a space between lines.<br>
To get text to start on a new line but not a new paragraph, use your shift-enter keys on your keyboard or place the "<br>" in your code.<br>
When you do, your text will begin on the next line, but be in the same paragraph.</p>

Bold Text: <b>bold text</b> or <strong>Bold Text</strong> are used to display a typeface with thick heavy lines.

Links: <a href=" "> Your Link </a> This is the anchor tag for links. Place the URL between the quotation marks and the link description just before </a>.

Italics: <em>Italics</em> This makes your text italic, or slanted.

Horizontal Rule: <hr> or a line that is styled into the web page. You can assign the color, length, and height within the your CSS file. You can even use an image for your horizontal rule. The first line below is a plain horizontal rule, while the second is a fancy horizontal rule using an image:



Spans: <span> Your Text </span> This is a Span bracket. It "spans" the length of the text you create. When you create a span, you need a class to go with it in order to style the span. So a highlight span would look like this:

A span bracket is cool to use.

Tables: There are 3 different parts to a table code

  1. <table></table> This is the beginning and ending of your table
  2. <tr></tr> Each table has rows. The tr is the Table Row. Add as many table rows as you wish.
  3. <td></td> Each row has data in it. These td, Table Data are the columns in your table row.

So a table consisting of 2 rows with 3 columns each would be coded like this:

<table> [opens the table]
      <tr>[begins row 1 of the table]
        <td>table data - column 1</td>
        <td>table data - column 2</td>
        <td>table data - column 3</td>     
    </tr>[ends row 1 of the table]
     <tr>[begins row 2 of the table]
       <td>table data - column 1</td>
        <td>table data - column 2</td>
        <td>table data - column 3</td>     
      </tr>[ends row 2 of the table]
</table>[closes the table]

Or here is the code for a table with borders and table width: (you can copy and paste this code)

<table width="90%" border="1"> [opens the table]
    <tr>[begins row 1 of the table]
        <td>table data - column 1</td>
        <td>table data - column 2</td>
        <td>table data - column 3</td>
    </tr>[ends row 1 of the table]
    <tr>[begins row 2 of the table]
        <td>table data - column 1</td>
        <td>table data - column 2</td>
        <td>table data - column 3</td>
    </tr>[ends row 2 of the table]
</table>[closes the table]

More styling coding

W3Schools [off-site] offers several great hands-on, try-it-yourself, online tutorials.


Submitted by Marsha Holley

_____
Page content reviewed and/or updated by the Advisory Board 2023 Jan


Quick Links
Contact Us

The USGenWeb Project, Free Genealogy Online

Contact the National Coordinator with Project questions, suggestions, or concerns.

Contact any Web Management Team member for usgenweb.org website questions, suggestions, or concerns.

Please include a link if your inquiry is about a specific page or Project website.