HTML Images


A web page without any images to break up the text can be pretty boring. The key to website images is that they should not be too big in terms of physical size or file size. Otherwise your web page will be slow to load. For demonstration purposes, right click on the Firefox logo image below, click 'Save As' and save it to your the same folder as your .html work.




Inserting an image into white space


In the example below <br /> tags have been used to create vertical white space. In between, the <img src> tag is used to insert the image. It important that all small letters are used (no Capitals) ib both the file name and the HTML.



<br />

<img src="firefox.jpg" />

<br />



See the Example.


Inserting an image into paragraph


You can place an image within a paragraph like so:



<br />

<img src="firefox.jpg" />

<br />

<p>This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text. <img src="firefox.jpg" />This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text.<p><br />



You will see from the Example that, by default the image aligns itself to the bottom of the text where it is placed.

Image alignment


The alignment of an image can be adjusted as follows:



<br />

<img src="firefox.jpg" />

<br />

<p>This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text. <img src="firefox.jpg" />This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text.<p><br />

<p>This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text. <img src="firefox.jpg" align="top" />This is an example of how to insert an image into a paragraph of text. <img src="firefox.jpg" align="middle" />This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text.<p><br />



In this Example the first image uses the align="top" code and the second uses align="middle". To get the full effect, you may need to narrow the width of your browser window. In all cases you will note that the image creates horrible, unwanted whitespace within the paragraph. ,/p>

Float an image


To avoid the whitespace issue, we can float the image to the left or the right. Copy the following to your .html file:



<p>This is an example of how to insert an image into a paragraph of text. <img src="firefox.jpg" align="left" /> <img src="firefox.jpg" align="right" />This is an example of how to insert an image into a paragraph of text.This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text. This is an example of how to insert an image into a paragraph of text.<p><br />




>> Next - More on Images >>



Summary of HTML Tips so far


Use small letters throughout your HTML code

Save your webpages using the .html file extension.

Refresh your browser to see the changes that you have made.

Ensure HTML tags are in the correct order.

Ensure HTML code is written in US English.

The front page of a website should be saved as 'index.html'.

Use percentage or the em method to define font sizes.

Use <br /> tags to create whitespace.

Use <td></td> tags to create a blank table cell.

Use &nbsp; to create a horizontal space within text.

Use target="_blank" on a link for it to open up in a new window.

Use id= to place a 'marker' to a heading.

Use href=mailto: to create a link to an email address.

Use <img src="image" /> to insert an image.

Align an image to the top, middle or bottom.

Float an image to avoid white space.


Summary of HTML Tags


<a>

Anchor Tag for creating links.

<a href=

Reference to other website or web page

align=

Used to align images top, middle or bottom relative to text.

<b>

Bold tag.

<br />

Break tag.

<body>

Designates the body of the web page. Must come after the </html> tag.

<caption>

Adds a caption to a Table.

<h1>

Heading tag number from 1 to 6, with h1 having the largest font.

<html>

Designates the document as a web page.

<i>

Italics tag.

id=

Refers to section within HTML document

<img src>

Inserts an image.

mailto:

used to create a link to an email address.

&nbsp;

Non-breaking space

<p>

Paragraph tag.

style=

Used within the <p> tag to define font type, colour and size.

<table>

Adds a Table to the web page.

<td>

Table data in the table cell.

<th>

Table heading.

<tr>

Defines a Table row.

<u>

Underline tag.