...

View Full Version : HTML and CSS or C++



Scootertaj
09-28-2004, 01:59 AM
HI,
I know i have asked this before but im still totally confused. What is CSS? Ppl have said it is just a way to view it or something. How do i get CSS? How do i use it? Im totally CONFUSED :confused: . I. Im also confused about javascript. What should i learn to become a good web designer. I use what ppl refer to as HTML soup (Jr.high/high school HTML) because that is what im in! :thumbsup: . I know how to do titles, images, hyperlinks, marquees, scroll down menus via HTML. Such as <marquee>.........</marquee> and other stuff. Everything looks so much more confusing than what i do. PLZ HELP!

gsnedders
09-28-2004, 02:11 AM
Look at http://w3schools.com/

Lots of good tutorials, and to become a good web coder/designer, then you should learn (X)HTML + CSS, as for you knowing HTML tag soup, I goto a Prep school (I'm 12) and we haven't even touched coding, and I know XHTML, CSS, and PHP ;)

Nightfire
09-28-2004, 02:16 AM
CSS means Cascading Style Sheet. This is used to control how something on your page looks, ie: font size, background colours, text alignment, etc. You can read about it at www.w3schools.com

To be a good web designer, you need to be good at the basics, html is a must. Should learn to do html properly, not as tag soup. Learn CSS too, you don't need to be a master with it, just know what it can do and use it.

Once you've got them in your head and can use them without major problems, you may want to learn something to make your pages less boring. Most people move onto javascript. Can do loads of things with this and is pretty easy to use once you've learnt the basics. Some people will learn the basics of this and move onto something else to give your site a more dynamic feel and move to a serverside language.

Once you learn a serverside language (asp, php, perl, etc) you can do millions of more things on your sites, such as have forums (like this), chatrooms, members areas, newsletters, etc etc.

A good web designer will stay with the times and will be willing to learn more and more, as the technology improves. A bad web designer will stay coding for IE only and use outdated code which hasn't been used since the early 90's.

You'll need to learn about what webhosts are good and reliable, how to use ftp, various site control panels, etc, but all that will come with experience.

Also, you will need to be able to create images or just hire someone to do them for you ;) You're lucky if you're a good coder and a good graphic designer.

rmedek
09-28-2004, 02:30 AM
Hi scootertaj, welcome to the forums...

In Joe Regular Guy terms, HTML is markup. It tells the browser what certain things are in a webpage. For example:

<p>Blah blah blah yakety-schmackety!</p> <---- paragraph

<ol> <---- ordered list
<li>number one</li> <---- list item
<li>number two</li> <---- list item
</ol>

The tag soup you're referring to is once upon a time, to tell the browser how to make these things look, coders would put extra stuff in the tags, or use them to "cheat" a layout:

<font color="red">red text</font>
<br>
<br>
<br>I used three of these br things just to make a little space!

CSS stands for Cascading Style Sheets. It is a list of commands you give that browser that assigns style to your tags. So in HTML you would mark something up, say, a paragraph:

"When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation."

Your HTML might look like this:

<p>"When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation."</p>

and your CSS might have instructions to make that paragraph a certain font, a certain size, and indented a bit:

p {
font-family: verdana, arial, sans serif;
font-size: 10px/14px;
text-indent: 15px;
}

I hope this explains things a little clearer... w3schools (http://www.w3schools.com) has some great tutorials to help you get the specifics behind the concept down.

gsnedders
09-28-2004, 02:38 AM
All 3 replies have links to http://w3schools.com... and so does this, the 4th :D

Scootertaj
09-28-2004, 03:02 AM
Hey guys,
Thank you all for the great tips and yes I have already checked out w3schools and it has helped quiet a bit. I know the basics, (lists,tables,images,links,etc.) and now im trying to figure out how to make it look better as you said.

I do have one more question
p {
font-family: verdana, arial, sans serif;
font-size: 10px/14px;
text-indent: 15px;
}
Ok, so do i put this under the <script> or what? what goes under <script> and what doesn't. I have already started a little and here it is, (hope this works)

rmedek
09-28-2004, 03:07 AM
<script> is for, well, scripts.
CSS will be put in a style tag:
<style type="text/css">
p {
font-family: verdana, arial, sans serif;
font-size: 10px/14px;
text-indent: 15px;
}
</style>

Scripts-- code that performs calculations or functions-- such as javascript will be put in the script tags.

<script type="text/javascript">
... javascript code...
</script>

Hope this helps,

bradyj
09-28-2004, 03:11 AM
You put it in the <head> of the document like so:


<style type="text/css">
p {
font: normal 12px helvetica, verdana, arial, sans-serif;
}
</style>


You may also put it in an external file and link it to your document, which is the preferred method.

]|V|[agnus
09-28-2004, 04:04 AM
1) never again shall you use <marquee> in HTML :thumbsup:

2) rich's example would be better marked up as such:


<blockquote><p>When in the Course of human events,
it becomes necessary for one people to dissolve the political
bands which have connected them with another, and to assume
among the powers of the earth, the separate and equal station
to which the Laws of Nature and of Nature's God entitle them, a
decent respect to the opinions of mankind requires that they should
declare the causes which impel them to the separation.</p></blockquote>

That is more semantic markup, or more meaningful markup. As was mentioned, markup describes information, and here we are saying that this large block of text is being quoted from another source. That source can be designated using the cite attribute:


<blockquote cite="http://www.law.indiana.edu/uslawdocs/declaration.html"><p>When in the course of human events...</p></blockquote>

CSS was mentioned because it is the most common standard for controlling the presentation of a web page. The more structural and semantic your markup is, the more flexible your presentation of the information (controlled by something like CSS) can be. For instance, the markup above can be singled out and styled based on the <blockquote> element to be given a treatment different from <p>'s all by themselves using some basic CSS:


p {
color: #000000;
font-size: 14px;
}

blockquote {
background: #999999;
font-size: 18px;
}

The CSS snippet here is saying that all <blockquote> elements should have a light grey background and slightly larger font size.

***

For what it's worth... I never found w3schools to be that valuable. That might have been because of the level I was at when I discovered it, but I've found that a good search engine and communities like this one are your best resources. That and a desire to learn, of course. :)

gohankid77
09-28-2004, 04:06 AM
External stylesheets:

<style type="text/css">

@import url(filename.css);

</style>

Scootertaj
09-29-2004, 03:04 PM
Ok..
Now you guys got me all confused. I was just asking if you put the
p {
font: normal 12px helvetica, verdana, arial, sans-serif;
}
under the <script>




</script>
or what.

One other question, can i have more than one <script>.........</script> so all my <p>'s dont have to be the same?

ronaldb66
09-29-2004, 03:25 PM
No, you don't put style declerations in a script element.
There are three methods to add style declarations to a (X)HTML document:

Via an external style sheet, using the link element or the style element and the @import rule;
via an internal style sheet, using the style element;
via inline style declarations using the "style" attribute,
in order of preference.

This page on W3Schools decribes all three of them briefly: "CSS How To... insert a style sheet (http://www.w3schools.com/css/css_howto.asp)".

You can have more then one style element per page, but they must all be within the head element and multiple style elements usually don't make much sense; you can have multiple script elements as well, but that's beside the point since you can't use those for including styles.

]|V|[agnus
09-29-2004, 04:10 PM
Ok..
Now you guys got me all confused. I was just asking if you put the
p {
font: normal 12px helvetica, verdana, arial, sans-serif;
}
under the <script>




</script>
or what.

What?? No you weren't. Read your own first post, for fark's sake... that has several question in it alone.

Scootertaj
09-29-2004, 06:55 PM
Hey guys,
Thank you all for the great tips and yes I have already checked out w3schools and it has helped quiet a bit. I know the basics, (lists,tables,images,links,etc.) and now im trying to figure out how to make it look better as you said.

I do have one more question
p {
font-family: verdana, arial, sans serif;
font-size: 10px/14px;
text-indent: 15px;
}
Ok, so do i put this under the <script> or what? what goes under <script> and what doesn't. I have already started a little and here it is, (hope this works)

Actually yes i did, i just changed up the P{........................} a little.

Roy Sinclair
09-29-2004, 10:07 PM
To answer the question that was asked though the answer is that you can put the CSS rules before or after the <script></script> block but as many have pointed out they do need to be inside a <style></style> block. You can in fact have many <script></script> blocks and many <style></style> blocks in any order you desire except having one nested inside another. A fundamental difference between these two blocks though is that all the <style></style> blocks must be inside the <head></head> block while you can also place additional <script></script> blocks inside the <body></body> block.

Kurashu
09-29-2004, 10:27 PM
<script></script> block elements are for SCRIPTS only, note the name.
<style></style> block elements are for CSS only, note this name as well.

Now that is cleared up, I will give you an example of the three ways to define CSS in a (X)HTML document:


Example 1: External
CSS Document (css.css):

p {
font-family: verdana, arial, sans serif;
font-size: 10px/14px;
text-indent: 15px;
}

HTML document:


<html>
<head>
<title>Hey, lookey I'm a page.</title>
<link rel="stylesheet" href="css.css" type="text/css" />
</head>

<body>
<p>When in the Course of human events,
it becomes necessary for one people to dissolve the political
bands which have connected them with another, and to assume
among the powers of the earth, the separate and equal station
to which the Laws of Nature and of Nature's God entitle them, a
decent respect to the opinions of mankind requires that they should
declare the causes which impel them to the separation.</p>
</body>
</html>


Example 2: Internal

HTML document:


<html>
<head>
<title>Hey, lookey I'm a page.</title>
<style type="text/css">
p {
font-family: verdana, arial, sans serif;
font-size: 10px/14px;
text-indent: 15px;
}
</style>
</head>

<body>
<p>When in the Course of human events,
it becomes necessary for one people to dissolve the political
bands which have connected them with another, and to assume
among the powers of the earth, the separate and equal station
to which the Laws of Nature and of Nature's God entitle them, a
decent respect to the opinions of mankind requires that they should
declare the causes which impel them to the separation.</p>
</body>
</html>


Example 3: Inline
HTML document:


<html>
<head>
<title>Hey, lookey I'm a page.</title>
</head>

<body>
<p style="font-family: verdana, arial, sans serif; font-size: 10px/14px; text-indent: 15px;">When in the Course of human events,
it becomes necessary for one people to dissolve the political
bands which have connected them with another, and to assume
among the powers of the earth, the separate and equal station
to which the Laws of Nature and of Nature's God entitle them, a
decent respect to the opinions of mankind requires that they should
declare the causes which impel them to the separation.</p>
</body>
</html>


ALL three will be styled the exact same way. However, if you run a site where the layout is defined by CSS, it becomes harder as you go down through the examples. The first one being the easiest, and the last one being the hardest.

Scootertaj
09-30-2004, 12:43 AM
Thank you guys tons.
It really helped what you added Roy, about <script></script> in the body and <style></style> in the head. Thanks for the examples Kurashu



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum