HTML Help
-
David
-
February 20th, 2012
Whether you're building a website from scratch, using a template or even using an online website builder you'll need to know some of the basic commands related to HTML coding.
Below you'll see that I've covered some of the more common HTML tags but if you're interested in reading more on advanced HTML coding I would recommend that you visit W3SCHOOLS.COM. You'll see below that I show you the actual code and just below that you'll see that I show you an example of the actual code in use.
HTML Coding Basics
Before I dive in I'd like to give you some of the basics of HTML. The coding of HTML is based on 'tags' such as <B> would be a tag for bold. When you use an HTML tag you'll need to open the tag such as <B> and then after your selection you need to close it such as </B>. You'll see that it's the exact same entry but I use a slash when I'm closing the HTML tag.
I'm not going to get into the complete structure of a website because with today's WYSIWYG (What You See Is What You Get) editors the structure is created by the software so you just need to start designing. The two most common HTML editors are Macromedia Dreamweaver and Microsoft FrontPage. If you're familiar with Microsoft Word you may find FrontPage quite a bit easier plus FrontPage is so popular that it's easy for find professional templates that make making a website so much easier.
Basic HTML Tags
Ok, let's get down to some code. I'll give you the information that you need but occasionally you'll find a link that contains more detailed information on that specific tag such as tables and colors. You'll find that I have entered both the opening and closing tag for each.
New Paragraph: <p> </p> - This is used for creating a new paragraph.
Line Break: <br> - You'll see that there isn't a closing tag because it's not required. Two line breaks are the equivalnt to using a <p> tag.
Bold: <b> </b> - The allows you to create bold text.
Italics: <i> </i> - This tag creates italic text.
Underline: <u> </u> - This tag is used for underlined text.
Font Color: <font color="red"> </font> - This tag is used for changing text color.
Read more on hexadecimal colors.
Font: <font face="Century Gothic"> </font - This tag allows you to change the font style.
List: <li> </li> - This tag allows you to create a list such as
- Groceries
- Soccer practice
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="https://www.websitespot.com/articles">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 it's clicked you can simply add a little more code to accomplish this. I've highlighted the additional code below.
<a target="_blank" href="https://www.websitespot.com/articles">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 people can email you, you can create a hyperlink so that once the link is clicked it automatically opens the visitors default email program.
<a href="mailto:your@yourdomainname.com"> Contact Us</a>
The link would appear as: Contact Us
Creating Website Tables
The most important area of making a website and creating the layout and look that you want is by far the area of tables. See, tables are what creates the basic layout of your website. For example, this website is made up of 5 main tables.
They are the header, which is the very top of the website. The left navigation, which is where all of the links are on the left hand side of this page. The footer, is at the very bottom of this page. The right navigation where I display relevant websites on the right hand side. Lastly there is the body, this is where I type all of the information on the website.
Without these tables it would be difficult to layout the site as I would like. Since this is such an important part of making a website I have created a specific page for tables. You can view the page by clicking here.
Inserting Images Into A Website
When you make a website you'll definitely want to insert images. This makes your website more appealing and as they say, "A picture says a thousand words" so 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 make a website. Please visit my page on inserting images into a website for detailed information.
Website Scripting
Website scripts are scripts that you place 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 I haven't ever installed a script that didn't com with an in depth installation guide.
Read more on website scripts.
Adding A Background
Just a quick word on backgrounds, 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, just make sure that you're designing with your visitors in mind and not just yourself.
Adding A Background Color
Inserting a background color is very simple. Just make sure you add it to to the inside of your <body> tag. The background color tag is as follows:
<body bgcolor="red">
To determine the right color code you can visit our page on hexadecimal colors.
Adding A Background Image
Keeping with the idea of keeping the look pleasing to the eyes the background image tag is as follows:
<body background="images/linear.gif">
This is calling the background image from your images folder that you have uploaded to your web hosting account.
Inserting Bullet Points
Inserting Bullet Points
Bullet points are great for separating a list in an easy to read format. The bullet point tag is as follows:
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
The code would appear as:
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:
<ul type="circle">
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
The code would appear as:
Creating Forms
Again we've run into a topic that requires it's own dedicated page because of the large number of options plus the importance of a form on a website. Please visit creating forms for detailed information on creating an online form.
That's about it for the basics of HTML coding. As I mentioned at the top of the page, you can find more advanced HTML coding at W3SCHOOLS.COM but this should at least give you a bit more understanding and a great place to start.