Anyone can blog, but it takes a lot of useful information in order to learn to blog effectively. Some people want to blog, yet they can’t think of anything to write about. For those people, I have designed this list of things that can help you get rid of that writer’s block.

1) Find Inspiration.

Successful blogging is fueled by great inspiration. There are a lot of great places you can find your inspiration, but first you should try to focus on the industry you or your business is most associated with. If you are selling eBooks (whether written by yourself or others), some inspirational sites might include sites in which writers in general are talking about their writing experiences. Or possibly sites on which other eBook sellers might be discussing some of their accomplishments or failures with selling certain topics, etc. You have to really think about what your business or site is all about and then search for related blogs that other people are writing to find topics that you might have an opinion on or being to expand on. Maybe there’s something about the topic they neglected to mention and maybe you could be the one to write about it!

A few great sites to check out are Digg and Delicious. If something is popular on one of these sites in your industry, it may help to inspire you to write about it. Delicious not only allows you to bookmark popular posts for later reading, but it also can give you lists of what other people are bookmarking. This can be very helpful in finding out what people in the industry want to know about.

Keeping track of current events is also important because if your blog content is not current with what people are talking about or wanting information about, it may not be a very popular topic. That doesn’t mean that you can’t write about an old, out-dated topic, it just means that whatever information you are bringing to the table should be fresh and new, in order to grabs the readers’ attention. Looking for and reading other blogs related to your industry is also very important. If you can find a good blog that will be similar in content to yours, it can drastically help you come up with follow-up posts or new discussions based on what you’ve read. As I mentioned before, they may have missed something that you could be the one to write about.

2) Research.

After you are inspired to write something, it cannot hurt in the least to research your topic for more useful information. You may find more to write about or relevant facts that you can include for your readers. Google is obviously the first place most people turn, so be sure to do a thorough search for more information before you begin writing about your topic. Other great resources include Digg, Twitter, and other social websites, such as Delicious and StumpleUpon. Twitter, Facebook, and Linked In are great places to ask others in your network for more information and links about your topic of interest. You can even set up questionnaires and post them to your social media networks asking for help from your friends. Delicious and StumpleUpon are great sites to search to see if your topic of interest has already been covered and to see what’s been said about it.

3) Writing.

Start writing early and give yourself plenty of time to write. Starting late at night will just make it more difficult because you will probably get tired more quickly and either never finish or write a post you are not so proud of. A great idea is to write your post in another program, such as Microsoft Word, Notepad, or TextEdit, and after you’ve reviewed and perfected it, copy it into your blog. If you use WordPress for your blog and use a Mac, a great program to use is called MarsEdit. It allows you not only to add new posts with topics as they come to mind and save them until later when you’re ready to write about them, but it also allows you to publish to WordPress straight from your desktop. This can be very helpful and save lots of time!

Another important thing to remember when writing a blog post is to make good use of headings and subheadings. This helps users quickly and easily navigate through your post for topics and areas of interest. Use keywords frequently to help increase your chances of people finding your post, and use bulleted lists when you have that type of information to convey. Readers are drawn to lists as they are generally compact and easy to spot.

4) Images.

If possible, using images can help to energize your post and add interest as well. Readers often enjoy seeing an image along with blocks of text in order to help them visualize what the author is trying to say. You can often find free stock images to use on sites such as freestockimages.net, as well as affordable professional-grade images on sites such as iStockphoto.com. Flickr is another great resource in whcih you can find photos which you can use as long as you credit the photographers with a link back to their account.

5) Before You Publish.

Before you publish a post, always preview your post and make sure it looks the way you expect it to before posting. Double check everything you have written by re-reading your post and checking for any spelling or sentence errors. Be sure to add tags to your post and choose an appropriate category, if applicable, and change the URL or permalink if you need to. Schedule a good time for your post to actually publish rather than just publishing it when you get finished writing it. You need to try to think about your target audience and when the peak times they may be online and available to read are. Posting in he middle of the night is not going to allow your post to reach as many people unless you are targeting a different time zone than you’re in. Posting on the weekends is also generally not the best idea because a lot of people are away from their computers. Trying to target either during business hours or shortly after could be one of the best timeframes you can choose.

6) Promotion.

Did you read my previous article about the importance of utilizing social media networks in order to help promote and advertise your website/blog? There are some great plugins out there that will allow you to automatically publish your blog posts each time you publish an article, so this can be very time-saving and useful in getting more viewers to your site. Ensuring you utilizing your RSS feed is also a major plus. WordPress has a built-in RSS feed, so encourage viewers to sign up for your RSS feed so that they may be alerted when new articles are posted. If you use Feedburner, you can have e-mail alerts sent out whenever a new post is published as well.

If you don’t use the automatic posting plugins available, then be sure to post something on your social media networks about your new blog articles as often as possible. Post something whenever you write a new article as well as when a previous article might relate to something someone else has said or even when a new article comes out in relation to what you’re previously written about. Also, be sure to provide a way for viewers to share your blog posts with others, such as through their social media networks or by e-mail. This may encourage others to write about your post, which helps you out even more, especially if they give you a link back and have a lot of followers.

Consider submitting your articles to news websites or to other related-bloggers’ websites. If they find the material or topic interesting, they may post it or respond to it with a link back to your site, which can help publicize your site as well.

7) Follow Up.

Every great blog ends with some kind of question. This helps encourage readers to comment or write some kind of response, which helps get the discussion going. This also means you have to check for responses and reply back. No one wants to comment on a post only to have the author never seem to notice, so be sure to let them know you read what they wrote and give the a nice reply!

If your post receives positive feedback, consider writing a related post to follow it. You can base your new post on feedback you have received, which could include comments on making your blog, post, or site better, and conflicting opinions, which you can discuss in further detail.

8) Ask For Tips.

Use your social media networking sites to ask friends and followers for tips on topics to write about, resources, or just simple blogging tips. Some of them may be great bloggers which you can learn from!

I know a few of my friends who struggle with writing, so I hope that this list of tips will be helpful to you all. Blogging is such an important tool in today’s day and age, and utilizing it to its full potential is very important as well. I cannot stress this enough to my clients and readers alike. I never understood the importance of blogging until recently. I did quite a bit of research and have found it’s great potential and advantages. Again, if you haven’t read my previous article about using WordPress, blogging, and social media networking, take a few minutes and read through them. What tips do you guys have that I can add to my list?

The three most common extensions are .COM, .NET, and .ORG. All three are unrestricted open extensions, meaning anyone (individual or company) from any country may purchase this extension. While each has it’s own representation, they are often used in any circumstances these days. All three are perfect for search engine submittal and have both global and local appeal alike.

.COM extensions represent the word “commercial” and are most widely recognized as a business symbol, which is why most businesses strive to obtain a .COM extension for their business’s website. .COM extensions are also the most widely used extension, used by businesses and individuals alike.

.NET extensions represent the word “network” and are most commonly used by internet service providers, web hosting companies, and other businesses involved in the internet industry. Some businesses use a .NET extension for their intranets as well.

.ORG extensions represent the word “organization” and are most widely used by non-profit organizations or trade associations.

Two other common extensions are .INFO and .BIZ. Both are second in line for the top three choices for domain extensions, but can be just as important for a well-rounded business marketing plan. Many businesses use a .INFO or .BIZ extension for specific marketing purposes or products. Both are perfect for search engine submittal and have both global and local appeal alike.

.INFO extensions represent the word “information” and are most widely used by businesses and individuals to convey information to the public. They are the fourth most commonly used extension and are currently popular in Europe and North America. .BIZ extensions represent the word “business” and are most widely used for small business websites. They are commonly used for the same purposes as the .INFO extension.

Two other extensions that are not open to the general public are .EDU and .GOV. .EDU was formerly reserved only for four-year, degree-granting colleges and universities, but now eligibility is limited to regionally-accreditted, degree-granting institutions of higher education. Each institution may only hold one single name in the .EDU domain. .GOV extensions are reserved for official government organizations in the United States including Federal, State, and local governments, and Native Sovereign Nations.

There are many other domain extensions available, but they are not available to all members of the world. Some are reserved for only certain parts of the world, such as .UK.COM for the United Kingdom or .EU.COM for the European Union. To determine which domain extensions might be appropriate for your part of the world if you live in a country outside of the United States, please do a little research before obtaining your domain or hosting. Many times your hosting company will be able to provide you with a domain name at a small fee or even no charge, so it is definitely worth checking into.

As stated earlier, many businesses tend to purchase their domain name with several extensions in order to cover all bases. In many cases, the main reason for this is because they want to eliminate the confusion that could arise if someone forgets their main domain name. This way, they can type in .COM, NET, or any of the other extensions that they purchase, and they will still be directed to the same company or website. If they only purchase one of these extensions, a user might type in the .NET extension instead of the .COM extension, for example, and they may be directed to a different website and company completely. And if they don’t notice and redirect themselves immediately, chances are they could become distracted and end up staying on the newfound site! Not only that, but some businesses are afraid of impostors trying to impersonate their business and scamming or cheating customers by making them think they have found the right site and providing products or services not endorsed by the original company. This often can result in unhappy customers and possible lawsuits, depending on the situation, and most smart companies want to try to avoid this at all costs.

Today, many hosting companies even allow you to host unlimited domains on your hosting plan as long as you pay for each domain name separately. This means, if you purchase a .COM, .NET, or any other extension for your domain, you can simply purchase one hosting plan and have them all hosted at the same place. Each one will have its own web address and you can either have the additional domains redirect to the main website, or you can have each one have either a different website or a similar website. The choices are all up to the business owner.

Call me old fashioned, but I kind of still prefer to use .COM and .BIZ for business purposes, .NET for internet-related business (such as hosting or internet providers), .ORG for non-profit organizations, and .INFO for informational sites. I do agree, however, that .INFO extensions are a great way to market new bits of information for your site or a new product. I do see the benefits of using multiple extensions to help eliminate confusion and to help people arrive at your website promptly, but I feel the choice is up to the business owner. Just knowing the differences between the different extensions greatly helps new business owners decide on which extension(s) to use for each purpose. The benefits also help to aid in this decision.

The problem with having a static HTML-based website can often be that in order to make one change, in reality you actually have to make changes to multiple if not all the pages within the website, which can be very tedious and time consuming to say the least. One example could be the website’s navigation menu. If you have to change the name of an item or add a new page, you may have to change all the pages! Some websites do make good use of including a page on each page (which could mean that the navigation menu is on its own page and is simply “included” on every single page, which makes updating much simpler), although most novice web designers do not use this feature. I cannot tell you the amount of websites I have come across that use static HTML pages and do not use an “include”. So then we’re back to my above mentioned problem: having to manually go into every single page and update the navigation menu.

So that’s where WordPress comes into play. It makes great use of includes for sidebars, headers, and footers, which can help a developer majority in completing a site more quickly and efficiently. Now maybe the modern user will not see the benefit as much from this feature, but if they have to pay a developer to make changes to their website, they will see that there can be a huge difference in the price it costs for a static HTML update versus one such as WordPress. A smart consumer will jump all over this and see the benefit right away.

Now, to discuss the idea of blogging. While I do recommend using the blogging feature, it’s not completely necessary. It is just one of the added bonuses that WordPress throws your way when you use it. But, if you do choose to start a blog, it can greatly help you start getting the higher rankings you want to establish on popular search engines, such as Google. One of the great things about blogging, other than the fact that you can write about anything and have everyone comment about it, is that the more often you publish or change content on your website, the better your chances are of getting a higher ranking on search engines. This being said, you don’t have to blog all the time, multiple times a week or day like some blogging addicts, although you can blog once in a while and still have the increased benefit it offers. I recommend at least blogging once a week to keep your web presence steady, but you can definitely do it more or less, depending on your situation and preferences.

I am not much of a blogger myself, although I have many things I want to write about and get the opinions of others on. I am trying to get myself to start becoming more active as a blogger, so we will see how that goes.

Another major thing that is very popular right now with the general public as well as small and large business owners alike is social media networking. This is a great idea because it helps you advertise your site and/or services for free through word of mouth. If you already have a social media networking account, such as Facebook, take a look at how many friends you have. I’m sure you have a lot! Just think of how many of them might pass along things they’ve read on your page to other fiends of theirs, and the cycle just continues. Using social media networking can be a great benefit, although many people just don’t have the time to constantly update their sites. The great advantage to using WordPress is the ability to use a plethora of plugins that can help aid you in this process.

One such plugin that is very useful is one that allows you to automatically publish any posts you create to any of your connected social media networking accounts. This means that you can publish a post on your blog, in only one place, and then all of your social media networking sites will be automatically updated for you. No more running to each site to add the same content over and over again. What a weight off your shoulders! Some of the sites will get an excerpt of your full post including a link back to your blog, which is great for getting more visitors to your site, and some will only include the title of the post (so name them accordingly!) and a link back to the original post on your website. Either way, it is getting the word out that you just wrote something that may be of interest to your friends and other viewers, and they can take the time to go read it in full at their convenience.

I cannot stress how important social media networking can be to upcoming businesses and well-established businesses alike. Just the amount of free advertising you’re getting there is enough to put forth the effort to update your content at least weekly if possible!

Another great built-in feature of WordPress is its search engine optimization. This means that before you even begin to set up any plugins or anything else for that matter on your website, WordPress has already been hard at work getting your website noticed in search engines. Now, don’t expect to rank at the top or even on the first page immediately just through using WordPress. This is a process that takes some time. But you can be sure that WordPress makes it easy for search engines, especially Google, to find your website more easily. And then there are the massive amounts of SEO plugins out there that you can use to help increase your search engine chances even more!

Another great idea is to allow viewers to comment on your website posts and/or pages. The major benefit of this is to allow for a constant flow of feedback from your viewers. This will help you to see where you need improvement and possibly just what others think about what you have written about. Most people want to know what others have to say about what they think and feel, or they probably wouldn’t have taken the time out to even write about it! So leave that comment box there and let your viewers communicate with you! WordPress has the built-in feature of allowing comments and you can make great use of that.

Another great plugin I have found that I use often is one that allows viewers to share your posts with their friends on their social media networks and even by e-mail. This is another great feature because here you are getting even more exposure for free, more free advertising through word of mouth, and who knows how many people that one little post will circulate through!

Another great plugin that WordPress offers is one that allows you to sell your products or services through your website. Some plugins make it super easy to just add a product in and start receiving orders for it. Some plugins offer many different ways to purchase the product or service, such as PayPal, money orders, checks, and credit cards, etc. This can be very useful if you need to be able to provide many different payment options for your visitors. Many of them are highly customizable, so making them look like the rest of your website is easy to do. Some plugins are also available to allow visitors to make donations as well as make simple PayPal payments to you for a product or service, without the need for an entire storefront idea and multiple payment options. Some people prefer this over the other because it seems much simpler and easier to maintain when there is only one payment source to worry about. The decision is totally up to you.

I strongly urge any website owners to use blogging, as suggested above, social media networking, and the sharing ability to increase their chances of free advertising and better rankings on search engines. If you are in need of web design and development services, please contact me for more details. I will be happy to answer any questions you may have. Hopefully this post will help you to understand the benefits of using a WordPress website as opposed to a static HTML-based website.

There are three ways that CSS can be used to add style to your HTML elements:

External – in separate style sheet files
Embedded – defined in the head section
Inline – within single HTML elements

It is very time consuming to style HTML elements using style sheets, although it can be beneficial at times when only one element will need to be styled. It is better to use external or separate style sheets to save load time and to keep the styles separate from the HTML code, and is especially useful if you have multiple elements that will need the same styling. But in this lesson, we will focus on some commonly used styles and show you how to use them inline. We will focus on the other methods of usage in a later tutorial. In order to use the inline method of styling, you must type the word style followed by an equals sign and double quotation marks around the attribute you want to change along with its value. This must be within the HTML element you want to add the style to. The following examples should help you better understand the concept.

Color:

Changing the color of an HTML element is one of the commonly used styles. To set the background color, add the style "background-color" with a colon after it and then the value you want to change it to. For example:

<body style="background-color: yellow;">

There are many color names that most browsers will recognize, although it is probably safer to learn the hex codes for them or look them up as needed. For now, we will focus on the color names that most browsers recognize. There are 17 standard colors along with 130 more that are recognized by most browsers. The standard 17 are:

aqua
black
blue
fuchsia
gray
grey
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

To set the font color of an element, you add the style "color" with a colon after it plus the value your want to change it to. For example:

<p style="color: red;">This paragraph will be red.</p>

If you are only setting one style, you don’t necessarily have to use the semi-colon at the end of the style, but it is necessary when defining more than one to separate the styles from each other. I have made it a habit of adding in the semi-colon, as you will notice throughout the tutorials, but as stated, it is not necessary. Just maybe a good practice to have.

Font-Family:

Many people like to change the font that is used on a specific element, or maybe even the entire page. To add a font-family style to an element, add the style "font-family" followed by the colon and the value. For example:

<p style="font-family: arial;">This paragraph will be in the Arial font.</p>

It is important to remember that not all people’s computers will have the same fonts installed, so it is best to stick to the standard fonts that are common to all operating systems when possible. It is also a good practice to list several fonts so that users without the font you desire can still view your site as close to your vision as possible. You should also end your list with a generic font just for good measure. Some examples of font lists include:

Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, monospace
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

In order to ensure you are using safe font lists, you should check the HTML font standards and try to include a font in your list from each platform (Windows, Macintosh, Linux, etc.). The browser will search the font list and display the first font that is available.

Font Size:

The font size style is often used as well to make the font size larger or smaller. Some people will use it to make a heading larger, or just the overall body font larger. To change the font size, add the style "font-size" with a colon and then the size you want to change the font to. For example:

<p style="font-size: 16px;">This paragraph will be a little larger.</p>

The size can be set to pixels, points, ems, and percentage. The guide below might also help:

xx-small – sets the font size to an extra extra small size
x-small – sets the font size to an extra small size
small – sets the font size to a small size
medium – sets the font size to a medium size, which is also the default size
large – sets the font size to a large size
x-large – sets the font size to an extra large size
xx-large – sets the font size to an extra extra large size
smaller – sets the font size to a smaller size than the parent element
larger – sets the font size to a larger size than parent element
inherit – specifies that the font size should be inherited from the parent element

Pixels should be used for fonts that are displayed on screens, such as monitors, while points should be used for fonts that are being displayed in print. Ems are sized so that the font size is relative to the parent element, so if a user has a larger font size set for their default in their browser, the ems will be based according to that measurement. Using ems as your font measurement ensures that your pages will be accessible to most browsers and platforms and when a user chooses to change their default font size, your pages will scale accordingly. Using a percentage will work in much the same way.

Text Alignment:

Another common style people use is the text alignment style. This is used to set the horizontal alignment of text on a page. You set the alignment by adding the style "text-alignment" followed by a colon and then the value you want to set. For example:

<h1 style="text-align: center;">This header will be centered.</h1>

The values that text alignment can be set to are: center, left, and right.

Deprecated Tags and Attributes:

There are many tags and attributes that have been deprecated, which means they will not be supported in future versions of HTML and XHTML. You should avoid using deprecated tags. Get in the habit of using only the standard and acceptable tags and the transition when a new HTML version comes out will be easier. Using deprecated tags may result in your pages not displaying correctly across all current browsers. Some deprecated tags and attributes to avoid include:

Tags

<center> – used to center content
<font> and <basefont> – used to define HTML font families
<s> and <strike> – used to strike through text
<u> – used to underline text

Attributes

align – used to align text
bgcolor – used to define the background color
color – used to define the color of text

It is best to use the appropriate style for these deprecated tags and attributes instead to ensure your pages look consistent across all browsers.

If you would like to see these tags in action, copy and paste the following code in your favorite text editor:

<html>
<head>
<title>Lesson 5: Into To CSS</title>
</head>
<body>
<p style="background-color: yellow;">This paragraph’s background color is yellow.</p>
<p style="color: red;">This paragraph’s font color is red.</p>
<p style="font-family: Georgia, Times New Roman, Times, serif;">The paragraph’s font will be Georgia, Times New Roman, Times, or a generic serif — whichever your computer has available — in that order.</p>
<p style="font-size: 24px;">This paragraph will be 24 pixels large.</p>
<p style="font-size: 200%;">This paragraph will be 200% larger than the parent element.</p>
<p style="font-size: 2em;">This paragraph will be 2ems large.</p>
<p style="font-size: 20pt;">This paragraph will be 20 points large.</p>
<p style="font-size: xx-small;">This paragraph will be xx-small.</p>
<p style="font-size: x-small;">This paragraph will be x-small.</p>
<p style="font-size: small;">This paragraph will be small.</p>
<p style="font-size: medium;">This paragraph will be medium.</p>
<p style="font-size: large;">This paragraph will be large.</p>
<p style="font-size: x-large;">This paragraph will be x-large.</p>
<p style="font-size: xx-large;">This paragraph will be xx-large.</p>
<p style="font-size: larger;">This paragraph will be larger than the parent element.</p>
<p style="font-size: smaller;">This paragraph will be smaller than the parent element.</p>
<p style="font-size: inherit;">This paragraph will inherit the parent element’s font size.</p>
<p style="text-align: center;">This paragraph will be centered.</p>
</body>
</html>

And here is how it should look in your browser:

And this concludes this tutorial. Continue to the next one for more training!

What You’ll Need:

1) Notepad or a similar text editing program, such as TextEdit
OR
2) Dreamweaver

As I am only teaching these tutorials in simple text editing programs, I will not be explaining Dreamweaver. This might come in a later tutorial though.

HTML formatting tags are used to format text, such as bolding it or italicizing it. There are different types of formatting text, and will be described below.

HTML Text Formatting Tags:

<b>, <strong> – bolds text
<em>, <i> – italicizes text
<big> – makes text big
<small> – makes text small
<sub> – makes text subscripted
<sup> – makes text superscripted
<ins> – displays inserted text
<del> – displays deleted text

Bolded text is thicker than regular text and is meant to let the viewer know that the text is more important that the rest of the text for some reason. Italicized text can serve the same purpose. Big and small formatting does just what you think- makes text bigger or smaller than the rest of the text. Superscripted and subscripted text is often used for numbers that would appear above or below the baseline of the text, respectively. Subscript can be useful for writing our formulas, such as H₂O. Superscript can be useful for adding footnotes, like web design³. Inserted text will be underlined, while deleted text will have a link through it, also known as a strikethrough.

HTML Computer Output Tags:

<code> – displays text like computer code
<kbd> – displays text like a keyboard
<samp> – displays text as a sample of computer code
<tt> – displays text as teletype
<var> – displays text as a variable
<pre> – displays text as pre-formatted

The computer output tags are often used to make text appear more like it would if were printed out or typed on a typewriter. Most people use CSS to achieve many of these effects, but it nice to know what you can do with simple HTML formatting. Text them out to see what they can do. I don’t use them much myself.

HTML Citations, Quotations, and Definition Tags

<abbr> – displays text as an abbreviation
<acronym> – displays text as an acronym
<address> – displays text as an address
<bdo> – defines the text direction
<blockquote> – displays text as a long quote
<q> – displays text as a short quote
<cite> – displays text as a citation
<dfn> – displays text as a definition term

These tags are used for a few different things. The abbreviation tag is useful when you are using an abbreviation because it can let browsers, screen readers, spellcheckers, and translation systems know what the abbreviation stands for. The same is true for the acronym tag. An acronym is an abbreviation that stands for a group of words that can be spoken, such as NASA or ASAP.

In order to use the <bdo> tag for text direction, you must specify its direction using the dir attribute. Your options are "lrt" (left to right) or "rtl" (right to left), and can be useful in different situations. The <blockquote> is used to indent large blocks of text, such as a quoted paragraph. The <q> tag is used for smaller blocks of text, such as a few words or a phrase. The <cite> and <dfn> tags are used for citations and definitions respectively. The citation tag italicizes tex, but this tag should not be used to actually just italicize text, as is is meant for browsers to see as a citation, while italicized text is meant to show emphasis or importance.

To see these tags in action, here is the code that can be copied and pasted into your text editor:

<html>
<head>
<title>Lesson 4: HTML Formatting</title>
</head>
<body>
<p>This is a <strong>bolded</strong> word.
This is an <em>italicized</em> word.</p>
<p>This is a <big>big</big> word.
This is a <small>small</small> word.</p>
<p>This is a subscripted number₃.
This is a superscripted number⁵.</p>
<p>This is <ins>inserted</ins> text. This is <del>deleted</del> text.

And here is what it looks like in action:

And this concludes this tutorial. Hope you’re learning something!

What You’ll Need:

1) Notepad or a similar text editing program, such as TextEdit
OR
2) Dreamweaver

As I am only teaching these tutorials in simple text editing programs, I will not be explaining Dreamweaver. This might come in a later tutorial though.

Any HTML element can have a few different attributes, which provide additional information about the element. These attributes are always specified in the starting tag and never in the closing tags. They will always have a name and a value, which will always need to be within quotes. It is true that in some browsers, leaving the quotes out will still allow the attribute to be displayed properly, it is not the coding standard, therefore the page will not be considered valid and some browsers will not display them properly, so it is the best practice to always use quotes. You can use either the single or double quotes, and again, if you’ve read previous tutorials, I have already stated, you should always use lowercase when writing your code, so these attributes are no exception.

Common Attributes:

Some common attributes used are:

• class
• id
• style
• title

Class is used to specify a class name for an element. Id is used to specify a unique id for an element. Title is used to display some extra information about an element, which is displayed as a tooltip. This is what would be displayed when the user hovers over the element. Style is used to specify inline styles for an element. This is not as commonly used anymore because we generally recommend using external stylesheets, but it is important to know that you can still use inline styles if needed.

Here are some examples of the attributes that have been discussed:

<p class="green">This would be a paragraph colored green.</p>
<p id="indent">This would be an indented paragraph.</p>
<p style="font-weight: bold;">This would be a bolded paragraph.</p>
<p>This hyperlink contains a <a href="#" title="Hi, thanks for
hovering over me!">tooltip</a> when hovered over, but won’t take you anywhere!</p>

Remember to give your attributes memorable names, but also remember that they will do nothing unless you specific what they are to do in a stylesheet, whether it’s external, embedded, or inline. These terms will be discussed in the CSS tutorial, so if you don’t understand, look for the appropriate tutorial for more information.

For a complete list of legal attributes that can be used for each HTML element, see the W3C’s list here.

To see these examples in action, you could type the following code into a text editor and save and view it. I will include the associated embedded CSS so you can actually see it in action:

<html>
<head>
<title>Lesson 3: HTML Attributes</title>
<style>
.green {
color: #006600;
}
#indent {
margin-left: 25px;
}
</style>
</head>
<body>
<p class="green">This would be a paragraph colored green.</p>
<p id="indent">This would be an indented paragraph.</p>
<p style="font-weight: bold;">This would be a bolded paragraph.</p>
<p>This hyperlink contains a <a href="#" title="Hi, thanks for
hovering over me!">tooltip</a> when hovered over, but won’t take you anywhere!</p>
</body>
</html>

And here is what it would look like in your browser:

And this concludes this tutorial. Watch out for more to come!

What You’ll Need:

1) Notepad or a similar text editing program, such as TextEdit
OR
2) Dreamweaver

If you use Dreamweaver, the auto-complete and suggestion feature will help you create well-formed documents. As you type a tag, it will make suggestions on what tag you might be typing, and when you begin to close a tag, it will automatically close the most recent one that is open. I focus on using a simple program like Notepad or TextEdit because almost everyone has it, while not everyone has Dreamweaver.

If you followed along in my previous tutorial, you would have already created a basic HTML document. Here is the layout we began with:

<html>
<head>
<title>Lesson 1: HTML Introduction</title>
</head>
<body>
<p>This is our first web page!</p>
<p>This is a second paragraph!</p>
</body>
</html>

If you didn’t read the previous article, you may copy and paste the above code in your favorite text editor and follow along. If any of this is confusing to you, you should go back and read the previous article.

Paragraphs:

We have already discussed the paragraph tag, but just for reference:

- Paragraphs begin with the <p> tag and end with the </p> tag.
- Paragraphs automatically create an empty line above and below the paragraph
- Example: <p>This is a paragraph.</p>

Next, we will look a a few more common tags that are often used.

Headings:

Heading tags are very commonly used as well. The heading tags are:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

These are often used as headings for sections of text, such as the heading to a paragraph about a specific topic. The headings range from 1 to 6, with 1 being the largest and 6 being the smallest. Headings should only be used as headings and not just to make text larger or bold. Search engines use headings to help index the structure and content of your website. Many users also scan through headings to find topics of interest, so it is important to use headings appropriately and effectively. <h1> should be used for the main headings, followed by <h2>, and so on, with <h6> being the least important heading. Browsers will add an empty space before and after each heading as well, so please keep this in mind.

Hyperlinks:

The next important tag to discuss is the hyperlink. Everyone uses these! A hyperlink takes the viewer from one page to another, or from one part of the page to another part of the page, etc. There are many uses for hyperlinks. Hyperlinks are generally underlined and colored blue by default, although you can change these features if you want to using CSS, which we will discuss in a later tutorial. For now, we’ll discuss the basics.

The tag for a hyperlink is fairly simple:

<a href="http://url.html">Link text</a>

I like to remember that the a href part means that this is an anchor tag (a) and the the address is the hyperlink reference (href), meaning the address you want the hyperlink to be linked to. Links do not have to be text, and can be an image or any other HTML element. The closing tag for the hyperlink element is </a>. We will discuss the many attributes of hyperlinks in a later tutorial.

Images:

Images are used pretty often as well, so knowing how to insert them is pretty helpful. The image tag is written like this:

<img src="image.jpg" />

This tag is a self-closing tag, and therefore does not have a separate closing tag, as was the case in previous releases of HTML versions. The tag is pretty easy to under stand. img means image, which lets the browsers know you are wanting to display and image. src is the source of the image, or the address to where the image exists. Then you close the tag off with the slash (/).

The height and width of the image can also be set using the height and width attributes. If you just type the numbers, it will automatically use pixels. If you just set either the width or the height of the image, the one you didn’t set will automatically constrain its proportions based on the attribute you did set. Here is an example of setting the size of an image:

<img src="sample.png" width="50" height="50" />

The address or path to the image can be relative or absolute. A relative path means that the image in question is in the same directory or folder as the page it’s being called from. An absolute path means that the image could be in another folder or sub-folder, or even on another website altogether. These paths apply to hyperlinks as well. Examples are:

Relative:

Image – <img src="image.jpg" />
Hyperlink – <a href="about.html" >

Absolute:

Image – <img src="http://www.website.com/images/image.jpg" />
Hyperlink – <a href="http://www.website.com/aboutus.html">About Us</a>

Remember the difference when typing out these addresses. We will go further into detail on the attributes of images in later tutorials as well, but for now, at least you know the basics.

Line Breaks:

Another helpful tag in the line break tag, <br />. This is also a self-closing tag. This tag creates a line break, also known as a soft return. A line break is pretty self-explanatory, but if you don’t know, it means some text can be on one line, then the next text after the line break will be on the immediate next line. When compared to the paragraph tag, you can see that a line break does not create that additional between the sets of text.

Horizontal Rule:

One more tag I will discuss in this tutorial is the horizontal rule, <hr />. This tag is also self-closing, and is used to create a horizontal line across the page. Later, we will discuss other options and attributes that can affect this element, but for now, you can use it to create a generic horizontal line to separate text or whatever else you can think to use it for.

Here is an example of what a webpage using all of the examples might look like:

<html>
<head>
<title>Lesson 2: Basic Tags</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a heading 1 tag.</h1>
<h2>This is a heading 2 tag.</h2>
<h3>This is a heading 3 tag.</h3>
<h4>This is a heading 4 tag.</h4>
<h5>This is a heading 5 tag.</h5>
<h6>This is a heading 6 tag.</h6>
<p>This is a <a href="#">hyperlink</a> tag, but the link doesn’t go anywhere.</p>
<p>This is an image tag.</p>
<img src="http://www.webdesignsbyliz.com/wdbl_wordpress/wp-content
/themes/twentyten_2/images/sample.png" width="50" height="50" /><br />
<p>This is a paragraph using a line break tag.<br />
Here is the next line, after the line break.</p>
<p>Below is the horizonal rule tag in use.</p>
<hr />
</body>
</html>

And here is an image of what you’d see in your browser:

If you’d like to try it yourself, you can copy the code above and save it in your favorite text editor. Be sure to save it with the .html extension, and then double-click it to view it in your web browser, or right-click on it and select “Open With” and then select your favorite web browser.

This concludes this tutorial. Hope this one was helpful!

What You’ll Need:

1) Notepad or a similar text editing program, such as TextEdit
OR
2) Dreamweaver

If you have Dreamweaver, there is a lot of help available within the program, such as auto-completing, that will really help you on your way. But, if you want to learn to do this manually so that you have a better understanding of what you’re doing and why certain code does what it does, then you should use a text editing program until you are more comfortable with the workings of HTML.

Getting Started:

You can begin a simple HTML page very easily. The following code will display a web page in your web browser when viewed:

<html>
<head>
<title>Lesson 1: HTML Introduction</title>
</head>
<body>
<p>This is our first web page!</p>
<p>This is a second paragraph!</p>
</body>
</html>

Let’s run through each part of the code step by step. First of all, you may have noticed that I have typed little angle brackets around a bunch of weird little lowercase titles. These are called element tags, and they tell the browser how to display the web page. You may have also noticed that I have typed them all in loercase. Currently, the standard says it’s okay to type these in either uppercase or lowercase, and while switching back and forth would still work in most browsers, it is better to stay consistent. I choose to try to use all lowercase because the World Wide Web Consortium (W3C) recommends lowercase in HTML4, and demands lowercase in XHTML. So, I would also recommend using lowercase when writing your HTML to prepare you for expansions, as eventually you will probably want to learn the standard practices for code writing and will want to ensure your code is valid as well. You’ll probably be thankful for that choice later on as you grow and learn more.

Okay, so next we’ll inspect each tag and what it does. The first tag we have is:

<html>

HTML stands for Hyper Text Markup Language. This language is used to tell the browser how to display the page. As you learn more tags, you’ll see how much of an affect HTML has on your text and the positioning of the elements within your page.

This tag is known as an opening tag. In order to have a well-formed and valid document, you must close all element tags as well. A closing tag consists of the same format, except you will add a slash (/) after the left angle (<) bracket, like this:

</html>

In order to avoid unexpected results or errors, you should always include closing element tags. While some elements allow you to omit the closing tag, such as paragraph tags, some browsers will still not display these elements as expected. It is better to stick with the preferred format in order to avoid future issues. This preferred format allows your documents to be considered valid and well-formed, and will soon become the standard, which means eventually, omitting tags WILL cause errors and your pages WILL not be displayed properly or at all.

So the opening and closing HTML tags tell the browser that all of the text and code between these two tags should be treated like a HTML document.

Next we have the <head> tag. Elements within the head element instruct the browser on where to find information about the web page, such as style sheets, meta information, the title, and much more. To keep things simple, we are only learning about the title of the web page in this tutorial.

The next tag is the <title> tag. This tells the browser that the text between the opening and closing <title> tag should be treated as the title of the web page, which will display at the top of the web page. This also serves as what the web page is called when a user saves this page to their favorites as well as the title that shows up in search engines. In our case, the title of the web page is "Lesson 1 – HTML Introduction".

After we set the title of our web page, we close the title element (</title>), then we close the head element (</head>). Next we are ready to start outputting text to our web page!

The next tag, <body>, tells the browser we are going to begin writing the body of our web page. Everything between the opening and closing body tags will be what is displayed on the web page.

The next tag, <p>, is the paragraph tag. It tells the web browser that this text is to be treated like a paragraph. After each paragraph, you include an ending paragraph tag (</p>) to let the browser know that is the end of that particular paragraph. I have added a second paragraph in order to show you what this element actually does. You can see that each paragraph actually creates an empty line after each paragraph. It is important to know this in order to ensure your web page looks exactly the way you want it to.

After writing up our paragraphs and closing them properly, we have to close our body element (</body>). And finally after that, we close the HTML element (</html>), letting the browser know we are finished with the web page.

Save this web page with whatever name you want, such as test, or index, and be sure to include the .html extension after the name, such as test.html or index.html. This tells the computer and web browsers to treat this document as an HTML document instead of just a plain text document. If you do not add this extension, the web browser will not know to read the HTML tags and act accordingly. Instead, it would simply output all of the text you have just typed, tags and all, which is not at all what we want. To save in TextEdit, you have to make sure you select the HTML file format, or else the file will not be saved properly. In Notepad, if you just type the extension after the file name, it should save properly.

Save the file to a location you will remember, such as your desktop or a folder somewhere on your computer. I tend to create a folder on my desktop or in my Documents folder for testing purposes. After saving your newly created HTML file, you can double click on it to open it in your default browser. You can also right click on it and choose to open it with your web browser of choice. Or, if you need to edit it to make changes, you can right click on it and choose to open it with the program you used to create it (Dreamweaver, Notepad, TextEdit, etc.). You can also open the program you used to create the document and simply go to Open and find the document you want to edit.

If you’d like to view your newly created document, double-click it to view it in your web browser, or right-click on it and select “Open With” and then select your favorite web browser.

When you view your new document in the web browser, you should see this:

If you don’t see what I have shown in the above image, double check your coding and make sure there are no mistakes or simply copy and paste my code into your document and save it.

Congratulations! You have just completed your very first HTML web page! Continue to the next tutorial to continue learning about HTML and creating web pages.