 Padding problem |
  |
| Darin McGrew |
 May 8 2020, 11:16 PM
Post
#21
|
|
WDG Member  Group: Root Admin Posts: 8,365 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. |
  |
 
|
| pandy |
May 9 2020, 12:40 AM
Post
#22
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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.
|
|
|
|
| Darin McGrew |
May 9 2020, 01:36 AM
Post
#23
|
|
WDG Member Group: Root Admin Posts: 8,365 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. |
|
|
|
| pandy |
May 9 2020, 01:51 AM
Post
#24
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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 }  |
|
|
|
| deb1 |
May 9 2020, 02:11 AM
Post
#25
|
|
Advanced Member Group: Members Posts: 109 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> |
|
|
|
| deb1 |
May 9 2020, 02:21 AM
Post
#26
|
|
Advanced Member Group: Members Posts: 109 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  |
|
|
|
| pandy |
May 9 2020, 02:22 AM
Post
#27
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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?
|
|
|
|
| deb1 |
May 9 2020, 02:24 AM
Post
#28
|
|
Advanced Member Group: Members Posts: 109 Joined: 7-May 20 Member No.: 27,330 |
so JS is mainly used within html document... correct ?
|
|
|
|
| deb1 |
May 9 2020, 02:29 AM
Post
#29
|
|
Advanced Member Group: Members Posts: 109 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> |
|
|
|
| pandy |
May 9 2020, 03:04 AM
Post
#30
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
|
|
|
| pandy |
May 9 2020, 03:08 AM
Post
#31
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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.  https://htmlhelp.com/reference/html40/block.html |
|
|
|
| deb1 |
May 9 2020, 03:24 AM
Post
#32
|
|
Advanced Member Group: Members Posts: 109 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. |
|
|
|
| deb1 |
May 9 2020, 03:33 AM
Post
#33
|
|
Advanced Member Group: Members Posts: 109 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?
|
|
|
|
| pandy |
May 9 2020, 03:50 AM
Post
#34
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
|
|
|
| deb1 |
May 9 2020, 03:56 AM
Post
#35
|
|
Advanced Member Group: Members Posts: 109 Joined: 7-May 20 Member No.: 27,330 |
ahh ok. understood . thank you again
|
|
|
|
| pandy |
May 9 2020, 04:01 AM
Post
#36
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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.
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!  |
|
|
|
| deb1 |
May 9 2020, 04:13 AM
Post
#37
|
|
Advanced Member Group: Members Posts: 109 Joined: 7-May 20 Member No.: 27,330 |
so the second code is for CSS ...right?
the first code is for html ...right? |
|
|
|
| pandy |
May 9 2020, 04:26 AM
Post
#38
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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.  |
|
|
|
| deb1 |
May 9 2020, 05:01 AM
Post
#39
|
|
Advanced Member Group: Members Posts: 109 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 ?  This post has been edited by deb1: May 9 2020, 05:02 AM |
|
|
|
| pandy |
May 9 2020, 05:24 AM
Post
#40
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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 ? 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. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 24th April 2024 - 04:07 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC