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.

For those using my html templates and Expression Web to code them, take a look at our .pdf instructions file here: https://templatesintime.com/3rd Edition Guide-Instructions.pdf This file is courtesy of Karey Cummins from RTB Wizards.

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 are included my templates, I would call it in this way: <hr class="fancy">

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

Thanks,

Marsha