This article will take you from a blank screen through the creation of a simple website that has javascript functionality with data-bound content using knockout.js.
So, for starters, we’re going to talk about HTML.
HTML is the basic language most web pages are written in, and the way that HTML works is that by using various different “tags”, it is possible to create a rendition of those tags in the form of a graphical interface on to your computer’s web browser. there are a variety tags in HTML which have Various functions. some of the more commonly used tags are the <p> , <blockquote>, <span>, <div>, <img>, <a>, <form>, and <input> tags. These are the ones we’re going to talk about.
let’s get started with making a really really basic web page which is simply just a paragraph in the center of the page that contains a brief description of what the page is about, followed by a few links to other pages listed below, as well as an image in the top left corner of the screen representing our webpage, and finally a small form on the bottom of the page which visitors can use to send an email to the author of the page.
First thing is to create a new HTML file. This can be done through notepad.exe or any other text editor on your computer. Simple open up your favorite editor and create a new file called myWebPage.html in any directory on your computer (it doesn’t really matter, My Documents is an okay place).
Now we’re ready to get started.
So, if we break downtheir individual components the 1st section says that the page contains a brief description of what the page is about in the center of page.so, to do this were simply going to add in the following HTML tags:
<p> represents a new paragraph (or new block of text separated by a space above and below)
<center> will cause whatever it within it to be centered.
It is also critical to note that whenever a particular tag is used, it must be terminated as you will see below:
Here’s our paragraph in the center of the page:
<center>
<p>
Welcome to my web site, this page is a basic example of how HTML works
</p>
</center>
Its important to note the </p> and the </center> tags at the end of the text, listed in reverse order from the way that they were originally placed. This is because each HTML tag such as <p> actually indicates the beginning of a paragraph, whereas </p> indicates where the paragraph ends.
The same rules apply for every HTML tag, and every HTML tag must have an appropriate termination tag.
Often times, it is necessary to embed multiple tags inside of one another. For example – if we want to have a link inside of our paragraph after the text, that says “Click here” and makes the web browser go to a different page, we will have to use the <a> tag from within the <p> tag like this:
<center>
<p>
Welcome to my web site, this page is a basic example of how HTML works. <a> Click Here </a>
</p>
</center>
So, once the contents of your file myWebPage.html is exactly the same as the example above, go ahead and save the file. In order to view the page as a web page instead of as HTML code, simply open up Windows Explorer or My Computer and locate the file myWebPage.html wherever you saved it. Simply double-clicking on it should open up the page in your system’s web browser, revealing a paragraph centered with the text we placed in earlier.
Once you have completed this step, continue reading.
Okay, the file is open,but if you look carefully, the words Click here doesn’t do what its supposed to do, which is open up a different web page when you click on it. Well, the reason is because we never really specified what page to go to in HTML. The way that you specify specific properties for any tag is by including the property followed by an equal sign, and then the property’s value enclosed in quotation marks.
Doesn’t make sense? Let me try to show you visually what I mean:
If we want the Click here words to become a link to the page http://www.datafault.net , we have to specify that along with the <a> tag by using the ‘href’ property (don’t ask why its called that, I think its a tradition of sorts):
<a href=“http://www.datafault.net” > Click here </a>
Once you’ve made the change, your page should look like this from notepad:
<center>
<p>
Welcome to my web site, this page is a basic example of how HTML works.
<a href=”http://www.datafault.net”> Click Here </a>
</p>
</center>
Make a special note of the idea of properties inside of HTML tags, as this is a critical part of web page design, and is the only way to create pages that have any customization beyond plain text.
Lets briefly talk about some of the other HTML tags that do things on a web page — these are also quite important to know.
<form> tag
The form tag is used for creation of a user-input form, just like the forms you might fill out at the DMV or anywhere else.
In our plan outlined at the start of this document, there is to be a form at the bottom of the page where a user can input their name, e-mail address, a subject, and a brief message which can be sent via a button called ‘Send’ at the bottom.
So, for this it will be quite easy to create — we simply add a new <p> </p> to the bottom of our page which will represent a paragraph.
Then, in between the <p> and </p> tags we want to create a FORM.
So, lets go ahead and create a form and call it sendMessageForm . For this we will use the id property, since that is how we name things with HTML
<form id=”sendMessageForm”>
</form>
Simple enough, right?
Our entire page should look like this from notepad now:
<center>
<p>
Welcome to my web site, this page is a basic example of how HTML works.
<a href=”http://www.datafault.net”> Click Here </a>
</p>
</center>
<p>
<form id=”sendMessageForm”>
</form>
</p>
The next thing we must do is create a few input fields for users to type into. For this we will use the <input> tag along with the type property to create different input areas. We wwill also need to use the name tag with input fields because the <form> tag will use thsem when it is sent.
This is basically what the form will look like at the end, so that its easier to see what I’m talking about:
So first, we will create the area that says Your Name: [__________________] .
This is fairly simple, all we do is create another <p> and </p> tag, then inside of them we place the following:
Your Name: <input id=”inputName” name=”Name” type=”text” />
Next, we create ones for E-Mail, and for The Message, then finally the submit button, each surrounded by <p> </p> tags to put them on separate lines.
<p>
Your Email: <input id=”inputEmail” name=”Email” type=”text” />
</p>
<p>
Your Message: <textarea id=”inputMessage” name=”Message”></textarea>
</p>
<p>
<input id=”submit” name=”submit” type=”submit” value=”Send Message” />
</p>
Notice the type=”text” part, and how it is different for the E-Mail and Name fields than the Send Message button at the bottom. It is also possible to do a variety of other types like combobox, radio, checkbox, and password.
Your page should now look like this:
<center>
<p>
Welcome to my web site, this page is a basic example of how HTML works.
<a href=”http://www.datafault.net”> Click Here </a>
</p>
</center>
<p>
<form id=”sendMessageForm”>
<p>
Your Name: <input id=”inputName” name=”Name” type=”text” />
</p>
<p>
Your Email: <input id=”inputEmail” name=”Email” type=”text” />
</p>
<p>
Your Message: <textarea id=”inputMessage” name=”Message”></textarea>
</p>
<p>
<input id=”submit” name=”submit” type=”submit” value=”Send Message” />
</p>
</form>
</p>
Now, the last thing we’re going to do is to make the form send an e-mail when submit is clicked. This is accomplished by adding two properties to the form tag: method and action.
The method will be POST, which means basically sending data to whatever is listed in ACTION.
The action will be this:
mailto:mike@datafault.net
So, now our form tag will look like this:
<form method=”POST” action=”mailto:mike@datafault.net”>
instead of just <form>
Go ahead and save the file, and then open it up in your web browser. Fill out the form and then click ‘Send Message’ to drop me a quick line, or ask questions if you have any so far. You may notice that the overall look of your page seems quite boring compared to most other websites. The reason for this is because most other websites you thing called CSS styling. What CSS exactly is is short for cascading style sheets, but more specifically is definitions of what color, look, and overall design of the various HTML elements will be on a page.
The easiest way to do CSS styling is to use the style tag on any HTML tag. For the value you specify a CSS tag like “background-color” , a colon, and a value.
So, lets say we want our form to be in a box that is gray instead of white, in order to separate it from the web site.
To do this, we are going to use the style property with the CSS property background-color: gray.
So, go to the <p> that is above the <form method=”POST” action=”mailto:mike@fatafault.net”>
and add a new <div> html tag above it. <div> basically is a tag that represents a separate space or box.
Add the following above the <p> tag:
Source file
<div id="grayBox" style="background-color: gray">
and the </div> after the correct </p> tag after </form>
If you did this right your file will look like this from notepad:
<center>
<p>
Welcome to my web site, this page is a basic example of how HTML works.
<a href="http://www.datafault.net"> Click Here </a>
</p>
</center>
<div id="grayBox" style="background-color: gray">
<p>
<form id="sendMessageForm">
<p>
Your Name: <input id="inputName" name="Name" type="text" />
</p>
<p>
Your Email: <input id="inputEmail" name="Email" type="text" />
</p>
<p>
Your Message: <textarea id="inputMessage" name="Message"></textarea>
</p>
<p>
<input id="submit" name="submit" type="submit" value="Send Message" />
</p>
</form>
</p>
</div>
Now, once you have fully understood how all of this works, your ready to start thinking about Javascript.
The javascript tutorial will require that you know HTML and CSS quite well, so re-read this entire tutorial, research HTML tags and their properties, and then experiment with using different tags in different ways with CSS to create different designs.
When you feel like you have mastered both HTML and CSS, continue on to the Javascript tutorial.