Solved

Needs help in HTML5

Posted on 2014-01-04
7
179 Views
Last Modified: 2014-01-05
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
Comment
Question by:mustish1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 18

Assisted Solution

by:zc2
zc2 earned 100 total points
ID: 39756618
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
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 400 total points
ID: 39756624
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
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 400 total points
ID: 39756626
....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
Industry Leaders: 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!

 

Author Comment

by:mustish1
ID: 39756745
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
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 400 total points
ID: 39756810
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
 

Author Comment

by:mustish1
ID: 39756815
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
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 400 total points
ID: 39756853
>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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question