IMPORTANT
If you are new to this blog and you are looking to learn the basics of how to create a web page then I would suggest that you start with The Basics page. Once you are there then you can move through the eight basic steps and you will have a page up in no time.
If you are looking for something specific then send me an email and I will review the idea for a post. Contribution is what makes the web so powerful!
Thanks for joining us and I hope you can benefit from the content we provide!
Using Javascript to automatically update elements of your web page is very common. This is one example of what Javascript can do for you. There are two parts really. The first part is the function that does the calculation. The second part is the form that shows on the web page.
The first part is the function. This is the function that does the calculation. I am using a swich statement to deside which case to use. This goes in the <head> tag.
<script type=”text/javascript”>
function calculate(form)
{
var first = form.first.value*1;
var second = form.second.value*1;
switch(form.operator.value)
{
case “plus”:
form.result.value = first+second;
break;
case “minus”:
form.result.value = first-second;
break;
case “multiply”:
form.result.value = first*second;
break;
case “divide”:
form.result.value = first/second;
break;
default:
form.result.value = “ERROR”;
}
}
</script>
The second part is the form that shows on the web page. This goes anywhere in the <body> tag.
<form name=”calcform”>
<input type=”text” name=”first” value=”0″></input><br>
<select name=”operator”>
<option value=”plus”>+</option>
<option value=”minus”>-</option>
<option value=”multiply”>*</option>
<option value=”divide”>/</option>
</select><br>
<input type=”text” name=”second” value=”0″></input><br>
_________________________________________<br>
<input type=”text” name=”result” value=”" onfocus=”calculate(this.form)”></input><br>
</form>
I have made it so the calculation is made when you click in the last text box. If you wanted you could use the onclick event on a button instead. That is up to you. See it in action.
Once you create an HTML document it is static. Things like Javascript and server side scripts have made it so you can serve up dynamic content. This is just a short example on how to offer something dynamic on your site.
If you want to have today’s date on your page you can do something like this. Inside your <head> tag insert the following code.
<SCRIPT LANGUAGE=”Javascript”>
// Array of day names
var dayNames = new Array(”Sunday”,”Monday”,”Tuesday”,”Wednesday”,
“Thursday”,”Friday”,”Saturday”);
// Array of month Names
var monthNames = new Array(
“January”,”February”,”March”,”April”,”May”,”June”,”July”,
“August”,”September”,”October”,”November”,”December”);
var now = new Date();
todaysdate = dayNames[now.getDay()] + “, ” + monthNames[now.getMonth()] + ” ” + now.getDate() + “, ” + now.getFullYear();
</SCRIPT>
Then wherever you want the date in the <body> of your html just insert the following code.
<script>document.write(todaysdate);</script>
This will work on most browsers but keep in mind it is serving up the date of the computer it is being viewed on not the servers date.
Now that we have outlined the tools you will need lets go over the language we will use. The nice thing about learning how to create a web page is that there is NO PROGRAMMING involved. HTML is NOT a programming language. HTML stands for HyperText Markup Language. There is a huge difference between programming and markup as you will see into today’s post.
A markup language is basically the way for you to tell the browser what you want your content to look like and what you want to happen when the web page visitor interacts with your content. This will all make sense in a minute as we continue to learn how to create a web page, just stick with me.
The first step to understanding a markup language is to understand the term tag. A tag is what you use when you are writing HTML. All tags start with a “<” and end with a “>”. Let me give you a quick example of an HTML tag so I don’t lose you. Are you ready?
<b>
Whoa! Scary eh? That is a bold tag. It is the tag you use when you want to make text bold.
Ok so now what? So to continue, the next thing to remember is that all tags have an end tag that correspond with the tag. (There are a few exceptions but very few.) Alright so what does an end tag look like you ask? Wait for it…
</b>
Nice! That is an bold end tag. It is the tag you use when you want to make your text normal again. You are doing great! Let’s hit the last step. What happens if we put something in between these tags? Let’s look at what the bold tag and bold end tag do.
Text with No Markup
Text with Bold Tag
The markup for the lines above would look like this. (You will actually do this in Step 3)
Text with No Markup
Text with <b>Bold</b> Tag
As you may have guessed by now the real challenge is learning what all the tags are. You can tell by the bold tag we just learned about that some are very easy to remember. Some more examples are <i> is for italics, <u> is for underlined. There is no sense in trying to memorize all of them so a good reference manual like this one is recommended.
As we go through the steps on learning how to cerate a web page I will introduce you to many types of tags but as long as you understand the basics of what I just explained you will be ready. Join me for Step 3 - Creating Your First Web Page and you will see this all put into action.
There are some basics to consider when learning how to create a web page. The web pages themselves are the content for a web site.
Three Main Parts of a Web Site
Every web site has these three things in common. There are different approaches to each of these parts and I will go over each one in depth. But our blog is going to focus on how to create a web page so you can understand that part 3 is going to be our main topic.
We will get into all three parts of a web site but first off we need to address what tools we will need to do our work. There are a large number of tools out there that can be very useful but many of them cost money. As we move along in teaching you how to create a web page I will address the tools that cost money and what their benefits are so you can decide for yourself if it is worth it to pay the price.
For now we will focus on the free tools that everyone already has just by owning a PC or Mac. And we will also address tools that you may not have but you can acquire on the web for free and use for free indefinitely.
The Main Tools
Everyone who is looking at this page definitely has the first two on the list. The FTP Client although built into Windows and OS X there are better ones out there and they are free.
I recommend FileZilla. It is free and easy to use. You can do a lot of development on your local machine but once you decide to put your work up on a host then will need a program like FileZilla.
I don’t want to overwhelm you so I will give you homework and you can come back later for the next lesson.
Homework
I usually would recommend waiting a day for this all to sink in. But if you fell like you are ready to move on to the next step as you learn how to create a web page then click here for Step Two - Intro to HTML.
If you are thinking of hosting one website or multiple sites then Host Gator has the plan for you. It may not be the cheapest but that is because you are getting top notch customer service. If you want low prices and good customer service sign up today at Host Gator!