Warning: Is Your HTML Illiteracy Costing Your Business?

Guy mad at computerHave you ever been frustrated with not being able to contact your web designer to fix an error on your website?

Have you needed to update a website or add HTML on a blog or in a newsletter in the non-working hours of your web design firm?

Have you been discarded by a web design firm after they “completed” your website and left not knowing how to make adjustments to your site?

At Arcimedia we see all of our clients as long term customers. Although we do have “working hours”, we want to give you to be able to tap into our knowledge even when we have went home for the day. So we use this blog as a resource for you to look to in your time of need. This will be our first post in our HTML series. To get you I am going to cover the basic  tags in HTML, and how to apply them to your website or blog.

Lets start with how to access your HTML to change it.

Wherever you are hosted you should have a login and password to your account. You should also be able to access a file manager with this login. Contact your hosting provider to find out how to access your file manager. You can also use an FTP client such as Filezilla ( FileZilla is free, there are others that you can pay for however, Filezilla has all the functionality you should ever need). Once you have access to your files, you can edit them in notepad or an HTML editor such as Dreamweaver. An HTML editor is not necessary unless you plan on taking your knowledge above the basics. If you do we have Dreamweaver for sale in the Arcimedia Store.

Lets start talking tags

Each tag will be surrounded by greater than and less than tags, like so <html>. it is very  important that you do not delete either of these containing elements. In addition once you start a tag you must close it. Here is an example <body> this is the text in the body </body>. Notice the backslash in the closing tag, this must be in all closing tags.

Now I will Take you from the top to the bottom of a general webpage.

<html> This tag will exist in each and every HTML page. It lets the browser know what type of file it is dealing with.

<head> Any text inside this tag will not show up on your page. It is primarily used for your meta information (ie description and keywords) and formatting.

<meta> I will not go into too much detail on these except for the fact that they exist in your head tag and help the search engine robots get information about your site. It is worth noting that search engines have decreased the weight it gives the information in meta tags as it has been abused in the past.

<title> Consider this the big daddy of tags. Search engines weigh this tag heavily when determining what your site is about. The text in this tag shows up in the tabber of your browser.  It is a good idea to include keywords in this tag without going overboard.

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. The smaller the number on your heading tag the more weight it receives from search engines. You are only allowed one <h1> tag per page in regards to search engines giving them weight.

<body> This is where all your content lives whether its images or text.

Paragraphs are defined with the <p> tag.
HTML automatically adds an extra blank line before and after a paragraph.

<br> This tag allows you to proceed to the next line without skipping a space.

<img> This is an image tag and can not stand alone. It needs to refrence an image that is located somwhere on the internet either in your site or somewhere else. Here is an example of a “complete” <img> tag:

<img src=“portfolio/roboworld.jpg” alt=“THe Arcimedia home page header: A lightbulb robot standing behind a three dimensional map of world to represent Arcimedia as a global Web Development and Graphic Design Company.” name=“Arcimedia home page header” width=“243” height=“150” align=“absbottom” /></div>

Notice all the elements inside this tag
alt= This describes the image for SEO and screen reader purposes
name= This gives a name to the image
The width, height, and align elements format the picture to display on the page

This is only the beginning in the next post in this series we will cover divs, tables, links tags and some more formatting.

About Doug Greathouse (aka Captian Arcimedia)