Website Design 4
A Page Analysis
On this page we will ANALYZE How This Page (That You Are Currently Viewing) was built ... to build it we used our favorite text editor (Word Pad) and a full knowledge of HTML, CSS, Javascript Coding, as well as Responsive Web Design all of which you can learn from reading thru our Design Series Pages and visiting the Links we provide...
First take a look at the complete HTML Source Code for this page HERE
Now... don't be alarmed... we will explain all of it (or most of it) below, to show you how and why the Code is used... and hopefully from understanding this, you will be able to build YOUR PAGES more accurately... regardless of what Page Layout you choose, and regardless of what type of Navigation and Content you use...
In the Start of the Code (in the <head> SECTION) and ABOVE It... we placed all of this Code:
We won't go into Detail about all of that Code; you need to Study your HTML and learn about it... it DOES NOT SHOW ON THE WEBPAGE... but it is necessary for the page to "work" as we designed it, so that Web Browsers will render the page correctly, and so that various Search Engines (like Google) will find and display it... and so that various Code (in the Body Section... below it) will "work" correctly! NOTICE IN PARTICULAR... the Link To Our Main Style Sheet (style1.css)... which CONTROLS the Major part of all of the CSS Styling for ALL of our web site! You should STUDY CSS HERE ...
IMPORTANT: We have used the relatively new method of "Responsive Web Design" to build this (and many other pages) so that they become "Fluid" and downsize from a typical rendering in a larger screen to rendering in a relatively tiny screen (like a Smart Phone)... without changing the source code... ie using the SAME code for ALL Screen Sizes! You can read up on it Here or simply just Google for it!
In the Top Of The Body we placed this HTML Code:
This Code employs a Server Side Include (SSI) which INSERTS a Separate Text File at that point of the Code (topdesign.txt ...containing the HTML Code we use across the top of all, or most, of our Design Series pages)... so that if we ever want to change the Code, we only need to change just that Text File (saving all the work of having to change countless numbers of pages seperately)... Here Is That Whole Text Code... and it is controlled by our Design Style Sheet! ...Please read more about SSI HERE
In that Code, you can see how we used HTML and CSS (Cascading Style Sheets) to produce the Top Section of this page... You can Study the Code and You of course can put any Code that you want in the Top Section to suit your page design needs!
Next we placed this Code: View Code
This Code starts to address the Main Content (which has a WIDTH of 100% of the total browser screen... indicated by the use of class="col-12") with Content That You See Here On The Page... You can Study the Code and see how we placed the Main Content onto the page...
This concludes our Page Analysis, and we hope that you have learned a little bit more from it, about how to Build A Webpage...