STEP 3

left arrow
To Step 2
Home page >> Step 3
Engineer

How to build my site

Now that you have conquered the "heart" of making your site which is designing it, it is time to move on putting all the pieces together in order to build it.

This step will start you off with the basics and teach you about HTML. You will learn how to write your first HTML page as well as cover all the major aspects of HTML.

Moving on, at the CSS and the User interaction sections, you will learn about the combination between HTML, CSS and Javascript as well as other web building technologies, in order to create your site with increased user experience combined with the ease of maintenance. You will also be taught to create interactive pages, through which your visitor can communicate information back to you.

Finally, this step will tip you on how to properly write your content in order for your site to be effectively discovered by search engines based on relative keywords, touching the Search Engine Optimization (also referred to as SEO) subject.

Hand-written code

The beauty of developing for the web is that you do not need anything fancy to develop your web page. A simple text editor (as we also saw during the Basics section of Step 1) is sufficient. I always prefer hand written code to the use of WYSIWYG (What You See Is What You Get) tools, for several reasons, some of which are the following:

  • You always have full control of your code! The WYSIWYG tools have a tendency of producing a bunch of unreadable extra code which only confuses you.
  • Once you get the hang of writing hand written code, writing code becomes faster compared to using automated packages.
  • You constantly learn more because you are not relying on ready made stuff. You dig deeper in the HTML subject. And as you probably already know, Knowledge is Power!

Don't get me wrong here. I am not suggesting to always hand-write code every time (although I do), but what I am suggesting is that learning how to write code by hand gives you an extra option.

Where does code get executed

As you learned in the Basics section of Step 1, when your visitor enters your website name in his browser, your web server "serves" back the page to him, and the page gets processed by your visitor's (client) browser and gets presented to him properly.

In theory, since there are two computers involved in this transaction, code can either run on your visitor's computer (client-side or front-end) or on the web server computer (server-side or back-end) or on both. As it turns out, pure HTML files (extension .html, .htm) run on the client. If you add interaction to your HTML code, then you can either run the code on the server-side (by using technologies/languages like ASP, PHP) or on the client-side (by using for instance the Javacript language) or both (by using the Macromedia - now Adobe - Flash technology).

Client-side scripting enables interaction within a web page. The code required to process user-input is downloaded and compiled by the browser. An example of a client-side interaction is a menu rollover which you have probably seen a lot at websites (it is the effect where on mouse-over, a navigation option expands to its sub-level). The characteristics for client-side scripting are:

  • More immediate (faster) response to interaction
  • Secure transaction (since no information is being transferred over the internet)
  • Its performance is affected by the processing power of the client's computer
  • It is reliant on the client using a browser with plug-ins which can support the execution of the code
  • No source code of your scripts is visible to your visitor

With server-side scripting, completing an activity involves sending information to a web server across the internet. The server then runs a program that processes the information and returns the results, usually a web page. An example of server-side processing is search engines where a keyword is sent and a program on the server matches the word or phrase entered against an index of website content. This occurs since the web server has all the information needed for such processing (i.e. the index of website content). The characteristics for server-side scripting are:

  • More efficient to complex transactions and data manipulation
  • There exist security considerations when transferring sensitive information to the server and back (use of https - secure http - protocol necessary in this case)
  • Its performance is affected by the processing power of the server computer
  • It is not reliant on the client having a specific browser and plug-ins
  • All source code of your scripts is visible to your visitor

There is also another type of interaction/scripting which is the stateless interaction (like Macromedia's - now Adobe's - Flash technology). Flash can store and process information both on the client- and on the server-side. An example of this interaction is a Flash-based checkout process. Information the user enters (such as delivery and billing addresses, credit card details, etc.) can be stored and validated on the client-side. Once the required information has been completed a connection is established to the server and the order sent for processing. We will talk a bit more about Flash later on.

Leveraging code

I will cover a lot of stuff in this step, but as I always like to say, if you are to build something (in this case your site) don't stick to theory too much. Theory is going to give you the necessary tools for your construction work. In order to really learn it, you have to try and get your hands on the subject.

In this process, it would be extremely helpful for you to study how other people have implemented their sites and get ideas, as well as (why not) code. Looking at other sites source code can become your best tutorial in coding for the Web. There are millions of websites out there, therefore what better source of information could exist from the internet itself? If you find a nice feature someone has implemented on their site, you can leverage it for yours (provided that there are no associated copyright issues, in which case you should follow them). As I said before, why re-invent the wheel?

Observing other sites source code is very easy. Either right-click on the page and select "View source" or a similar option your browser has, or go through your browser's menu (e.g. for IE go to View -> Source). You will then see the associated HTML code, links, image locations, etc. for that site. Once again though, beware of copyright issues if you are to use someone else's code.

Are you ready to start building your site?