img scr tag: how to specify the border color?

[Michael Westphal]

Hello folks,


I'm a newby in webdesign and have a question:

<a href="Bild0278.jpg" target="_blank">
<img src="Bild0278.jpg" width="100"
height="75" alt="Vorschau" border="1" bordercolor="black">
</a>

My browser doesn't make a black border round my picture.

What is wrong?

thx for your help

best regards,

Micha

 

[David Dorward]

height="75" alt="Vorschau" border="1" bordercolor="black">
My browser doesn't make a black border round my picture.

What is wrong?

You are guessing at attributes instead of using the manual
<http://w3.org/TR/html4/>, checking your got your syntax correct
<http://validator.w3.org/> and using a presentation tool for presentation
<http://w3.org/TR/CSS2/>, <http://dorward.me.uk/www/css/#tutorials>

 

[Michael Westphal]

I've forgotten something:

I meant:

my browser doesn't make a BLACK border. It makes a yellow border. I have
specified a black one earlier in the text. And now it can't switch back to
black, it seems.

Micha

 

[Neal]

Hello folks,


I'm a newby in webdesign and have a question:

<a href="Bild0278.jpg"
target="_blank">
<img src="Bild0278.jpg" width="100"
height="75" alt="Vorschau" border="1" bordercolor="black">
</a>

My browser doesn't make a black border round my picture.

What is wrong?

"bordercolor" on img makes no sense. The way to do this properly is using
CSS.

If you use an external stylesheet, it would read:

img.special {border: 3px black solid;}

Or, you can put it in your document's head:

<style>
img.special {border: 3px black solid;}
</style>

In either case the HTML is:

<img src="..." width="100" height="75" alt="Vorschau" class="special">

Or, you can add it to the tag itself.

<img src="..." width="100" height="75" alt="Vorschau" style="border: 3px
black solid;">

External is preferred, head next, in the tag last, as it's easier to
change thesite's style when the styles are all in one place.

 

[Michael Westphal]

Hi Neal,

You are great!

Many thanks!

best wishes!

Micha

 

[Jukka K. Korpela]

<a href="Bild0278.jpg"
target="_blank">
<img src="Bild0278.jpg"
width="100"
height="75" alt="Vorschau" border="1" bordercolor="black">
</a>

My browser doesn't make a black border round my picture.

What is wrong?

Quite a lot. To start with, you are using the width and height attributes
to shrink the image. This is absurd, since the browser needs to load the
image and then scale it. Use image processing software to create a real
thumbnail, i.e. a reduced-size version of the image.

Don't use the target attribute until you know what it really means.
(And when you know that, you won't use it, except in rare special
occasions.)

You don't need the border and bordercolor attributes. The browser
automatically puts a border around an image that is a link, using link
colors. Think twice before changing link colors and related issues from
the browser defaults, and then reject the idea. (OK, OK, for images there
might be special considerations.)

 

[Neal]

Hi Neal,

You are great!

Many thanks!

best wishes!

Micha

Check out http://www.w3schools.com/css/default.asp for more...

 

[Leif K-Brooks]

To start with, you are using the width and height attributes
to shrink the image.

How do you know? I don't see a URL listed anywhere.

 

[Jukka K. Korpela]

How do you know? I don't see a URL listed anywhere.

The <a> markup around the <img> element points to the same URL as the
<img> element, i.e. the image is a link to itself. This hardly makes any
sense for a 100 by 75 pixels image, so my crystal ball is pretty sure
about the conclusion. (And the alt attribute value means 'preview', which
is hardly useful to people who do not see the image but tells about the
author's intention of using a thumbnail.)

 

[Michael Westphal]

Hello Jukka,

Yes, I've already noticed this yesterday as I checked my work on the server
in the web.
It took quite long to show the "thumbnails".

The target attribute was in that text I cut from an example. You are right,
I don't know the purpose.

Thx,

Micha

 

[Neal]

The <a> markup around the <img> element points to the same URL as the
<img> element, i.e. the image is a link to itself. This hardly makes any
sense for a 100 by 75 pixels image, so my crystal ball is pretty sure
about the conclusion. (And the alt attribute value means 'preview', which
is hardly useful to people who do not see the image but tells about the
author's intention of using a thumbnail.)

Incredible, Holmes!