HTML Coding Tutorials
How To Make A Website > HTML Code
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 BasicsBefore 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="http://www.websitespot.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 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="http://www.websitespot.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 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 ImageKeeping 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 PointsBullet 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.
|
