Jump to content
eduard

Height of lines?

Recommended Posts

For me, W3schools is very clear and easy to learn from. Your trouble is not the fault of the tutorials. They are probably confusing because you are still learning English. Don't feel restricted to W3Schools tutorials, but they are the best HTML and CSS tutorials that I have ever seen.Here's a suggestion: buy a book on HTML and CSS. You can get a book for very little money on Amazon (used books). Before you buy the book, read customer reviews to see what the strong and weak points in the book are. This has good reviews: http://www.amazon.com/Head-First-HTML-CSS-...X/ref=pd_cp_b_1 You can buy it used here: http://www.amazon.com/gp/offer-listing/059...;condition=usedYou might consider buying a Spanish HTML book, if there is one. It would be much easier to learn HTML if the book was in your native language.
Learning english?????I am Dutch, so I have been learning since (British) english since a long time!Thanks for your suggestion! However, I cannot use it! There aren´t here any books of computing! Besides I prefer the Internet! Edited by eduardchile

Share this post


Link to post
Share on other sites

I'm really not so sure what's so hard to get. Dsonesuk practically told you what to do with a very color code guide to your mistakes. With that knowledge you could have asked, "Why is this not needed? Why is this broken? I don't get this part, I though it would do this..etc." Instead you just keep throwing up different versions of the code without any consideration for the advice given to you. People are trying to comment your code and you don't even work with that. You say you prefer to use the internet, but then you say you spent 1.5 hours reading the tutorials? 1.5!? :)anyway, because I am an eternal optimist, I will try and break it down as simply as possible. No one's going to just fix your code for you, but we will keep telling you what you need to learn. You need to learn the basics if you EVER expect to make it. You do realize people spend their LIVES making a career and profession out of this. 1.5 hours is nowhere near as close as how much time you should have spent reading. Maybe in a week... but six months!?So here goes, the absolute BASICS.First you need to know why HTML and CSS exist. HTML is meant to add meaningful tags and to text. It serves to act as the "hooks" by which CSS (and Javascript) and make things happen on a webpage. The common convention is try and seperate these from each as much as possible, to reduce dependencies, keep code clean and, and generally enhance organization and optimization. The details are moot at this point, but if you want to be professional, you MUST understand this concept. Continuing, your HTML holds the content. Text, images, etc. Your CSS hold your presentation and layout. Everything you could do with old HTML <b> and <i> and <center> tags you can do with CSS, best in an external stylesheet, like you've been doing. Now, There are three primary way of selecting elements with CSS to change how something looks in a browser (to style it's HTML, basically).given a basic page:

<html><body>  <div id="header">  </div>  <div id="content">	<h3 class="text">This is some text.</h3>  </div>  <div id="footer">	<p>This is some more text, my style is different than the body.  maybe I'm special?</p>  </div></body></html> @CSS/*Reset margins/padding of all elements*/*{  margin: 0px;  padding: 0px;}/*set the body with a black background and arial and white font*/body{  background-color: #000000;  font-family: Arial;  color: "#efefef";}/*style an element with ID of 'header' with a red background colorwidth of 500xp, height of 50xp; and centered on the page*/#header{  width: 500px;  height: 50px;  background-color: "red";  margin: 0px;}/*style an element with ID of 'content' with a red background colorwidth of 500xp, height of 250xp; and centered on the page*/#content{  width: 500px;  height: 250px;  background-color: "blue";  margin: 0px;}/*style all elements with the class 'text'  to have a color of black*/.text {  color: "#000000";}/*style an element with ID of 'footer' with a green background color,width of 500xp, height of 100xp, and centered on the page*/#footer{  width: 500px;  height: 100px;  background-color: "green";  margin: 0px;}/*style all <p> tags within an element with ID of 'footer'#footer p{  color: orange;  font-family: Garamond;  font-weight: bold;  text-decoration: underline;}

so there you have it, the basic ways to style an element1) use ID's in the HTML and # in the CSS2) use class in the HTML and use . in the CSS3) select all elements to style by their tag ( <h3> )* bonus *4) select all elements within a parent element by tag #footer pedit: in reply to dsonesuk's point about throwing the the universal selector out there, I'll leave it in there but just explain it and it can be optional if necessary. The universal selector (*) is one of those bits of the web developers toolkit that is very handy. It, along with a correctly validating document, should help you eliminate a big majority of the inconsistencies found in most modern cross-browser development. It "resets" all the default margins and paddings for all elements (by setting them to 0, or anything else you want to add to it) to counteract any default settings any given browser may put on an element. While this provides a clean slate of sorts, it will be up to you manually set all the margins and paddings of your elements on a case by case basic, but at least you'll know what these values are.

Edited by thescientist

Share this post


Link to post
Share on other sites
*{  margin: 0px;  padding: 0px;}

Maybe not the best idea to include universal selector in this example, considering difficulty in learning of the basics, may confuse even more when paragraphs, header tags show as joined big block of text, because margins are set to zero.The force tells me of a triple somersault, crash, and burn reply, coming.

Share this post


Link to post
Share on other sites
Learning english?????I am Dutch, so I have been learning since (British) english since a long time!Thanks for your suggestion! However, I cannot use it! There aren´t here any books of computing! Besides I prefer the Internet!
Sorry, I assumed your native language was Spanish since you are in Chile. There are many great websites for PHP and Javascript, but I haven't found any HTML tutorials better than W3schools. There are lots of confusing things in HTML. Many HTML tutorial websites are old, so they teach things that are no longer true. Just keep learning, and it will all make sense someday.

Share this post


Link to post
Share on other sites
I'm really not so sure what's so hard to get. Dsonesuk practically told you what to do with a very color code guide to your mistakes. With that knowledge you could have asked, "Why is this not needed? Why is this broken? I don't get this part, I though it would do this..etc." Instead you just keep throwing up different versions of the code without any consideration for the advice given to you. People are trying to comment your code and you don't even work with that. You say you prefer to use the internet, but then you say you spent 1.5 hours reading the tutorials? 1.5!? :)anyway, because I am an eternal optimist, I will try and break it down as simply as possible. No one's going to just fix your code for you, but we will keep telling you what you need to learn. You need to learn the basics if you EVER expect to make it. You do realize people spend their LIVES making a career and profession out of this. 1.5 hours is nowhere near as close as how much time you should have spent reading. Maybe in a week... but six months!?So here goes, the absolute BASICS.First you need to know why HTML and CSS exist. HTML is meant to add meaningful tags and to text. It serves to act as the "hooks" by which CSS (and Javascript) and make things happen on a webpage. The common convention is try and seperate these from each as much as possible, to reduce dependencies, keep code clean and, and generally enhance organization and optimization. The details are moot at this point, but if you want to be professional, you MUST understand this concept. Continuing, your HTML holds the content. Text, images, etc. Your CSS hold your presentation and layout. Everything you could do with old HTML <b> and <i> and <center> tags you can do with CSS, best in an external stylesheet, like you've been doing. Now, There are three primary way of selecting elements with CSS to change how something looks in a browser (to style it's HTML, basically).given a basic page:
<html><body>  <div id="header">  </div>  <div id="content">	<h3 class="text">This is some text.</h3>  </div>  <div id="footer">	<p>This is some more text, my style is different than the body.  maybe I'm special?</p>  </div></body></html> @CSS/*Reset margins/padding of all elements*/*{  margin: 0px;  padding: 0px;}/*set the body with a black background and arial and white font*/body{  background-color: #000000;  font-family: Arial;  color: "#efefef";}/*style an element with ID of 'header' with a red background colorwidth of 500xp, height of 50xp; and centered on the page*/#header{  width: 500px;  height: 50px;  background-color: "red";  margin: 0px;}/*style an element with ID of 'content' with a red background colorwidth of 500xp, height of 250xp; and centered on the page*/#content{  width: 500px;  height: 250px;  background-color: "blue";  margin: 0px;}/*style all elements with the class 'text'  to have a color of black*/.text {  color: "#000000";}/*style an element with ID of 'footer' with a green background color,width of 500xp, height of 100xp, and centered on the page*/#footer{  width: 500px;  height: 100px;  background-color: "green";  margin: 0px;}/*style all <p> tags within an element with ID of 'footer'#footer p{  color: orange;  font-family: Garamond;  font-weight: bold;  text-decoration: underline;}

so there you have it, the basic ways to style an element1) use ID's in the HTML and # in the CSS2) use class in the HTML and use . in the CSS3) select all elements to style by their tag ( <h3> )* bonus *4) select all elements within a parent element by tag #footer pedit: in reply to dsonesuk's point about throwing the the universal selector out there, I'll leave it in there but just explain it and it can be optional if necessary. The universal selector (*) is one of those bits of the web developers toolkit that is very handy. It, along with a correctly validating document, should help you eliminate a big majority of the inconsistencies found in most modern cross-browser development. It "resets" all the default margins and paddings for all elements (by setting them to 0, or anything else you want to add to it) to counteract any default settings any given browser may put on an element. While this provides a clean slate of sorts, it will be up to you manually set all the margins and paddings of your elements on a case by case basic, but at least you'll know what these values are.

I appreciate this very much BUT shouldn´t this be: LESSON 1 (I mean if I had known this before I didn´t have to post so many questions!). It´s all writen in the tutorials, but at least for me NOT VERY CLEAR! Edited by eduardchile

Share this post


Link to post
Share on other sites

well, if you only spend 1.5 hours reading the tutorials, then I wouldn't expect anyone to get it. The point to be understood is that you need to invest more time. and not like a weekend. Like months of consistent working at it, trying things out, READING, studying, etc. People who have gotten there either have years of experience (from investing THEIR time) or have gone to school (often times both). You're not going to get experience without time which means you have to do more on your own, bottom line.

Share this post


Link to post
Share on other sites
I'm really not so sure what's so hard to get. Dsonesuk practically told you what to do with a very color code guide to your mistakes. With that knowledge you could have asked, "Why is this not needed? Why is this broken? I don't get this part, I though it would do this..etc." Instead you just keep throwing up different versions of the code without any consideration for the advice given to you. People are trying to comment your code and you don't even work with that. You say you prefer to use the internet, but then you say you spent 1.5 hours reading the tutorials? 1.5!? :)anyway, because I am an eternal optimist, I will try and break it down as simply as possible. No one's going to just fix your code for you, but we will keep telling you what you need to learn. You need to learn the basics if you EVER expect to make it. You do realize people spend their LIVES making a career and profession out of this. 1.5 hours is nowhere near as close as how much time you should have spent reading. Maybe in a week... but six months!?So here goes, the absolute BASICS.First you need to know why HTML and CSS exist. HTML is meant to add meaningful tags and to text. It serves to act as the "hooks" by which CSS (and Javascript) and make things happen on a webpage. The common convention is try and seperate these from each as much as possible, to reduce dependencies, keep code clean and, and generally enhance organization and optimization. The details are moot at this point, but if you want to be professional, you MUST understand this concept. Continuing, your HTML holds the content. Text, images, etc. Your CSS hold your presentation and layout. Everything you could do with old HTML <b> and <i> and <center> tags you can do with CSS, best in an external stylesheet, like you've been doing. Now, There are three primary way of selecting elements with CSS to change how something looks in a browser (to style it's HTML, basically).given a basic page:
<html><body>  <div id="header">  </div>  <div id="content">	<h3 class="text">This is some text.</h3>  </div>  <div id="footer">	<p>This is some more text, my style is different than the body.  maybe I'm special?</p>  </div></body></html> @CSS/*Reset margins/padding of all elements*/*{  margin: 0px;  padding: 0px;}/*set the body with a black background and arial and white font*/body{  background-color: #000000;  font-family: Arial;  color: "#efefef";}/*style an element with ID of 'header' with a red background colorwidth of 500xp, height of 50xp; and centered on the page*/#header{  width: 500px;  height: 50px;  background-color: "red";  margin: 0px;}/*style an element with ID of 'content' with a red background colorwidth of 500xp, height of 250xp; and centered on the page*/#content{  width: 500px;  height: 250px;  background-color: "blue";  margin: 0px;}/*style all elements with the class 'text'  to have a color of black*/.text {  color: "#000000";}/*style an element with ID of 'footer' with a green background color,width of 500xp, height of 100xp, and centered on the page*/#footer{  width: 500px;  height: 100px;  background-color: "green";  margin: 0px;}/*style all <p> tags within an element with ID of 'footer'#footer p{  color: orange;  font-family: Garamond;  font-weight: bold;  text-decoration: underline;}

so there you have it, the basic ways to style an element1) use ID's in the HTML and # in the CSS2) use class in the HTML and use . in the CSS3) select all elements to style by their tag ( <h3> )* bonus *4) select all elements within a parent element by tag #footer pedit: in reply to dsonesuk's point about throwing the the universal selector out there, I'll leave it in there but just explain it and it can be optional if necessary. The universal selector (*) is one of those bits of the web developers toolkit that is very handy. It, along with a correctly validating document, should help you eliminate a big majority of the inconsistencies found in most modern cross-browser development. It "resets" all the default margins and paddings for all elements (by setting them to 0, or anything else you want to add to it) to counteract any default settings any given browser may put on an element. While this provides a clean slate of sorts, it will be up to you manually set all the margins and paddings of your elements on a case by case basic, but at least you'll know what these values are.

The first question:Is it preferable to write css in an external style sheet? I think yes, but all the examples don´t!

Share this post


Link to post
Share on other sites

Yes. The tutorials don't because they are teaching CSS. It is easier to understand the tutorials when the CSS and HTML are together.

Share this post


Link to post
Share on other sites

ugh... :)yes. I said that in my post.

Everything you could do with old HTML <b> and <i> and <center> tags you can do with CSS, best in an external stylesheet, like you've been doing.
and it's on the intro page of the CSS tutorials...http://www.w3schools.com/css/css_intro.asp
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
It's the main tenant of CSS, which is completely trying to remove presentation from markup.

Share this post


Link to post
Share on other sites
well, if you only spend 1.5 hours reading the tutorials, then I wouldn't expect anyone to get it. The point to be understood is that you need to invest more time. and not like a weekend. Like months of consistent working at it, trying things out, READING, studying, etc. People who have gotten there either have years of experience (from investing THEIR time) or have gone to school (often times both). You're not going to get experience without time which means you have to do more on your own, bottom line.
Is this a joke?Because you know that since october I have been studying and trying (whether it was in the right way?)!

Share this post


Link to post
Share on other sites
Yes. The tutorials don't because they are teaching CSS. It is easier to understand the tutorials when the CSS and HTML are together.
For me it was very confusing! For experienced persons I assume it is, but not for beginners like I am! Edited by eduardchile

Share this post


Link to post
Share on other sites

In case you are still wondering, there are three ways to have CSS styles in your HTML page:

<html><head><!-- 1. --><style type="text/css">/* directly input your styles here */</style><!-- 2. --><link rel="stylesheet" type="text/css" href="your_stylesheet.css" /> <!-- include stylesheet with HTML --><!-- 3. --><style type="text/css">@import('your_stylesheet.css'); /* import stylesheet with CSS */</style></head><body><!--your web page with elements to be styled--></body></html>

Share this post


Link to post
Share on other sites

Almost (thanks thescientist)!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><HTML><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Eduard Lid</title><link rel="stylesheet" type="text/css" href="ex1.css"></head><body><div id="header"<a href="http://www.viadeo.com/es/profile/eduard.lid">Profile</a><a href="web_designer/image_and_text_database.html"><b><h4>Web designer (databases)</h4></b></a></div><div id="content"<img src="images/me.JPG" alt="Eduard Lid" align="right" width="35%" height="100%"><img src="http://www.aquaculture.ugent.be/_img/database.jpg" alt="img database" align="left" width="30%" height="100%"></div><div id="footer"<p><p>Eduard Lid</p><p>(1152*720px)</p></div></body></HTML>*{ margin:0px; padding:0px; }a:link,a:visited{border-bottom-style:solid;border-color:#808080;color:#6A5ACD;text-decoration:none;display:block;background-color:#A9A9A9;width:120px;height:30%;text-align:center;padding:2px;}a:hover,a:active{background-color:#000000;}#header{border-style:solid;border-width:5px;border-color:#808080;content:100%;background-color:#6495ED;height:12em;}#content{height:16em;background-color:#EOFFFF;}#footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;height:14em;}.text{font-family:Arial,Helvetica,sans-serif;line-height:80%;text-align:center;font-size:40px;color:#000000;}

Share this post


Link to post
Share on other sites
well, if you only spend 1.5 hours reading the tutorials, then I wouldn't expect anyone to get it.
He said 1.5 hours per day since October. Read the posts, thescientist. :)

Share this post


Link to post
Share on other sites

There is one problem that really stands out:<div id="header"><a href="http://www.viadeo.com/es/profile/eduard.lid">Profile</a><a href="web_designer/image_and_text_database.html"><b><h4>Web designer (databases)</h4></b></a></div><div id="content"><img src="images/me.JPG" alt="Eduard Lid" align="right" width="35%" height="100%"><img src="http://www.aquaculture.ugent.be/_img/database.jpg" alt="img database" align="left" width="30%" height="100%"></div><div id="footer"><p><p>Eduard Lid</p><p>(1152*720px)</p></div>An HTML tag always consists of an opening character (less than symbol) < the tag name followed by attributes (if there are any) and a closing character (greater-than symbol) ><tag_name...[ optional attributes like id="content", etc. ]...>

Edited by Fmdpa

Share this post


Link to post
Share on other sites
He said 1.5 hours per day since October. Read the posts, thescientist. :)
Actually if you read the posts, I said he spent 1 and half hours reading the tutorials before replying back, he replied with he had spent 6 MONTHS, which is greater than 1.5 hours, that I had suggested. :)
I will tell you something!Since october 2010 I have been TRYING to study all the tutorials (6 months > 1,5 hour!)

Share this post


Link to post
Share on other sites

I mis-read his post then. I though he was saying that's how much time he read over the six months. Either way, it's clear more reading (and patience) needs be done on the OP's part

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...