text: Adding Images To Your Pages Using HTML » Naijamediamp3 | Nigeria most visited music, Entertainment website
  « Adding a quick Javascript select & option menu | TRANSFER LATEST!! Real Madrid Take FINAL DECISION On Signing Neymar »
  Adding Images To Your Pages Using HTML
  Posted by admin on June 22nd, 2019 Under Uncategorized
  You can use any plain text editor like Notepad or TextEdit on Mac to add images to the body of your webpages. If your template is mobile or responsive do not exceed about 290 pixels in width for the image, or use the responsive code below.
  Replacing webpage pictures
  Quick code to make an image responsive
  Select, copy and paste the following css style code. Add it to your image to make it flex for desktop, smartphone and mobile devices. Remove any height and width code.
  style="max-width: 100%; height: auto;"
  In your HTML page, add the above code as highlighted below:
  <img src="picts/sample-image.jpg" style="max-width: 100%; height: auto;" alt="Description"><br>
  Responsive image using a new class
  This will create a new class you can use to make any image responsive. If your website or template has a global .css file like a "style.css", add the following code to your .css file. You can add it anywhere on it's own line, or add it to the bottom of the file.
  .resp-image { max-width: 100%; height: auto; }
  In your HTML page, add the new class as highlighted below:
  <img src="picts/sample-image.jpg" class="resp-image" alt="Image"><br>
  If your image already has one class, like a border class, add the new class name with one space like the following example:
  <img src="picts/sample-image.jpg" class="img-borders resp-image" alt="Image"><br>
  Basic HTML image code
  Non-responsive, for images less than about 290 pixels wide (or for any sized non-responsive image). To add a .jpg graphic into the body of your webpage, select, copy and paste the following HTML code into your webpage:
  <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 code or the image file name. Make sure your page code and the graphic name match exactly.
  To center the image on the page, add css centering tags as shown below:
  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" style="border: 0px;"></a><br>
  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" style="border: 0px;"></a><br>
  Basic responsive image
  Use the following code for a basic responsive image. This is the simplest code for an image that will flex to fit the space and not exceed it's actual dimensions. Size your jpg image to the widest size you want the image to display on the webpage.
  <img src="picts/responsive-image.jpg" style="max-width: 100%; height: auto;" alt="Image Description">
  Responsive image with a link and caption
  The following code allows you to add any size image to a responsive website or template html page with a link, top and bottom margins and a centered caption. A max-width is included so the image will not exceed 650 pixels in width.
  Note: This webpage is responsive. Narrow your browser width to see the image respond.
  <div style="text-align: center; font-size: 16px;">
  <a href="your-page-name.htm"><img src="picts/responsive-image.jpg" style="width: 100%; max-width: 650px; height: auto; margin: 5px auto 5px auto; border: 0px;" alt="Image Description"></a><br>