2. WHAT WE ARE GOING TO CREATE
HTML5 Tree with decoration
HTML + CSS Tree
3. HYPER TEXT MARK UP LANGUAGE
Pros
Cons
• Provides a basic structure for data to be
displayed
• HTML is not dynamic – meaning it has no logic
to it
• Very easy to pick up and learn
• No one structure to it
• Mistakes are easily found and fixed
• There are many development environments
4. CASCADING STYLE SHEETS
Pros
• Easy to learn
• Used by 99.999% of websites
• Tidy's up HTML makes it “Cleaner”
• Provides the skin to HMTL
Cons
• None Its that Good
5. JAVASCRIPT
Pros
• As close as you can get to coding with out all the
“Messy Stuff” of code
• Safe !! You cannot damage your system as its
self contained
• Extremely powerful tool for creating web apps
• Very easy to pick up and learn
Cons
• Only works in a browser
• No Development environment
• Debugging is a pain
• Each browser reacts to code differently
• Imagination is your only limit with JS
6. HOUSE KEEPING
1. Create a Directory called “Christmas Tree”
2. Create a subdirectory called “css”
3. Create a file called “styles.css” and save into css
4. Create a file called “index.htm” and save into the root directory (Christmas Tree)
Keyboard Short cuts
Copy : Ctrl + C
Paste : Ctrl + V
Cut :
Ctrl + X
7. HTML BOILER PLATE
Use this boiler plate code to begin
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML, CSS & JS Christmass Trees</title>
<link rel="stylesheet" href="css/tree.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border-style:solid;" ></canvas>
</body>
</html>
11. function draw() {
var canvas = document.getElementById('canvas');
FUNCTIONALITY
Step 1 - Beginning Code
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// more code goes here !!
}
}