»Home
  »Intro
  »Headings
  »Separators
  »Links
  »Text
  »Images
  »Backgrounds

Images

If HTML is text based, how would I insert an image?
     
In HTML everything is based on text. Things on the web work via links. You must understand this before you can post an image. EVERYTHING is text in HTML, and the way you get it to appear is by finding the link to the image, and setting the code to make it appear. The browser window(internet explorer, firefox, etc) will read the code and know to grab the picture from the link you inserted into the code, it will then take the image and place it where the code was located, showing the image.

The code to insert an image into an html document is: <img src="***picture URL****">
There is also no closing tag for images. Also, make sure the url to the image you have is from an image that is uploaded somewhere on the internet(like tinypic.com, or a photobucket). If you already have webspace, you can load the image to your side, and then use the link from that as an alternative to a photobucket or other means of uploading a pic to the internet.
Here is a list of common attributes for the <img> tag.

Attribute Info
src="picture url" You must have the quotations, and this attribute is mandatory in order to insert an image into a page.
alt="text" Just type in text descibing the picture. When the cursor is help over the image, the text will be displayed.
align="top middle bottom left right or center" This will align the image on the line, it works the same way as the alignment for the <p> tag or the horizontal rule ( <hr> ) tag. Quotations must be included. You can also align the image to be in the middle of the line, ontop of the line, or below the line.
height="px" You can adjust the height of an image using this attribute. Make sure you keep the quotations and the px, the px lets it know that you are adjusting it by pixels.
width="px" This works the same way as height, but with width.

There are also some other attributes for the <img> tag, but they are not as necessary for basic web design.

Another thing you can do with the align attribute is use it to wrap text around an image. If you set the image to align left, the text will wrap agianst the right side of the image, and vice versa for aligning the image right. Just not make sure to break the line so the text will wrap around the image. The best way to learn how to wrap images is to practice with one. Find a Moderate size image(300X200 pixels should do), and try the different alignments. After all of it is typed up, view the document as a webpage in your browser to see how it looks.



Hosted by www.Geocities.ws

1