Help for Webmasters of BEACON Websites

» FAQs: HTML and Formatting Text


Please click on an underlined question to reveal the answer beneath it. Click again to close.

  Can I use HTML on my BEACON website? Will you help me?

Members are welcome to use HTML in their websites if they choose. To keep costs of our services as low as possible OurChurch.Com does not help members learn, develop, or debug HTML as a part of the support provided with our website hosting packages beyond the simple instructions below. OurChurch.Com is available to provide custom HTML development services on an hourly basis. Please submit a help desk request or call 727-723-2454 to discuss any custom HTML projects.
  How do I use HTML with BEACON?

To include a block of HTML in a web page it must be surrounded with [html] before the HTML and [/html] after it. If the whole page is HTML, place [html] on the first line and [/html] on the last. For example:

You type:
[html]
<a href="http://www.ourchurch.com">
<img src="http://www.ourchurch.com/images/help-occfree.gif">
</a>
[/html]


Results:
  How do I manage line spacing (paragraphs) in BEACON?

Line spacing in BEACON works very much like a word processor. As you type along, when you get to the edge of the text box there is no need to hit "enter" (which acts like the "return" key on a typewriter) because the text wraps automatically to the next line. You form paragraphs by forcing the return and hitting "enter."
  I'm a poet and need the text on the page to look exactly as typed. Is that possible?

If you are creating poetry or need for the text on the page to appear exactly as typed, you can use the <PRE> tag to achieve these results. The font will be monospaced, meaning that each letter will take up the same amount of space. For example:

You type:
<PRE>
      Using this tag
       allows for precise indentation
         but you must hit the ENTER key at the end of each line in this area otherwise text just keeps going!
</PRE>


Results:
     Using this tag
       allows for precise indentation
         but you must hit the ENTER key at the end of each line in this area otherwise text just keeps going!
  How can I format text (make it bold, bigger, change color, etc.)?

It was too cumbersome for us to "build in" a way to set the color, size, font, bold, or italics of text. However, with a little tutoring, anyone can learn a few basic HTML tags that will do this.

First, some basic HTML concepts. HTML utilizes what are called "tags" to indicate formatting. All HTML tags are enclosed by a less-than symbol and a greater-than symbol, like <br> which designates a break to a new line. When a web browser sees an HTML tag, it interprets it rather than displaying it in the browser. So, for example if you type <br> into a web page, your browser will not display the <br> but instead it will "break" the line and show the next letter on the line below.

Some HTML tags like <br> can be used alone, but most are used on a block of text, which means there is a starting tag and an ending tag to mark the block. For example, to make a section of text bold, the block of text is surrounded by the opening tag <b> and the closing tag </b>. The closing tag tells the browser "You can stop making the text bold now."
  How do I create bold text?

Use the <b> and </b> tags around your text. For example:

You type:
This text is <b>Bold</b>.


Results:
This text is Bold.
  How do I create italic text?

Use the <i> and </i> tags around your text. For example:

You type:
This text is <i>Italic</i>.


Results:
This text is Italic.
  How do I center text on the page?

Use the <center> and </center> tags around your text. For example:

You type:
<center>A single line can be centered...</center>


Results:
A single line can be centered...


You type:
<center>...or an entire paragraph can be centered. But note...<br>
if you center an entire paragraph<br>
that includes line breaks,<br>
each line will start and end at a different point.<br>
And if you have a really long line that goes beyond a single line, it will wrap onto additional lines, which will each be centered individually so they will start and end at different points like these lines do. </center>


Results:
...or an entire paragraph can be centered. But note...
if you center an entire paragraph
each line will start and end at a different point.
And if you have a really long line that goes beyond a single line, it will wrap onto additional lines, which will each be centered individually so they will start and end at different points like these lines do.
  How do I change font attributes like color, font face and size?

You can change the font, size, and color of text with the <font> tag. Each is set by using what is called an "attribute" in the start tag. The format for including an attribute is <tag attribute name="attribute_value">
  How do I change the font color?

Use the <font> and </font> tags around your text and include the color you want in the opening tag. For example:

You type:
<font color="red">This text is red.</font>


Results:
This text is red.


Common colors can be set by simply typing in the color as shown above. More complex colors can be specified by using the hexadecimal color code as shown below. If you have JavaScript enabled you can see some examples. Click on the palette icon and choose a color to see its hexadecimal value:
Click Here to Pick up the color
You type:
<font color="#6699FF">This text is a light shade of blue.</font>


Results:
This text is a light shade of blue.


For more information about hexadecimal colors, please visit http://www.visibone.com/colorlab/
  How do I change the text size?

Changing the size of text uses the SIZE attribute in the FONT tag. The sizes are based on a seven-point scale (1-7) with 7 being the biggest. The size can be specified absolutely.

You type:
<font size="7">Size 7</font>


Results:
Size 7


You type:
<font size="3">Size 3</font>


Results:
Size 3


You type:
<font size="1">Size 1</font>


Results:
Size 1


A better way to do it, however, is to specify the relative size. For example, if you want a block of text to be one font size smaller than normal text, use SIZE="-2"; for one size bigger use SIZE="+1"

You type:
<font size="+1">Size +1</font>


Results:
Size +1
  How can I change the font style of the text?

To set the font (type style) of a block of text, use the FACE attribute. For example:

You type:
<font face="arial">This is Arial font.</font>


Results:
This is Arial font.


The problem with setting the font is that the font specified must be installed on the visitor's computer for the text to show up in that font. Otherwise it will be shown in the browser's default font. For example, let's say I have this cool font call "BeautiFont" and I try to set up my web page with that font. If you look below, you will notice that my FONT TAG had no affect because you don't have the font specified installed on your computer. So, if you're going to specify a font, be sure it's a relatively common one.

You type:
<font face="BeautiFont">Can you see this in BeautiFont, or does it look the same?</font>


Results:
Can you see this in BeautiFont, or does it look the same?
  How can I create links to other pages?

The anchor tag is used to specify links. For example:



You type:
Here is a <a href="http://www.ourchurch.com">link to OCC</a>.


Results:
Here is a link to OCC.


Notice how <a href="http://www.ourchurch.com"> is placed before the words with the link. http://www.ourchurch.com is the address of the page that is being linked in the example. You would replace that with the page you want your text to link to. Be sure to include the http:// in the address. Notice also how </a> is placed after the linking words. (If you are in doubt about how to form the URL so you can create the link, try going to the web page itself. Then look at the address at the top of your browser. Copy it exactly as shown.)
  How can I make a link to an email address?

The anchor tag and "mailto" are used to specify links to email addresses. For example:

You type:
This is my <a href="mailto:nobody@nobody.com">email address</a>.


Results:
This is my email address.


Warning: OurChurch.Com discourages the placing of email addresses on websites. Doing so exposes your address to spam harvesters. You will eventually be inundated with unwanted, often distasteful and even pornographic, email. That is why we have set up the "email us" link on every BEACON site. The form keeps your email address hidden. If you must place an email address on your site, please be prepared for the spam that will follow (beyond our control).
  What if I want my text to have more than one attribute, such as bold italic?

You can set multiple attributes within an HTML tag such as:

You type:
<font color="blue" size="+1" face="Times New Roman">This is big, blue, times.</font>


Results:
This is big, blue, times.


You can enclose text with more than one set of tags. For example, <b><i>Howdy!</i></b> will make Howdy bold and italicized. Be sure to put the closing tags in the opposite order you place the opening tags. This is called "proper nesting."

Correct: <b><i>Howdy!</i></b>
Incorrect: <b><i>Howdy!</b></i>
  What are some suggestions for best results when using HTML? What about tutorials?

Everything between the opening and closing tags — whether it be one letter or the entire page — is given that tag's attributes. If you forget to close a tag, the browser won't know where to stop.

Be extremely careful when using HTML tags. They are not very forgiving. One typo, one missed bit of punctuation, and your HTML is broken. If you type in an opening tag but forget the closing tag, it will mess up the rest of the page.

Our best advice is to encourage you to learn by visiting websites with HTML tutorials. There are many good sites such as http://www.arachnoid.com/lutusp/html_tutor.html.
  Advanced HTML coding: What about CSS?

Current web standards strongly encourage the use of CSS (cascading style sheets) in lieu of font tags, etc. If you have advanced HTML skills and wish to use CSS to format text, you may enter this information in each page by clicking on "advanced options." Look for the last text box, labeled "Head Other." Then enter your style information, such as:

<style type="text/css">
<!--
body, table, td, p {font-family:arial,verdana,sans-serif; font-size:13px;}
-->
</style>


For more information about learning CSS, there are many web resources available. Do a web search or start with this page: http://www.goer.org/HTML/intermediate/style_sheets/

REMEMBER: Members are welcome to use HTML on their own if they choose. To keep costs of our services as low as possible OurChurch.Com does not help members learn, develop, or debug HTML as a part of the support provided with our website hosting packages. OurChurch.Com is available to provide custom HTML development services on an hourly basis. Please submit a help desk request or call 727-723-2454 to discuss any custom HTML projects.


Top of Page  Main Help Page  Back
 
rgb colorwheel palette