Tag Archives: Web Programming

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!

Lesson 3: Beginning HTML

If you didn’t check out the last tutorial, quickly check it out. We are going to pull apart the HTML code that we found in that lesson to give a briefer in HTML.

HTML stands for Hyper Text Markup Language. It is a language that is based on control statements, basically commands wrapped around text to tell the web browser how to display the web pages. Without many of the HTML commands that we have available to us, web pages would just display as text. Fortunately, using the generic commands that many web browsers interpret the same way, we can make functional and graphical web pages.

In HTML, the commands are call tags. HTML tags tell the browser what to do with the data returned from the web server. Let’s take a look at our example from lesson 2. The entire text is here:

1
2
3
4
5
6
7
8
<html>
   <head>
      <title>My First Webpage</title>
   </head>
   <body>
      <p>Not going to say Hello World!</p>
   </body>
</html>

That would actually display a page that just had some text in it that says “Not going to say Hello World! and the title of the browser changes to “My First Webpage”.

So let’s review the various parts, keeping it in the hierarchy found. First of all we have the beginning and closing HTML tags.

1
2
<html>
</html>

These tell the browser that the markup found in the text is the HTML format. Every HTML page has a tag at the beginning and a tag at the end. The second tag, with the forward slash, is called a closing tag. This tells the browser that it has reached the end of the segment that matches the name in the closing tag. All text and tags found between an opening and closing tags are considered to be “nested” between those tags.

Let’s look at the next part. The head tag.

1
2
3
   <head>
      <title>My First Webpage</title>
   </head>

The head tag always goes next after the opening html tag. The head is the header section and contains information for the browser about the page, as well much of the scripting instructions that might appear on the page. We will get into that much later, but for now just think of the head section as definitions. For example, the Title tag, which is nested in the head section, tells the browser the name of the specific page that the user is on.

Next comes the body. Let’s look at how we wrote that code:

1
2
3
   <body>
      <p>Not going to say Hello World!</p>
   </body>

The body section always follows the head section. The body contains the actual data that is to be displayed on the web page, it tells the browser how the page should look. Text, graphics, and links can all be found in the body section. In this example, we are including the p tag which tells the browser to display a block of text as a paragraph. Notice the closing tag both for the p tag and the body tag.

That is it for this lesson. Congratulations, you are getting closer to creating your own web page! Next lesson, we will talk about taking this code, storing it in a file and viewing it in your web browser.

Lesson 2: Web Languages

If you have been looking into doing some web programming, then you probably have come across the great number of web programming languages available.  When you are designing a website, you write code into a file that get’s processed by the web server.  Review Lesson 1 if you are unsure of what a web server is.  When it comes to web languages, there are two categories of languages.

The first category is client side.  When you are writing client side programming, you are creating the parts of the web page that the user sees when they access your web page.  This includes things such as text, graphics, animations and forms for them to enter date.  Some examples of client side programming languages include HTML and JavaScript.

The second category, and much more diverse in languages, is server side.  Server side processes certain events that occur during the process of viewing a web page.  For example, if you submit a form,  server side programming may save the data you entered into a database.  Or, server side programming might be used to display text on a web page relevant to a the specific user.  Server side programming includes processes that occur on the server which format the page that is returned to the user and allows for more dynamic and data driven pages.  Some examples of server side languages are ASP.net, PHP,  and Java Server Faces.

When you begin writing code for a webpage, you will begin programming for client side at first.  With client side programming, any web server is capable of providing the pages to the users on the internet.  When you get into the various server side programming though, you will need specific web server types for the various programming language.  For example, programming in ASP.net requires Microsoft Internet Information Services.  Programming in PHP could run on IIS, but can also run on Apache.  Java server faces can run on a JBoss Application Server or a GlassFish server.  You will need a server software that can handle the commands in the server side language.  That topic is further down the line though, and we will be focusing on client side programming first.

Here, for your viewing and curiosity sake, is a sample of very basic HTML programming

1
2
3
4
5
6
7
8
<html>
   <head>
      <title>My First Webpage</title>
   </head>
   <body>
      <p>Not going to say Hello World!</p>
   </body>
</html>

In the next lesson, the various parts of the above will be explained. Please check it out!

Lesson 1: Web Pages

The most basic thing that you need to know about when it comes to programming web sites is how a user on a computer somewhere in the world even accesses your web page.   When a computer is connected to the internet, wherever it connects tells it the location of a few places where it can look up addresses.  The complicated name for this is DNS, but think of it like this:  You are looking for a business and someone hands you a phone book (if you even know what that is).  You now have a list of addresses and you can find the location of the business you are looking for.

On your computer, even though you are connected to the internet, when you want to find a website, like teechmi.com, your computer or device does not know how to get to the correct location.  In this case instead of a business, you are looking for a computer somewhere on the internet that has the data for teechmi.com.  This is called a web server.  However, your internet connection usually provides you a few “name servers” (aka phone books  that tell your computer how to get the web site you are looking for.  Once your computer knows the address, it sends the request and the various pipes that your request travels down is up to the “internet” and not your computer.

That’s how a web site is retrieved, but what does it take to hold the data for a website?  First off, you need a web server.  This not only has all of the web pages that you have created, but some sort of software that provides those web pages when a request is made for them.

The two most popular web server software found in use today are:

Internet Information Services (IIS) which is part of certain versions of Windows software
Apache which is a free open source web server

Once you have one of these software packages running and some web pages your computer can be called a web server (well, as long as it’s connected to the web!).  We will get into more details of how to make it so your web server can be found on the internet in the future.  That is about all you need to start for this lesson, helping you understand how a computer gets to a web page.

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!

Creating Page Links Using getElementsByTagName and addEventListener

The following is a tutorial on how to make all div elements clickable on a web page.  Handle click events on all div tags or on any specific element type in your HTML.

Do you have a need on your HTML page to create links using all the elements of a specific type.  For example, you want all “div” elements to become links that provide some sort of action in javascript.  This can be accomplished using two main functions available in javascript.  The getElementsByTagName and addEventListener functions.

The way this is handled is to create an anonymous function that adds event listeners to your page when it loads.  These event listeners then pass the event to a function that uses a switch statement and the div ID to set specific logic for each div.

We start by creating a basic HTML page that ends with the call to our script as seen below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
 
<head>
	<title>Make Divs Clickable!</title>
</head>
<body>
	<div style="background-color: black" id="FirstDiv">
              <h2 style="color: white">Click this div to say: FirstDiv</h2>
        </div>
 
	<div style="background-color: black" id="SecondDiv">
              <h2 style="color: white">Click this div to say: SecondDiv</h2>
        </div>
 
	<div style="background-color: black" id="ThirdDiv">
              <h2 style="color: white">Our third div is not handled</h2>
        </div>
 
	<script type="text/javascript" src="test.js" ></script>
 
</body>
 
</html>

Next, we create the following anonymous function in our javascript file which adds the event listeners and sets up the handling of the different div ID’s.

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
//create an anonymous function
(function() {
 
	//get all of our div elements
	var links = document.getElementsByTagName("div");
 
	//add an event handler to all of the page elements
	for( var i = 0, len = links.length; i < len; i++) {
		//add an event listener to our div
		links[i].addEventListener("mousedown", elementClickHandler);
 
 
	}
 
 
	function elementClickHandler(event) {
		//get the ID from the event
		var elementID = event.currentTarget.id;
 
		//do something based on the ID
		switch(elementID) {
		case "FirstDiv":
			//do something
			alert(elementID);
			break;
		case "SecondDiv":
			//do something
			alert(elementID);
			break;
		default:
			//do something
			alert("Some other div not Handled");
		}
	}
 
})();

That’s all there is to it. If you would like to download the ZIP file for this example, it is available via the link Make-div-Elements-Clickable.