Tables In HTML

Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML.

Example 1:

 <table>
   <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
   </tr>
   <tr>
  <td>Cell 3</td>
  <td>Cell 4</td>
   </tr>
 </table>

Will look like this in the browser:

Cell  1Cell 2Cell 3Cell 4

What's the difference between <tr> and <td>?

As you will see from the above example, this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags:
3 different elements are used to insert tables:

• The opening tag <table> and the closing tag </table> starts and ends the table. Logical.
• <tr> stands for "table row" and starts and ends horizontal rows. Still logical.
• <td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical.

Here is what happens in Example 1: the table starts with a <table>, followed by a <tr>, which indicates the beginning of a new row. Two cells are inserted in this row: <td>Cell 1</td> and <td>Cell 2</td>. The row is hereafter closed with a </tr> and a new row <tr> begins immediately after. The new row also contains two cells. The table is closed with </table>.
Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells:

Cell 1
Cell 2
Cell 3
Cell 4

Cell 1 and Cell 2 form a row. Cell 1 and Cell 3 form a column.
In the above example, the table has two rows and two columns. However, a table can have an unlimited number of rows and columns.
Example 2:

 <table>
   <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
  <td>Cell 3</td>
  <td>Cell 4</td>
   </tr>
   <tr>
  <td>Cell 5</td>
  <td>Cell 6</td>
  <td>Cell 7</td>
  <td>Cell 8</td>
   </tr>
   <tr>
  <td>Cell 9</td>
  <td>Cell 10</td>
  <td>Cell 11</td>
  <td>Cell 12</td>
   </tr>
 </table>

Will look like this in the browser:

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12

Are there any attributes?

Of course there are attributes. For example, the border attribute is used to specify the thickness of the border around your table:
Example 3:

 <table border="1">
   <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
   </tr>
   <tr>
  <td>Cell 3</td>
  <td>Cell 4</td>
   </tr>
 </table>

Will look like this in the browser:

Cell 1
Cell 2
Cell 3
Cell 4

The thickness of the border is specified in pixels
As with images, you can also set the width of a table in pixels - or alternatively in percentage of the screen:
Example 4:

 





<table border="1" width="30%">

This example will be displayed in the browser as a table with the width of 30% of the screen. Try it yourself.

More attributes?

There are lots of attributes for tables. Here are two more:

• align: specifies the horizontal alignment of the content in the entire table, in a row or in a single cell. For example, left, center or right.
• valign: specifies the vertical alignment of the content in a cell. For example, top, middle or bottom.

Example 5:

 





<td align="right" valign="top">Cell 1</td>

What can I insert in my tables?

Theoretically, you can insert anything in tables: text, links and images... BUT tables are meant for presenting tabular data (i.e. data which can be meaningfully presented in columns and rows) so refrain from putting things into tables simply because you want them to be placed next to each other.
In the old days on the Internet - i.e. a few years ago - tables were often used as a layout tool. But if you want to control the presentation of texts and images there is a much cooler way to do it (hint: CSS). But more about that later.

Read More

echo function

echo is not actually a function (it is a language construct), so you are not required to use parentheses with it. echo (unlike some other language constructs) does not behave like a function, so it cannot always be used in the context of a function. Additionally, if you want to pass more than one parameter to echo, the parameters must not be enclosed within parentheses.

echo also has a shortcut syntax, where you can immediately follow the opening tag with an equals sign. This short syntax only works with the short_open_tag configuration setting enabled.

Example #1 echo examples

<?phpecho "Hello World";

echo "This spans
multiple lines. The newlines will be
output as well";

echo "This spans\nmultiple lines. The newlines will be\noutput as well.";

echo "Escaping characters is done \"Like this\".";// You can use variables inside of an echo statement$foo = "foobar";$bar = "barbaz";

echo "foo is $foo"; // foo is foobar

// You can also use arrays$baz = array("value" => "foo");

echo "this is {$baz['value']} !"; // this is foo !

// Using single quotes will print the variable name, not the valueecho 'foo is $foo'; // foo is $foo

// If you are not using any other characters, you can just echo variablesecho $foo; // foobarecho $foo,$bar; // foobarbarbaz

// Some people prefer passing multiple parameters to echo over concatenation.echo 'This ', 'string ', 'was ', 'made ', 'with multiple parameters.', chr(10);
echo 'This ' . 'string ' . 'was ' . 'made ' . 'with concatenation.' . "\n";

echo <<<ENDThis uses the "here document" syntax to output
multiple lines with $variable interpolation. Note
that the here document terminator must appear on a
line with just a semicolon. no extra whitespace!END;// Because echo does not behave like a function, the following code is invalid.($some_var) ? echo 'true' : echo 'false';// However, the following examples will work:($some_var) ? print 'true' : print 'false'; // print is also a construct, but
// it behaves like a function, so
// it may be used in this context.echo $some_var ? 'true': 'false'; // changing the statement around?>

Read More

Include Function

The include statement includes and evaluates the specified file.

The documentation below also applies to require.

Files are included based on the file path given or, if none is given, the include_path specified. If the file isn't found in the include_path, include will finally check in the calling script's own directory and the current working directory before failing. The include construct will emit a warning if it cannot find a file; this is different behavior from require, which will emit a fatal error.

If a path is defined — whether absolute (starting with a drive letter or \ on Windows, or / on Unix/Linux systems) or relative to the current directory (starting with . or ..) — the include_path will be ignored altogether. For example, if a filename begins with ../, the parser will look in the parent directory to find the requested file.

For more information on how PHP handles including files and the include path, see the documentation for include_path.

When a file is included, the code it contains inherits the variable scope of the line on which the include occurs. Any variables available at that line in the calling file will be available within the called file, from that point forward. However, all functions and classes defined in the included file have the global scope.

Example #1 Basic include example

vars.php
<?php

$color = 'green';$fruit = 'apple';?>
test.php
<?phpecho "A $color $fruit"; // Ainclude 'vars.php';

echo "A $color $fruit"; // A green apple?> 

If the include occurs inside a function within the calling file, then all of the code contained in the called file will behave as though it had been defined inside that function. So, it will follow the variable scope of that function. An exception to this rule are magic constants which are evaluated by the parser before the include occurs.

Example #2 Including within functions

<?phpfunction foo()
{
global $color;

include 'vars.php';

echo "A $color $fruit";
}/* vars.php is in the scope of foo() so *
* $fruit is NOT available outside of this *
* scope. $color is because we declared it *
* as global. */foo(); // A green appleecho "A $color $fruit"; // A green?>




When a file is included, parsing drops out of PHP mode and into HTML mode at the beginning of the target file, and resumes again at the end. For this reason, any code inside the target file which should be executed as PHP code must be enclosed within valid PHP start and end tags.

If "URL fopen wrappers" are enabled in PHP (which they are in the default configuration), you can specify the file to be included using a URL (via HTTP or other supported wrapper - see Supported Protocols and Wrappers for a list of protocols) instead of a local pathname. If the target server interprets the target file as PHP code, variables may be passed to the included file using a URL request string as used with HTTP GET.

  

This is not strictly speaking the same thing as including the file and having it inherit the parent file's variable scope; the script is actually being run on the remote server and the result is then being included into the local script.

Warning

Windows versions of PHP prior to PHP 4.3.0 do not support access of remote files via this function, even if allow_url_fopen is enabled.

Example #3 include through HTTP

<?php/* This example assumes that www.example.com is configured to parse .php
* files and not .txt files. Also, 'Works' here means that the variables
* $foo and $bar are available within the included file. */

// Won't work; file.txt wasn't handled by www.example.com as PHPinclude 'http://www.example.com/file.txt?foo=1&bar=2';// Won't work; looks for a file named 'file.php?foo=1&bar=2' on the
// local filesystem.include 'file.php?foo=1&bar=2';// Works.include 'http://www.example.com/file.php?foo=1&bar=2';$foo = 1;$bar = 2;
include 'file.txt'; // Works.include 'file.php'; // Works.?>




Warning

Security warning

Remote file may be processed at the remote server (depending on the file extension and the fact if the remote server runs PHP or not) but it still has to produce a valid PHP script because it will be processed at the local server. If the file from the remote server should be processed there and outputted only, readfile() is much better function to use. Otherwise, special care should be taken to secure the remote script to produce a valid and desired code.

See also Remote files, fopen() and file() for related information.

Handling Returns: It is possible to execute a return statement inside an included file in order to terminate processing in that file and return to the script which called it. Also, it's possible to return values from included files. You can take the value of the include call as you would for a normal function. This is not, however, possible when including remote files unless the output of the remote file has valid PHP start and end tags (as with any local file). You can declare the needed variables within those tags and they will be introduced at whichever point the file was included.

Because include is a special language construct, parentheses are not needed around its argument. Take care when comparing return value.

Example #4 Comparing return value of include

<?php// won't work, evaluated as include(('vars.php') == 'OK'), i.e. include('')if (include('vars.php') == 'OK') {
echo 'OK';
}// worksif ((include 'vars.php') == 'OK') {
echo 'OK';
}?>




Example #5 include and the return statement

return.php
<?php

$var = 'PHP';

return $var;?>
noreturn.php
<?php

$var = 'PHP';?>
testreturns.php
<?php

$foo = include 'return.php';

echo $foo; // prints 'PHP'$bar = include 'noreturn.php';

echo $bar; // prints 1?> 




$bar is the value 1 because the include was successful. Notice the difference between the above examples. The first uses return within the included file while the other does not. If the file can't be included, FALSE is returned and E_WARNING is issued.

If there are functions defined in the included file, they can be used in the main file independent if they are before return or after. If the file is included twice, PHP 5 issues fatal error because functions were already declared, while PHP 4 doesn't complain about functions defined after return. It is recommended to use include_once instead of checking if the file was already included and conditionally return inside the included file.

Another way to "include" a PHP file into a variable is to capture the output by using the Output Control Functions with include. For example:

Example #6 Using output buffering to include a PHP file into a string

<?php
$string = get_include_contents('somefile.php');

function get_include_contents($filename) {
if (is_file($filename)) {ob_start();
include $filename;
return ob_get_clean();
}
return false;
}?> 




In order to automatically include files within scripts, see also the auto_prepend_file and auto_append_file configuration options in php.ini. 

Read More

What is PHP ?

PHP was originally an acronym for Personal Home Pages, but is now a recursive acronym for PHP: Hypertext Preprocessor.
PHP was originally developed by the Danish Greenlander Rasmus Lerdorf, and was subsequently developed as open source. PHP is not a proper web standard - but an open-source technology. PHP is neither real programming language - but PHP lets you use so-called scripting in your documents.
To describe what a PHP page is, you could say that it is a file with the extension .php that contains a combination of HTML tags and scripts that run on a web server.

How does PHP work?

The best way to explain how PHP works is by comparing it with standard HTML. Imagine you type the address of an HTML document (e.g.  http://prog-teach.blogspot.com/ ) in the address line of the browser. This way you request an HTML page. It could be illustrated like this:

As you can see, the server simply sends an HTML file to the client. But if you instead type  http://prog-teach.blogspot.com/  - and thus request an PHP page - the server is put to work .

The server first reads the PHP file carefully to see if there are any tasks that need to be executed. Only when the server has done what it is supposed to do, the result is then sent to the client. It is important to understand that the client only sees the result of the server's work, not the actual instructions.
This means that if you click "view source" on a PHP page, you do not see the PHP codes - only basic HTML tags. Therefore, you cannot see how a PHP page is made by using "view source". You have to learn PHP in other ways, for example, by reading this tutorial.

What you learn in this tutorial is to write commands to a server!


So, the first thing you need to get ahold of is... a server! But don't worry - you don't need to buy a new computer. You just need to install some software on your computer that makes it function as a server. Another option is to have a website on a hosted server that supports PHP. Then you just need to be online while coding.

Read More

Your first step in PHP , Introduction

PHP gives you the freedom to add advanced features to your website.
The aim of this tutorial is to give you an easy, yet thorough and accurate introduction to PHP. It starts from scratch but requires that you already have a good knowledge of HTML. If you are new to HTML, you should start with Us .
PHP can be used in many contexts - discussion forums, polls, shops, SMS gateways, mailing lists, etc. The only limitation with what you choose to do with PHP is your imagination. PHP is not hard to learn, but be aware that PHP is more sophisticated and demanding to learn than HTML. Therefore, patience in the process is a virtue.
This tutorial cannot show you everything. Therefore, some engagement and a will to experiment are required. If you need help along the way . This is where you meet the real experts who are willing and ready to offer tips, suggestions and advice.

What is needed?

It is assumed that you already have a text editor and know how it is used.
Next, you need access to a computer or a server that can run PHP. In contrast to HTML and CSS, PHP is not affected by which browser your visitors use, but by the type of server that's hosting your pages. This is because PHP is a server-side technology.
In the next few lessons, you will learn all about how PHP works, and how to set up your computer to run PHP. After that, you'll learn about specific functions and methods.
When you finish this tutorial, you will be able to code PHP and thus have access to unlimited possibilities for adding interactivity to your webpages.

Read More

Links In HTML

  


To make links, you use what you always use when coding HTML: an element. A simple element with one attribute and you will be able to link to anything and everything. Here is an example of what a link to  prog-teach.blogspot.com  could look like:

Example 1:

<a href="http://prog-teach.blogspot.com/">Here is a link to HTML</a>

 
 

Would look like this in the browser:

Here is a link to HTML

The element a stands for "anchor". And the attribute href is short for "hypertext reference", which specifies where the link leads to - typically an address on the internet or a file name.
In the above example the attribute href has the value " http://prog-teach.blogspot.com ", which is the full address of  prog-teach.blogspot.com  and is called a URL (Uniform Resource Locator). Note that "http://" must always be included in URLs. The sentence "Here is a link to  prog-teach.blogspot.com " is the text that is shown in the browser as the link. Remember to close the element with an </a>.

What about links between my own pages?

If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages (let us call them page1.htm and page2.htm) and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.htm to page2.htm could look like this:

Example 2:

 

<a href="page2.htm">Click here to go to page 2</a>



 

If page 2 were placed in a subfolder (named "subfolder"), the link could look like this:

Example 3:

 

 



<a href="subfolder/page2.htm">Click here to go to page 2</a>

The other way around, a link from page 2 (in the subfolder) to page 1 would look like this:

Example 4:

 

<a href="../page1.htm">A link to page 1</a>

"../" points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing "../../".
Did you understand the system? Alternatively, you can always type the complete address for the file (URL).

What about internal links within a page?

You can also create internal links within a page - for example a table of contents at the top with links to each chapter below. All you need to use is a very useful attribute called id (identification) and the symbol "#".
Use the id attribute to mark the element to which you want to link. For example:

 

<h1 id="heading1">heading 1</h1>

You can now create a link to that element by using "#" in the link attribute. The "#" must be followed by the id of the tag you want to link to. For example:

 

<a href="#heading1">Link to heading 1</a>

All will become clear with an example:

Example 5:

 

<html>
   
   <head>
   </head>

   <body>

  <p><a href="#heading1">Link to heading 1</a></p>
  <p><a href="#heading2">Link to heading 2</a></p>

  <h1 id="heading1">heading 1</h1>
  <p>Text text text text</p>

  <h1 id="heading2">heading 2</h1>
  <p>Text text text text</p>
   
   </body>

 </html>

will look like this in the browser (click on the two links):

Link to heading 1

Link to heading 2




Heading 1
Text text text text




Heading 2
Text text text text


(Note: An id attribut must start with a letter)

Can I link to anything else?

You can also make a link to an e-mail address. It is done in almost the same way as when you link to a document:

Example 6:

 

<a href="mailto:nobody@prog-teach.blogspot.com/">Send an e-mail to nobody at 
prog-teach.blogspot.com</a>



 
 

will look like this in the browser:

Send an e-mail to nobody at HTML

The only difference between a link to an e-mail and a link to a file is that instead of typing the address of a document, you type mailto: followed by an e-mail address. When the link is clicked, the default e-mail program opens with a new blank message addressed to the specified e-mail address. Please note that this function will only work if there is an e-mail program installed on your computer. Give it a try!

Are there any other attributes I should know of?

To create a link, you always have to use the href attribute. In addition, you can also put a title on your link:

Example 7:

 

<a href="http://prog-teach.blogspot.com/" title="Visit prog-teach.blogspot.com/ and learn HTML">Learn Programmation</a>




 
 

Would look like this in the browser:

Learn Programmation

The title attribute is used to type a short description of the link. If you - without clicking - place the cursor over the link, you will see the text "Visit prog-teach.blogspot.com/ and learn HTML" appears.

Read More

Show Images In HTML

All you need do is first tell the browser that you want to insert an image (img) and then where it is located (src, short for "source"). Do you get the picture?

Notice how the img element is opened and closed using the same tag. Like the <br /> tag, it is not tied to a piece of text.

"david.jpg" is the name of the image file you want to insert in your page. ".jpg" is the file type of the image. Just like the extension ".htm" shows that a file is an HTML document, ".jpg" tells the browser that a file is a picture. There are three different types of image file types you can insert into your pages:

• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

GIF images are usually best for graphics and drawings, while JPEG images are usually better for photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images comprise of millions of colours and second, the GIF format is better at compressing simple images, than the JPEG format which is optimized for more complex images. The better the compression, the smaller the size of the image file, the faster your page will load. As you probably know from your own experience, unnecessarily 'heavy' pages can be extremely annoying for the user.
Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the PNG format has become more and more popular (primarily at the expense of the GIF format). The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing.

Where do I get my images from?

To make your own images, you need an image editing program. An image editing program is one of the most essential tools you need to create beautiful websites.
Unfortunately, no good image editing programs comes with Windows or other operating systems. Thus, you might consider investing in either Paint Shop Pro, PhotoShop or Macromedia Fireworks, which are three of the best image editing programs currently on the market.
However, as we said before, it will not be necessary to buy expensive programs to complete this tutorial. For now, you can download the excellent image editing program IrfanView which is so-called freeware and therefore costs nothing.
Or you can just borrow images from other sites by downloading them. But please be careful not to violate copyrights when downloading pictures. Still, it's useful to know how to download pictures, so here's how you do it:

1. Right-click on an image on any image on the Internet.
2. Choose "Save picture as..." in the menu that appears.
3. Choose a location for the image on your computer and press "Save".

Do this with the image below and save it on your computer at the same location as your HTML documents. (Notice that the logo is saved as a PNG file: logo.png):

 

Now you can insert the image into one of your own pages. Try it yourself.

Example 1:

 
<img src="david.jpg" alt="David" />
 

would look like this in the browser:

                                           

All you need do is first tell the browser that you want to insert an image (img) and then where it is located (src, short for "source"). Do you 

Is that all I need to know about images?

There are a few more things you should know about images.
First, you can easily insert pictures located in other folders, or even pictures that are located on other websites:


Example 2:

 
<img src="images/logo.png" />

Example 3:

<img src="http://prog-teach.blogspot.com/logo.png" /> 

Second, images can be links:

Example 4:

 <a href="http://prog-teach.blogspot.com">
 <img src="logo.png" /></a>

will look like this in the browser (try clicking on the image):

Are there any other attributes I should know about?

You always need to use the attribute src, which tells the browser where the image is located. Besides that, there are a number of other attributes which can be useful when inserting images.
The alt attribute is used to give an alternate description of an image if, for some reason, the image is not shown for the user. This is especially important for users with impaired vision, or if the page is loaded very slowly. Therefore, always use the alt attribute:

Example 5:

<img src="logo.gif" alt="Learn Programmation logo" />

Some browsers let the text of the alt attribute appear as a small pop-up box when the user places their cursor over the picture. Please note that when using the alt attribute, the aim is to provide an alternative description of the picture. The alt attribute should not be used to create special pop-up messages for the user since then visually impaired users will hear the message without knowing what the picture is.

The title attribute can be used to add information to the image:

Example 6:

<img src="logo.gif" title="Learn HTML from Learn Programmation" />

Will look like this in the browser:

If you, without clicking, place the cursor over the image, you will see the text "Learn HTML from  http://prog-teach.blogspot.com" appear as a pop-up box.*

Two other important attributes are width and height:

Example 7:

<img src="logo.png" width="141px" height="32px" />



 

will look like this in the browser:

The width and height attributes can be used to set the height and width of an image. The value that is used to set the width and height is pixels. Pixels are the units of measurement used to measure the resolution of screens. (The most common screen resolution is 1024x768 pixels). Unlike centimetres, pixels are relative units of measurement which depend on the resolution of the screen. To a user with a high screen resolution, 25 pixels may correspond to 1 centimetre, while the same 25 pixel in a low screen resolution may correspond to 1.5 centimetres on the screen.

If you do not set the width and height, the image will be inserted in its actual size. But with width and height you can manipulate the size:

Example 8:

<img src="logo.gif" width="32px" height="32px" />






 

will look like this in the browser:

 
<img src="images/logo.png" />

However, it is worth keeping in mind that the actual size in kilobytes of the image file will remain the same so it will take the same time to load the image as it did before, even though it appears smaller on the screen. Therefore, you should never decrease the image size by using the width and height attributes. Instead, you should always resize your images in an image editing program to make your pages lighter and faster.

That said, it is still a good idea to use the width and height attributes because the browser will then be able to detect how much space the image will need in the final page layout before the image is fully downloaded. This allows your browser to set up the page nicely in a quicker way.

Read More