It is time to introduce some basic notions on Web site programming. We offer an introduction to the complex world of programming and its technologies, as a way of providing some guidance and for you to get to know the indispensable concepts in order to understand how a Web site is rounded off and works.
HTML / XHTML / CSS
Every Web site is done based on two mark-up languages, HTML or XHTML. A mark-up language is a computer language that allows for the structuring of the text in a Web site. A language of this type encodes a text, which means that, apart from the text itself, it includes marks or labels in which information about its structure is included. It is called mark-up language because it uses marks that indicate the way in which to organize the content of a Web site.
The most popular mark-up language when creating Web sites is HTML (HyperText Mark-up Language).
Labels are instructions on how to organize the data (text and images) and how to lay them out. These descriptions are written between triangular brackets <> in the content of the site itself. Most of these marks must, in turn, open and close in the corresponding part of the text. Thus, for instance, to indicate a new paragraph the following mark must be included: <P> the paragraph in question </P>. To close a label a bar is placed: /.
The main marks used in structuring a document are the following.
sets the beginning of the HTML document for the browser to interpret it and identify it as such.
sets the head of the document, which includes the information about it that is not shown in the browser. The head contains the following marks:
<TITLE> indicating the title.
<LINK> indicating style sheets (if the presentation is separate from the text).
indicates the body or main content of a document. Within the body there are other labels, such as:
<H1> to <H6> indicates the title or headline, in different sizes (bigger or smaller).
<P> indicates a new paragraph.
<TABLE> indicates the presence of a table.
<A> indicates that there is a link, inside or outside the Web site.
<DIV> sets the beginning of a sector in the site.
<IMG> indicates the presence of an image.
<> indicates that the typography goes in italics.
<b> indicates that the typography goes in bold.
It is worth mentioning that in many cases those using HTML for the creation of a Web site use introductory labels, such as those related to the typography. In the HTML itself the text is structured and the way in which it will be introduced before users: colours, backgrounds, alignment, typographies, body of fonts, etc. Nowadays, however, Web designers prefer to separate the structure of the text (paragraphs, titles, images, lists, hyperlinks, among other aspects) from its presentation, and that is why style sheets are applied, as we will explain later.
On the other hand, in order to create a Web site using HTML a text editor is required (he accepts texts without format), such as Notepad, WordPad, Text pad or GNU Emacs, or special programs to edit HTML, such as Adobe Dreamweaver or Microsoft FrontPage. These two programs allow for the creation of Web sites called WYSIWYG, What You See Is What You Get, editors. Unlike text editors, these programs enable users to see what they are doing while editing with HTML.
The mark-up language XHTML (Extensible HyperText Mark-up Language) re states the HTML, seeks to turn it into the standard that replaces it in doing Web sites. This language is used only to structure the information of a document, rather than to include instructions on the presentation and visualization. XHTML follows the trend laid by the W3C (World Wide Web Consortium, an organization that controls Internet standards), according to which it is necessary to separate the text from the way it is presented, as a way of making sites more accessible.
Therefore, graphic design aspects are included in the so-called style sheets, created, for instance, in CSS language (Cascading Style Sheets). In this way, the very same text may have different styles for different devices: computers, PDAs, cellular phones, speech synthesizers, printers, etc. This increases accessibility to sites, thinking of accessibility as how easy it is for a device to be accessed by every person, specially those with diverse disabilities, given that a Web site in which the text and presentation are separate can be read by a loud voice reading device or by the Braille reading device in a simpler way. Besides, the same text may have several designs even when in the same means.
Most people interpret XHTML language in the browser’s last version (Opera, Mozilla Firefox, Netscape, among others) although older versions interpret XHTML as HTML. A major stumbling block in the common use of XHTML is the fact that Internet Explorer (Microsoft) does not read it. However, given that XHTML answers thoroughly to the standard mentioned by the W3C, it continues spreading.
Some differences posed by XHTML with respect to HTML are the following: all labels must be closed, lower cased and inverted commas must be used for attributes. Besides, images must always take the a descriptive text, also to increase site accessibility.
CSS (Cascading Style Sheets) is one of the most commonly used style languages. Style sheets, as we have already explained, are instructions related to the visual presentation of content. In general, they are an attached file or a text file, given that although they may include an HTML file, it is less functional.
CSS language is used in the presentation of written documents in HTML or XHTML. It allows for the specification of the way in which part of the text will be shown – colour, font, body, line-up, background, tone of voice, etc. CSS is organized in layers that coincide with text divisions in HTML. Each layer has particular directions. CSS comprises these features: fonts; colours and background; text (line-up, word space); box (margin, border, filling): classification (lists, visualization).
The benefits of using this language style are several. On the one hand, the updating of both contents and graphic aspects is simpler if the text and presentation are separate. Modifications of, for instance, colour, background and typography can be done easily. On the other hand, the level of accessibility is greater, given that users may shape the style sheet of a Web site suiting their needs. Therefore, blind people may use a speech synthesizer or Braille system easily, given that these devices work better if the text and visual presentation are separate.
The Web site may also have different style sheets, one for each type of device (computer, cellular phone, printer, etc). Lastly, by using CSS or other style, the HTML file will have a smaller size and navigators will be able to read a Web site far more easily.
Static Web site.
A static Web site is the one that neither changes its content frequently, nor shows animations or interacts with users. This is why this sort of site is called static. A Web site based only on HTML and XHTML is static. In this case updates are done (generally a Web designer), sporadically (given that introducing changes entails reloading the site), through a text editor or a WYSIWYG editor.
Static Web sites have, as every site, a nominal address (URL) with which users look for it trough their browser. You may ask yourself which is the way in which you get to see a Web site. Well, the browser requests for a site to a Web server (the request is called http, that is to say HyperText Transfer Protocol) through their address (URL), the server sends the browser the HTML or XHTML pertaining code, and this undertakes to interpret said code and permits users visualize the site on the screen.
Dynamic Web site
We present a short description of the main technologies used in creating dynamic Web sites:
Flash is an Adobe multimedia program used when creating animated presentations. It is a client-side application read by the most common browsers. Animations are done based on vectors and images based, in turn, on pixels (called “raster graphics”) and may include audio and video. This program is among the most commonly used in adding animation and interactivity to Web sites.
Since 2002 Microsoft has launched ASP.NET language into the market. This language is more ordered than ASP, given that the content of a site is separate from its dynamic behaviour. On the other hand, a limitation of ASP and ASP.NET is that this language can only be executed by the Windows operating system.
We are now dealing with a programming language used in the creation of dynamic Web sites. Its name derives from PHP Hypertext Pre-Processor, and PHP, in turn, means Personal Home Page. The PHP code is included in HTML, with special labels. It is a server-side technology, given that it decodes and executes the PHP code of a dynamic site. The browser merely gets the execution. The following are some of its main advantages:
It is a language that can be executed in different operating systems (Linux, Windows and Macintosh) and most common servers.
It can program sites with dynamic contents, combining it with the chief data base servers, such as MySQL. In this way sites developed with PHP not only present great dynamism but also excellent data management. This is why this language is ideal when creating catalogue Web sites.
It is a free language and therefore accessible to every person.
Perl is a programming language that is nowadays used in designing Web sites, but it was originally used to process text. Its name means Practical Extraction and Report Language. It is a user friendly and very efficient language, it has an excellent text processing system. This language is also server-side application and, on the other hand, it can be executed by the Linux operating system.
Check our friends' websites