HTML Images

Links otherwise referred to as hyperlinks are used to navigate through pages of a website; these links are most commonly located in a main horizontal area near the top of the page, or vertically down the left side of the page.  The aforementioned usually house the most important links and navigate the visitor through the top level pages of the website. Other links can be found throughout the content of a page and can link to secondary pages within the site, or they can even point to entirely different websites. Images are an important part of you web design, if you consider having your site on a dedicated server you would ensure to get the best speeds and your images would load perfectly.

HTML Images - The <img> Tag and the Src Attribute

HTML Images are defined using the <img> tag, no closing tag is required, and to display an Image we require a source tag <src>, the value of the source tag should house the URL or path to the Image.

• <img src="images/helpvid-icon.jpg"/>

HTML Images Alt and Title tags

For SEO purpose an alternative text element (alt) can be included, this offers space to provide more information on the image. The title tag will appear in place of the Image if for some reason the Image fails to load .

• <img src="images/helpvid-icon.jpg" title="helpvid logo" alt="html images" />

HTML Images Height and Width

As you can see in the example below you have the option to set a width and height for your Image

• <img src="images/helpvid-icon.jpg" width="88" height="88" title="helpvid logo" alt="html images" />

HTML Images Alignment

An alignment element cab be included to align your Image to the left, right, top, middle, bottom, absmiddle, absbottom, baseline, texttop.  The best practice is to experiment with all the aforementioned until you become comfortable with the alignment element.

• <img src="images/helpvid-icon.jpg" align="left" />

HTML Images Border

The border attribute can be included to place a border around the image; the number “1” in the code below represents the thickness of the border in pixels.  The colour attribute can also be included.  For no border on an image place “0” as the number, this is common practise on images you plan on creating links from, as links will automatically place a 1 pixel blue border around the image to make clear it’s a link, the “0” will remove this border from linked images.

• <img src="images/helpvid-icon.jpg" border="1" />

HTML Image Example

• <img src="images/helpvid-icon.jpg" width="88" height="88" title="helpvid logo" alt="html images" />