HTML Coding Tutorials

LINK
Whether you're building a website from scratch, using a html template, or an online website builder, you will need to know som basic commands related to HTML coding. We have covered some common HTML tags, but if you are interested in reading more on advanced HTML coding we recommend that you visit W3SCHOOLS.COM.

HTML Coding Basics
Before diving in we would like to give you some of the basics of HTML. The coding of HTML is based on 'tags' such as for bold. When using an HTML tag you'll need to open the tag as , and then after your selection close it with . You notice that it's the exact same entry but we use a slash to close the HTML tag.

You can now use WYSIWYG (What You See Is What You Get) editors to start your design. The two common HTML editors are Macromedia Dreamweaver and Microsoft FrontPage. If you're familiar with Microsoft Word, you may find FrontPage quite easy. Also FrontPage is quite popular for their HTML professional templates.

Basic HTML Tags

Here you will find basic information that you need when creating your HTML tags. We also have created links containing additional information on tables and colors.

New Paragraph:  - This is used for creating a new paragraph.

Line Break: - You'll see that there isn't a closing tag because it's not required. Two line breaks are the equivalnt to using a tag.

HTML Bold: - The allows you to create bold text.

HTML Italics: - This tag creates italic text.

HTML Underline: - This tag is used for underlined text.

HTML Font Color: - This tag is used for changing text color.
Read more on hexadecimal colors.

HTML Font: </font - This tag allows you to change the font style.

HTML List: <li> </li> - This tag allows you to create a list such as

ShopDomainHosting.com

Centering text: <center> - There is no need to close this tag. It will center your text.

Creating Hyperlinks

Basic Hyperlinks

A hyperlink is a clickable link from your website to another website. The code to use is:

<a href="http://www.createmysitenow.com">Domain originalAttribute="href" originalPath=""http://www.createmysitenow.com">Domain" originalAttribute="href" originalPath=""http://www.createmysitenow.com">Domain" originalAttribute="href" originalPath=""http://www.createmysitenow.com">Domain" originalAttribute="href" originalPath=""http://www.createmysitenow.com">Domain" originalAttribute="href" originalPath=""http://www.createmysitenow.com">Domain" originalAttribute="href" originalPath=""http://www.createmysitenow.com">Domain" originalAttribute="href" originalPath=""http://www.createmysitenow.com">Domain" originalAttribute="href" originalPath=""http://www.createmysitenow.com">Domain" Name Registration</a>

The link would appear as: Domain Name Registration

Creating Hyperlinks To Open In A New Window

If you create a link but would like to open a new browser window once clicked, you can simply add a little more code to accomplish this. Below is an example.

<a target="_blank" href="http://www.createmysitenow.com">Domain Name Registration</a>

The link would appear as Domain Name Registration but would open a new window when clicked.

Creating Email Hyperlinks

If you'd like to add an email address to your website so that visitors can email you, create a hyperlink so once the link is clicked it automatically opens the visitors default email program.

<a href="mailto:your@yourdomainname.com"> originalAttribute="href" originalPath=""mailto:your@yourdomainname.com">" originalAttribute="href" originalPath=""mailto:your@yourdomainname.com">" originalAttribute="href" originalPath=""mailto:your@yourdomainname.com">" originalAttribute="href" originalPath=""mailto:your@yourdomainname.com">" originalAttribute="href" originalPath=""mailto:your@yourdomainname.com">" originalAttribute="href" originalPath=""mailto:your@yourdomainname.com">" originalAttribute="href" originalPath=""mailto:your@yourdomainname.com">" originalAttribute="href" originalPath=""mailto:your@yourdomainname.com">" Contact Us</a>

The link would appear as: Contact Us

Creating Website Tables

An important area of creating a website is by far the area of tables. Tables are what creates the basic layout of your website. This website was created with four tables

First is the header, which is the top of your website. The left navigation is all the links are displayed. Next, is the footer at the very bottom of the page. Last, is the body, this is where all of the information is written on the website.

When you make a website you will definitely want to insert images. This makes your website more appealing. As the saying goes, "A picture says a thousand words". They can be very descriptive without having to type out a whole long description. Much like tables, images are a very important part of the process to making a website. Please visit page on inserting images into a website for detailed information.

Website Scripting

Website HTML Scripts are scripts placed on your website to accomplish just about anything that you'd like from shopping carts to forms. Most scripts are extremely easy to install and come with an installation guide.

Adding A Background

If you're going to add a background to your website do it in good taste. What looks good to you may not look good to majority of your visitors. Much like painting your house, what looks good to you may annoy your neighbors. The same holds true for backgrounds. Make sure that you're designing with your visitors in mind and not just yourself.

Adding A Background Color

Inserting background color is very simple. Just make sure you add it to the inside of your <body> tag. The background color tag is as follows:

To determine the right color code you can visit our page on hexadecimal colors.

Adding A Background Image

Keeping the look pleasing to the eyes, the background image tag is as follows:

This is calling the background image from your images folder that you have uploaded to your web hosting account.

Inserting Bullet Points

Bullet points are great for separating a list in an easy to read format. The bullet point tag is as follows:

The code would appear as:

Item 1
Item 2
Item 3

Inserting Circle Bullet Points

Bullet points are great for separating a list in an easy to read format. The bullet point tag is as follows:

The code would appear as:

Item 1
Item 2
Item 3