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.

html crash courseTherefore, 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

website htmlThis 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

html for imagesThere 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>

This text is to the left
<div align=”right”>This text is to the right</div>
This text is to the right
<div align=”center”>This text is centered</div>
This text is centered
 

HTML Headings

html headingHeadings 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

Create your own Website!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>
  • Abstract Art
  • Surreal Art

 

Ordered List:

<ol>
<li>Paintings</li>
<li>Sculptures</li>
</ol>
  1. Paintings
  2. Sculptures

 

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.







Post a Comment Blogger

  1. 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
  2. @Sarah Miller
    Thanks 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.

    ReplyDelete

Thank-you for your comment!

 
Top