BASIC HTML CODING

BASIC HTML CODING

Html codes can be overwhelming and looks like Greek to most people. However, if you have a basic web page and just need to give it a little flare, there are many simple codes that can be used.

Text Tags

Bold Text

 your text here 

For:
The pirate sailed on the deep blue sea.

Type:

The pirate sailed on the deep blue sea.

For:
The pirate sailed on the deep blue sea.

Type:

The pirate sailed on the deep blue sea.

Any time you put / in front of a code, it will turn the code off and put it back to the previous.

Italics
 your text here 

For:
The pirate sailed on the deep blue sea.

Type:

The pirate sailed on the deep blue sea.

Underline
 your text here 

For:
The pirate sailed on the deep blue sea.

Type:

The pirate sailed on the deep blue sea.

Combination

 your text here 

You can use a combination of 2 codes or all 3 at the same time.

For:
The pirate sailed on the deep blue sea.

Type:

The pirate sailed on the deep blue sea.

Fonts

Font size
 your text here 
Sets size of font, from 1 to 7)

1 = 8pt
2 = 10pt
3 = 12pt
4 = 14pt

5 = 18pt
6 = 24 pt
7 = 36 pt

Alternate method:
You can also enter + or – with a number. This will increase or decrease the font by that number from the current size. If your current font size is 10pt, then +2 will increase it 14pt (2 font sizes, not 2pts)

For:

The pirate sailed on the deep blue sea.

Type: The pirate sailed on the deep blue sea.

Or: The pirate sailed on the deep blue sea.

Font color
 your text here 
Sets font color, using name or hex value (hex values are explained later in this document)

To have the word pirate in the previous sentences appear in a different color type:

The pirate sailed on the deep blue sea.

Font style
 your text here 

For:

The pirate sailed on the deep blue sea.

Type:

The pirate sailed on the deep blue sea.

Please be careful with the font styles. The font needs to be one that is common, if you choose a font that is not on the computer viewing your page; the computer viewing it will use a default font. Most browsers uses Times New Roman for the default font.

Some Common fonts are:

Arial

Arial Narrow

Arial Black

Century Gothic

Comic Sans MS

Tahoma

Times New Roman

Verdana

You can combine font codes in the same command. To apply multiple codes to the words pirate sailed, you can type:

The pirate sailed on the deep blue sea.

You do not have to put all codes every time; just enter the codes that you wish to change. Notice that the code turns all font codes off and puts it back to the previous.

Links

Create a hyperlink

<a href="URL_Address"> visible text here </a>

Your visible text can be the url name or any name you give it.

The following examples are having the visible text link to the web site http://www.htmlgoodies.com/,

For:
Go to http://www.htmlgoodies.com for more tips on HTML coding.

Type:

Go to<a href="http://www.htmlgoodies.com/"> http://www.htmlgoodies.com/</a>for more tips on HTML coding.

For:
Go to Html Goodies for more tips on HTML coding.

Type:

Go to <a href="http://www.htmlgoodies.com/">Html Goodies</a> for more tips on HTML coding.

To have your link open in a new browser window, just add target=”_blank” after the <a

To have the following link open in a new browser window:
Go to http://www.htmlgoodies.com for more tips on HTML coding.

Type:

Go to <a target=”_blank” href="http://www.htmlgoodies.com/">href="http://www.htmlgoodies.com/"> http://www.htmlgoodies.com/</a>for more tips on HTML coding.

Create an email link

<a href="mailto:EMAIL_Address"> visible text here </a>

This works basically like the hyperlink but with the email info.

To make the words My Name link to an email address, Type:

Substituting username@yourdomain.com for the desired email address.

It is not a good practice to show the actual email address as the visible text, it is recommended to have the visible text show the person’s name or some other text. A lot of spam is cause by programs searching web pages for email addresses. If you create the link correctly, the default email program will open with the email address shown when a user clicks on the visible text.

Formatting

Create a new paragraph

 your text here 

Paragraph Alignment

 your text here 
Aligns a paragraph to the left, right, or center

Line break

 
Puts a break the line (continues text on next line) without starting a new paragraph.

Horizontal Rule (line)

<hr>
Creates a Horizontal line. Using this command without additional formatting will create the default Horizontal Rule.

You can specify height, width and color.

<hr color="#0000FF"> (default is black with clear center, hex values are explained later in this document)

<hr size="4"> (default is 2)

<hr width="50%"> (default is 100%)

You can also combine the codes.

<hr color="#0000FF" width="75%" size="4">

Create an extra Space

&nbsp;

This will add spaces in your line, you may type it more than once to create more spaces.
Note: You do not use the < > symbols for this command.

Bullets and Numbered List

Numbered list

<ol> your text here </ol>

Bulleted list

<ul> your text here </ul>

<li> your text here </li>
Precedes each list item, and adds a number or bullet

The only difference in the coding of the below two examples are the codes <ol> and <ul> The codes that create the bullets or numbering are shown in bold (the bold is for reference only; you do not need to bold the code when typing). In both cases you will put <li> before each bulleted or numbered item and </li> at the end of each.

The command “&quot” is to insert quotation marks, it has nothing to do with the bullets and numbering formatting. Some Web-based webpage programs let you build basic sites by just typing text without codes, with these programs; html coding is optional and is used to enhance your page. In most cases, these programs do not require you to type codes such as the “&quot” code to add symbols even if you are using html codes for enhancement; instead they let you type the actual symbol (in this case the quotation marks).

For:

One of the most influential books on popular notions of pirates was Treasure Island from which sample quotes include:

"Bring me one noggin of rum, now, won't you, matey."
"Avast, there!"
"Dead men don't bite"
"Shiver my timbers!" (also "Shake up your timbers")
"Fifteen men on the dead man's chest-- Yo-ho-ho, and a bottle of rum!"

The archetypical pirate grunt "Arrr!" (alternatively "Rrrr!" or "Yarrr!") first appeared in the classic 1950 Disney film Treasure Island, according to research by Mark Liberman.

One of the most influential books on popular notions of pirates was Treasure Island from which sample quotes include:

"Bring me one noggin of rum, now, won't you, matey."
"Avast, there!"
"Dead men don't bite"
"Shiver my timbers!" (also "Shake up your timbers")
"Fifteen men on the dead man's chest-- Yo-ho-ho, and a bottle of rum!"

The archetypical pirate grunt "Arrr!" (alternatively "Rrrr!" or "Yarrr!") first appeared in the classic 1950 Disney film Treasure Island, according to research by Mark Liberman.

Type:

One of the most influential books on popular notions of pirates was Treasure Island from which sample quotes include:

<ol>

<li> "Bring me one noggin of rum, now, won't you, matey." </li>

<li> "Avast, there!" </li>

<li> "Dead men don't bite" </li>

<li> "Shiver my timbers!" (also "Shake up your timbers") </li>

<li> "Fifteen men on the dead man's chest-- Yo-ho-ho, and a bottle of rum!" </li>

</ol>

The archetypical pirate grunt "Arrr!" (alternatively "Rrrr!" or "Yarrr!") first appeared in the classic 1950 Disney film Treasure Island, according to research by Mark Liberman.

One of the most influential books on popular notions of pirates was Treasure Island from which sample quotes include:

<ul>

<li> "Bring me one noggin of rum, now, won't you, matey." </li>

<li> "Avast, there!" </li>

<li> "Dead men don't bite" </li>

<li> "Shiver my timbers!" (also "Shake up your timbers") </li>

<li> "Fifteen men on the dead man's chest-- Yo-ho-ho, and a bottle of rum!" </li>

</ul>

The archetypical pirate grunt "Arrr!" (alternatively "Rrrr!" or "Yarrr!") first appeared in the classic 1950 Disney film Treasure Island, according to research by Mark Liberman.

Color Codes (hex values)

When you're adding a color to your Web page with HTML, you'll need to use what's called the hex code, which is something that the browser will be able to understand.

**Please note that colors do not always view the same on different computers. Display settings will affect they way the colors are displayed.

To change your background to red, you would type:
<body bgcolor="#FF0000">

Here are some basic colors:

Black = #000000
White = #FFFFFF
Blue = #0000FF
Dark Blue = #003371
Light Blue = #8393CA
Cyan = #00FFFF
Magenta = #FF00FF
Red = #FF0000
Green = #00FF00
Yellow = #FFFF00
Gold = #F7941C

To view these shades and hex codes of other shades, you can go to:

http://html-color-codes.com/