4.1.2 Editing the inc (included) files

Now we want to edit the content of our site and of course the header, the footer, the left and the right column. Notice that the main column is the content page. The inc pages are small HTML pages. In order to edit an inc page you need to learn only these HTML tags :

• <br>
This tag is the breakline or simpler the 'enter' key on the text editor in order to change a line. Inserts a single line break.
• <div align="POS"> ... </div>
A simple way to align your text or your images. POS can have left, right, center as values.
• <img src="images/MyImage.png" alt="My image description">
The easiest way to add an image. The image must be placed at the 'images' directory. The alt attribute is fundamental because search engines read this attribute and index correctly your images. Remember Google and Yahoo have image search option. So it is highly recommended that you use the alt attribute and make sure that the image name has a meaning. For example :
<img src="images/LearnEnglishin21Days.png" alt="Learn English in 21 Days Logo">
Using the alt option to the images will help you increase your site traffic, this fact is proven!
• <font class="TEXT-CLASS"> ... </font>
Before writing any type of text you need to define it's aspect. Use this tag to format it. The CSS contained in this e-book has these TEXT-CLASS values : small, normal, big, very big. If you want to change the aspect of the TEXT-CLASS just modify the given CSS.
• <a href="PAGE-URL" class="LINK-CLASS">PAGE-NAME</a>
With this code we can add links on our web page. LINK-CLASS values : small, normal, big, very big, menu.
Internal link example :
<a href="secondpage.php" class="normal">click here to go to the second page</a>
External link example :
<a href="http://www.yahoo.com" class="normal">click here to go to Yahoo</a>
If you want to change the aspect of the LINK-CLASS just modify the given CSS.

With the knowledge of these HTML commands you can start editing and finally add your content.

Editing the Header

The header can be found at
03Demo\includes\headers\Header.inc

<div align="center">
<img src="images/MyBookstoreLogo.png" 
alt="My Bookstore Logo">
</div>

The header

---

The header in this case has only a centered image.

Editing the Footer

The footer can be found at
03Demo\includes\footers\Footer.inc

<div align="center">
<font class="small">
Copyright © MyWebsite 2008 - 
All Rights Reserved.
<br>
Designed by Me.
</font>
</div>

The footer

---

The footer has a centered small text.

Editing the Left Column

The Left can be found at
03Demo\includes\leftcolumns\Left.inc
In this example since via CSS we made invisible the left column we do not have to put any content to the Left.inc

Editing the Right Column

The Right can be found at
03Demo\includes\rightcolumns\Right.inc
Same as left column we do not have to put any content to Right.inc.

The center column

The center column is by default the main content of the page.
This section can be found at
03Demo\includes\contents\MyBook.inc
Please make sure that the name of the content file is the same with the $_GET['content'] value in the PHP page.

<div align="center">

<br><br>

<font class="verybig">
My Book's Title
</font>

<br><br>

<img src="images/MyBook.png" 
alt="My Book Logo">

<br><br>

<font class="normal">
Description : This is a nice 
book bla bla bla ... 
</font>

<br><br>

</div>

The main content

---

This example is pretty self-explanatory. We have a centered page with a title an image and a normal size description. Remember always to define your font text class when you are writing text.

So the '03Demo' is the first php version of our site. This version has only one page and it is great for one product solution but how about multiple products? This is not a big problem just keep reading.