A Guide to Basic HTML Part 2

Following on from the previous guide, this document explains how to format images and body text.

Images

Image tags <img> are one of the few tags that don't require a closing tag. You can open and close the tag within a single set of pointy brackets by adding a slash at the end of the bracket like this:

      <img src="picture.jpg" alt="name" />

The attributes here are src and alt. The src refers to the source of the image. This should be a full static http://www link if it is to a picture that is not on the same server. The alt text is an alternative text description that will appear to users who do not have images turned on, are using a text only browser or are search engine spiders. All images we add should have alt text featuring a keyword rich, short description.

You can also define the size of the image within this tag.

      <img src="picture.jpg" alt="name" height="100" width="100" />

This will shrink (or expand) the image size, but it will not reduce the size of the original picture. It is important to remember that if you have a massive image that you resize to smaller using this method, it still might take a while to use. If you're having a problem with images, refer to the design department to compress your images correctly for you.

Body Text

All SEO-friendly website pages are populated with plenty of well-written text, and this should be collected into paragraphs. Open each paragraph with <p> and close it with </p>. You may find pages where the person who created the page has written text directly into the document without a <p> tag. If you are dealing with a document like this and you want to need to add line breaks simply add <br /> (this does not require a close tag, the same as img) However, if you have time, you should clean up text and put it into proper paragraphs.

Lists

Lists are great for users as they break up text and simplify ideas. They also highlight key points about a page to search spiders. There are 2 types of list in html - ordered and unordered. Decide which you want (ordered tends to be numbered, whereas unordered is bullet points or dashes), open the tag and then identify each list item with <li>. This html will produce a bullet point list:

      <ul>
        <li>first list item</li>
        <li>second list item</li>
      </ul>

If you would rather have numbers next to the list, simply use <ol> instead of <ul>. Just be sure to close the list at the end!

CSS

All of I-COM's pages have a separate file that defines the styles that appear on the page when you select a tag. This is a cascading style sheet. For instance, if you put <h1> and the text appears on the page in red, right aligned and with a big white space underneath that is defined in the CSS file. If something seems to be styled incorrectly, highlight it to a developer.

Final thought

HTML is very forgiving; capitalisation in tagging does not matter, extra spaces both inside and outside tags are ignored and the ordering of attributes within tags are not important. Even if you forget to close some of the tags, you will probably get away with it. However, it is good form to try to keep the code as clean as possible. Browsers can render cleaner HTML quicker, and so users will have a better experience of your website. In addition, if you return to a site a year after you originally edited it, it is easier to work with if you have kept the code in good order.

If you are creating a page and it looks wrong, you can always run it through the html checker on the W3C site: http://validator.w3.org/ you can input lines of code to check or put in whole urls. This will tell you what is wrong with your page if you have html errors. If you would like to find out more about html or check for other attributes, http://www.w3schools.com/html/default.asp is a good guide with full tutorials.

HTML Cheat Sheet

For quick reference, please see the HTML Cheat Sheet and make sure you put it in your bookmarks.

  • Contact

    Speak to us about your project today