the_aggie10 0 Report post Posted October 30, 2006 Ok. Well i am writing this as a series of tutorials i will be doing on this subject, so enjoy. I hope this helps. Introduction to HTML and CSS HTML and CSS are to work together. HTML is what puts the characters on the page, while CSS is what makes everything look outreageous! For instance, I would use HTML if i wanted to put "Xisto is the poop!" onto my page, although if i wanted to make it look nice like this by adding a font, and maybe some color, then I would use CSS. Learn the HTML. Ok this is my little into. to HTML. In order to get words to appear on a page I would put <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://forums.xisto.com/no_longer_exists/; <body> <p> This is the text that would appear!</p> </body> </html> Now it does not matter how much you indent, or if you indent at all, but I do it cause it is easier to read through. So you have typed this into your text editor, such as notepad. Now it is time to see how it looks! Ok, save it as tutorial.html. Then go to your internet browser and click on File>Open> click on your file and BOOM! There it is. Congratulations, your first page (only applies to those who it applies to heh) Well you might have noticed it doesn't look very spiffy. Which is where the CSS comes in. But before we move onto that let me explain something. CSS adds stuff such as color or font. But you can still do a good bit of stuff in HTML for instance if you wanted to make the text bold it would be <b> Bold text here </b>This would look like this <b>Bold text here</b> Also this line: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://forums.xisto.com/no_longer_exists/; is a <b>doctype</b>, which holds the rules for different versions of HTML. Learn the CSS Well now that you have gotten just a glimpse of HTML it is time to move on to styling it, which is what CSS does. You can do CSS directly from the HTML document or do it from a totally different document, I personally do it from a totally different one. So, say that I wanted to style that text that we did previously. p { font-family: Arial, Helvetica, sans-serif; color: blue; } Lets dissect this shall we? Ok the very first character "p" is a selector. It selects all of the "p" elements in the HTML. The "font-family" is of course fonts, but it is saying that the first choice is Arial, and if that is not available then Helvetica, or if all else fails sans-serif. As you could have guessed, the last part is saying that the color is to be blue. You cant really look at this without the HTML, so take a look at the next section! Linking the two together In case you were wondering, these two don't just magically find each other. To link the two together you add a link element to it. Here is an example: say you saved the above code as style.css, then in the HTML before you put the closing head tag (</head>) you would add <link href="style.css" rel="stylesheet" type="text/css" /> So, you have got the HTML document from earlier saved as tutorial.html correct? Well go in there and add the link element, so ultimately it will look like this: <html> <link href="style.css" rel="stylesheet" type="text/css" /> <body> <p> This is the text that would appear!</p> </body> </html>Now save that file. and go to your internet browser, and again File>Open>tutorial.html and there you go, the text looks good, but you may have noticed the background looks like total poop, that is for next time. I hope you enjoyed this! -Aggie Share this post Link to post Share on other sites
FirefoxRocks 0 Report post Posted October 30, 2006 First of all, you should teach HTML, you should teach XHTML.Second of all, y did you put yoru tutorial in quotes? Share this post Link to post Share on other sites
Chesso 0 Report post Posted November 1, 2006 Looks like he was quoting his own post from another from (namely Xisto) and it might contain content written by another.Makes sense to me.I'd leave the doctype and strict out of a starters tutorial though, I think that should be covered as a seperate topic for HTML/XHTML. Share this post Link to post Share on other sites
iGuest 3 Report post Posted November 1, 2006 Chesso, The DTD is an integral part of the page and it would be best if it was included in all pages, especially beginner's pages, since an absence of the DTD causes Browsers to go in to Quirks Mode. Quirks Mode is not good if you are attempting to get your page to behave the same in all Browsers. Each Browser interprets thing differently using Quirks Mode, you see, so forcing the Browser into Standards Compliance Mode is critical. It is diffucult enough to obtain Cross Browser compatability with a DTD, and more difficult without one. Share this post Link to post Share on other sites
Vyoma 0 Report post Posted November 1, 2006 Up until now, I have been using a 'Transitional' DTD for all my webpages. I heard it somewhere that W3C is suggesting everyone to use 'Strict' DTD. That way, the standardization of browsers would see the light of day.But I find it a bit hard to actually stick to Strict DTD in some senarious where all the content is not under my control in dynaic senarios. Share this post Link to post Share on other sites
Chesso 0 Report post Posted November 1, 2006 That's right Vyoma, you can't get far without breaking the strict DTD.But if your not going to teach someone what the purpose is of the DTD, it will only serve to confuse them. Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted November 1, 2006 First of all, you should teach HTML, you should teach XHTML.Second of all, y did you put yoru tutorial in quotes? Actually it best to start off with the 4.01 just to get a basic understanding of it. Then once someone gets a good understanding of html then move on to xhtml.Agree with that you seldom find any strict xhtml sites, well at least I haven't, just because of how hard it is to keep it within those properties. I have seen some good templates using the strict DTD format. Share this post Link to post Share on other sites
Chesso 0 Report post Posted November 1, 2006 And when you bring PHP and Database into the score of things it's near impossible heh heh.But if your going to include a DTD at all, there should be atleast a basic explanation as to what purpose it serves, to help save on confusion. Share this post Link to post Share on other sites
the_aggie10 0 Report post Posted November 10, 2006 First of all, you should teach HTML, you should teach XHTML.Second of all, y did you put yoru tutorial in quotes?yea its cause you cant put tut's from Xisto onto asta without them. but thanks for the compliments everyone. and beginners should learn the basics of both. Share this post Link to post Share on other sites
borlafu 0 Report post Posted November 10, 2006 Begginners should learn XHTML, the strincter the better.HTML is wrongly designed from the beginning, it only makes new designers get cofused.XHTML is properly standardized, and is compatible with XML.The idea is to separate the CONTENT from the DESIGN and that is what XHTML + CSS is all about. Share this post Link to post Share on other sites
