![\"smiley](\"https:\/\/www.websitespot.com\/blog\/images\/smiley-face.jpg\")
<\/p>\nInserting images into a website is an important part of making a website. This allows you to create a certain feel with your website such as professionalism, commercial or even comedic.<\/p>\n
There are quite a few different attributes when it comes to inserting an image into a website such as the layout, how well it's optimized for search engines. Along with attributes that allow you to speed up the time that your site takes to load. This tutorial covers the basics of inserting images and not the manipulation of those images. I've covered the main attributes below.<\/p>\n
Inserting an image is an important part of making a website. The tag is as follow:<\/p>\n
<img src=\"images\/smiley-face.jpg\"><\/p>\n
This is saying that they file smile-face.jpg is located in the images folder on your website. YOu can place the images anywhere you want on your hosting account but the 'images' folder is pretty much the standard.<\/p>\n
The link would appear as: <\/p>\n
The alt tag is used to help search engines determine what your image is related to. This is a must when you're doing your search engine optimization which I cover in the search engine optimization<\/a> section.<\/p>\n The tag is as follow:<\/p>\n <img src=\"images\/smiley-face.jpg\" alt=\"smiley face\"<\/strong>><\/p>\n This is telling the search engines that this image is related to smiley faces.<\/p>\n If you'd like to add a border around your image you can accomplish this with a basic attribute in your HTML code.<\/p>\n The tag is as follow:<\/p>\n <img src=\"images\/smiley-face.jpg\" border=\"1\"<\/strong>><\/p>\n The larger the number the larger the border. If you don't want a border just don't add the border attribute at all.<\/p>\n The link would appear as: If you'd like to specify the size of an image you can do this with a specific attribute as well. The theory is that if you specify the size of the image that your page will load quicker. It certainly doesn't hurt but I generally don't do it for my own site.<\/p>\n The tag is as follow:<\/p>\n <img src=\"images\/smiley-face.jpg\" height=\"25\" width=\"25\"><\/p>\n The larger the number the larger the border. If you don't want a border just don't add the border attribute at all.<\/p>\n The link would appear as: If you'd like to add multiple attributes to an image you can simply separate them with a space.<\/p>\n The tag is as follow:<\/p>\n <img src=\"images\/smiley-face.jpg\" border=\"1\" height=\"30\" width=\"30\" alt=\"smiley face\"><\/p>\n The link would appear as: As you can see it distorted the image a bit because the actual image size is 25 x 25 but for demonstration purposes I changed it to 30 x 30.<\/p>\n The last thing that I'm going to cover is images as hyperlinks. This will allow you to insert an image into your webpage and enable it to be a clickable link to another page on your website or another website altogether.<\/p>\n The tag is as follow:<\/p>\n <a href=\"http:\/\/www.smileyface.com\"><img src=\"images\/smiley-face.jpg\"><\/a><\/p>\n The link would appear as: Adding An Image Border<\/h2>\n
<\/p>\nSpecifying Height And Width Of An Image<\/h2>\n
<\/p>\nMultiple Attributes in One Image Tag<\/h2>\n
<\/p>\nImages As Hyperlinks To Other Pages Or Websites<\/h2>\n
<\/a><\/p>\n