HTML tutorials

Tutorial 1 - Intro to javascript

Javascript is used to make a normally static html page interactive. Normally, once a page loads, the content/structure cannot be changed. Javascript is an exception, and can provide flash-like interactive effects.

Javascript can change elements on the page, and can even change the style on elements!

<html>
   <head>
      <style type="text/css">
#my_paragraph{ background-color:green;color:white;cursor:pointer; padding:10px;}
#my_paragraph:hover{background:blue; color:yellow;}
      </style>
      <script type="text/javascript">
      function ChangeBackgroundColor()
      {
      var red_value=Math.floor(Math.random()*255);
      var green_value=Math.floor(Math.random()*255);
      var blue_value=Math.floor(Math.random()*255);

      document.getElementById("my_paragraph").style.backgroundColor="rgb("+red_value+","+green_value+","+blue_value+")";
      }
      </script>
   </head>
   <body>
      <p id="my_paragraph" onclick="ChangeBackgroundColor()">Click me to change my background color!
   </body>
</html>

Click here to

If you type out the previous code in a html document, save it, then view it in your browser, it will show the title at the top of the browser window as the title above(My first webpage) and the only thing on the page will be what is between the body tags above.

Explanation:

Every webpage has to be surrounded with the 'html' tag. This lets the browser know that you are going to be using html, and can include additional information.

The 'head' tag does not hold information that is displayed on the page itself. It can hold a title, along with other information, such as styling(css) or javascript(which allows your page to be interactive).

The 'body' tag is where you get to put the content! Anything you put between the opening tag(<body>) of the body and the closing tag(<⁄body>) will be displayed on your webpage.

Feel free to experiment more on the code above - change the title or change what is shown in the body of the page.

Web Development

HTML CSS Javascript php AJAX

Game Development

OpenGL DirectX