HTML is all about displaying things. CSS is all about making things look good. Between the both of them, you can create some pretty nifty looking things:
Despite the niftiness of how sites built using only CSS and HTML look, they will be pretty static. They don't adapt or react to what you are doing. With those two, it's almost like watching a rerun of a great Seinfeld episode over and over again. It's fun for a while, but it gets boring eventually. The web today isn't static. The sites that you use often have a certain level of interactivity and personalization that goes well beyond what HTML and CSS by themselves can provide:
- Listen to events like a mouse click and do something.
- Modify the HTML and CSS of your page after the page has loaded.
- Make things move around the screen in interesting ways.
- Create awesome games that work in the browser like Cut the Rope.
- Communicate data between the server and the browser.
- Allow you to interact with a webcam, microphone, and other things.
Don't worry if you don't know what any of that means. Just pay attention to what the code looks like. Notice that you see a lot of English words like function, if, else, alert, name, etc. In addition to the English words, you also have a lot of bizarre symbols and characters from the parts of your keyboard that you probably never notice. You'll be noticing them plenty enough really soon, and you'll also fully understand what everything in this code does as well.
The HTML Document
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="stuff, to, help, search, engines, not" name="keywords"> <meta content="What this page is about." name="description"> <meta content="An Interesting Title Goes Here" name="title"> <title>An Interesting Title Goes Here</title> <style> </style> </head> <body> <script> </script> </body> </html>
If you preview this document in your browser, you won't really see anything. This is a blank document that has nothing really going on. That's fine, for we'll fix that shortly starting with the <script> tag that you see towards the bottom of your example:
[ hi world!!! ]
Inside your script region, add the following line:
<script> alert("hello, world!"); </script>
Save your HTML file and run it in your browser. Notice what you will see once your page has loaded. You should see a dialog with the words hello, world! displayed. It should look very similar to the screenshot I posted above.
Looking at the Code: Statements and Functions
You can tell something is a statement by looking at the last character in it. It is usually a semicolon (;) just like what you see here.
Getting back to our example, the text you want to display is hello, world!, and notice how I am specifying it. I wrap the words inside a quotation mark:
- alert("hello, world!");
Let's go one step further. Instead of displaying hello, world!, change the text you are displaying to say your first and last instead. Here is an example of what my code looks like when I use my name:
- alert("kirupa chinnathambi!");
Up Next: Variables
If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!
THE KIRUPA NEWSLETTER
Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!
( View past issues for an idea of what you've been missing out on all this time! )