Padding problem Options

[pandy]

I was. The one to the image with a name consisting of two words with a space between them, 'desktop computer.jpg'.

Maybe you didn't understand that's an URL because it's just the file name. But it is when used in the image src. It's called a relative URL. That it's just the file name means the image is in the same folder as the HTML file. It works the same if you link to another HTML file or anything else. More about how relative URLs work when the the other file isn't in the same folder here: https://htmlhelp.com/faq/html/basics.html#relative-url .

Then you have spaces in a file name. That's fine, but URLs can't contain spaces. They must be replaced with %20. Like this.

CODE

<img src="desktop%20computer.jpg">

http://www.blooberry.com/indexdot/html/top...urlencoding.htm

It's easier and makes for more readable URLs to not use spaces in file names in the first place. You can separate words with hyphen or underscore, characters that are allowed in URLs. But don't forget to also rename the file.

CODE

<img src="desktop_computer.jpg">

[deb1]

So then can I write like this:
<img src="desktop_computer">

[pandy]

So then can I write like this:
<img src="desktop_computer">

Yes. Well, desktop_computer.jpg. You forgot the extension. But if you go that way you must also rename the file in the same way.

[deb1]

Off course, because if I don't name the file the same way then the image won't show .... correct?

Thank you so much for explaining things to me twice sometimes. I appreciate it. The things wich i have learnt
so far well its mainly from you. You explain things in such away that it just makes it easier for me to understand. So
Thank you

[pandy]

Thank you. That was nice to hear.

Right. The file name must be exactly as it is in the URL. Even the case. Unlike Windows most other OS are case sensitive and servers often run on Linux or some other Unix based OS = case sensitive.

Did you understand the other two errors then?

[deb1]

Well you said there are three errors which are:

1) in the url there shouldn't be any space. It should be like
this: <img src="desktop_computer.jpg">
Also the file name has to be like this also.

2) the second error is I should put width and height for the image
which I didn't do.

3) third error is I put <center> tag before the image which I shouldn't
have so I have to delete that.

Now tell me, did I understand everything? :

[pandy]

Well, #2 was just a recommendation, from me. The third error was that you don't use alt attributes with your images and that's a "must".

[deb1]

can you please explain why not to use alt in the img?
because i thought alt describes the image .


This post has been edited by deb1: May 11 2020, 12:55 AM

[pandy]

I did explain it. I'll try to elaborate.

Sometimes people won't see your images. Maybe they use a browser that don't show images, maybe they are blind and have a screen reader read the page to them. Or maybe the visitor isn't a person, maybe it's a search engine bot. Or maybe something is just wrong and the images don't load.

If we take the case with the screen reader, IIRC it will read the file name if there is no alt. Not fun to listen to. If there is an empty alt, alt="", it will just skip the image. If there is an alt text it will read that.

I admit that with your images maybe kind of a description is fitting, but at least don't describe how the picture looks in detail, like "Black laptop on a grey table". Maybe "Laptop computer" is enough. People that use text browsers are often offered to download images and if they don't know how a laptop looks, they can then choose to download the image and view it on their computer.

If we take something easier, say you have a linked image of an arrow that means the visitor should click the arrow to go to another page that's described in the text. The best would be to link the text that describes the page the link leads to and give the arrow an empty alt. The next best would be to use alt="Go to page about xxx ". The worst and totally pointless would be alt="Green arrow pointing right".

[deb1]

so in my image can we say alt="laptop computer" ...... that will be enough?

[pandy]

Yes, I think so. I find it hard myself to come up with good alt texts for this kind of images, but that's probably what I would use.

Sometimes you may use images just to make the page pretty. Say you write a page about stars and planets. You sprinkle little star gifs all over the page because you think it looks nice. They should definitely have an empty alt. No one wants to hear or read star, star, star, star a zillion times.

On the other hand images may need a detailed description. Say you write about how to take care of your car with illustrative picture. Then very detailed descriptions of the pictures is probably in place, like "How to loosen the bolts that hold the carburetor with a wrench". If a wrench is what you use. I wouldn't know.

[deb1]

i understand. as i said before you explain very well

[pandy]

Thanks. I added some more above.

I think you can find better guidelines for how to write good alt texts if you google.

One more though, take the WDG logo at the top of the pages here. It uses the alt text "The Web Design Group". That's what interesting with it, what it represents. Often people use something totally meaningless like "logo". Or start to describe what the image looks like with the globe and the cog. That's not interesting for an image like this.

So the problem with alt text is that it depends...

[pandy]

I just remembered a trick with repeated images that's somewhat useful.

Continuing the stars and planets theme... Say that you instead of a gif of a drawn star use a real but small image of the planet Pluto. Then you could use "The planet Pluto" as alt text for the first image, but leave the alt blank for the following 57 copies.

[deb1]

i have just created a basic html form . can you please check if everything is OK? . Later on i will put the CSS in it also .
for now please check what i have attached

[deb1]

i have fixed the errors etc so please check it again for me . The file is called "computers"

i also created a basic html form . will add CSS style later on.

Please check both the files and tell me if it is okay or if i need to add or change anything.

[deb1]

????

[pandy]

i have fixed the errors etc so please check it again for me . The file is called "computers"

i also created a basic html form . will add CSS style later on.

Please check both the files and tell me if it is okay or if i need to add or change anything.

The computer page is almost there. You've forgotten alt text for the laptop.

To have the desired effect, nicer page loading, the width and height of the images needs to be in HTML attributes, not CSS (or at least I think so). Yeah, even if you use the style attribute, its value is CSS. And you should use the image's true width or height or the image will be distorted.

So...
<img src="desktop_computer.jpg" alt="PC" width="850" height=305">


I'll look at your form page.later. I don't have time right now. Meanwhile you can run it through the validator. I took a quick look and it will tell you about a couple of errors. Maybe you won't understand everything it says at first, but I think you will understand some things.
https://validator.w3.org/

[deb1]

Okay very sorry for disturbing you

[deb1]

Okay very sorry for disturbing you