we are going dynamic, i.e. every part of your web page, header, footer, body, menu, etc are going to change dynamically. To do so we are going to load separate html file in a single html page.
Refer to the chart below for more clarification.
Index.php is the main page which must be loaded by the visitor. Header.html, menu.html, post.html are the Head banner, Menu bar and Posts/articles respectively in separate HTML file. Whilist style.css is the CSS style for all the pages that will be loading in index.php.
Simply we’ll load all the files in index.php.
Let’s start designing the layout for index.php using HTML.
Now the layout is ready and we got the maps to assign the specific header, post, menus etc.
Let’s assign the specific file to the specific address.
First difference is, <link rel=”stylesheet” type=”text/css” href=”style.css”/> which must lie inside the <head> tag.
What it actually does is, loading the CSS style to index.php.
It’s syntax is:
Another is four blocks of code:
The above code loads the specific html/php or web file wherever it is placed, it is actually a php code that’s why it is enclosed in <?php ….?> or <?….. ?>
We’ve used include (); function to call the specific file, where XXX in the example above refers to the location of the file.
Note: If all the files including sub-files contains in same directory, you don’t need to mention the URL of the file, else you must define the exact location for it.
We’ve basic layout for homepage ready. All we need is the sub-pages.
Design a good banner for your homepage using Photoshop or other Image editing software.
Create new text document with following inputs in it:
Create another text file with following inputs:
Now create a another text document where your contents will be loaded,
For example,
Now you have all the contents ready. Anything left is the styling part.
You can also create your own style in another text document and save it as filename.css (in this tutorial we’ll call it style.css).
Copy the code and paste it in stye.css that you’ve just created.
I’ve applied the styling for only body, horizontal rule(hr), table and custom class named note.
Your final page will have the format similar to below:
You can add and replace the menu.html and other without opening index.php this is what makes your page handling experience some what dynamic.
Hope you liked this tutorial.
Refer to the chart below for more clarification.
Index.php is the main page which must be loaded by the visitor. Header.html, menu.html, post.html are the Head banner, Menu bar and Posts/articles respectively in separate HTML file. Whilist style.css is the CSS style for all the pages that will be loading in index.php.
Simply we’ll load all the files in index.php.
Let’s start designing the layout for index.php using HTML.
<html>I used simple technique of tables to layout the index.php.
<head>
<title> Page 1 </title>
</head>
<body>
Header for the web page
<!– Table for Main Body –>
<table border=”0″ width=”100%” cellspacing=”0″ cellpadding=”2″>
<tr>
<td valign=”top” align=”left” width=”90″>
Menu bar at top for page
</td>
<td width=”1″ bgcolor=”lightskyblue” valign=”top”> </td>
<td valign=”top”>
Main content or article for your home page.
<br> <br>
Same menubar at bottom
</td>
<td width=”1″ bgcolor=”lightskyblue” valign=”top”> </td>
</tr></table>
</body></html>
Now the layout is ready and we got the maps to assign the specific header, post, menus etc.
Let’s assign the specific file to the specific address.
<html>You can see two differences from the HTML code before and after.
<head>
<title> Home Page </title>
<link rel=”stylesheet” href=”style.css”/>
</head>
<body>
<?php
include (“header.html”);
?>
<!– Table for Main Body –>
<table border=”0″ width=”100%” cellspacing=”0″ cellpadding=”2″>
<tr>
<td valign=”top” align=”left” width=”90″>
<?php
include (“menu.html”);
?>
</td>
<td width=”1″ bgcolor=”lightskyblue” valign=”top”> </td>
<td valign=”top”>
<?php
include (“post.html”);
?>
<br> <br>
<?php
include (“menu.html”);
?>
</td>
<td width=”1″ bgcolor=”lightskyblue” valign=”top”> </td>
</tr></table>
</body></html>
First difference is, <link rel=”stylesheet” type=”text/css” href=”style.css”/> which must lie inside the <head> tag.
What it actually does is, loading the CSS style to index.php.
It’s syntax is:
<link rel=”stylesheet” type=”text/css” href=”#”/>‘#’ refers to the location of your stylesheet document.
Another is four blocks of code:
<?php
include (“XXX”);
?>
The above code loads the specific html/php or web file wherever it is placed, it is actually a php code that’s why it is enclosed in <?php ….?> or <?….. ?>
We’ve used include (); function to call the specific file, where XXX in the example above refers to the location of the file.
Note: If all the files including sub-files contains in same directory, you don’t need to mention the URL of the file, else you must define the exact location for it.
We’ve basic layout for homepage ready. All we need is the sub-pages.
Design a good banner for your homepage using Photoshop or other Image editing software.
Create new text document with following inputs in it:
<img src=”image/banner.jpg” border=”0”/>Save it as header.html.
Create another text file with following inputs:
<a href=”index.php”>Home </a> |Save it as menu.html.
<a href=”page2.php”>Page</a> |
<a href=”page3.php”>About us</a> |
<a href=”page4.php”>Contact</a>
Now create a another text document where your contents will be loaded,
For example,
<h2> H2 heading for the page </h2>Now let’s put in an image (that is in the same folder as this file so we don’t have to put the full path / URL
Here goes the main content of your web page. You can include any information about your page here.
Example for a horizontal line = <hr>
Example using ‘class’ = ‘note’:
<span> Example using ‘class’ = ‘note’ </span>
<img src=”images/anyimage.jpg” border=”0″ width=”100″ height=”65″ alt=”alternate_text”>Save the above example as post.html
Now you have all the contents ready. Anything left is the styling part.
You can also create your own style in another text document and save it as filename.css (in this tutorial we’ll call it style.css).
Copy the code and paste it in stye.css that you’ve just created.
body {Save it in style.css.
background-color: #FFFFFF;
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
}
a { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #483D8B; text-decoration: underline}
a:hover { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #000000; background-color: #FAEBD7}
h1 { font-family: Arial, Verdana, sans-serif; font-size: 36px; color: #000000 }
h2 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #000000 }
h3 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #000000 }
h4 { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #000000 }
h5 { font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #000000 }
h6 { font-family: Arial, Verdana, sans-serif; font-size: 8px; color: #000000 }
hr{ color:brown; background-color:tan; width:90%; height:2px; }
table { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #00008B; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px}
.note { font-family: Arial, Verdana, sans-serif; font-size: 14px; color: purple;
font-weight: bold;}
I’ve applied the styling for only body, horizontal rule(hr), table and custom class named note.
Your final page will have the format similar to below:
You can add and replace the menu.html and other without opening index.php this is what makes your page handling experience some what dynamic.
Hope you liked this tutorial.
0 comments:
Post a Comment