Introducing web technologies
A website is made up of lots of different technologies and types of file. Part of the challenge of web design is learning how to use these different tools and technologies together, and how to pick the right ones for each aspect of your design. We’ll cover the most important of these later in the book, but for now, here’s a summary of the role they can play in your website:
HTML
HTML is the main language used for writing web pages. When somebody downloads one of your web pages, the first thing they are sent is an HTML file. HTML enables you to describe the structure of your text content, and to tell the web browser where it can find the other files for the web page, including its images and CSS files. HTML5 is the latest version, but many people are still using browsers that don’t support its new features, so you need to make sure that your website also works without these.
CSS
CSS is used for the design and layout of your web page. It contains instructions for colors, fonts, and the position of different elements on the screen. CSS3 is the latest version and introduces features like rounded corners and multiple background images.
JavaScript
JavaScript enables you to update your web page after it has downloaded, and to respond to user actions on it. Some people have written sophisticated games using JavaScript, but it’s typically used for simple effects like refreshing the screen with the latest news, or revealing some new content on the page when somebody clicks on a tab. JavaScript is also often used to check that a form has been completed correctly (for example, by checking there is an @ sign in an email address). This check can be performed before the user submits the form, so that the user gets instant feedback. Not all devices support JavaScript, so you need to ensure that your site (especially its navigation) also works without it.
Java
Confusingly, Java and JavaScript are not the same thing at all. Java enables you to run little programs inside your web page, as long as the browser has a Java plug-in. It’s extremely slow, so almost nobody uses it for new websites today. If you already have web content in Java, consider recreating it using JavaScript or Flash.
Flash
Adobe’s Flash is used for more sophisticated interactions. You can use it to create animations and games or to display rich media, such as audio or video. Flash requires a plug-in to enable users to see and interact with its content. iPhone and iPad owners can’t use Flash on their devices.
Like JavaScript, you shouldn’t depend on Flash for features of your website you can easily implement another way.
AJAX
AJAX is a special way of using JavaScript to update a web page, by getting new information from the server without updating the whole web page. When you use Google Maps, for example, it doesn’t download the entire planet’s worth of maps to your computer. It just downloads the bits you want to see. If you zoom in, it downloads a higher resolution map of the area you’re looking at. If you pan to another town, it fetches its map from the server. AJAX is the term used for the combination of technologies that enables the website to fetch the new information you need, whenever you need it. If you need to use AJAX techniques, you’ll need to master HTML, CSS and JavaScript first.
Server scripting languages (PHP/MySQJu)
There are a number of different server scripting languages, and they tend to go through fashionable phases. The most popular one today is PHP, but others include ASP and Perl. These enable you to write programs that run on the server, so that web pages can be customized for each visitor. This is particularly useful if the site needs to offer personalized content, such as a social networking site that will want to serve a different home page to each person depending on who their friends are.
Server side scripting languages are also used for sites with lots of pages. Their content can be stored in a database, and when somebody wants to look at it, the program on the server makes the web page HTML and sends it out. It saves you having to maintain hundreds of web pages, because you can just take care of one template, the scripting program, and the database of content.
A plug-in is software that is added to a browser to enable it to handle new types of content. If users don’t have the plug-in, they won’t be able to view that content, so you’ll need to provide alternative content, too. Very few websites will be able to convince people to install software just to view that site, so you should stick to using plug-ins that are already popular.
MySQL is the name of the database software most often used with PHP. Hosting companies will charge a bit more for servers that support PHP and MySQL, but can usually help you to set up the database. You can find lots of free PHP scripts you can install on your server to offer features like forums.