Category Archives: Beginning Web Programming

The most basic to the most advanced. If you want to learn Web programming, and have no idea where to start, this is the place. We will begin with basic HTML and move later in Database and JavaScript. Check out our lessons and come back for more.

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.