Some have been asking me to help them with the HTML coding for their websites. While I enjoy helping artists, I often do not have the time to go into detailed tutorials with everyone who asks.
Therefore, I have decided to write this crash course dedicated to some very basic HTML, which may help artists in optimizing images and links for SEO (Search Engine Optimization) and in formatting their websites. With WYSIWYG (What you see is what you get) editors, artists do not often need to understand advanced coding. As for myself, I have had to work with the html, especially for including widgets and adding alt and title tags to images (some editors do not have this option).
Even if you use a WYSIWYG editor your whole life, it does benefit knowing some basic things of how websites work underneath.
Basic Setup of a Website
This is a basic setup of a website:
META CONTENT and style sheets
Basic Rules: Everything in a website comes between the HTML tags. All tags on a site function in pairs. The closing tag always includes this symbol “/”
Header – This is where meta content and style sheets are placed. The style sheets control the formatting for your website. Certain claim codes, such as Google Analytics, are also placed inside this section.
Body – Everything displayed on a website is included within BODY tags.
HTML for images
There are certain tags you should know for optimizing images for SEO. An image is displayed in code like this:
<image src=”IMAGE LINK” alt=”NAME OF IMAGE” title=”TITLE OF IMAGE” />
The “src” part means source, which is the place where the image is found on the internet.
“alt” is what appears whenever an image cannot be loaded.
“title” is what appears when a user hovers their cursor over the image.
HTML for links
HTML editors allow you to easily insert a URL, but some do not have the title and other options.
<a href=”http://www.artpromotivate.com/2012/09/digital-slr-cameras-photograph-art.html” target=”_blank” title=”Digital SLR Cameras”>Digital SLR Cameras</a>
This is how it is displayed: Digital SLR Cameras
Formatting your websites and art blogs will help to emphasize certain parts of your content, and make it a more interesting read. Here are some basic formatting tags.
|<b>bold text</b>||bold text|
|<big>big words</big>||big words|
|<small>small words</small>||small words|
Alignment of text
Sometimes you may want to align an image or block of text. Just place them inside <div> tags and state your alignment like this:
<div align=”left”>This text is to the left</div>
Headings help to bring structure to a website, and search engines also love them. Include all your main keywords inside headings for proper SEO.
Headings go from one to six, with one being the most important.
They are structured like this:
<h1>This is the main heading</h1>
<h6>This is the least important heading</h6>
Using Tables to Create Image Galleries
There are certain instances you may want to make use of tables, especially for a gallery of thumbnail images. If your HTML editor does not have this function, here is how to create a basic table from HTML coding.
<td>row one, cell one</td>
<td>row one, cell two</td>
<td>row two, cell one</td>
<td>row two, cell two</td>
This is what is displayed.
|row one, cell one||row one, cell two|
|row two, cell one||row two, cell two|
To create a gallery of images, first create your thumbnails. Use your HTML editor to insert them inside separate cells in the table.
Lists are useful for easily organizing links and items on your site. I use them often at Artpromotivate. Having blog posts organized into lists helps your content to be easily crawled by search engines. There are two types of lists – ordered <ol> unordered <ul>
An ordered list is represented by numbers, and unordered by bullet points.
Here is a basic list setup in HTML.
This is by no means a thorough HTML lesson, but only a crash course on some of the basics that can be useful for formatting and optimizing for SEO.