Website Design - the First Step

This first tutorial will give a basic overview of the different aspects of a websites and the purpose of the many different languages available to use.

The languages that will be covered are HTML, CSS, JavaScript, PHP, mySQL. First a brief and hopefully easy definition of each language.

HTML - The scaffolding and content of a site.

CSS - Where the content is placed and how it will appear (style).

JavaScript - Dynamic content vs Static content, i.e. it is what makes content change or move around.

PHP - Web page generation, processes that make the site do something like a calendar system, or email.

mySQL - A place to store content to be used later, i.e. comments, blog articles, etc.

HTML is called a markup language because it does not actually do anything, rather it tells the browser how to process a page. You might have heard of xHTML which is the same as HTML but strict. This means that in HTML where you could use a tag - a keyword surrounded by < > you could capitalize that keyword or make it lowercase. However, in xHTML the tag must be in lowercase. I.E. < br > vs < BR >.

HTML

HTML is a markup language, meaning delimiters or in this case 'tags' are used to designate differences in content. Tags are surrounded with brackets: < >. All html tags must be closed via the / either like the above example or in some cases where there is no content to be surrounded by a tag like a break, you put it at the end: < br/ >.

There are two main parts of the HTML document the head and the body The head is in charge of 'meta' data or content that is not found in the body of the website. One example is the title, or the text found in the very upper right hand corner of the browser. Everything found in the body is going to be shown in the viewing section of the browser.

CSS

While HTML is a series of tags delimiting page content, CSS acts as containers of HTML content. There are a few methods to specify what HTML content is contained by CSS. One example is the . Any content surrounded by the ... tags is styled by accordingly. While it is possible to style HTML content within the HTML document (inline styles) this is considered bad programming practice. A better method is to give identifiers to HTML content and use an external style to specify how the content should be styled.

Simply put css acts as a way of identifying elements inside of an HTML document and styling them accordingly. The two main methods this is done is with the class and id identifiers. Example of their use is < div id = 'div1' > ... . An id specifies one HTML/CSS element. A class can specify many. Id's are unique, classes are not. Once a div has an id in an external style sheet it can be reference accordingly.

#div1 { text-align: center; }

This tells the browser that anything found within the div with the id of div1 should be center aligned.

JavaScript

JavaScript is difficult to understand because a web page is viewed by the browser much differently than how a human views a web page. While this is an advanced concept, understanding this before learning JavaScript will make JavaScript much easier to use. A browser follows what is called the DOM or document object model. Every element shown in the browser is connected in a large tree structure. JavaScript can be used to walk up and down this tree to change the different branches and leaves of the tree.

One easy example of this is the . Remember from the HTML section that it is one of the core parts of an HTML document. In this way you can think of the < body > as the top of the tree. If you place an element in the body it is like a branch coming from the top of a tree to that element and connecting it. Now that there is this connection you can use JavaScript to be able to change whatever is at that branch.

The language itself is very similar to c and is fairly easy to learn. What is difficult is understanding how to navigate around the DOM to make dynamic web pages.

PHP & mySQL

With the understanding of HTML/CSS/JavaScript it is possible to make interactive websites. But what if you want to be able to save content that is provided by a viewer of your site, i.e. a comment. The most basic use of PHP is to get content submitted from an HTML site and put it into a mySQL database.

A database is like an excel spreadsheet, or a bunch of rows and columns that are able to hold many types of information. PHP and mySQL are the most common and free combination of script/database languages on the web right now.

PHP is considered a scripting language. This is because it is not compiled, i.e there is no .exe or executable like if you are running a program on your desktop. Instead when a website needs something to happen it calls a PHP script which is immediately interpreted by the server that is hosting the website.

This is an important aspect that differs PHP/mySQL from the other languages. PHP/mySQL are run from the server, or the computer that your computer downloaded a web site from. HTML/CSS/JavaScript are run after the files have been downloaded to your computer by your computer via the browser.

This connection has many important and difficult implications. One is that you only have one shot at downloading content from a server. After the page has been downloaded to download something else you have to reconnect to the server to get fresh content. There are a few ways to do this, either requesting a new page or by using JavaScript.

Review

Some final terminology is backend vs. frontend. Frontend is what is being processed by a host (your) computer via the browser. This is done with HTML/CSS/Javascript. You have gone to a url and a server (computer) has sent you some documents. Your browser looks at these documents and figures out what they say (HTML) and how to make them appear(CSS). If it wants to make the content move around it will use JavaScript.

The backend is everything the server can do, this includes providing the HTML/CSS/JavaScript documents to sending off email. This is done via PHP, and if any content is to be stored it is stored using a mySQL database.

Hopefully this will have provided a basic understanding of the different languages and aspects of a website.