banner

banner

banner

banner

Website Design 4
A Page Analysis

Design 3---Design 5

computer     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:

CLICK HERE

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:

CLICK HERE

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

IMPORTANT NOTE! All of our Design Series pages have been REDESIGNED recently using The Responsive Web Page Design Technique, so that they are flexable from wide screen devices all the way down to small screen devices, like Smartphones... you can read about this Technique Here or simply just Google for it!... To check it out, try Resizing Your Browser Window to see how this page accomodates the smaller window sizes...

    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...

Continue with this design series...use the "Design 5" link below...

Design 3---Design 5