Tuesday, March 23, 2010

Creating your actual website

After looking at some bad websites, I looked at other lists highlighting websites which were both pleasing to the eye and easy to navigate. Many of these are what you would call "Photoshop" websites: a stylized background image and more borders are designed in Photoshop, before being integrated into the page using CSS code. It's a lot easier to create an image and just link to it, rather than try to create complex effects using code.

Talking about codes - it's good to know what makes a good website, but how do you create that website itself? The basic internet code is HTML, Hyper Text Mark-up Language. This code is rather simple and is interpreted by the browser, which returns the content with the basic formatting added by HTML. However, HTML is the earliest internet language and was consequently not adapted to formatting the page. It's possible to create complex layouts like that of this very nice website I found, Feed Stitch, by using HTML - but it's very hard, and might not look the same in all browsers. The other problem with using HTML to format your pages arises in bigger websites. If you want a 100 pages to follow the same layout, you are going to have to copy the same formatting code into every single one of these pages. This will make your code very messy and make it much harder to find errors in it.

For this reason, the World Wide Web Consortium (W3C) created a new language specifically designed to formatting text, called Cascading Style Sheets (CSS). CSS is recognized by all browsers. You don't even need to write in your HTML code a special code tag to indicate you are writing in CSS, as the browser will automatically understand. However, CSS is not usually written inside the HTML code but in an external page that is then linked to the HTML file. This makes your code a lot neater, as content and formatting are stored inside separate files. You only need to write one stylesheet and then link to it from all your other HTML pages.

A few years after HTML was developed, the W3C created a "new" version of HTML called XHTML which is overall very similar to the original. It simply is a slightly stricter version of HTML: all the tags must be properly closed, and written in lowercase. This is what good websites should be designed as anyway, so pretty much any neat HTML code is XHTML.

XHTML and CSS are content languages. This means that they display information for the user, give the user links to click on, change colors when you click these links - but that's about as far as interactivity goes. XHTML pages are basically text put on a computer screen. If you want your users to be able to change something, ask questions, fill in forms, etc. you will need other programming languages to help you.

Javascript is the most basic of these interactive web languages. Javascript can be integrated into an HTML page, or linked separately, just like CSS. While you wouldn't really be able to form an entire game or interactive page in JavaScript, there are many "under the scenes" functions it can perform: for example, send you the information sent in a form, store information about the user's computer in the form of cookies, show different versions of your webpage depending on which browser is being used...In the past, JavaScript was also used to make somewhat cheap effects like a trail of hearts following the user's cursor, but these practices have fallen out of use. The advantage of Javascript is that it requires very little bandwith, so it is often preferred to Flash when both are an option. Javascript is made up of functions, which can be called by any HTML element. For example, the click of a "Submit" button may call the JavaScript Submit function which will send it to some other web address.

The next step is PHP pages. PHP is a server-based web language, which means the code is translated from the server, not from the user's website. This makes testing (and therefore learning) PHP a lot harder, but not impossible. Since it is server-based, PHP allows for more interactivity: you can store names, logins, passwords, etc. in MySQL databases and then use these to provide the user with really personalized content such as an online game, or a discussion forum. PHP also operates with functions, but it is strongly linked to databases. It is much harder to learn than HTML. Hopefully I will be able to master the basics of it in order to create my own interactive website!

W3 Schools. 2010. Refnes Schools. 26 March 2010 <"http://www.w3schools.com/php/php_string.asp">.

1 comment: