Text HTML Codes

This is the first of the tutorial sets that i am going to create to help people like your self with HTML and CSS. The first thing to know about HTML in relation to the coding of it is that almost every single opening tag has a closing tag. See below for more details.

Please note that while there are many HTML editors out that there that use GUI’s (Graphical User Interface) for users with limited experience in coding, there will always be a time where you will want to view the code and be able to touch edit something the editor won’t let you change. Thats when these tutorials come in handy. Hence the reason for these tutorials.

Shortcuts to sections:

Lets make a start!

Font Styling

  • <b> Bold Lettering </b>

To use bold lettering within your html page, you need to either use the <b> tag or the <strong> tag (they are both the same). You only use the <b> tag or <strong> tag just before the word or lettering you want to have in bold, and then directly after the word’s you must close the tags </b> or </strong> respectively.

Example: “Lucy is the best player in her team.”

In order to create the above sentence with bold lettering the code might look something like..

Code:

<p>Lucy is the <b>best player</b> in her team.</p>

Notice the tag has opened and closed around the words in bold.

  • <em> Italic Lettering </em>

In order to use Italics through out your text you need to use the <em> tag to open and the </em> to close it again.

Example: “I like to code with style.”

In order to create the above sentence with Italic lettering the code might look something like..

Code:

<p>I like to <em>code with style</em>.</p>

  • <u> Underlined text </u>

Using underlined text can be confusing for the readers of your website. People tend to think that text which is underlined is a link, so you may get frustrated visitors. I generally stay away from underlining text unless i really have to, which is not often, unless we are linking of course, in which case its normally automatic.

Example: “I really like kebabs.”
would use the following code in your page to get the desired effect

Code:

<p>I <u>really</u> like kebabs.</p>

Text Positioning

  • <p>Paragraphs</p>

The <p> tag is used to create a new paragraph on your page. This is normally the preferred way to split your paragraphs up on your web page. Some people opt to use the <br> tags which is basically used to break a line so you can kind of imagine them doing the same thing.

Example:

This is the first of two paragraphs.

This is the second of two paragraphs.

The code for these paragraphs using the <p> tag would look some thing like this

Code:

<p>This is the first of two paragraphs.</p><p>This is the second of two paragraphs.</p>

Of course you must remember to include the </p> tag at the end of the paragraph to avoid non compliant code and to keep good HTML structure to your page.

  • <center>Centering your text</center>

To center your text, we use the <center> tag, and yes you guessed we need to close the tag afterwards with the </center> tag. We can even combine elements other text elements on the page to get a bold look.

Example:

This text is centered on the page.

To both center the text and get the bold in there here is the code

Code:

<center>This text is <b>centered</b> on the page.</center>

  • <p align=”right”>Right Align</p>

As you can see things change a little here. Naturally your text is normally left aligned to probably no need to use this when aligning text to the left but, you may want to use this when aligning text to the right. In terms of HTML i will show you how to do this directly on your web page, but what i would like to show you in more detail later is how you insert these elements into a style sheet (CSS) for easy maintenance and cleaner looking code. For now i have a basic CSS Tutorial you can read to get a foundation of what CSS is if you are not aware.

What this does is align the paragraph to the right.

Example:

I am right aligned

Code:

<p align=”right”>I am right aligned</p>

Because you are using the paragraph tag in the beginning of your code snippet this is the tag you also close off when you have decided what test to right align. Centering text can also be done this way.

Font Appearance

By font appearance i mean colors, font size, and font type etc.

  • Font Colors, Font Size and Font Type

Again this is a slightly different way of coding than i am used to (as i use CSS for this) but getting the basics right is a bonus. The opening of the font tag tells the browser that the font within the tags is to be rendered the way the code states.

Example: Here is my green, size 4 and Verdana styled text

There are 3 elements in this sentence, <font color=”green”>, <font size=”4″> and <font face=”verdana”>. Here’s the code

Code:

<font color=”green” face=”Verdana” size=”4″>Here is my green, size 14 and Verdana styled text</font>

Notice how all elements related to the same tag can be listed within the one tag. You don’t need to open another tag for each styled effect.

  • Using Colors

In HTML Colors can be coded in two different ways. One way is to state the actual color like above and insert <font color=”green”> or <font color=”red”>. This was is a pretty basic way of inserting colors.

Lets say you either don’t know the name of the color you want to use, or its a slightly different shade of a color you like, HTML lets you insert a hexadecimal number which represents a color. I hope i haven’t frightened you!

Hexadecimal color code numbers are always 6 digits and will always start with a #. You can use this online color scheme generator to help with your hex numbers.

Example: This is a blue sentence using the hex number #003399.
Heres the code..

Code:

<font color=”#003399″>This is a blue sentence using the hex number #003399</font>

This is a first tutorial of the series “How to make a website – HTML Tutorials”. I hope this has hopefully given you an insight in how you can code your HTML text, to perform the way you want. Ok there are better ways to do this and that is through CSS. But if you are like me, sometimes its just quicker to implement a one off style directly into the code as shown above.

Return to see other tutorials