Understanding what are Webpages and Websites
Contents |
Introduction
This document is for the clarification of some common misconceptions about webpages and websites, many people who did a basic html tutorials or did some web development years ago in the .html files era tend to think that a webpage is a file and all the links of the menu load a different file, this was true but not anymore, some people come to the Joomla IRC channel to ask what is the file that they got to edit to change the home page, and we try to explain to them that CMS's in general don't work that way. The following sections should clarify this wrong ideas.
Webpage
Quoting from wikipedia wikipedia:Web page:
A webpage or web page is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device.
Long time ago a webpage where represented by a single text file with the extension ".html" containing the html code to render the content of a single webpage. So back then when a developer wanted to modify certain page from a website it just got to locate the file and edit it to see the new changes. This was the old way to work with websites in the past, some of those websites contained hundred of pages, so at this point you can imagine how hard and time consuming was the job to update content and styles in large websites.
This is the typical structure of a webpage based on .html files:
file: page.html +----------------------+ | header html code | | menu html code | | content html code | | footer html code | +----------------------+
For example let's say we have a websites with 20 webpages, each webpage have the same code header, menu, and footer, for a particular reason we got to update the header and menu code, all the developer got to do is to edit a file (any) and copy paste the changes to the other 19 files, now imagine if we got to do this with 200 pages, this is what some experts call non scalable systems, because they don't facilitate the growth of a project, instead they actually represent an obstacle. read more about wikipedia:Scalability
With the born of dynamic webpages powered by programming languages such as PHP, a new era for web developers arrived, now a webpage could be represented for one or more files PHP files that in conjunction generates the html code that the browser need to render a webpage, in other words, html files are optional and a webpage is not necessarily represented by a single file anymore.
This is one of the possible structures for a webpage based on PHP
file: header.php +--------------------------+ | header html+php code | +--------------------------+ file: menu.php +--------------------------+ | menu html+php code | +--------------------------+ file: content.php +-----------------------------------------------------+ | content html+php code (fetch data from database) | +-----------------------------------------------------+ file: footer.php +--------------------------+ | footer html+php code | +--------------------------+ file: page.php +--------------------------+ | include "header.php" | | include "menu.php" | | include "conten.php" | | include "footer.php" | +--------------------------+
As you can see the page is divided in to sections each represented by a PHP file, when the server request the file called "page.php" it mix all the content of the other files and generates the final html output, this way when a developer got to do modifications in the header or menu of it site, it just got to edit the "header.php" and save changes because any other webpage is including that file with the new changes. For example we can make a landing page like this:
file: landing.php +--------------------------+ | include "header.php" | | include "menu.php" | | some text and images | | include "footer.php" | +--------------------------+
The files "landing.php" and "page.php" includes the same file "header.php" to generates the header of the page, so any change on "header.php" will be instantly reflected on any other page that includes such file, no need to edit every single webpage of your website one by one anymore to have the same page header in all of them.
websites with thousands of pages, articles, pictures, videos and audio, can't simply relay in the old school webpages, they use instead complex systems called CMS's (Content management systems) such as Joomla, Wordpress, Drupal to manage all the information of the site, most of this data is not stored in files anymore, instead it is stored in databases an complex PHP programs fetch the data from the database, process this information and generates the resulting html code to send it to the browser to render the webpage. It may actually sounds complex but is actually an easy and clever way to manage the data of almost any imaginable modern website. Also CMS's adds more benefits for the developers and users of the websites because this systems adds layers of security, multilingual support, media files management, users management and more.
Website
Quote from Wikipedia wikipedia:Website
A website, also written as Web site,[1] web site, or simply site,[2] is a set of related web pages containing content such as text, images, video, audio, etc.
As said before old webpages where represented by files, then old websites where groups of webpages (files) linked by menus links, as simple as it sounds. Modern website relays on CMS's which manages all the website content and media files from the comfort of an administrative panel.
The following figure shows a rough representation on how a modern website replies a page request and send back the generated webpage output to the user.
[ User ] --> person who want to see a page | v [ PC ] --> device the the user uses to connect to Internet | v [ Browser ] --> application that the user uses to visualize webpages | v [ Page request ] --> message that the web browsers sends to request information | v [ Internet ] --> global communication network | v [ Web server ] --> is a dedicated computer used to host services | v [ Web service ] --> is the application who listen and reply to web page requests | v [ CMS ] --> is the web application that runs on the web service manages website data | v [ Request processing ] --> the CMS determines what kind of information is being requested | v [ Security check ] --> the CMS check for common attacks attempts and validates the user credential (login = password) if needed | v [ Fetching data from database ] --> the CMS fetch all the information it need from the database | v [ Generating page output (html code) ] --> the CMS mix up all the page sections (header, content, footer, etc) into a text stream | v [ Page response ] --> the text stream is converted in to page response | v [ Web service ] --> the web service takes the page response and issues the transmission of such information | v [ Web server ] --> the web server send the data through Internet | v [ Internet ] | v [ Browser ] --> the browser interprets the received response and renders the webpage | v [ PC ] | v [ User ] --> the users visualize the webpage on the computer screen
With all this examples we want you to understand that web development have evolved with the pass of the years, and most things now works different, so the web developer have to adapt to this new constant changes. In the past, change the content of a webpage was a straightforward task, but now in the present with the arrival of CMS's things are quite different, content of articles are edited with online editors that looks like the editors of your email clients, the layout, colors and styles of the website are defined by templates, and the content of the sections of the webpages are defined by CMS extensions such as modules, plugins and components. Thus if you want to change a webpage or a section of a webpage content in modern websites, is very possible that you have to edit more than one file or edit no files at all (as crazy as it sounds).
