Solved

Needs help in HTML5

Posted on 2014-01-04
7
173 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
  • 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 52

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 52

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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 52

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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
XSLT 5 42
IndexedDB how to clear the DB when returning but not refreshing? 1 151
css border raidius issue 7 80
Problem to picture file 3 68
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…

920 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now