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:
<html>
<header>
META CONTENT and style sheets
</header>
<body>
WEBSITE CONTENT
</body>
</html>
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 Text
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 |
| <i>italics</i> | italics |
| <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>
HTML Headings
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.
<table border="1">
<tr>
<td>row one, cell one</td>
<td>row one, cell two</td>
</tr>
<tr>
<td>row two, cell one</td>
<td>row two, cell two</td>
</tr>
</table>
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.
HTML Lists
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.
Unordered List:
| <ul> <li>Abstract Art</li> <li>Surreal Art</li> </ul> |
|
Ordered List:
| <ol> <li>Paintings</li> <li>Sculptures</li> </ol> |
|
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.
If you want to learn more about HTML, one of the best sites I recommend is W3Schools. This site has free step by step lessons on learning HTML and other programming languages such as CSS and Javascript.
Hi Graham - I have been a web developer since 1996, back when we coded HTML by hand in Notepad :) Your overview is very easy to understand and right on the mark. Great job!
ReplyDelete@Sarah Miller
ReplyDeleteThanks Sarah.. I have heard many say that HTML knowledge is not needed for the newer website builders. But, I still find myself having to use it all the time, especially for this blog. For people who plan on spending a lot of time working with a website or blog, I think it is very advantageous to know it.