So i don't really know what a lot of you know about this type of stuff in the first place, but I guess there's a good place to start and there's a bad place to start. Good place to start is here, bad place would be when you pay for it.
I'm assuming that most of you have some sort of HTML experience, and I mean with a notepad. The whole WYSIWYG approach is good and all (when you're 6 and barely know how to type), but there comes a time when you need to learn how to do things by hand. I use
gVIM btw, which is probably more powerful than most of you need, not to mention the pain in the ass known as a learning curve. EditPlus or NotePad+ or whatever should suffice. Don't ask me where to find them,
downloads.com is your friend.
So let's start off with a simple thing, and hopefully I'll get more time later to become more complicated.
1 <html>
2 <body>
3
4 <p id="firstParagraph">This is a very nice paragraph about
5 something more than nothhing. What is it that they usually
6 say, "Call me Kip". Hello World. And all that</p>
7
8 </body>
9 </html>
So a crappy page. We've all made them. I've made hundreds of them. There are probably two things that I've done here that most of you will never do.
1) I've actually closed the
tag. This is more for completeness then anything else. Most of the new HTML specs (XHTML to be precise) require that you close all tags.
2) I've named the p tag.
The id="firstParagraph" allows me to manipulate the tag and make changes to it with things like CSS. It also allows me to call functions on it with JavaScript. And now I've just realized that I may have gone too far and named things that you're not used to yet.
Now this is going to take longer to write than I really wanted, but if you're gonna do something, do it right the first time.
CSS - Cascading Style Sheets. This is basically a sheet that contains all the style. All that crap you used to do with tags like <font> and well even the <u> stuff is now gone and should stay dead and buried. Enter CSS. The thing that puts all that style crap in one place, making the html easier to read and making changing the styles so much easier.
JavaScript - You know all that cool stuff that goes on a webpage and ... No that's called flash. This is the old way of doing cool stuff, before macromedia bombarded us with the bloat that is flash. It used to take talent to make that cool page, now everyone with a stolen piece of software can do it. But this isn't a rant, it's a lesson.
By your powers combined, I AM DHTML!!!!! GO C...
So let's do something interesting. The downside is we're gonna need some more HTML, and I'm gonna need a cup of tea.
1 <html>
2 <head>
3
4 <style>
5
6 #firstParagraph
7 {
8 background-color: black;
9 color: white;
10 font-family: arial;
11 font-size: 10pt;
12 }
13
14 #firstParagraph:first-letter
15 {
16 font-size: 18pt;
17 font-weight: bolder;
18 }
19
20 </style>
21
22 </head>
23
24 <body>
25
26 <p id="firstParagraph">This is a very nice paragraph about
27 something more than nothhing. What is it that they usually
28 say, "Call me Kip". Hello World. And all that</p>
29
30 </body>
31 </html>
So I'll quickly explain this and then stop for the night.
Now there are new things. Some you have seen before and I was just too lazy to put in the first example. Some you've seen but don't know much about, and some well...
So we have style tags now. This is how CSS is specified for the most part. Inside we have two small sections of code that define two styles. You'll notice that they have the same name as our paragraph below, but with a # in front of them. Coincidence? Only if I believed in that nonsense. Basically we're telling the browser that we're going to explain how to draw anything called "firstParagraph".
The second style is a bit more fun. It's basically telling the browser what to do with the first-letter (clever naming huh?) of anything called "firstParagraph". I hope the rest of the style information is a bit more self explanatory. Otherwise we have bigger issues at hand.
Please feel free to ask questions, or ask for more info. If you're going to bitch about my spelling, you can bite me.
-----------------------
Just another pretty face.... 