10/12/2010

How to Build a Website

Assim Al Marhuby

More and more websites are being created day by day, it’s a way of giving an organization or yourself an online identity over the internet. Building a website requires knowledge in various fields. This article will explain the ideology of websites and the technologies required for building a simple static website.

The first thing that needs to be explained is the ideology and the abstract idea of how websites work. A website is a collection of web pages and resources (images, sounds, etc.), these web pages contains coding that describes how a page should be displayed on the web browser. These web pages and resources are located on a computer called a server which has also has a server software that accepts requests from users accessing the website and gives back the response along with the content that need to be displayed on the web browser. A request would be something like typing “http://www.google.com” on your browser’s address bar, this would connect to the location specified on the address bar and will give you a response along with the website contents.

The second thing that needs to be explained is something called a Markup Language. A markup language is simply a language that describes how text and page content needs to be displayed. Markup languages uses tags that are distinguishable from normal text. The markup language that is most commonly used for creating websites is HTML. The tag names written in between “less than” sign and “greater than” signs. In HTML, the tag name for opening a paragraph is “p”, so to open a paragraph in HTML, you would write <p>. Most HTML tags have a closing tag, this tells where the effect of the tag ends, this is the same as the opening tag name but with the backslash before the tag name, so to close a paragraph tag, you would specify it as </p>. So to create a complete paragraph in HTML, you would write it something like this: <p>This is a paragraph.</p>. Of course, the tags won’t be shown on the output of the page since they only describe how texts should be displayed. A combination of all of these together can be saved in a web page file with the extension of either .htm or .html, both works but the latter is the most commonly used.

The third thing that needs to be known is Cascading Style Sheets (CSS). This is a style sheet language that describes the format and looks of markup language tags. The main objective of CSS is to separate the style and formatting including colors, sizes, and font from markup languages. CSS also allows you to specify tags and add some properties to it. In HTML, there are actually special tags that describes the formatting and looks, but it would quite hectic to describe each and every thing, so if you have 10 paragraphs and wanted them all to be bold, you have to make them all bold one by one, but in CSS, you can just write it once and all paragraphs will be bold. An example of how you would make paragraphs text bold is you’d specify the tag name, add a property in it, and give it a value. To illustrate, this is how it’s done: p{ font-weight: bold; }. A CSS could simply be a file with a .css extension that has all the style descriptions in it and can be linked in your web pages with a special HTML tag. Another way of using CSS is to enter the style descriptions inside the web pages directly.

All in all, I have just explained the basic idea of how websites work and the basic idea of what is needed to create a simple static website, you would need to learn HTML, CSS and the other stuff I mentioned if you’re interesting in creating a website. To create a more professional website, you would need experience in website scripting languages (such as PHP, ASP.NET, Python, ColdFusion, etc.) to create dynamic websites, and you would need to know how to use databases (such as MySQL, Oracle, etc.) to help you store and retrieve data in an organized manner.

Partner Events