Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 186
  • Last Modified:

Needs help in HTML5

Can any one please help me in HTML5. Is this is the correct syntax for a image of 200 pixels wide and 150 pixels high

img src=pic1.png width=200 height=150
0
mustish1
Asked:
mustish1
  • 4
  • 2
5 Solutions
 
zc2Commented:
Not exactly. Attribute value should be in quotes, and the tag should be closed (note the trailing slash character)

<img src="pic1.png" width="200" height="150"/> 

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
And you need an alt tag to be valid

<img src="pic1.png" width="200" height="150" alt="My Dog"/> 

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
....Either are valid in html5  (can end in /> or >)
<img src="pic1.png" width="200" height="150" alt="My Dog"/> 
  <img src="pic1.png" width="200" height="150" alt="My Dog"> 

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
mustish1Author Commented:
Thanks. Can you also please tell me how to increase the size of the image by 100 percent.
is this is a correct syntax

<img src="pic1.png" width="100%" height="150" alt="My Dog"/>
0
 
Scott Fell, EE MVEDeveloperCommented:
Physically, you can increase the size this way although you would want to increase both the width and height equally.  Do do that, you would leave off the height.  By making the width 100% you are making the image width 100% of it's containing element (div, table td etc).

However, you should really upload the image to the exact size you need it.  If you don't know what size, then error on the larger side.  As you make the image smaller by code, you are not really making the image smaller in actual size, just physical size.  Making it smaller this way typically does not change the look of the image.  When you increase the size of the image beyond it's actual size, it will start to pixelate or blow out and not look very good.
0
 
mustish1Author Commented:
Thanks for this detail information. To increase the size of the image by 100 percent means just to increase the width or width and height too. Also when you talk about table you mean

<table border = 0 align ="center">
<tr><td><img src="pic1.png" width="100%" height="150" alt="My Dog"/></td></tr>
</table>

is this is the right way to increase the size of the image by 100 percent?
0
 
Scott Fell, EE MVEDeveloperCommented:
>is this is the right way to increase the size of the image by 100 percent?

No.   As I said, the proper thing to do is start with the correct size image.  If your image from your camera 2986 X 1944 and you only need it to be 300px wide, you would bring your image to your favorite image software or you can use http://pixlr.com/ and a handful of other online image processing tools and size the image proportionally to 300px wide and 72dpi (for web).

   <img src="pic1.png" width="300" height="195" alt="My Dog"/>

If you have a div (or table) that is 200px wide as in the code below, the width of the image would be 200px and the height would auto adjust proportionally.  
<style>
div{width:200px;}
<style>
<div><img src="pic1.png" width="100%"  alt="My Dog"/></div>

Open in new window

The only time  you really want the browser to size your image is if your site is responsive and changing width as the browser narrows.  Your original image should always be the size of the maximum you will use.

If your original image is 100px wide to start with and you made it 300% larger by using
<img src="pic1.png" width="300"  alt="My Dog"/>

Open in new window

The visual size of your image will be 300px (3 times 100px) but it will "blow out" or pixelate because you stretched it out too much.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now