The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

7 Pages V < 1 2 3 4 > »   
Reply to this topicStart new topic
> Padding problem
Darin McGrew
post May 8 2020, 11:16 PM
Post #21


WDG Member
********

Group: Root Admin
Posts: 8,333
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2020, 12:40 AM
Post #22


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

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



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 9 2020, 01:36 AM
Post #23


WDG Member
********

Group: Root Admin
Posts: 8,333
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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


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

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



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.

CODE

#nice   { padding: 1.5em;
          margin: 1em 1.5em 1em 0 }



Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 9 2020, 02:11 AM
Post #25


Advanced Member
****

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



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 9 2020, 02:21 AM
Post #26


Advanced Member
****

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







nah you never pestered me . its actually the opposite . i have been pestering you since yesterday and still am tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2020, 02:22 AM
Post #27


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

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



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 9 2020, 02:24 AM
Post #28


Advanced Member
****

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



so JS is mainly used within html document... correct ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 9 2020, 02:29 AM
Post #29


Advanced Member
****

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



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2020, 03:04 AM
Post #30


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

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



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2020, 03:08 AM
Post #31


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

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



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. wink.gif
https://htmlhelp.com/reference/html40/block.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 9 2020, 03:24 AM
Post #32


Advanced Member
****

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




<!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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 9 2020, 03:33 AM
Post #33


Advanced Member
****

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



but why use div in the style section? i thought div tag is used to group things together?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2020, 03:50 AM
Post #34


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

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



That example also looks like a demo.

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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 9 2020, 03:56 AM
Post #35


Advanced Member
****

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



ahh ok. understood . thank you again
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2020, 04:01 AM
Post #36


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

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



I added an example for you above, but you answered quicker than I typed, so I moved it here. tongue.gif

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>


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! happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 9 2020, 04:13 AM
Post #37


Advanced Member
****

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



so the second code is for CSS ...right?
the first code is for html ...right?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2020, 04:26 AM
Post #38


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

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



Yes. You have to paste it together yourself this time. biggrin.gif

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


Advanced Member
****

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



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 ? smile.gif

This post has been edited by deb1: May 9 2020, 05:02 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2020, 05:24 AM
Post #40


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

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



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 ? smile.gif


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. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

7 Pages V < 1 2 3 4 > » 
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: 12th July 2020 - 03:31 PM