This article goes into a bit more detail about how websites are formed.
The concept of a website, without getting technical, consists of a web server and a client. The website is stored on the web server and it is transferred to the client when they wish to view it. The browser stores this information in a temporary folder as a HTML file (amongst other file types such as images). It then interprets the whole page in the browser and does some stuff with it.
It then performs the task of painting on to the screen (the screen is a software element that represents what is on the display, the hardware element). The painting process involves creating the elements on the client's screen. Since computer systems have become more and more 'powerful', the rendering of websites has become much easier on the system and in turn more information can be placed on a site before having an impact on the client's computer system.
The file that is stored on the client's computer system is deleted when the browser cache is cleared. This means that reloading a page becomes faster as the data on the server can be patched together with the data on the client's computer.
Types of languages
There are two core types of language in web development; client side and server side. Whilst HTML is a language, it is never declared whether it is a client side or a server side, but because it is executed on the client's computer, it could argued that HTML is in fact a client side language.
Client side languages are executed on the client's computer system whereas server side languages are executed on the server, JavaScript, ActionScript (Adobe Flash) and VBScript are all examples of client side languages, whereas PHP, JSP (Java) and ASP.NET are examples of server side languages.
Document type
It is somewhat important to inform the parser what type of document to expect.
The !doctype
instruction tells the browser this information. The document type
used with HTML is called html
<!doctype html>
Structure of HTML
HTML follows a system of a tree. A tree can be seen as having children or not having any children and in turn is referred to as a leaf.
HTML is placed inside a less than <
and a greater than >
symbol. This is called a tag. Most tags must be
closed (all tags must be closed in XHTML). For instance, with a paragraph of text, the paragraph is
opened and then the text is inserted as a an element of it, and
it is then closed.
A tree of HTML takes form as shown in the next sample:
<!doctype html> <html> <head> <title>Sample</title> </head> <body> <p>Hello world</p> </body> </html>
The previous sample show what is called a HTML tree. It is easy to read as a tree and often makes parsing easier.
-
the children of
<html>are<head>,<body> -
the child of
<body>is the<p>element. -
the grandchild of
<html>is also the<p>element.
For any website, a client can view the processedProcessedThis means processing on the server has been completed such that any PHP, JSP or any other server side language has been processed on the server so that the client never sees this. source at any time.
The next tutorial will cover attributes and elements.
