The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

7 Pages V « < 2 3 4 5 6 > »   
Reply to this topicStart new topic
> Padding problem
pandy
post May 10 2020, 12:37 PM
Post #61


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,888
Joined: 9-August 06
Member No.: 6



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 .



QUOTE(pandy @ May 10 2020, 09:23 AM) *

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">

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 10 2020, 12:55 PM
Post #62


Advanced Member
****

Group: Members
Posts: 100
Joined: 7-May 20
Member No.: 27,330



So then can I write like this:
<img src="desktop_computer">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 10 2020, 02:23 PM
Post #63


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,888
Joined: 9-August 06
Member No.: 6



QUOTE(deb1 @ May 10 2020, 07:55 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 10 2020, 03:11 PM
Post #64


Advanced Member
****

Group: Members
Posts: 100
Joined: 7-May 20
Member No.: 27,330




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 biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 10 2020, 03:43 PM
Post #65


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,888
Joined: 9-August 06
Member No.: 6



Thank you. That was nice to hear. smile.gif

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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 10 2020, 11:03 PM
Post #66


Advanced Member
****

Group: Members
Posts: 100
Joined: 7-May 20
Member No.: 27,330



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? : huh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2020, 12:30 AM
Post #67


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,888
Joined: 9-August 06
Member No.: 6



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".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 11 2020, 12:52 AM
Post #68


Advanced Member
****

Group: Members
Posts: 100
Joined: 7-May 20
Member No.: 27,330



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2020, 01:45 AM
Post #69


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,888
Joined: 9-August 06
Member No.: 6



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".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 11 2020, 01:51 AM
Post #70


Advanced Member
****

Group: Members
Posts: 100
Joined: 7-May 20
Member No.: 27,330



so in my image can we say alt="laptop computer" ...... that will be enough?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2020, 01:52 AM
Post #71


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,888
Joined: 9-August 06
Member No.: 6



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. biggrin.gif

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. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 11 2020, 02:01 AM
Post #72


Advanced Member
****

Group: Members
Posts: 100
Joined: 7-May 20
Member No.: 27,330




i understand. as i said before you explain very well smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2020, 02:04 AM
Post #73


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,888
Joined: 9-August 06
Member No.: 6



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2020, 02:16 AM
Post #74


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,888
Joined: 9-August 06
Member No.: 6



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. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 11 2020, 02:44 AM
Post #75


Advanced Member
****

Group: Members
Posts: 100
Joined: 7-May 20
Member No.: 27,330



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


Attached File(s)
Attached File  form2.html ( 610bytes ) Number of downloads: 21
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 11 2020, 03:45 AM
Post #76


Advanced Member
****

Group: Members
Posts: 100
Joined: 7-May 20
Member No.: 27,330



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.


Attached File(s)
Attached File  website.zip ( 118.69k ) Number of downloads: 22
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 11 2020, 11:38 AM
Post #77


Advanced Member
****

Group: Members
Posts: 100
Joined: 7-May 20
Member No.: 27,330



????
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2020, 01:10 PM
Post #78


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,888
Joined: 9-August 06
Member No.: 6



QUOTE(deb1 @ May 11 2020, 10:45 AM) *

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. smile.gif
https://validator.w3.org/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 11 2020, 01:43 PM
Post #79


Advanced Member
****

Group: Members
Posts: 100
Joined: 7-May 20
Member No.: 27,330



Okay very sorry for disturbing you
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 11 2020, 01:43 PM
Post #80


Advanced Member
****

Group: Members
Posts: 100
Joined: 7-May 20
Member No.: 27,330



Okay very sorry for disturbing you
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

7 Pages V « < 2 3 4 5 6 > » 
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 11th July 2020 - 05:06 PM