Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Needs help in HTML5

Posted on 2014-01-04
7
Medium Priority
?
185 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 19

Assisted Solution

by:zc2
zc2 earned 400 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 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1600 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 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1600 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1600 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1600 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

618 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