Solved

Needs help in HTML5

Posted on 2014-01-04
7
170 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
Comment Utility
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
Comment Utility
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
Comment Utility
....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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:mustish1
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
>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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

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…
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

743 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

15 Experts available now in Live!

Get 1:1 Help Now