Website Design 4
A Page Analysis
On this page I will ANALYZE How This Page (That You Are Currently Viewing) was built ... to build it I used my favorite text editor (Note 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 my Design Series Pages and visiting the Links I provide...
First take a look at the complete HTML Source Code for this page HERE
Now... don't be alarmed... I 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... I placed all of this Code:
I 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 I 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 My Main Style Sheet (style1.css)... which CONTROLS the Major part of all of the CSS Styling for ALL of the web site! You should STUDY CSS HERE ...
IMPORTANT: I 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 I 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 I use across the top of all, or most, of my Design Series pages)... so that if I ever want to change the Code, I 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 my Design Style Sheet! ...Please read more about SSI HERE
In that Code, you can see how I 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 I placed this Code: View Code
This Code starts to address the Main Content (which has 2 columns in the total browser screen... indicated by the use of class="col-2" and class="col-10") with Content That You See Here On The Left Side Of This Page (if you are using a PC Device) And On The Right Main Side... You can Study the Code and see how I placed the Main Content onto the page...
This concludes my Page Analysis, and I hope that you have learned a little bit more from it, about how to Build A Webpage...