Html Xhtml and Css
Html Xhtml and Css
if you like this go to sethclantplace.synthasite.com and make an account and download my toolbar for more tips.
there are a lot of differnt types of coding such as:
css
c++
html
xhtml
xml
and much more
on this i am going to show you html and a little bit of xhtml and css
__________________________________________________ _______________
if you ever want to make a basic web page paragraph this is what you do first:
<html>
<body>
</body>
</html>
in between <body> and </body> is where the paragraph goes, such as:
<body>
this is where the paragraph goes.
</body>
got it? good.
__________________________________________________ ______________
a form is how you register/login to a website or game, this is how to program a form:
first you tell the computer you are about to do a form, here is the code:
<form name="order" action="../cgi-bin/processfrm.cgi"
</form>
now that you are done with that it is time to put the elements in it.
to program the thing where you put you username or email in you do this:
<input type="text"/>
to program the thing that you put the password in you do this:
<input type="password"/>
to make a checkbox which is the thing that you click and it does a check mark you do this:
<input type="checkbox"/>
to program a reset button you do this:
<input type="reset"/>
to do the submit button you do this:
<input type="submit"/>
but there is also a cool trick you can do with the submit button whick changes the word in it from submit to whatever you want it to, this is how:
<input type="submit" value="register"/> or it can be
<input type="submit" value="go"/> or anything, get the picture?
in order to connect you form to a server you must do a hidden code, here is an example:
<input type="hidden" name=mailto" value="info@ofniq.net"/>
(that does not really work so dont try it)
so take a minute to go try some of this stuff before you proceed.
__________________________________________________ _______________
most of the time when you start an html or xhtml page you want to start it out with this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(that goes on top of everything)
__________________________________________________ _______________
html and xhtml are almost the same, they are different because html is more casual becasue the case doenst matter here is an example:
html
HTML
Html
HtMl
get it?
xhtml you have to get every single little thing write or it will mess everything up here is an example:
<input type="text"/>
then that little box we all know and love should pop up
but if you do this with xhtml:
<inPut TyPe="tExt"/>
it wont work
but, i would use xhtml if I were you because html is older and is beginning to slowly be deleted so because of that, within the next few decades all websites and things in that nature will be all xhtml and html will become unusable so i'd stick to the xhtml.
__________________________________________________ _______________
Css:
css allows better control over your website and animations alot better then html and xhtml but, css is alot harder so I personally stick to xhtml and html but if you want every little part of your site to be very precise use css.
I dont know hardly any css but i'll try my best to teach you some:
Taking a Tumble with CSS
What does the term cascade mean for style sheets? It means that a CSS rule tumbles down through the code, and sometimes bumps into a conflicting rule.
The cascade is about what programmers call precedence: Who wins when there's a conflict? More than one style can apply to a given tag. For example, there's always the default browser-defined style, such as black as the default text color. If you specify some other color in a CSS rule, the cascade allows your rule to dominate, to have precedence over the built-in style.
But how does the browser decide which style wins out if two CSS rules conflict with each other? Should the conflicting styles be combined? What if the styles are completely incompatible — such as one style specifying italic and the other non-italic?
Visualizing specificity
Several factors determine which style wins out when styles collide: inheritance, the structural tree in a document, and the specificity (or closeness)of a style. Probably the most easily understood collision rule involves where the style was defined. Your CSS styles can be defined in four major locations:
The browser's default styles.
An external style sheet (a .css file containing style definitions that is referenced from within the HTML document with a Link element).
An embedded style sheet (styles defined within the HTML document, inside its <head> tag. This kind of style is also sometimes called internal).
An inline style (a style defined as an attribute within an HTML element itself, and whose effect is limited to that element only). For example, this is a typical inline style:
<p style="border-bottom: blue">
This list also illustrates the order in which conflicting styles "win" in any conflict. Think of the order as the style closest to the element wins. For example, the inline style — nestled right inside the element itself — is the closest. So if more than one style is specified for that element, an inline style is the style used. This closenessof the style to the element that matches it is more formally known as specificity.
The style location with the second highest priority is the internal style sheet located in the HTML document's header. The third highest priority goes to the external style sheet — the separate file. And the weakest priority, the one that all the others trump, is the default style. After all, the default is the look that a style sheet is supposed to alter.
Here's an example illustrating how IE decides between blue and red colors:
<html>
<head>
<style type="text/css">
p {color:red;}
</style>
</head>
<body>
<p style="color: blue;">i guess i'm blue. </p>
</body>
</html>
To test this document, type the HTML code into Notepad, and then save it using the filename EmTest.htm. Load this Web page by double-clicking its filename in Windows Explorer. You'll see the sentence I guess I'm blue appear in blue. The <p> element here was defined in two conflicting ways. In the embedded style, it's defined as red, but that definition is overridden by the inline definition of the color blue.
Try removing the inline style to see what happens. Change the line to
<p>I guess I'm blue. </p>
Retest it by resaving the Notepad file you just modified.
No need to double-click again on this filename in Windows Explorer to load the new version into IE. After you've loaded a document, it's the default address in IE — in this case, an address of an .htm file on your hard drive. If you modify that file as you just did in this example, all you have to do to see the modification is to press F5. That "refreshes" IE.
Some people prefer to use the browser's built-in source view as a quick way of modifying and retesting CSS code. Choose View --> Source. You can make changes to the code, and then save it. Both Netscape and Firefox highlight the syntax, which some programmers find useful.
After you load the new version of this document into IE, the line I guess I'm blue is now displayed in red. The conflict between the embedded and inline style definitions has been resolved because you deleted the inline style.
You can override the normal rules of priority by using the !Important command to specify that this style must be used, no matter what. An !Important declaration overrides all other style definitions. You add the command like this:
p {color: blue !important;}
In CSS1, styles declared important by the author of the Web page override even any styles that the reader has declared important. However, in CSS2, important reader styles win out over important author styles, and indeed over any author styles, whether marked important or not.
Understanding CSS specificity
The term specificity is also used to describe a second way that a browser calculates which style wins when styles conflict. First, the browser looks for closeness — but what if the closeness is identical? That's when this second technique is applied.
Imagine, for example, that two different style sheets are referenced by the same HTML document (yes, you can attach more than on CSS file to a given Web page's HTML code). But, in one of these sheets, H1 is styled bold, and in another sheet it's styled italic. What's the poor browser to do in this case? Which specification wins?
Unlike the examples of style collision earlier in this chapter, where closeness could be used to declare a winner, here you've got both styles located at the same degree of closeness (the same specificity). Both of these style definitions are located in external style sheets.
In this case, the browser does a little bizarre math to make the decision about which style to use. As before, the more "specific" style wins. But what counts as specificity in this contest? It's not the same as the "closeness" factor. The browser has to do a bit of strange calculation, but you really can't call thismath. It's just an odd kind of accumulation of values where some styles have orders of magnitude more weight than others. Don't bother your pretty head about this stuff if you don't find peculiar calculations interesting.
What does the browser do to calculate the specificity of two competing styles if their "closeness" factor is identical? Three things:
Looks at a style and counts the number of ID attributes it has, if any
Counts the number of class attributes, if any
Counts the number of selectors (you can group selectors in a style like this: h1, h2, h3)
The browser doesn't then add these numbers together; it merely concatenates the digits. Perhaps this is some kind of arithmetic used by aliens in their galaxy, but I've sure never heard of it. Imagine if you got the number 130 by the following concatenation process:
1 apple, 3 oranges, 0 bananas = 130
This process gives apples ten times the "weight" of oranges, and 100 times the weight of bananas. Here are a couple of examples showing how it works when used to determine specificity in a CSS. Just pretend you're back in third-grade math class.
Attention, class! What is the specificity number for this selector?
ul h1 li.red {color: yellow;}
Anyone get the answer 13?
The correct answer is 13. You have
0 IDs, 1 class attribute (red), and 3 selectors (ul h1 li)
That "adds up," so to speak, to 013. Now, kiddies, who can explain how you get a specificity of 1 for the following selector definition?
H1 {color: blue;}
After the specificity has been determined, the higher number wins. Assume that two styles are in conflict because they both define the color of H1, but define it differently. But because one definition has a specificity value of 13 and the other has only 1, the H1 headline is yellow, not blue.
What if two rules turn out to have the same specificity? In that case (assuming that both are in a style sheet, or otherwise are the same "closeness" to the HTML tag), the rule that was specified last wins.
that's the best i can do right now (i better go read some nerd booksm lol)
__________________________________________________ _______________
check out this website code hack i helped make
when i finish putting the codes i helped with into this post then you can get it to
there are a lot of differnt types of coding such as:
css
c++
html
xhtml
xml
and much more
on this i am going to show you html and a little bit of xhtml and css
__________________________________________________ _______________
if you ever want to make a basic web page paragraph this is what you do first:
<html>
<body>
</body>
</html>
in between <body> and </body> is where the paragraph goes, such as:
<body>
this is where the paragraph goes.
</body>
got it? good.
__________________________________________________ ______________
a form is how you register/login to a website or game, this is how to program a form:
first you tell the computer you are about to do a form, here is the code:
<form name="order" action="../cgi-bin/processfrm.cgi"
</form>
now that you are done with that it is time to put the elements in it.
to program the thing where you put you username or email in you do this:
<input type="text"/>
to program the thing that you put the password in you do this:
<input type="password"/>
to make a checkbox which is the thing that you click and it does a check mark you do this:
<input type="checkbox"/>
to program a reset button you do this:
<input type="reset"/>
to do the submit button you do this:
<input type="submit"/>
but there is also a cool trick you can do with the submit button whick changes the word in it from submit to whatever you want it to, this is how:
<input type="submit" value="register"/> or it can be
<input type="submit" value="go"/> or anything, get the picture?
in order to connect you form to a server you must do a hidden code, here is an example:
<input type="hidden" name=mailto" value="info@ofniq.net"/>
(that does not really work so dont try it)
so take a minute to go try some of this stuff before you proceed.
__________________________________________________ _______________
most of the time when you start an html or xhtml page you want to start it out with this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(that goes on top of everything)
__________________________________________________ _______________
html and xhtml are almost the same, they are different because html is more casual becasue the case doenst matter here is an example:
html
HTML
Html
HtMl
get it?
xhtml you have to get every single little thing write or it will mess everything up here is an example:
<input type="text"/>
then that little box we all know and love should pop up
but if you do this with xhtml:
<inPut TyPe="tExt"/>
it wont work
but, i would use xhtml if I were you because html is older and is beginning to slowly be deleted so because of that, within the next few decades all websites and things in that nature will be all xhtml and html will become unusable so i'd stick to the xhtml.
__________________________________________________ _______________
Css:
css allows better control over your website and animations alot better then html and xhtml but, css is alot harder so I personally stick to xhtml and html but if you want every little part of your site to be very precise use css.
I dont know hardly any css but i'll try my best to teach you some:
Taking a Tumble with CSS
What does the term cascade mean for style sheets? It means that a CSS rule tumbles down through the code, and sometimes bumps into a conflicting rule.
The cascade is about what programmers call precedence: Who wins when there's a conflict? More than one style can apply to a given tag. For example, there's always the default browser-defined style, such as black as the default text color. If you specify some other color in a CSS rule, the cascade allows your rule to dominate, to have precedence over the built-in style.
But how does the browser decide which style wins out if two CSS rules conflict with each other? Should the conflicting styles be combined? What if the styles are completely incompatible — such as one style specifying italic and the other non-italic?
Visualizing specificity
Several factors determine which style wins out when styles collide: inheritance, the structural tree in a document, and the specificity (or closeness)of a style. Probably the most easily understood collision rule involves where the style was defined. Your CSS styles can be defined in four major locations:
The browser's default styles.
An external style sheet (a .css file containing style definitions that is referenced from within the HTML document with a Link element).
An embedded style sheet (styles defined within the HTML document, inside its <head> tag. This kind of style is also sometimes called internal).
An inline style (a style defined as an attribute within an HTML element itself, and whose effect is limited to that element only). For example, this is a typical inline style:
<p style="border-bottom: blue">
This list also illustrates the order in which conflicting styles "win" in any conflict. Think of the order as the style closest to the element wins. For example, the inline style — nestled right inside the element itself — is the closest. So if more than one style is specified for that element, an inline style is the style used. This closenessof the style to the element that matches it is more formally known as specificity.
The style location with the second highest priority is the internal style sheet located in the HTML document's header. The third highest priority goes to the external style sheet — the separate file. And the weakest priority, the one that all the others trump, is the default style. After all, the default is the look that a style sheet is supposed to alter.
Here's an example illustrating how IE decides between blue and red colors:
<html>
<head>
<style type="text/css">
p {color:red;}
</style>
</head>
<body>
<p style="color: blue;">i guess i'm blue. </p>
</body>
</html>
To test this document, type the HTML code into Notepad, and then save it using the filename EmTest.htm. Load this Web page by double-clicking its filename in Windows Explorer. You'll see the sentence I guess I'm blue appear in blue. The <p> element here was defined in two conflicting ways. In the embedded style, it's defined as red, but that definition is overridden by the inline definition of the color blue.
Try removing the inline style to see what happens. Change the line to
<p>I guess I'm blue. </p>
Retest it by resaving the Notepad file you just modified.
No need to double-click again on this filename in Windows Explorer to load the new version into IE. After you've loaded a document, it's the default address in IE — in this case, an address of an .htm file on your hard drive. If you modify that file as you just did in this example, all you have to do to see the modification is to press F5. That "refreshes" IE.
Some people prefer to use the browser's built-in source view as a quick way of modifying and retesting CSS code. Choose View --> Source. You can make changes to the code, and then save it. Both Netscape and Firefox highlight the syntax, which some programmers find useful.
After you load the new version of this document into IE, the line I guess I'm blue is now displayed in red. The conflict between the embedded and inline style definitions has been resolved because you deleted the inline style.
You can override the normal rules of priority by using the !Important command to specify that this style must be used, no matter what. An !Important declaration overrides all other style definitions. You add the command like this:
p {color: blue !important;}
In CSS1, styles declared important by the author of the Web page override even any styles that the reader has declared important. However, in CSS2, important reader styles win out over important author styles, and indeed over any author styles, whether marked important or not.
Understanding CSS specificity
The term specificity is also used to describe a second way that a browser calculates which style wins when styles conflict. First, the browser looks for closeness — but what if the closeness is identical? That's when this second technique is applied.
Imagine, for example, that two different style sheets are referenced by the same HTML document (yes, you can attach more than on CSS file to a given Web page's HTML code). But, in one of these sheets, H1 is styled bold, and in another sheet it's styled italic. What's the poor browser to do in this case? Which specification wins?
Unlike the examples of style collision earlier in this chapter, where closeness could be used to declare a winner, here you've got both styles located at the same degree of closeness (the same specificity). Both of these style definitions are located in external style sheets.
In this case, the browser does a little bizarre math to make the decision about which style to use. As before, the more "specific" style wins. But what counts as specificity in this contest? It's not the same as the "closeness" factor. The browser has to do a bit of strange calculation, but you really can't call thismath. It's just an odd kind of accumulation of values where some styles have orders of magnitude more weight than others. Don't bother your pretty head about this stuff if you don't find peculiar calculations interesting.
What does the browser do to calculate the specificity of two competing styles if their "closeness" factor is identical? Three things:
Looks at a style and counts the number of ID attributes it has, if any
Counts the number of class attributes, if any
Counts the number of selectors (you can group selectors in a style like this: h1, h2, h3)
The browser doesn't then add these numbers together; it merely concatenates the digits. Perhaps this is some kind of arithmetic used by aliens in their galaxy, but I've sure never heard of it. Imagine if you got the number 130 by the following concatenation process:
1 apple, 3 oranges, 0 bananas = 130
This process gives apples ten times the "weight" of oranges, and 100 times the weight of bananas. Here are a couple of examples showing how it works when used to determine specificity in a CSS. Just pretend you're back in third-grade math class.
Attention, class! What is the specificity number for this selector?
ul h1 li.red {color: yellow;}
Anyone get the answer 13?
The correct answer is 13. You have
0 IDs, 1 class attribute (red), and 3 selectors (ul h1 li)
That "adds up," so to speak, to 013. Now, kiddies, who can explain how you get a specificity of 1 for the following selector definition?
H1 {color: blue;}
After the specificity has been determined, the higher number wins. Assume that two styles are in conflict because they both define the color of H1, but define it differently. But because one definition has a specificity value of 13 and the other has only 1, the H1 headline is yellow, not blue.
What if two rules turn out to have the same specificity? In that case (assuming that both are in a style sheet, or otherwise are the same "closeness" to the HTML tag), the rule that was specified last wins.
that's the best i can do right now (i better go read some nerd booksm lol)
__________________________________________________ _______________
check out this website code hack i helped make
when i finish putting the codes i helped with into this post then you can get it to
Similar Threads
- 1Last post
- 2Last post
- 1Last post