Is this html code ok?

Hi people,i'm still wet behind the ears when it comes to html,so i was wondering if some kind soul can confirm its set out ok?Its for blogger,& it does what its supposed to,but i just wanted to ask if its ideally set out......if there is such a thing......which then leads onto even more questions.

<img src="http...........JPG" align="left" height="100px" style="margin:10px 15px 10px 15px;"/>

Also Does it matter what order that the code goes in,eg with regards to align,& margin?

Thanks for any help

 

It is wrong. So not Use "px".

 

<img src="http...........JPG" align="left" height="100" style="margin:10px 15px 10px 15px;"/>

You can skip align="left", left is the default setting.
The order does not matter.

 

The solution is allready posted by 50plus , above. I would suggest All styling be included in the CSS file rather than defining it out individually

 

Wrong. While the image may appear to be aligned left, without the align attribute the text following the image in the Html will not flow around it from the top of the image downward.

Wrong. A measurement type is needed in style. Other measurement types include ex, em, cm, mm, pc, in & pt. The only time a measurement type is not needed is when the value is equal to 0.

Correct.

Suggest the following:

Your Html source:

<img src="http...........JPG" height="100px" class="img_left" />

In your CSS:

img_left {margin:10px 15px 10px 15px; float:left;}
img_right {margin:10px 15px 10px 15px; float:right;}

Code (markup):

Note that I added another class for images that you want to align on the right side of the page.

 

Without using align="left" the text and image will appear on the same line by default, Using align="left" allows wrapping of text around the image.

Edit: the above post wasn't there when I replied.

 

Don't you hate it when that happens? =)

Actually, I have noticed a lot of strange behaviour from this board this morning.

 

The align attribute should not be used. The float property is the proper method, as demonstrated above. Align has not been a part of html since 1999 (html4), except for elements in the table group (COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR).

cheers,

gary

 

WRONG, at least since it's an ATTRIBUTE. Attributes accept either % or no metric which is assumed to be pixels. Declaring pixels in an ATTRIBUTE like 'width' or 'height' is incorrect... as such this:

<img src="http...........JPG" height="100px" class="img_left" />

Code (markup):

is WRONG. If you are going to declare it in the markup, it's height="100" - you only declare px if it's in the CSS style="height:100px;"

height="100px" is flat out WRONG.

As to the rest, pretty much the crowd is bang on. The only presentational attributes it's ok to use on a IMG tag is height and width. Everything else should be tossed in a class in your CSS, or inherited off the parent container if it's the only image in said element.

Oh, and don't forget your ALT attribute.

<img src="images/yourimage.jpg"
	width="320" height="100"
	alt="text describing what the picture is OF"
	class="plate"
/>

Code (markup):

I like to add a little white-space and formatting. I hate scrolling sideways and wordwrap just makes the whole thing a confusing mess.... and remember, classes should say what something is, NOT how it appears, so using the words 'left' and 'right' on a class is nonsensical.

 

@Deathshadow- You are right about the px in height and width. I actually overlooked that entirely (since I copied it from another post that had it missing). I had blinders on ... oops!

 

Now we are picking nits. How would you name your classes for images that are floated left/right then?

If you look at any of Chris Pearson's WP themes, he has actual classes for floating images left and right (plus frames around the image). This was done for the 'author' to use in their posts and not use WP's align attributes. Sometimes the image looks better on the right side of the page, and this gives them the flexibility and more control over the presentation of the post.

 

I would name it for what the image IS. Is it a plate? Is it a icon, avatar, insert, standout?

You often see people doing rubbish like this:

<div class="doubleBorder left bigFont">

When they should be doing

<div class="newsArticle">

Seriously, classes that say how it appears is just as bad as using presentational markup in the first place. You might as well go back to using align, valign, center, font...

Also a third of why I call "clearfix" what it is - complete and total rubbish that is NEVER needed if you just understand floats, overflow and/or haslayout.


-- OH, and holding up some turdpress templates as examples of good code is instant /FAIL/ given the total rubbish turdpress vomits up and tries to pass off as HTML. Clearing breaks, abuse of definition lists for things that are neither definitions nor their associated terms, break tags for spacing, mixing of HTML and XHTML style tags, paragraphs around elements that aren't even paragraphs much less flow copy, improper heading order, lists not marked up as lists, Drug addiction, alcoholism, sadism, beastiality, mutilation, murder, vampirism, necrophilia, cannibalism, not to mention a gamut of sexual goodies. Shall I go on?

 

So all of your 'plates' are on the left? You have no need for them on the right?

Simple question. How would you float an image right, if they all are floated left with a class name of 'plate'? Would you over-ride the class with a 'style' attribute?

 

Oddly enough I would ask WHY it is being sent to the other side, since that's inconsistant formatting... There has to be a 'reason' to format it different. Are you doing odd/even? If you are doing it for strictly presentational reasons, then I'd have to question why as that's a bit arbitrary.

Though all my 'plates' would probably be on the right, since text-wrapping around a left image always looks like crap to me in left to right languages. (Most of the time it looks like a rendering error to me)

Either way one of the points of using CSS is to make it so you can re-style and re-layout everything without changing the markup - using classes like 'left' or 'border' defeat that.

 

Presentational reasons, arbitrary, blogger prerogative, whatever. Then there are the wide images that take up the whole column.

Smaller images sometimes look better on the left as opposed to right, while text may be easier to read if the image is on the right. If all the images are on the right, it looks boring, canned and more templated. To me anyway, you may feel more comfortable if everything was in its neat little package.

Then there are the people who do not understand the finer points of classnames altogether. They just want to write and insert images into their copy as simply and easily as possible. Try telling a client that all of their images have to go on the right, because that is gospel is kind of ludicrous. Forget about how you feel about it. The customer is right, they are always right, and we have to agree with them.

Again, it is a simple question, how would you name your classes for image alignments?

 

Again, by WHY I'm changing it's alignment. If I cannot come up with a good REASON with a name as to WHY I'm changing it's alignment, I wouldn't change the alignment.

Though if I had to because the person maintaining the site was Carlos Mencia HTML grey, I would probably use the names 'plate', 'standout' and 'leadIn' - those being center, right and left respectively 'by default', but NOT a concise explanation of where they would actually end up on the page. In the future I might restyle the whole site and decide I want lead-in's or standouts centered, or right, or left. Doing so would just mean changing the CSS to nab all of them on the site, instead of having to dive into the HTML to get each and every one of them one at a time.

Unless of course you're comfortable with a class 'imageLeft' that is set to non-floating and display:block;margin:0 auto; or even funnier float:right;

You say templated like it's a bad thing. It's better than the disjointed mess most of your amaturish blogs tossed together by people who have no business even MAINTAINING websites in the first place end up with.

Which is why they shouldn't even be making websites in the first place - see my signature.

People who want sleazeball shortcuts and aren't willing to put the WORK in, really aren't going to get a lot of sympathy or support from me. Usually that falls into the category of the types of know-nothing nimrods who are better off with some rubbish myspace or blogger page, get rich quick scammers looking too cheap to cut into their profit margin to hire a professional, or the just plain lazy.

But then this attitude is why I can charge $150 for just a template and upwards of a grand for completed sites.

 

Follow 50plus's solution and try to add the styling in a stylesheet as it would reduce the page size by a great extent if you have many stylings in your design.

 

If your going to set the image height and width inline, you must have both,not just one for it to be valid. Also when doing it inline you must leave out the " PX ". would be just as easy to set the heights and widths inside your style="blah" tag.

 

@Dodger: As much fun as it is to give ds a hard time, when he's right, he's right. For purposes of maintenance sanity when you return to the page in six months, and because it is best practice, a class's name should have semantic value.

Consider an element, student. Students should sit at the back of the room, behind the teachers. Consider that some students are to sit at the front. What differentiates the two? Are front row students cute girls? Then say so, eg. student {place: rear;} & student.cute {place: front;} What if you decide to reverse the seating arrangement? Not an issue. But consider if you used presentational names instead. Now you'll catch yourself with student {place: front;} & student.front {place: rear;}.

Using presentational tokens for classes or ids is a bad practice. To even suggest that it's an ok idea, is to do newcomers to semantic html+css a disservice. If you want to follow such practices for your personal sites, that's your choice. To follow such poor practice on a client's site which just may be maintained by someone else ought to be a hanging offense. As someone who mostly cleans up other coders' html/css messes, I'd pull the lever myself.

cheers,

gary

 

Not quite true. You may use one or the other, or both, or neither. If you use just one, the image will maintain its aspect ratio should the declared value be different from the natural value. See http://www.w3.org/TR/html4/struct/objects.html#edef-IMG

Please read and understand the recommendations before spreading faulty information. The most important rule of all, always wear safety glasses when using power tools.

True, as far as it goes. The px metric is the default. You may also use %, which must be included, eg. width="120%"

This would be extremely poor practice.

cheers,

gary