Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Padding problem
Posted by: msucimaster May 5 2020, 12:56 PM
Thanks for solving my last problem. I have a new issue that puzzles me.
Inside a div I want to have a colored bar over the full width. Inside this bar I have some text. That text should be to the left with some margin.
It is that margin that gives me a problem. I try to assign it with padding-left. It works for the text. Unfortunately a side effect is that bar grows with the size of the padding and now goes over the boundary of the enclosing div.
What am I doing wrong?
The code I have is:
<div class="subBar">My Text</div>
div.subBar
{ width: 100%;
height: 28px;
margin-top: 20px;
font-size: 20px;
text-align: left;
padding-left:120px;
background: #ee7;
}
Posted by: Christian J May 5 2020, 02:00 PM
It is that margin that gives me a problem. I try to assign it with padding-left.
Note that margin and padding are different things in CSS.
That's how the CSS box model normally works. With "box-sizing: border-box" it should behave more like you want, see https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing for a full explanation.
Posted by: pandy May 5 2020, 03:06 PM
Note that margin and padding are different things in CSS.
Aren't they always?
Posted by: Christian J May 6 2020, 05:40 AM
Note that margin and padding are different things in CSS.
Aren't they always?
I suppose so.
But in webdesign contexts, my impression is that people mostly use the word margin if they've never heard of CSS padding.Posted by: pandy May 6 2020, 11:13 AM
Doesn't change what it is. And there were margin and padding in HTML already.
I was joking, but since you bit... 
Posted by: msucimaster May 6 2020, 12:25 PM
That's how the CSS box model normally works. With "box-sizing: border-box" it should behave more like you want, see https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing for a full explanation.
Thanks, that worked for me.
Posted by: deb1 May 7 2020, 02:45 PM
Please can someone tell me what is padding?
Posted by: pandy May 7 2020, 05:02 PM
Padding is inside the box. Margin is outside. Like this.
<!DOCTYPE html>
<html>
<head>
<title>Margin/padding</title>
<style type="text/css">
.outer { background: red;
border: 1px solid black;
margin-bottom: 5em }
.inner { background: yellow;
width: 5em }
#margin { margin: 5em }
#padding { padding: 5em }
</style>
</head>
<body>
<p>
No margin or padding on the yellow box.</p>
<div class="outer">
<div class="inner">TEST</div>
</div>
<p>
Margin on the yellow box.</p>
<div class="outer">
<div class="inner" id="margin">TEST</div>
</div>
<p>
Padding on the yellow box.</p>
<div class="outer">
<div class="inner" id="padding">TEST</div>
</div>
</body>
</html>
It's just the styling of the inner yellow box that's interesting. The outer red box is just for show.
Posted by: deb1 May 7 2020, 10:29 PM
So basically padding is putting margin around a box...correct?
Also when is <div> tag used ? Is it used when dividing the page
into sections?
Posted by: pandy May 8 2020, 02:52 AM
So basically padding is putting margin around a box...correct?
No. Margin is putting margin around a box.
See it like this. Both margin and padding add extra space. One outside the box and one inside the box. Think of a real box that you send something in by post. If you wrap the box in several layers of corrugated cardboard, that can be compared to margin. If you stuff it full of foam beads to protect the valuable item in the middle of the box, that's padding.
The difference from a real box is that padding actually makes a HTML box expand, while the real box does not. If you look at my padding example above you can see that the yellow box with padding is much larger than the one without. While margin acts the way that it pushes other content away, or pushes the box itself away from its surroundings. You can see in the margin example that the yellow box is the same size as the box without padding or margin, but it has been pushed to another position. And its margins have forced the DIV that contains it to expand.
into sections?
It's used to create sections, divisions, to group things together. It can also be used when no other suitable block level element exists. DIV has no special features at all. It's not needed to apply CSS, something that's often believed. It's just an anonymous block level element that can come in handy at times. Use DIV and SPAN sparingly. Use meaningful elements like paragraphs, headings, lists and so on when you can.
Posted by: deb1 May 8 2020, 07:53 AM
So for the padding example your saying the item which is in middle is called padding....correct?
For the div tag I understand it now.
Posted by: pandy May 8 2020, 09:46 AM
Not really.
There's a yellow box and a red box. The yellow box is inside the red box. If we put padding INSIDE the yellow box, it becomes larger. Content don't go in the padding, the padding is between the borders of the box and the content (the word TEST in this case).
Margin is extra space that's added OUTSIDE the yellow box.
For example, the space between paragraphs on a page, what makes us see them as paragraphs, is margin. Browsers add it by default. It can be a top margin, a bottom margin or both. You can control that margin yourself with CSS.
Play around with it a little and I think you'll get what's what and where it is.
Posted by: deb1 May 8 2020, 10:00 AM
So tell me if I am correct or wrong.
With th first example your basically saying the space between the border of the yellow box and the content in this case it's "test"..... am I correct?
Posted by: pandy May 8 2020, 10:14 AM
Does this help? Padding is space inside the yellow box and makes it larger. Margin is outside the yellow box. It doesn't affect the yellow box's size but may affect the size of a containing box (the red box) since it pushes things away.
Posted by: pandy May 8 2020, 10:39 AM
Maybe the red box confuses you. Try this instead. A page filled with text and just two yellow boxes, no outer box.
<html>
<head>
<title>Margin/padding</title>
<style type="text/css">
.box { background: yellow;
float: left;
border: 2px solid black }
#margin { margin: 5em }
#padding { padding: 5em }
</style>
</head>
<body>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<div class="box" id="padding">Padding</div>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<div class="box" id="margin">Margin</div>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
</body>
</html>
See? Padding creates space inside the box and margin outside.
Posted by: deb1 May 8 2020, 11:09 AM
I think I understand the second example better. So basically the padding is between the content (padding) and the border of the box . All that yellow color is the padding .
And the margin is outside the box and the text around the box
How about now? Did I understand it now?
Posted by: pandy May 8 2020, 12:54 PM
Yes, I think you did.
Posted by: deb1 May 8 2020, 01:09 PM
Thank you so much for being patient with me and explaining it to me. I really appreciate it. I am not that like others how they understand at once. Some things I do and some it just takes time for me to understand. In this regard you have helped me so much. I also hope that of if I have any more questions for html you will help me understand it
Posted by: pandy May 8 2020, 03:35 PM
You are welcome. Of course you can ask more questions.
Posted by: deb1 May 8 2020, 11:06 PM
What is the difference between java and javascript?
Posted by: Darin McGrew May 8 2020, 11:16 PM
Javascript is most often embedded in web pages. Early on, compiled Java was run in the browser as an applet, but now compiled Java is more often run on servers as servlets, or in other non-browser contexts.
Posted by: pandy May 9 2020, 12:40 AM
I may add that there is no connection between the two. When JavaScript was created Java was the cat's meow. So the name was borrowed to make JavaScript sound hot. It's sometimes believed the JS is some kind of light version of Java, but that's not the case.
Posted by: Darin McGrew May 9 2020, 01:36 AM
Posted by: pandy May 9 2020, 01:51 AM
deb1, since I pestered you with that yellow box, I just want to show you how to use both margin and padding to make it look nice, a more realistic example. Say, in that page with lots of text we want some info boxes for side notes or something.
If we give the box some padding on all sides so it looks nicer and the text in it is easier to read. Then we give it some margin on the top, right and bottom sides so the text around it doesn't run up against it.
#nice { padding: 1.5em;
margin: 1em 1.5em 1em 0 }
Posted by: deb1 May 9 2020, 02:11 AM
can some one please tell me why div tag is used in this coding?
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: ........;
background-color: ......;
padding top: .......;
padding-right: .......;
padding-bottom: ........;
padding-left: ........;
}
</style>
</head>
<body>
<h2>...</h2>
<div>.........</div>
</body>
</html>
Posted by: deb1 May 9 2020, 02:21 AM
nah you never pestered me . its actually the opposite . i have been pestering you since yesterday and still am
Posted by: pandy May 9 2020, 02:22 AM
No, not without the context. Could be a good reason for it, or a bad one. Seeing the DIV has neither class or ID and the styling goes for any DIV on the page, I guess the reason is bad. Or is this some kind demo?
Posted by: deb1 May 9 2020, 02:24 AM
so JS is mainly used within html document... correct ?
Posted by: deb1 May 9 2020, 02:29 AM
can you explain why div tag is used in this example please.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
Posted by: pandy May 9 2020, 03:04 AM
so JS is mainly used within html document... correct ?
Yes. Like CSS it can be embedded in the HTML document or an external JS file can be linked to in HEAD. There are other uses for JS, but this is the main use.
Maybe it should also be mentioned that JS runs in the browser. Common browsers come with a JS interpreter built in, but there are browsers that don't understand JS, so that needs to be considered when JS is used. Programming languages that run on the server, e.g. PHP and Perl, is interpreted on the server and browsers are not a concern. If it works at all it works for everyone.
Posted by: pandy May 9 2020, 03:08 AM
can you explain why div tag is used in this example please.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
No. But I'd guess it's used for the same reason I used a DIV for the yellow box. The author wants to demonstrate padding and a DIV is a good choice for that since browsers don't add any styling of their own to it (more than make it block level), as they do with for example P.
If that was a real page with a real sentence, a P should have been used.
In case you don't know, block level elements are those where the line breaks before and after them.
https://htmlhelp.com/reference/html40/block.html
Posted by: deb1 May 9 2020, 03:24 AM
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
can you explain why div tag is used in this example please.
Posted by: deb1 May 9 2020, 03:33 AM
but why use div in the style section? i thought div tag is used to group things together?
Posted by: pandy May 9 2020, 03:50 AM
That example also looks like a demo.
but why use div in the style section? i thought div tag is used to group things together?
It is. But you could create a page from nothing but DIVs inside BODY. A very bad idea, but it can be done.
The whole purpose seems to be to show how some CSS properties are used. So that's why there is a rule for DIV in the style block, to apply that styling to the DIV.
The creator of this just wants to show the styling. Not how to build a sound page with HTML. You can apply that styling to a P if you want to. Or to the heading that's already there. What you see is just an example. It doesn't mean that you must use a DIV for it to work.
In a demo DIV is fine. It's even preferable, because as I said earlier, browsers don't add their own styling to it.
In the real world you should use what you learn from these DIV demos with other elements. With CSS you can make just about any element look as you want. The goal is to write structurally good HTML, with headings, paragraphs, lists and so on. THEN you add CSS to make it look like you want.
In my example I could just as well have used a P for the yellow box, and maybe I would have, had it been a real page. But if I had used P I would have had to take the browser styling into consideration and explain that to you. So it's much easier to use a DIV when you want to explain how to use CSS properties.
Posted by: deb1 May 9 2020, 03:56 AM
ahh ok. understood . thank you again
Posted by: pandy May 9 2020, 04:01 AM
I added an example for you above, but you answered quicker than I typed, so I moved it here.
Take this and look at it in a browser. Or I think you can imagine how it will look.
<h2>Level 2 heading</h2>
<p>
A paragraph</p>
<p>
Another paragraph</p>
Then add this to a style block in HEAD.
See? All styling the browser adds is removed, the line doesn't even break. The headings and paragraphs could as well have been SPANs. Point is they aren't. When you view the page without CSS it still has structure. In the same way SPANs can be made to look like headings and paragraph. But without CSS the page would just be mush. So don't do that!
Posted by: deb1 May 9 2020, 04:13 AM
so the second code is for CSS ...right?
the first code is for html ...right?
Posted by: pandy May 9 2020, 04:26 AM
Yes. You have to paste it together yourself this time.
About HTML and structure. HTML isn't only for browsers such as you and I use. Say for example that a blind person has a page read aloud to them by a screen reader program. That program sees the Ps, headings and so on and make a slight pause before it continues. If the page was made from styled SPANs it would just babble on and it would be pretty tiresome to listen to and make sense of.
So one can see CSS as an optional layer. Like if a girl uses makeup to look prettier, she still wants to keep her eyes and nose and mouth and ears and not have just a painted egg for a head. 
Posted by: deb1 May 9 2020, 05:01 AM
OK. so first i need to know my HTML very well then i should move on to CSS ... correct?
i also want to create a web page for practice but am stuck on what topic i should do
it on. so can you give me some ideas ?
Posted by: pandy May 9 2020, 05:24 AM
OK. so first i need to know my HTML very well then i should move on to CSS ... correct?
i also want to create a web page for practice but am stuck on what topic i should do
it on. so can you give me some ideas ?
Absolutely correct! If you are all new, that's exactly what you should do. At least if you are smart. Create a boring looking page with headings, paragraphs and maybe a list and/or a table. And use validators! I guess you don't know about validators. They are like grammar checkers for HTML. They tell you what mistakes you may have. In a somewhat convoluted way until you get used to it. You'll get there.
Here is the W3C one.
https://jigsaw.w3.org/css-validator/#validate_by_input+with_options
And here is the one at this site. I prefer the output from ours, but alas it doesn't do HTML5.
https://htmlhelp.com/tools/validator/
For CSS there is the W3C CSS checker.
https://jigsaw.w3.org/css-validator/
You don't need to wait for ever with CSS. But at least create a complete page without first. Then you can start making it look better with CSS. I recommend you start with CSS1 properties. They are still around, later versions of CSS just add more. They are the easiest to understand and begin with and if you master those first it will be easier to move on.
https://htmlhelp.com/reference/css/
As for the topic for your page, just choose something. Maybe you have a pet you can write about? Or a recipe for apple pie maybe. Then you can use a list for the ingredients. And a tempting image.
Posted by: pandy May 9 2020, 05:25 AM
I just realized something is wrong with the site. Our validator can't be accessed. I'll ask Darin to look into it.
Posted by: pandy May 9 2020, 05:37 AM
One thing more. It depends on where you pick up your HTML knowledge if you need to know this or not, but in HTML 4 a lot of elements and attributes are deprecated. In HTML5 I think they are gone, at least most of them. Deprecated basically means they are allowed under some circumstances but shouldn't be used. One could say they all have to do with styling. Colors, sizes, fonts... We should use CSS for all of that now.
So let everything look as it wants. Don't use the FONT tag, change colors and so on. You fix that later when you add CSS to your page. Just think about what elements mean, what they should be used for. If you want a paragraph you use P and not a DIV followed by two BR tags for example.
You can find a list of deprecated elements here. It's the ones marked with a "D", the column labeled "Depr."
http://www.w3.org/TR/html401/index/elements.html
And attributes here.
http://www.w3.org/TR/html401/index/attributes.html
It's good to know them, even if you don't use them you will encounter them.
Posted by: deb1 May 9 2020, 07:28 AM
can you explain to me what is iframe?
Posted by: deb1 May 9 2020, 08:06 AM
after i create a basic web page on a topic which choose can you comment on it when i put it on here . Comment like how i can make it better etc.
Posted by: pandy May 9 2020, 12:26 PM
I know I answered this. Must have forgotten to hit the submit button. Oh well.
Yeah, sure we can look at your page.
Iframe... Do you know what ordinary frames are? That's when the browser window is split in several smaller windows with individual scrollbars and different documents are loaded in each frame. Frames were popular once. Those of us that know better always frowned upon them though.
https://www.htmlhelp.com/design/frames/whatswrong.html
IFRAME is an embedded frame. IIRC the name stands for Inline Frame. You use it in an ordinary HTML page with HEAD and BODY and it can be mixed with other elements, like P and headings. Whereas "real" frames need sort of a master file that specifies the number of frames there will be, how they'll be placed and how they will be used.
Nowadays I think iframes are mostly used for ads. I don't think you want one on your page.
Posted by: deb1 May 9 2020, 03:22 PM
Great I am doing my Web page on computers
Posted by: pandy May 9 2020, 11:44 PM
Good luck and have fun!
Posted by: deb1 May 10 2020, 12:17 AM
how can i send the file to you ? i am new on here so have i have no idea how to send files here 
Posted by: pandy May 10 2020, 01:03 AM
You can attach the file to your post. It's a two step process.
Under the field you type your post in there's field labeled File Attachments with Browse button. Use the Browse button to find the file on your hard drive. Then click "Add This Attachment".
That makes the file name appear in a list below the Browse button. There are also two buttons, Remove and Add into Post. Click on the latter and the file will be added.
Or you can just paste the HTML into your post. Use the button above that has a hash sign (#) on it to insert CODE tags around it and it will display nice.
Posted by: deb1 May 10 2020, 01:56 AM
Please check my coding and also see the output in your browser so that you can tell me if everything is OK or if i need to improve on anything . i have also attached the pictures which i have inserted in the coding . so hopefully you will see the pictures in your browser. let me know what you think and if i need to improve on anything.
Attached thumbnail(s)
Attached image(s)
Attached File(s)
computers.html ( 1.71k )
Number of downloads: 84
Posted by: deb1 May 10 2020, 02:00 AM
check this and let me know if need to improve on anything
Attached File(s)
website___Copy.zip ( 118.3k )
Number of downloads: 92
Posted by: pandy May 10 2020, 02:23 AM
You've done good. Looks like you get it.
You have a few errors though. You can upload your file here and see for yourself.
https://validator.w3.org/#validate_by_upload
You have made three mistakes, some of them repeated, but basically three errors.
Images must have an alt attribute. The value of that replaces the image if the image for some reason can't be loaded (it's printed on the page), so most often a description of the image isn't the best choice. If the image is purely decorative you can use an empty alt attribute, alt="". That makes screen readers just skip the image.
You have a whole page about alt here: https://htmlhelp.com/feature/art3.htm .
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.
http://www.blooberry.com/indexdot/html/topics/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.
Then you couldn't resist to try to make it look good and centered the images. CENTER is not allowed. Centering is for CSS.
All in all I think it looks good. You've used everything correctly and make good use of several levels of headings. Good work!
Posted by: pandy May 10 2020, 02:30 AM
Just a tip. I would use width and height attributes for the images. Yes, that can maybe be seen as presentational, but it helps browsers to draw the page. You've probably seen large, image heavy pages where the text rearrange itself as the page loads. It doesn't look nice. If you have width and height in the image tags the browser reserves space for the images and the page isn't redrawn, the images just fill in.
With just a few and not too large images and today's fast connections this won't be noticeable. But I think it still is a good habit to use width and height.
Posted by: deb1 May 10 2020, 02:52 AM
so the only comment is put width and height in the images ?
Posted by: pandy May 10 2020, 03:40 AM
Yup. And correct the errors.
Posted by: deb1 May 10 2020, 04:37 AM
i didn't understand the errors . Can you please explain it to me
Posted by: pandy May 10 2020, 07:02 AM
I thought I already did above. What don't you understand specifically?
Posted by: deb1 May 10 2020, 08:10 AM
You said i should fix the image and the errors. The image thing i understand . the part which you said that i should fix the errors also... that's the part which i don't understand . i also put it in that link which you suggested but didn't understand their explanation.
Posted by: pandy May 10 2020, 11:02 AM
But I told you about the three errors above. That you shouldn't use CENTER, that you can't have spaces in URLs and that images must have an alt attribute.
The CENTER tags - just delete them or replace them with DIV.
The alt attributes, well, add them. There's a bit about that here.
https://htmlhelp.com/reference/html40/special/img.html
Spaces in URLs, I don't think I can say it differently than I did above.
The validator complains about a few things more, but you can leave that for now.
Posted by: deb1 May 10 2020, 11:33 AM
Can you please be specific which url you are referring to?
Posted by: pandy May 10 2020, 12:37 PM
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.
http://www.blooberry.com/indexdot/html/topics/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.
Posted by: deb1 May 10 2020, 12:55 PM
So then can I write like this:
<img src="desktop_computer">
Posted by: pandy May 10 2020, 02:23 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.
Posted by: deb1 May 10 2020, 03:11 PM
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
Posted by: pandy May 10 2020, 03:43 PM
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?
Posted by: deb1 May 10 2020, 11:03 PM
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? : 
Posted by: pandy May 11 2020, 12:30 AM
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".
Posted by: deb1 May 11 2020, 12:52 AM
can you please explain why not to use alt in the img?
because i thought alt describes the image .
Posted by: pandy May 11 2020, 01:45 AM
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".
Posted by: deb1 May 11 2020, 01:51 AM
so in my image can we say alt="laptop computer" ...... that will be enough?
Posted by: pandy May 11 2020, 01:52 AM
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.
Posted by: deb1 May 11 2020, 02:01 AM
i understand. as i said before you explain very well
Posted by: pandy May 11 2020, 02:04 AM
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...
Posted by: pandy May 11 2020, 02:16 AM
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.
Posted by: deb1 May 11 2020, 02:44 AM
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)
form2.html ( 610bytes )
Number of downloads: 86
Posted by: deb1 May 11 2020, 03: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.
Attached File(s)
website.zip ( 118.69k )
Number of downloads: 97
Posted by: deb1 May 11 2020, 11:38 AM
????
Posted by: pandy May 11 2020, 01:10 PM
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/
Posted by: deb1 May 11 2020, 01:43 PM
Okay very sorry for disturbing you
Posted by: deb1 May 11 2020, 01:43 PM
Okay very sorry for disturbing you
Posted by: deb1 May 12 2020, 12:47 AM
Please check both, and let me know if there is anything to change or if everything is okay.
For the computer page i fixed up what you suggested . so please check it now . Also for the form
i put it in the link and fixed up a few errors . so please check now and let me know.
Attached File(s)
website.zip ( 119.3k )
Number of downloads: 79
Posted by: pandy May 12 2020, 01:31 AM
The computer one looks fine now.
Except the images still use CSS for width and height and they are distorted because you don't use the true dimensions. These aren't errors. You can use any width and height you want, but if the aspect ratio differs from the image's it will look ugly. And CSS is perfectly OK. But it won't make the page load nicer, as I talked about.
The form page lacks HEAD and TITLE. Both are required elements. You found the typo with the email id though.
Posted by: deb1 May 12 2020, 02:39 AM
for the image i dd what you suggested for the width and the height it turned out huge ...... so that is why i didn't apply it . You try it in your browser and tell me . please .
i also fixed up the things which you told me that i should add like header and the title. so please check it .
Attached File(s)
website.zip ( 119.32k )
Number of downloads: 89
Posted by: pandy May 12 2020, 03:05 AM
for the image i dd what you suggested for the width and the height it turned out huge ...... so that is why i didn't apply it . You try it in your browser and tell me . please .
Yeah. You've just grabbed some pictures for this mockup. For a real page you would create images in a suitable size from start. The best thing to do is to resize the images in a graphic program. The next best is to resize them in HTML. But when you do, keep the aspect ratio. If you use half the width, also use half the height. That way they don't get distorted. You've done that with the first image but not with the others.
About the width and height in HTML. This is using the style attribute, which means it's CSS.
This is the HTML way.
Looks fine now.
Posted by: deb1 May 12 2020, 03:34 AM
can you give me a graphic program which i can download it for free from the internet
Posted by: pandy May 12 2020, 04:00 AM
IrfanView does resizing but is not a full-fledged editor.
https://www.irfanview.com/
You can find oodles more through a search engine or some freeware site.
Posted by: deb1 May 12 2020, 06:51 AM
when creating a form in html does header tag and tittle always have to be there or is it just an optional ?
Posted by: pandy May 12 2020, 01:05 PM
It has nothing to do with the form. HEAD and TITLE are always required, never optional.
Posted by: Darin McGrew May 12 2020, 02:40 PM
I've been using GIMP for years. It's a free image editor.
Posted by: deb1 May 12 2020, 09:31 PM
Thank you darin
Posted by: deb1 May 12 2020, 09:44 PM
So Pandy, tell me is this right, the very basic structure for html :
<DOCTYPE HTML>
<html>
<head>
<title>...... </title>
</head>
<body>
..........
..........
</body>
</html>
The places where I said "........" is where the text will come.
So tell me is this correct for the very basic structure of HTML?
Posted by: pandy May 13 2020, 02:42 AM
Yes, it is.
Posted by: deb1 May 13 2020, 04:35 AM
OK. you see i want a job in the html/CSS line so what kind of interview questions will the interviewer be asking ?
Posted by: pandy May 13 2020, 04:52 AM
No idea!
Posted by: deb1 May 13 2020, 10:28 AM
please check the file which says computer drives
Attached File(s)
website.zip ( 119.96k )
Number of downloads: 83
Posted by: deb1 May 15 2020, 09:46 PM
??
Posted by: pandy May 16 2020, 06:22 PM
The zip seems to contain an empty folder?
Posted by: deb1 May 16 2020, 11:59 PM
now check . let me know what you think about it
Attached File(s)
website.zip ( 119.96k )
Number of downloads: 85
Posted by: pandy May 17 2020, 07:04 AM
Let's see what the validator says.
https://validator.w3.org
I would ignore this for now. They want you to declare the character encoding in a Meta tag. But it's better done in a HTTP header sent from the server. I personally never use it if the document isn't meant for download or distributed on some other way than online
.
https://htmlhelp.com/reference/html40/head/meta.html
Well, as we talked about HEAD and TITLE must be used. This time you have HEAD, but not TITLE.
From line 29, column 1; to line 29, column 6
ware</h2>↩<head>↩<styl
Yup. You've duplicated the whole HEAD section with style block and all after the External Hardware heading.
<head>
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
Error 5 and 6 is about the same thing.
From line 37, column 1; to line 37, column 6
>↩</head>↩<body>↩<tabl
Yeah, you duplicated the start tag for BODY too when you duplicated the HEAD.
Errors 8-11 are about that you have made the same mistake again and duplicated the whole HEAD and the start tag for BODY also after the other H2.
<head>
<style>
table,th,td{
border: 1px solid black;
border-collapse:collapse;
</style>
<body>
From line 81, column 6; to line 82, column 4
/td>↩</tr>↩<td> Hard
That's this bit.
<td> Hard drive</td>
<td>keyboard</td>
</tr>
You have closed one TR, but you have forgotten to open a new one. The validator sees it as those TDs are loose in the body of the table as they are directly in TABLE. And they are.
From line 102, column 13; to line 102, column 16
d>Speakers</d>↩</tr>
That's here.
<td>Sound Card</td>
<td>Speakers</d>
</tr>
Just a typo. You've typed /d instead of /td.
Posted by: deb1 May 17 2020, 09:32 AM
For error 4, error 8-11 your saying that i have duplicated the whole HEAD section with style block and all after the External Hardware heading.
well can you show me how to make multiple separate tables on the same page please?
Posted by: pandy May 17 2020, 11:30 AM
For error 4, error 8-11 your saying that i have duplicated the whole HEAD section with style block and all after the External Hardware heading.
Yes, and once again after the other heading.
The same way as you created the table you already have. There is no trick to it.
Posted by: deb1 May 17 2020, 12:42 PM
OK so if i did it the right way then what should i do with the error ? should i just ignore it or should change something ?
if i need to change something can you tell me what it is please.
Posted by: pandy May 17 2020, 01:37 PM
You should remove the duplicated stuff that doesn't belong in BODY.
Posted by: deb1 May 17 2020, 03:58 PM
Like what.... give an example from what should be removed but still give the same output please
Posted by: pandy May 17 2020, 04:43 PM
I did. The the whole HEAD section and the start tag for BODY you have after the headings.
<h2>What components make up a desktop computer?</h2>
<style>
table,th,td{
border: 1px solid black;
border-collapse:collapse;
</style>
<body>
Posted by: deb1 May 18 2020, 12:56 AM
can you fix that in my file and send it to me . please . it will make it
easier for me to understand. please
Posted by: deb1 May 18 2020, 01:33 AM
Please check the file which says computer drives. i have fixed the errors can you please check if it is okay now. if still not then please let me know what to fix
Attached File(s)
website.zip ( 133.12k )
Number of downloads: 69
Posted by: pandy May 18 2020, 08:22 AM
You've fixed the errors about the duplicated HEAD in BODY, but some of the other errors remain and you have some new ones. Some about about spaces in URLs. We talked about that before.
Then you have forgotten the closing tag for A in several places. For example here.
^^^
https://validator.w3.org/#validate_by_upload
Posted by: pandy May 18 2020, 08:52 AM
A tip for you. Fix errors before you add more content.
Write a basic page with just doctype, head, body and a line of text. Validate. If that's good, add a little bit more. Validate again. And so on. That is validate often and fix any errors before you go on.
Posted by: deb1 May 18 2020, 09:42 AM
spaces in the URL .... what does that mean ? can you point out where the space is in the URL please?
Posted by: pandy May 18 2020, 11:30 AM
Same as before with your images. Now it's links. You have spaces in the file names which is OK, only URLs leading to those files can't contain spaces since the space character isn't allowed in URLs.
For example this link. But you have the same problem with all links that lead to files that have more than one word in the name.
So, as before, either URL encode the spaces in the URLs, i.e. replace them with %20. Or better, rename the files and use underscore or hyphen instead of space to separate words.
Everything that leads to another file is an URL. It may be in a link as now, in the src of an image or when you later start to use external CSS and JavaScript.
Posted by: deb1 May 18 2020, 02:41 PM
So your saying it should be like this:<a href="what_is_a_Cd-ROM.html"> what is a CD-ROM? </a>
Is this correct? If not then tell me where I am going wrong
Posted by: pandy May 18 2020, 03:17 PM
Yes, if you want. But you must also rename the file the same way.
Posted by: deb1 May 18 2020, 04:42 PM
If I write it like that will the error show?
Posted by: pandy May 18 2020, 05:22 PM
No, of course not. But the link won't work unless you also change the file name of the html file you link to. If that was what you meant?
Posted by: deb1 May 18 2020, 11:37 PM
for the computer drives it is showing two error still after putting the file into the validator. The errors which are showing i don't understand . can you please explain it to me . please
Attached File(s)
computer_drives.html ( 2.51k )
Number of downloads: 59
Posted by: CharlesEF May 19 2020, 12:20 AM
I put your page through the W3 validator and got 1 warning. Just add the 'lang' attribute, like this:
Posted by: deb1 May 19 2020, 01:54 AM
Can you explain this error to me because when put the file through this was the second error which was showing.
Error: The character encoding was not declared. Proceeding using windows-1252.
For the first error is it necessary to put "lang"?
Posted by: pandy May 19 2020, 07:56 AM
The lang thing is a warning, not an error. You can do as you please with that. The character encoding is an error.
The character encoding we talked about when you started to validate. I don't use it myself, because it's better declared on the server (for my purposes), in what's called a HTPP header. I also thought we could save that a bit since it also involves with what character encoding the document is saved if you use a single non ASCII character and I thought you had enough on your plate for now.
Posted by: deb1 May 19 2020, 08:55 AM
okay agreed. so the file is okay now?
can you tell me anyway what the character encoding will look like in a html program please.
can you give an example of t please.
Posted by: pandy May 19 2020, 12:08 PM
See here.
https://www.w3.org/International/questions/qa-html-encoding-declarations
Yes, in my eyes the document is OK for now. You can deal with the language and encoding stuff later. It's of no importance until you publish or share your work. Just remember that you should at some point deal with it.
Errors that you don't expect should always be fixed. But it can be OK to save errors you are aware of and understand why you get for later. Sometimes even for ever, as long as you know what you do. Not everyone would agree with me though.
Posted by: deb1 May 19 2020, 10:04 PM
See here.
https://www.w3.org/International/questions/qa-html-encoding-declarations
Yes, in my eyes the document is OK for now. You can deal with the language and encoding stuff later. It's of no importance until you publish or share your work. Just remember that you should at some point deal with it.
Errors that you don't expect should always be fixed. But it can be OK to save errors you are aware of and understand why you get for later. Sometimes even for ever, as long as you know what you do. Not everyone would agree with me though.
Ok later you have to show . Is that Ok with you?
Posted by: pandy May 20 2020, 06:27 AM
Sure.
Posted by: deb1 May 22 2020, 11:53 AM
Sure.
Please check this file which i have attached .i have put the file through the validator and its just
showing the suggestion about the html . the other errors are not showing so i am assuming its
fixed but please still check it for me . just to be sure
Attached File(s)
components_that_make_up_a_desktop_computer.html ( 3.09k )
Number of downloads: 144Posted by: pandy May 22 2020, 03:08 PM
The validator is always right. It's fine.
Posted by: deb1 May 22 2020, 03:57 PM
The validator is always right. It's fine.
You checked it?
Posted by: pandy May 22 2020, 04:00 PM
Yes, of course. There are no errors.
Posted by: deb1 May 22 2020, 11:47 PM
Yes, of course. There are no errors.
Can you tell me when can I use the center tag, italic tag , article tag. ..because
when I try to use it in html file ..the validator is giving error.
You see your that good in teaching .... that I am making everything correct without errors
Posted by: pandy May 23 2020, 06:43 AM
You should never use CENTER. It belongs to those deprecated elements we talked about. They are allowed in what's called HTML 4.01 Transitional, but not in HTML 4.01 Strict. HTML 4.01 came in two versions, just so those things could be phased out. In HTML 5 they aren't allowed at all. They should be replaced with CSS.
Italic is still allowed as far as I know. But it has another meaning in HTML 5, on top of making the text italic. Personally I think this is a little peculiar. Depending on why you want italic text it might be better to use EM (emphasized text) or just use CSS to style that part with italic.
ARTICLE is a new element, introduced in HTML 5, so it certainly is allowed. It must be something else that gives you errors for ARTICLE and I.
Posted by: deb1 May 23 2020, 11:41 AM
You should never use CENTER. It belongs to those deprecated elements we talked about. They are allowed in what's called HTML 4.01 Transitional, but not in HTML 4.01 Strict. HTML 4.01 came in two versions, just so those things could be phased out. In HTML 5 they aren't allowed at all. They should be replaced with CSS.
Italic is still allowed as far as I know. But it has another meaning in HTML 5, on top of making the text italic. Personally I think this is a little peculiar. Depending on why you want italic text it might be better to use EM (emphasized text) or just use CSS to style that part with italic.
ARTICLE is a new element, introduced in HTML 5, so it certainly is allowed. It must be something else that gives you errors for ARTICLE and I.
Please check this file for me . Please check if i used the article tag properly also.
Attached File(s)
Joystick.html ( 1.05k )
Number of downloads: 142Posted by: deb1 Jun 2 2020, 09:33 AM
??
Posted by: deb1 Jun 11 2020, 01:42 AM
can you please tell me the following coding is correct or not .
<!DOCTYPE html>
<html>
<head>
<title>....</title>
<style>
table,th,td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>....</th>
<th>...</th>
</tr>
<tr>
<td>....</td>
<td>...</td>
</tr>
</table>
</body>
</html>
can someone please tell me if this coding is correct for creating
a table in html 5?
the "...." means any text will go in there .
Posted by: pandy Jun 11 2020, 01:52 PM
It's fine. The validators would tell you so.
https://validator.w3.org/
https://jigsaw.w3.org/css-validator/
Posted by: deb1 Jun 11 2020, 02:17 PM
It's fine. The validators would tell you so.
https://validator.w3.org/
https://jigsaw.w3.org/css-validator/
there are few questions i have for you
1) What is the difference between <div> tag and <span> tag
2) What is CSS and what is the purpose for CSS?
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)