NM Web Tutorials
XHTML
Display Picture Make Text Link Make Image Link Basic Text Attributes Make a List Easy Back Button HEX ColoursCSS
Font/Colour Attributes Roll Over-text Roll Over-image Borders Float Margins Padding BackgroundsOther Useful Tips
Add to Search Engine TermsXHTML
What The Code Does
<img src="images/flag_canada.gif" alt="Canadian Flag" width="160" height="80" />

The part that says "images/flag_canada.gif" represents where the file is located, and then what the file is named. Notice how this section is in quotation marks, if you don’t have those, or if you get the location and file name even a little bit wrong, it won’t work. I recommend putting all your images in an “images” folder, it just makes things a little bit more organized. If your file was in a folder, that was within folder, you would structure it as "images/next_folder/flag_canada.gif". If you had to go back a folder, you would put ../ instead of the folder name. So if you had to go back two folders, and then into a folder, you would structure it as "../../images/flag_canada.gif".
The part that says alt="Canadian Flag", this is for people who are visually impaired using audio browsers.
The height and width part is pretty self explanatory, it is in the unit of pixels. Although this part is not required, it will allow for more control if you wanted to slightly adjust the size of your image. Any major alterations to image sizes should be done in Photoshop, rather than using code. On that note, you should downgrade the quality of your images as much as you can without seriously compromising the quality to the naked eye. This will allow for faster loading time, which is still a good thing to do even with all the high speed internet going around, lots of people still use dial up, and others use wireless.
Home | Basics | Getting Started | Display Text | Escape Character Sequences | Basic Text Attributes |
| Make A List | Display Images