www.webdeveloper.com
Results 1 to 5 of 5

Thread: Need help with some html/css coding

  1. #1
    Join Date
    Aug 2013
    Posts
    1

    Question Need help with some html/css coding

    I dont know how to make the "header","footer" and "sidebar" of a webpage separate, so if i want to edit the sidebar and add another link to it, if i have 100 pages i dont have to manually change it. To make it in a different page and somehow embend the sidebar or footer or header in the webpage.

    Please tell me if you understood what i meant.

  2. #2
    Join Date
    Mar 2012
    Posts
    1,256
    There is no way of doing that in plain HTML/CSS. You need to use PHP include files. So you need to learn at least the basics of PHP. Note: PHP is a server-side language. That means that it assembles the HTML page dynamically on the server and delivers it whole to the browser. So, to the browser it seems as if you have 100+ pages with identical headers/footers etc. To use separate files for the headers etc... (Note: This is only a brief explanation):

    1. Put the header code (or whatever) in a separate .HTML file, e.g. header.html.
    2. Rename the web page to .PHP instead of .HTML, e.g. mypage.php.
    3. Remove the header text from the web page file and replace it with a call to the include file. E.g.
    <?php include 'header.html'; ?>
    4. Repeat this for every page that uses the header. Note: PHP is generally case sensitive, so if the file is called "Header.html", or some such, the above include will fail..

    You then only need to edit the header file to change the header on every page.

    The problem with this is you cannot test PHP like HTML by just clicking on the source file to load it in to the browser. You need to set up a local host and use that. Fortunately, this has all been sorted. There are two or more free local host kits that are fully automated to setup. I use WAMP (search for "WAMP SERVER" and download it). Once you have installed WAMP what you have to do to test your web page(s) is:

    1. You will need to move your development area to be visible to WAMP. I.e. put it in C:\wamp\www\. If you cannot do that, you will have to copy the files to there dynamically, which is likely to be error prone.

    2. Make sure that the web pages have the file ext .PHP instead of .HTML.

    3. Make sure WAMP is running (you will see its green icon in the task bar). If not click on the WAMP icon to start it).

    4. If they are not already there, put the web page(s) you want to test in the WWW folder (or a sub folder). E.g. C:\wamp\www\mypage.php. Remember to include the include files and graphics. N.b. It really is easier to move the development area.

    5. Set up a shortcut just like a link to a live web site except that you use "localhost" as the address. e.g. http://localhost/mypage.php.

    6. Click on the shortcut, Voila, your browser will display the pages just as they were before (unless you have made an error in editing the files)!

    So there is some work in setting up your development area to use PHP, and the changeover will probably need planning, so it is not worth it for just a few web pages. But when you get to 20+ pages per site, you will wonder how you ever got by without it!

    P.S. Search for "PHP Manual" an create a shortcut, you will need it!

  3. #3
    Join Date
    Mar 2012
    Posts
    1,256
    postscript - I forgot to mention: make sure that your live site is hosted on a server that supports PHP. Otherwise all this will be a waste of time!!!

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    If PHP is not supported, you could try using .shtml and setting up the .htaccess file to use the extension. Online Tool: Using Includes in a webpage At bottom of page:
    Enabling .shtml extentions
    In the .htaccess file for your website, place the following code:
    AddType text/html .shtml
    AddHandler server-parsed .shtml

  5. #5
    Join Date
    Mar 2012
    Posts
    1,256
    On second thoughts there is a way of having only one header, footer and sidebar using just HTML: have only one page! Yes, really. One page, with an IFrame in which the variable content is displayed. So what were separate pages are replaced by sub-pages that are displayed in an Iframe. This approach works but has severe flaws:

    1. Firstly, and most importantly, web bots hate such pages. So do not expect a good rating.

    2. Secondly, unless you hide the sub-pages from bots, using robots.txt, they are prone to rate the sub-pages higher than the main page because they have the content.

    So you have the choice:

    a) Hide the sub-pages and get a lousy page rating!

    b) Let the bots rate the sub-pages, and they will be displayed alone, without the header, footer and side panel!

    Not good. So it is worthwhile knowing that the facility exists, if only to note why it is little used.
    Last edited by jedaisoul; 08-28-2013 at 02:56 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles