Quick HTML Tutorial

I just wanted to show you some of the common classes used in my templates. For those of you using TNG, you can use these codes on your template settings page. If you have any suggestions, please let me know. I'd love to hear them!

If you're unsure, you can always go here: https://wordtohtml.net/ and their program will convert text to html coding.

Paragraphs

<p>Paragraph Tag</p> This tag is used for almost all text. You should have opening and closing paragraph tags in your page.

<br> Break. This is the code to break the line and begin text in the same paragraph, but directly under the line above it. It shows up like this:
<p>This is the first part of the text <br>
This is the second part of the text, but in the same paragraph.

There are six heading tags used in my templates. Your colors and sizes will depend upon which template your purchased.

Heading 1 <h1>Your Text Here</h1>

Heading 2 <h2>Your Text Here</h2>

Heading 3 <h3>Your Text Here</h3>

Heading 4 <h4>Your Text Here</h4>

Heading 5 <h5>Your Text Here</h5>

Heading 6 <h6>Your Text Here</h6>

The Drop Cap can be done by applying the dropcap class to the paragraph.

<p class="dropcap">First Letter of your paragraph</p>

Text

Most of my templates have different colors and sizes that can be used on text as well as aligning text to the right. You can check your specific css file for those. Examples of this include:

text align left <p class="left">

text-align center <p class="center">

text-align right <p class="right">

text tiny 65% <p class="tiny">

text small 85% p class="small">

text medium 90% <p class="medium">

text large 120% <p class="large">

text xlarge 180% <p class="xlarge">

lead text <p class="lead">

Author <p class="author">

Author Date <p class="authorDate">

Your colors will match your template.

textcolorDark
textcolorMedium
textcolorLight
textcolorAccent
textcolor-white
textcolor-black
textcolor-gray
textcolor-red
text-align-right

You can find what the hex colors are by going to this link and typing in the hex code: https://www.color-hex.com/

Using the codes above, you can make a word or a paragraph a different color or size:

I want to make THIS text a color and a different size than the paragraph. This is called a "span" because it spans the length of what you choose. <span class="textcolor-red large">THIS</span> I chose to make it the color red and font-size large. You can use many classes on one item.

If I wanted to do the paragraph red and large, then I would add the class to the paragraph tag.

The code for the above sentence is: <p class="textcolor-red large">If I wanted to do the paragraph red and large, then I would add the class to the paragraph tag.</p>

Image Coding

All templates have image coding to style the look of the image. If you like one of these styles and it's not included in your template, just let me know and I'll send you the code.

Float Left

Float an image to the left without a border:

Float Right

Float an image to the right without a border:

Float an image to the left with a border:

Float an image to the right with a border:

Float an image to the left with a border and a shadow:

Float an image to the right with a border and a shadow:

Make a square image appear to be round and float it to the left. [looks square in Design view]

Make a square image appear to be round and float it to the right. [looks square in Design view]

Float an image to the left and add a frame to it:

Float an image to the right and add a frame to it:

Float an image to the left and curve the corners.

Float an image to the right and curve the corners.

Float an image to the left and add padding and a light border.

Float an image to the right and add padding and a light border.

Float an image to the left and tilt it to the left.

Float an image to the right and tilt it to the right.

Horizontal Rules

You can add a horizontal rule by just adding the code <hr>. A horizontal rule is just a line that spans a specified distance across your page. This is the horizontal rule for this site:

If I wanted a fancier horizontal rule, which most of my templates contain, I would call it in this way: <hr class="fancy">

TNG Specific Coding

On the template settings page, in the input boxes, I have already added the beginning and ending paragraph tags in the index.php. If you wanted to make an additional paragraph, you would need to close the paragraph I put in and then add a new opening paragraph tag. For example the coding in the paragraph box for the following would look like this:

Check the birth, death and marriage records. Those may list parents names, etc. Get copies of these records by ordering them from the appropriate source. Use ALL types of spellings when you look for records. Many times the spelling changed (Hawley to Holley) or the person writing down the information had trouble deciphering the script. Sometimes names are spelled so "screwy" that your best bet is just to go through the pages. The "s" looks like "f" in some old script, so Smith could look like Fith to a beginning transcriber.</p><p>Check the court records index. If you find something of interest, try to order the record from the County Clerk. They charge $X a page to Xerox it. Also know that they are short-staffed and may not be able to fill your request. You may have to make a trip to the county or hire a researcher to get the information for you.</p><p>Check The old newspapers. You may need to write one of the libraries to see if your family member's name is listed in the index. I have some of those newspapers online, but not enough of them!</p><p>If the ancestor was in the Civil War, order the records! They have a great deal of information in them!

It will look like this on your index page:

Check the court records index. If you find something of interest, try to order the record from the County Clerk. They charge $X a page to Xerox it. Also know that they are short-staffed and may not be able to fill your request. You may have to make a trip to the county or hire a researcher to get the information for you.

Check The old newspapers. You may need to write one of the libraries to see if your family member's name is listed in the index. I have some of those newspapers online, but not enough of them!

If the ancestor was in the Civil War, order the records! They have a great deal of information in them!

**You can add any of the coding on this page to your input boxes. Below is the same 4 paragraphs using the html coding I've given you.

</p><p class="dropcap">Check the birth, death and marriage records. Those may list parents names, etc. Get copies of these records by ordering them from the appropriate source. Use <span class="large textcolor-red">ALL</span> types of spellings when you look for records. Many times the spelling changed <em>(Hawley to Holley)</em> or the person writing down the information had trouble deciphering the script. Sometimes names are spelled so "screwy" that your best bet is just to go through the pages. The "s" looks like "f" in some old script, so Smith could look like Fith to a beginning transcriber.</p><p>Check the court records index. If you find something of interest, try to order the record from the County Clerk. They charge $X a page to Xerox it. Also know that they are short-staffed and may not be able to fill your request. You may have to make a trip to the county or hire a researcher to get the information for you.</p><p>Check <span class="textcolorDark"> old newspapers. </span> You may need to write one of the libraries<span class="author"> to see if your family member's name </span>is listed in the index. I have some of those newspapers online, but not enough of them!</p><p>If the ancestor was in the Civil War, order the records! They have a great deal of information in them!

It will look like this on your index page:

Check old newspapers. You may need to write one of the libraries to see if your family member's name is listed in the index. I have some of those newspapers online, but not enough of them!

If the ancestor was in the Civil War, order the records! They have a great deal of information in them!

For those of you that want to use the "Histories" pages, for more specific instructions, go HERE.

I hope this helps. If you have questions, don't hesitate to write or give me a call.

Thanks,

Marsha

Quick HTML Tutorial

Paragraphs

Heading 1 <h1>Your Text Here</h1>

Heading 2 <h2>Your Text Here</h2>

Heading 3 <h3>Your Text Here</h3>

Heading 4 <h4>Your Text Here</h4>

Heading 5 <h5>Your Text Here</h5>

Heading 6 <h6>Your Text Here</h6>

Text

Image Coding

Float Left

Float Right

Horizontal Rules

TNG Specific Coding

It will look like this on your index page:

It will look like this on your index page:

Browse Our Site

Buy with Confidence

Contact Us