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 and URL of a webpage based on .html files:
URL: http://example.com/page.html 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
URL: http://example.com/page.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:
URL: http://example.com/landing.php 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 rely in the old school webpages structures, 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 websites because this systems adds layers of security, multilingual support, media files management, users management and more.
You may wonder if a webpage is not represented by a file anymore how can I determine what I need to edit to see changes in a page?. Well there is no straight answers for this question because modern webpages could be defined by a database records, a set of URL parameters or a combination of both, CMS's uses menu systems where each menu have a set of menu items, and each menu item could have child items, for instance, a menu item could represent a specific webpage, but another menu item could represent another webpage which have other sub-pages, this may sounds complex but this is actually a really clever, flexible and scalable systems.
Lets take a look at this URL's and what they can tell us just reading at them:
http://example.com/content/articles/5
If you take a quick look you can easily figure out that the URL parts are separated by slashes "/", the first part "http://example.com" is the domain name (pretty obvious), the second part "content" is tell us something about page content so we can presume that we are dealing with a content management system, the third part is "articles" this is telling us that we are looking to an specific kind of content, in this case articles, and the last part "5" is a number, if we got to guess, we can say that is the article ID that identify the article and it database record.
Lets see this other URL:
http://example.com/content/category/8/article/12
The only difference with this new URL is that we have now a parameter called "category", in short, we can say now that the URL have something to do with a content manager, and we are looking at the article number 12 that belongs to the category number 8.
So if we want to edit the content related to those URL's is possible that we got to longing to the CMS administrative panel, find the content manager, search for the correct category and article and edit the content we need to change, so as you can see some times yo may need to edit no files at all to change page content.
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).
