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;
}
Full Version: Padding problem
QUOTE(msucimaster @ May 5 2020, 07:56 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.
QUOTE
Unfortunately a side effect is that bar grows with the size of the padding and now goes over the boundary of the enclosing div.
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.
QUOTE(Christian J @ May 5 2020, 09:00 PM)
Note that margin and padding are different things in CSS.
Aren't they always?
QUOTE(pandy @ May 5 2020, 10:06 PM)
QUOTE(Christian J @ May 5 2020, 09:00 PM)
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.
Doesn't change what it is. And there were margin and padding in HTML already.
I was joking, but since you bit...
I was joking, but since you bit...
QUOTE
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.
Please can someone tell me what is padding?
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>
Click to view attachment
It's just the styling of the inner yellow box that's interesting. The outer red box is just for show.
CODE
<!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>
Click to view attachment
It's just the styling of the inner yellow box that's interesting. The outer red box is just for show.
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?
Also when is <div> tag used ? Is it used when dividing the page
into sections?
QUOTE(deb1 @ May 8 2020, 05:29 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.
QUOTE
Also when is <div> tag used ? Is it used when dividing the page
into sections?
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.
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.
For the div tag I understand it now.
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.
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.
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?
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?
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.
Click to view attachment
Click to view attachment
Maybe the red box confuses you. Try this instead. A page filled with text and just two yellow boxes, no outer box.
Click to view attachment
See? Padding creates space inside the box and margin outside.
QUOTE
<!DOCTYPE html>
<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>
<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>
Click to view attachment
See? Padding creates space inside the box and margin outside.
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?
And the margin is outside the box and the text around the box
How about now? Did I understand it now?
Yes, I think you did.
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
You are welcome. Of course you can ask more questions.
What is the difference between java and javascript?
QUOTE(deb1 @ May 8 2020, 09:06 PM)
What is the difference between java and javascript?
Java is a compiled language. Javascript is a scripting language.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.
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.
QUOTE(pandy @ May 8 2020, 10:40 PM)
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.
Ah, yes. Good point. The language was originally called LiveScript, until marketing got involved and renamed it JavaScript. Other than the name, there is no relation to Java.
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 }
Click to view attachment
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.
CODE
#nice { padding: 1.5em;
margin: 1em 1.5em 1em 0 }
Click to view attachment
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>
<!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>
nah you never pestered me . its actually the opposite . i have been pestering you since yesterday and still 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?
so JS is mainly used within html document... correct ?
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>
<!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>
QUOTE(deb1 @ May 9 2020, 09:24 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.
QUOTE(deb1 @ May 9 2020, 09: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>
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
<!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.
but why use div in the style section? i thought div tag is used to group things together?
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.
QUOTE(deb1 @ May 9 2020, 10:33 AM)
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.
ahh ok. understood . thank you again
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.
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!
Take this and look at it in a browser. Or I think you can imagine how it will look.
HTML
<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<p>
A paragraph</p>
<p>
Another paragraph</p>
<h2>Level 2 heading</h2>
<p>
A paragraph</p>
<p>
Another paragraph</p>
Then add this to a style block in HEAD.
CODE
h1,h2,p { display: inline; font: 100% normal sans-serif }
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!
so the second code is for CSS ...right?
the first code is for html ...right?
the first code is for html ...right?
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.
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.
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 ?
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 ?
QUOTE(deb1 @ May 9 2020, 12:01 PM)
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/#valida...ut+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.
I just realized something is wrong with the site. Our validator can't be accessed. I'll ask Darin to look into it.
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.
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.
can you explain to me what is iframe?
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.
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.
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.
Great I am doing my Web page on computers
Good luck and have fun!
how can i send the file to you ? i am new on here so have i have no idea how to send files here 
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.
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.
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.