STEP 3

left arrow
To Step 2
Home page >> Step 3 >> User Interaction
User Interaction

User Interaction

As you saw, HTML itself is used to present your content and your stuff to your visitor. HTML alone unfortunately is not flexible to handle data manipulation and data processing, therefore user interaction.

Before I proceed deeper in the subject, I want to first show you a quick-and-dirty, basic, form of pseudo-interaction you can add to your site by using plain HTML (and maybe avoid using any other technology, at least for the first version of your site).

Invoke email client using HTML

One very pratical way of adding a basic form of interaction, is instead of writing to the user "for information blah blal blah send email to something@something.something", you can have a link to your document and by pressing it, the email client on your visitor machine will be automatically invoked and present to him an empty email message to send.

By adding the code below to your HTML document:

<a href="mailto:something@something.something">Contact me</a>

you will create a link with the title "Contact me" and once your visitor clicks on it, an empty email form will open in front of him with the "To:" field pre-fileld with the address something@something.something, so the only thing he needs to do is to complete the body of the email and press "Send". Voila! Your visitor just sent you something!

Obviously there are cases where you would want to have a richer interaction with your visitor than this. As you learned during your Step 3 introduction, code can be executed either on the client-side, server-side or both. In this section and for the purposes of your initial learning experience on how to make your own site, I will cover an introduction to the client-side part and more specifically an introduction to Javascript and briefly mention a few things on the other methods. Bear in mind though that client-side scripting is usually being used for user interaction which requires fast response to the user and does not require heavy data manipulation or data storage, wheras server-side scripting is preferred for heavy data manipulation and data storage.

Introduction to Javascript

Javascript is a client-side scripting language which is being used in order to improve the design, validate forms, detect browsers, create cookies, and much more in millions of web pages. JavaScript is currently the most popular scripting language on the internet, and works in all major browsers.

I would characterize Javascript as a lightweight, interpreted (i.e. no compilation is required to run Javascript code) programming language which can be used either embedded in HTML or referenced from HTML and is free to use by everyone. Do not confuse Java with Javascript! They are completely different! Javascript resembles Perl more and not at all Java (for those of you who know how to program in Perl and Java).

Javascript is an Oblect Oriented Programming (OOP) language and the most commonly used model to add interaction to an HTML document, is the HTML DOM (Document Object Model). In order to get an idea of what OOP is, let's write our first Javascript "Hello World" example.

Your first Javascript code

In an empty HTML document body part, write the following code:

<script type="text/javascript">
  var example_text="Hello World!";
  document.write(example_text.length);
</script>

Which will result in:

The <script> tag denotes the start and end of the Javascript code. The var is a variable declaration and the document.write is an OOP call to the document object model (DOM) in order to write to the screen the length property of the declared variable.

I know that for some of you (especially the non-programmers ones), this must have sounded like Greek. That is why I am going to proceed with presenting you a more practical example on how to interact with your visitors.

In an empty HTML document (name your file ex_jscript2.html) body part, write the following code:

<div id="example_jscript2">
  Hello? What is your name?
  <form action="ex_jscript2.html">
    <input name="name" id="name" type="text" label="Name" onchange="document.getElementById('example_jscript2').innerHTML = '<center> <br/> Hello ' + document.getElementById('name').value + '! How are you? </center>'" type="text">
  </form>
  (Hit Tab or Enter/Return or click off the field to submit your name.)
</div>

When you open the file ex_jscript2.html, then you will get a first screen prompting you to enter a name. If you enter, say, "John":

Screen 1:

Jscript example2 screen 1

Then after pressing enter, tab or click outside of the input textbox, you will get:

Screen 2:

Jscript example2 screen 2

If we go over the code, we will see that HTML is being used to create the input form and Javascript to handle the change that occurs in the form (onChange attribute). The HTML DOM includes a method called "getElementByID()" that allows you to identify a specific tag by the value of its id attribute. Therefore, by using this method through Javascript, we can get the value entered by our visitor and use it as we please. In this case, we use it to construct an HTML file and write (in center location) "Hello Name entered! How are you?", therefore implementing some interaction with the visitor.

Javascript browser support

As was mentioned before, all main browsers support Javascript, but bear in mind that they also offer the ability for their users to disable Javascript. If someone does that, then your site will lack the Javascript functionality and in other words, your site ain't gonna work for them!

In order to overcome this possibility, I have a tip for you which I suggest to always do with web pages of yours which use Javascript. Use the <noscript> HTML tag, in the following way:

<noscript>
   Enter the text here you want to appear for a visitor who has disabled Javascript support from his browser
</noscript>

The part within the <noscript> tag is being displayed only if the browser has Javascript disabled, therefore prompting the user that your page is using Javascript in order for him to re-enable the Javascript support. It will be particularly useful for your visitor, if in your text you include some instructions or link on how to re-enable the support.

Javascript Reference

As I described also in the HTML and the CSS sections, makemyownsite.com is not intended to be a mere Javascript tutorial or Javascript reference guide. It provides end-to-end essential and invaluable information on how to start with the idea inception, proceed to design, implement, upload, track and monetize on your site, giving you a 360 complete view on making your own site.

For more Javascript functionalities and examples, I am suggesting w3school's Javascript examples section.

As I also said in the introduction of Step 3, the best way for you to learn building, is to start writing and experimenting yourself, as well as take ideas from other websites out there (and there are a looooot of sites using Javascript out there) for your site.

Server-side user interaction

A sector which makemyownsite.com will not cover (since I consider it a bit more advanced so you should leave it for later), but I will give you some heads up regarding it, is the server-side scripting.

As you have learned, server-side scripting is used if there is some heavy data processing and data storage on your server (e.g. on a database you might have).

Some programming languages used in order to implement server-side scripting are Microsoft's ASP (Active Server Pages) with file extension .html and ASP.net (next version of ASP which was introduced with Microsoft's .net framework) with file extension .aspx as well as PHP with file extension .php which is an open technology. The way you declare a part of your code to be run on the server using ASP for instance is between <% ... %> or between <?php ... ?> for PHP.

Finally, I have to also mention a very useful feature that server-side scripting offers, which does not have to do with data manipulation. With server side scripting you can include a file within another one, making common code parts (like for instance a header section or a footer section of your pages which might be the same for all pages) easily manageable (you don't need to change all of your web page code, but rather just the include file). Plain HTML unfortunately does not support inclusion of pages.

To use or not to use Flash?

As I mentioned, there are also technologes, like Flash which are server-side as well as client-side. The main reason for using Flash though, is to add animation to sites (another way to add animation, which offers limited functionality and effects though, is to use animated GIF images with HTML). All these cool looking sites with flashy menus and animation are usually implemented using Flash. I will not be covering Flash for the same reasons with the ones used for not covering server-side scripting.

I would advise you not to be using Flash (at least not use 100% in your site) for one main reason (although Adobe claims that in the latest version of Flash this is taken care of). Search! If you develop something in flash, you end up embedding one file in your HTML and nothing else, which means that search engines just see one flash file which they cannot "open to read", therefore all of the search advantages will not apply for your site. Therefore, stick with writing text in your HTML using what you have learned so far, as well as next section's lessons.

Are you now ready to cover the last section of this step and learn how to write content?

left arrow Back to CSS