<html>_
Advanced
If you haven't already taken a look at the basics page, you should do so before continuing. We are assuming you know what we described there.
Once you've got the hang of HTML, perhaps you would like to have a taste of what's beyond it. You already heard about the other languages, and now we're going to give you a quick sample of a few of them. Again, don't be scared! If you don't understand something we say, which will hopefully be only rarely, you can ask one other particular person. Well, not exactly a person. Google. Google is your friend. With that said, we'll get started with the next language up; JavaScript.
JavaScript
JavaScript also tells the browser how to display stuff. With JavaScript, however, you can create more interactive and dynamic sites than HTML alone. JavaScript's structure is very simple, but first we're going to tell you how to include it in your HTML. Its got its own tag for code, too. That tag is <script>. You also, however, need to give the tag some attributes to tell the browser it's JavaScript, not anything else. You have to set the type attribute to text/javascript, and the language attribute to javascript, making the tag now <script type="text/javascript" language="javascript">. End this with </script>. Inside those tags, the browser will process the JavaScript.
Now to actually learning the language. Let's first create a function. A function holds code that can be called upon to do things from other places. Defining a function is simple. Type function and then a space to instruct that it's a function. Next, type the name for it. It can be nearly anything except reserved words like var and function. Then, in parentheses, you can either define parameters it can take, or leave nothing in the parentheses. Doing the latter will not permit any parameters to be passed to it. Choosing the former, you will define a variable by typing var and then the name of the parameter. Everything that goes inside the function will need to be surrounded with curly braces. So far, we're up to this:
function functionName(var yourParameter)
{
}
So, we should put something in the function. We're going to call a built-in function, alert("message"). It pops up a window with the text you give it. For this example, let's have it say "Go Dewitt!" This makes the function call alert("Go Dewitt!");. Your function doesn't need parameters in this case. This should make the function, after renaming it to "hello", as follows:
function hello()
{
alert("Go Dewitt!");
}
Now you need a way to trigger it. Let's have it trigger on loading the HTML document. Integrate this into a body tag's onLoad attribute, like so:
<body onLoad="javascript:hello();">
This is just a basic example of what JavaScript can do. There are many other things that can also be created. Explore more in the JavaScript world at www.w3schools.com.
CSS
CSS extends HTML. You can make more sophisticated styles with it than HTML alone. CSS stands for Cascading Style Sheets. It, too, is very simple. One simple way to get it into an HTML document is to enclose it in <style> tags. Now, let's get to actually writing some of the CSS.
In order to tell the browser what to apply the styles to, you have to define the selector. The selector is how you identify an HTML tag. If you wanted to apply it to the entire body, your selector would simply be body. When a tag has the class attribute specified, you can use that to select a tag. A period separates the tag name from the class name. If you wanted to target the tag <span class="dewitt">, the selector would be span.dewitt. The format for styles is as follows:
selector
{
style:value;
}
A very basic style name would be color. Valid values for it would include hex color codes, or English words of simple colors. Let's use red. Then we'll apply this to span.dewitt, changing its color to red, as seen below:
span.dewitt
{
color:red;
}
It's so simple! Just get to know the styles and their valid values, and you too can make things styled!