![]() The path of the header.html page relative to the “main” pages will be: Our current directory structure will therefore be as follows We will store these pages on the filesystem, in a subdirectory of the directory containing the index.php, page1.php and page2.php pages. This is not to be confused with the header and footer HTML tags used in the code itself, we are using these terms is a more broad sense here.Ĭheck out the code for these two pages below: Then, by using PHP, we will import this common code into each page.įor this example we can divide the common code in just 2 parts: an “header” part, that will be stored in a text page called “header.html” and a “footer” part, stored in a page called “footer.html”. ![]() Here is our plan: we will move all the code that is in common between the pages, out of the pages themselves, to different files. The only thing that changes from one page to another is the content of the “main-contents” div, all the rest is exactly the same. Such a situation can be easily fixed by turning to dynamic web pages generated with PHP.īy looking at the code of the three pages, it is immediately evident that they do have a lot in common. The occasions to make mistakes, or to forget to modify some of the pages, could easily make the website quite hard to manage. What is the number of pages grow every day, for some reason. While this is plenty feasible, especially with a 3 pages website, what if we have a 500 pages instead. ![]() ![]() – add an image in the header section, to all pagesĪn all these cases (and several others), we do need to perform the same modification to all our 3 pages. – change the contact e-mail address (in the “footer” section) – add another page to the web site, and therefore update the navigation menu to reflect the new situation – change the id of the main contents div, from “main-navigation” to something different – switch to a different style sheet, not located at css/style.css Let us now imagine we want to perform one of the following operations: Let us also assume our website is composed of just 3 pages, with the following minimal code: Having gone through chapter 3, you already know that this is largely achievable by web developers through the implementation of an original style sheet by using CSS.įor the sake of simplicity, let us assume for this example that all the web pages of our hypothetical web site have in common the style sheet, the header section (that may include a navigation menu) and the footer section. Each site has generally a distinctive graphical character, present in each single page, that will let us recognise it and let us know when we are navigating inside it (and when we are leaving it). Within the same website, maybe the layout of a certain section could differ from the layout of other sections, but generally there are still enough graphical elements (such as the logo, the choice of colors, the fonts and others) to tell that on navigating from page to page, we are still inside a coherent, related set of web pages. Of course, the reason we notice is that the graphical aspect of the pages, the style of the pages, changes. When we do click on an external link that brings us to a different website, we immediately notice. We have the feel, while navigating from a page to another, that we are still within the same website. What is the difference between a bunch of interlinked pages and a proper website? For one, in a website all the pages somehow “look the same”. Let’s image we want to create several pages, instead of a single one, and link them together, maybe through a navigation menu, in order to build a full fledged web site. We have already seen in chapter 3 how to write the code for a basic HTML page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |