Add Images to Website Templates

Adding Images To Your Pages Using Notepad


You may want to add additional images to the body of your webpages, here are some details.

For just replacing pictures click here


Adding a plain image:
To add a .jpg graphic into the body of your webpage, highlight, copy and paste the following code into your page:

<img src="picts/sample-image.jpg" alt="Image description"><br>

Now create a .jpg graphic called "sample-image.jpg" and put it into your picts folder. Remember that hosting is case sensitive so don't use any capital letters on either the page or when you save the image. Or, make sure your page and the graphic name match exactly.

Image description
Sample Image #1


To center the image on the page, add center tags as shown below:

<center>
<img src="picts/sample-image.jpg" alt="Image description"><br>
</center>


Image description
Sample Image #2



Adding an image with a link:
Perhaps you want your graphic to link to another page as well, use this code:

<a href="your-page-name.htm"><img src="picts/sample-image.jpg" alt="Image description" border="0"></a><br>

Image description
Sample Image #3


Or you can make the graphic link to another website. The link below goes to ebay.com for example:

<a href="http://ebay.com"><img src="picts/sample-image.jpg" alt="Image description" border="0"></a><br>

Image description
Sample Image #4




Adding a responsive image:
The following code allows you to add an image to a responsive website or template html page with a link, top and bottom margins and a centered caption:


NOTE: This page is not responsive. The image below will not display here as responsive.


<div style="text-align: center;">
<a href="your-page-name.htm"><img src="picts/responsive-image.jpg" style="width: 100%; height: auto; margin: 5px auto 5px auto; border: 0px;" alt="Image description"></a><br>
Sample Responsive Image<br>
</div>

Image description
Sample Responsive Image







Related Topics:
New Window Target Links
Adding Page Links


Allwebco Template Support


Allwebco Website Templates HTML Image Code


See Also...
Align Images


Allwebco Web Templates
Complete websites with built in scripts.
AllwebcoDesign.com
Web Site Templates
Free Javascripts
Free scripts for any website or template.
Allwebco-Templates
Web Template Support
Mobile Web Templates
HTML5 / CSS website designs.
AllwebcoDesign.com
Web Site Templates
Shopping Cart Templates
Professional templates with built-in Paypal.
AllwebcoDesign.com



Website Template Support
Website Template Support