Website Design 4
A Page Analysis
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... you can see how it creates the Slide-In Menu and how the Tab Menu (across all of our Design pages) is created by <ul> and <li> tags (whose display are 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 see how we placed the Google Ad Code, and how we set-up the top tab-style navigation, and especially how we used COMMENT TAGS (which do Not show up on the page) to help us keep track of various parts of the Code... 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:
This Code starts to address the Left Side Section (which has a WIDTH of about 25% of the total browser screen... indicated by the use of class="col-3") with another SSI Include (sideone.txt ...since all of our Design Series pages have the SAME Code in this area on the page)... Here Is That Whole Text Code ...Please read more about SSI HERE
In that Code, you can see how we used HTML and CSS (Cascading Style Sheets) to produce the Left Side Section of this page... You can Study the Code and see how we placed the Links to our other Design Series pages... You of course can put any Code that you want in the Left Side Section to suit your page design needs!
Next we placed this Code: View Code
This Code starts to address the Right Side Section (which has a WIDTH of 75% of the total browser screen... indicated by the use of class="col-9") 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...