HTML & CSS Tutorial for links, PHP includes, images, center & color

(Note: there is no need to "understand" or to memorize any of the codes on this page! Just "copy and paste" them whenever needed.)

Lesson 1: Building clickable links.

Below are two similar ways to code a "normal" navigation link, also called a "hyperlink."

In both examples, where I have put "Write anything here," the text written there will became a clickable link. Anyone who clicks there will be sent to the URL that is specified in the code, which is not visible on the page.

The difference is: in the second hyperlink, I left out the "http://kwik-n-free.com". This can be done if the hyperlink is "internal," meaning it goes to a page on the same site. This is "faster" because the browser then does not need to answer this question: "In millions of websites, where on earth is kwik-n-free.com?" Instead, the browser will instantly recognize the second example as an "internal" link, and thus know that it is already looking at the site it needs!

<a href="http://kwik-n-free.com/web-design/">Write anything here.</a>
(This method is "standard" for external links to a different site. "Acceptable" for internal links within the same site.)

<a href="/web-design/">Write anything here.</a>
(The best method for internal links.)

Please note that neither of these links specifies a file name. Only a subfolder named "Web design." Therefore, these links will lead by default to the "index page" or "main page" which should be included in every subfolder, and which should be named "index.htm" or "index.php." Therefore, the above link might also be written as:

<a href="/web-design/index.php">Write anything here.</a>
(Not recommended.)

Suppose later, you decide to change from "PHP" style index pages to "ASP" or some other format? For index pages, this is no problem--"if" you never specify in your links that this is "index.php." Therefore, a general practice is "never specify an index page." Just specify the folder name. Allow the browser to default to the index page.

However, for all other pages, the file name must be specified. For example, this page might be:

<a href="/web-design/tutorial/building-links.php">Write anything here.</a>
(Recommended for non-index pages.)

Lesson 2: Building a links margin for web site navigation with CSS.

Your website should have several pages, with a list of links to every page posted on every page. The simplest way is just to put the links inside of a <div> section, as follows.

<div class="sideleft">
<a href="/web-design/page-a.php">page-a</a><br />
<a href="/web-design/page-b.php">page-b</a><br />
<a href="/web-design/page-c.php">page-c</a><br />
<a href="/web-design/page-d.php">page-d</a></div>

Then in your external CSS style sheet (as learned in the previous chapter) you can specify:

.sideleft {font-size:small; float:left; width:10em;
  background-color:yellow;
  margin:0 2em .5em 0;
  padding:0 1em 0 1em;}

• float:left

means this section will stay on the left of the page.

    • width:10em

means about the width of 10 letters of medium size.

    • background-color:yellow

specifes the color of the background for this "div" area. I.e., these links will appear to be inside of a "yellow box." (See below to adjust the colors with precision.)

    • margin:0 2em .5em 0

specifies the margin widths going clockwise: top, right, bottom, left.

    • padding:0 1em 0 1em

specifies the distance between the text and the edge of the "yellow box". (If the padding were 0, then the text could run right up to the edge of the yellow box.)

Lesson 3: PHP includes for instant updating of all pages.

Here we come to some really useful information. As soon as your website has three pages, you will want a fourth. Each page must have the same links to all pages. You then may realize that you had rather not edit all pages, every time any page is added, deleted, or has its name changed! The solution? Easy! All you need to do is:

a) Change the file name from pagename.htm to pagename.php

b) Remove the entire code for the navigation links: "cut and paste" from the main .php file into a new Notepad file. Save as: "sideleft.inc" This new little file is called an "include." You will only need to change this one "include" file to change the navigation links on every page of your site!

(Note: an "include" file does not need to be named with .inc. It may be named with .htm or .txt or just about anything. However, a proper "include" file has no <head> section, no "doctype" tag, and no ".css" reference, etc. It is not a web page by itself--but it will be "included" in a web page that already has all of these things. Therefore, the tradition is to call it .inc just to help you keep in mind what it is!)

c) Place this "sideleft.inc" on the top level of your site, in the same main file as the Home page.

d) Where the navigation links used to be on the Home page, paste this code:
<?php include("sideleft.inc"); ?>

Or, if the page with the links is in a subfolder one level below the Home page, add two dots and a dash to the URL. (../) This means "go up one level." This results in:
<?php include("../sideleft.inc"); ?>

Note: the "included" file (sideleft.inc) will not show up if the file is only on your computer desktop!

The inclusion process can not take place unless the files are uploaded to your web site! You must view them through the internet! However, if you do not have a real web site, a free "desktop server" can imitate this process. For more information see my "advanced web page design tips" article on: PHP vs. SSI and FrontPage Includes

Lesson 4: Including images.

An image is really a type of "include." A special little code is placed on the page that "includes" the image. Here is that code:

<img src="/pix/anyimage.jpg" class="mainpix">

That simple code will look for "anyimage.jpg" inside of the "pix" folder. Inside your external CSS file, you can specify the "height:" and "width:"" of the picture. Also any "margin:" space between the picture and the text. Also whether the picture will "float:left;" or "float:right;". Just fool around and soon, you will get the idea.

Here is an example (for the external CSS file):
.mainpix {margin:1em 1em .5em 1em; float:left;
    width:100px; height:100px;}

Lesson 5: How to center an image, or text, or an entire <div>

There are three ways to center an image--or anything else.

Method 1. First be sure there is a class for "centering" in your external CSS file, as follows:

.c {text-align:center}

Then surround the item to be centered with a centering <div> as follows. (This can include surrounding an entire <div> with another <div>.)

<div class="c"><img src="/pix/anyimage.jpg" class="mainpix"></div>

Method 2. Specify in the CSS that the left and right margins of the item to be centered are "auto." (When two factors are specified as in the CSS--as below--the first factor represents both top and bottom margins. The second factor represents both left and right margins.)

.mainpix {margin:.5em auto}

Method 3. If all else fails, use both methods.

Lesson 6: Colors and background images.

In your CSS sheet, the word "color" by itself means the color of the text. Then there is "background-color" meaning the color of the background.

There are several ways to specify a color. For the best combination of simplicity and precision, you only need to know the "hex code." This is made up of the number sign (#) followed by 6 characters such as:

#0011FF

The first two characters specify the amount of "red." The second two specify the amount of "green". The last two characters specify the amount of "blue." These characters run as numbers 0 through 9, followed by the letters C and F:

0 1 2 3 4 5 6 7 8 9 C F

Therefore, pure black is:
#000000

And pure white is:
#FFFFFF

In this way, any color can be specified. For example, yellow is a mixture of red and green.

Therefore, pure yellow is:
#FFFF00

Please note that some old computers can only use 6 combinations for each color. The only combinations for each color that these old computers will understand are:

00 33 66 99 CC FF

So it is "ideal" whenever possible to use only these pairs of codes. However, this limitation does not affect many computers, and will not give you enough variety. Therefore, I suggest that usually you just limit yourself to using 0, 3, 6, 9, C and F--in any combination. This will give you plenty of colors and make things simpler all around. For example:

#0360C9

As for backgound images.

These can be specifed in your CSS for any <div> or <td> or <table> section, or for the entire page. For example, you can use a picture named "bluesky.jpg" for the background image in the .sideleft margin, simply by doing this:

a) Create a "pix" folder and upload the image to it.
b) Add the image's URL to the specifications for ".sideleft" in your CSS file as follows.

.sideleft {background-image:url(/pix/bluesky.jpg);
  font-size:small; float:left; width:10em;
  background-color:yellow;
  margin:0 2em .5em 0;
  padding:0 1em 0 1em;}