Tag Archives: HTML

Lesson 4: Creating an HTML File

Even if you know how to write HTML and have all of the tags memorized, you still need to know how to create a file that the web server will access. When a web server service is installed on a workstation, it will generally create a directory to hold your web server documents.

If using Microsoft Internet Information Services, and you have installed the web server service, then you should find a directory called “wwwroot” on your hard drive. The options for this server are usually found by going to Control Panel/Administrative Tools/Internet Information Services Manager. There you can do things like configure IIS, set the home directory and set the permissions.

If you are using Apache, you will find an httpd.conf file in the location where you installed Apache. This file is going to control the Apache web server and setup things like the home directory. By default, Apache uses a directory called htdocs for the web server directory.

Ok, so you have figured out where to put your documents. Now, how do you create the file that the web server will use? The easiest way is to simply create a new file on your computer called index.htm or index.html. Often, file extensions are hidden, so you need to make sure your file is actually index.htm rather than “index.htm.txt”. Using notepad is a good way to get started, but as you write more complicated code, a tool like will help by color coding your written code.

Now to make our first HTML file, we will take the entire code segment found in Lesson 3 and paste it into our blank index.htm file. Save this file to your web server directory. If this web server is running on your own computer, you can probably just type localhost into your web browser and you should be redirected to your web server which will display your default page.

By naming your document index.htm chances are good that you will be making it your default page, but we will get more into default pages in Lesson 5 and 6 where we will cover IIS and Apache configurations respectively. See you soon!

HTML and JavaScript – Repeating Anonymous Function

This post demonstrates how to use an anonymous function on an html page in order to create a looping action. It is a relatively simple process and the following code is all that is needed to see this in action.

The comments should be pretty self explanatory in this code to see what is being done. Try it yourself!

Notice a few things. If you would like to end or clear the interval you set in JavaScript, there is a function that is clearInterval. Make sure you replace the function name of the one you would like to repeat in the line where you call the setInterval, in this example the name is render.

Should be straightforward. A challenge is for you to use an onClick event to begin and end the interval that you create.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
	<head>
		<title>Repeating Anonymous Function</title>
	</head>
 
	<body>
		This is my text.  I'm going to repeatedly pop-up a message box that tells you how many times it's popped up.
 
	<script	type="text/javascript">
 
		//Our anonymous function declaration (at the end of the html document)
		(function() {
 
			//Set the timer variable
			var intTime = 5000;
			//Create the interval variable;
			var myInterval;
			//Create a counter
			var count = 0;
 
			//Create the interval with render being the function to call and intTime being the interval
			myInterval = setInterval( render, intTime);
 
			//Here is the function that our timer will call
			function render() {
				count += 1;
				alert("Number of Cycles: " + count);
 
				if (count == 10) {
					//The following ends the execution of the interval
					clearInterval(myInterval);
				}
			}
		//Complete our anonymous function
		})();
 
	</script>
	</body>
</html>

Basic HTML5 Canvas Tutorial

Have you yet to play around with the canvas tag available in HTML5?  Need help just getting started with a basic document so that you can begin manipulating it different processes?

The canvas element is a very useful tool to understand in web development.  It offers great potential to web graphics, animation and even to overall page layout.  Animate layers on your webpage to make it stand out or even create a game. The possibilities are extensive.

See the following code example to get started with a basic canvas element.  The comments should clearly highlight what the various lines of code are accomplishing.  Hopefully this helps you get a good start towards utilizing this excellent tag in HTML5.

<html>
 
	<head>
		<script type="application/javascript">
		//Create a function to call after page load to draw a rectangle on
		//our canvas element
		function createRect() {
			//Reference to our canvas element
			var myCanvas = document.getElementById("myCanvas");
			//Create the context for which we will manipulate our canvas
			var myContext = myCanvas.getContext("2d");
			//Create a filler for what we draw in our context
			myContext.fillStyle = "rgb(0, 0, 256)";
			//Create a shape to display
			myContext.fillRect(20, 20, 100, 150);
		}
		</script>
	</head>
	<!-- After the body loads, call our function to draw our rectangle -->
	<body onload="createRect()">
		<!-- Create the canvas element on our page -->
		<canvas id="myCanvas" width="800" height="600">help</canvas>
	</body>
 
</html>

That’s all there is to it!