HTML, CSS, PHP & Mysql Primer

Post by **Richard S.** » Wed. Aug. 12, 2009 7:59 am

This tutorial is just meant to lay the groundwork for an understanding of what each of these things can do for those have that never built a web page and are just starting. I will note that PHP and MySql are not the only server side scripting languages or database that can be used for web development but they are the most widely used. There's a lot of really good tutorials but many of them focus on how to use each individual element but don't lay the foundations for how each can complement each other and should be used together. Each has a specific task but can make for some very powerful tools when combined together properly. HTML and CSS lay the groundwork for web pages and is all you really need to know to display one. PHP and MySql are very powerful tools that can extend what you can do infinitely. You should try to grasp the fundamentals of each. I know such a tutorial would have helped me tremendously and save me a lot of work.

HTML

HTML or Hypertext Mark-up Language is the basis used for nearly every web page on the internet. At it's core it's simple plain text that identifies or "Marks" sections of a document. Depending on the browser you are using you can view the HTML used to generate this page by clicking "View" >> "Page source" or similar. This may look complicated the first time you look at it but it's really not. The most basic HTML document might look something like this:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <title>Hello World!</title>
</head>

<body>
   <p>Hello World!</p>
</body>

</html>

The Doctype
Code: Select all
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
The very first line declares the document type, different doctypes use different specifications. As HTML has evolved the specifications of how it's used has changed. Its important the browser knows what specification you are using, more importantly there are different variances in how a browser will display different document types.
Start and Ending HTML Tags
An HTML tag defines the content inside in it. In almost all cases we have a start and ending tag. For example we have a start tag such as which says we're starting a new paragraph. The text following it would be the content displayed to the person viewing it, in this case Hello World!. The end tag simply says our paragraph is finished.
Code: Select all
```
<p>Hello World!</p>
```
The , and Tags
These are three special tags that should be present in every HTML document and only be used once.
- - This will always follow the doctype declaration, we're simply telling the browser the HTML begins here. The ending tag will always be the last tag to close the document out.
- - The head tag contains information about the document, externally linked documents and other things. In our example code we've used the tag. This is not displayed in the browser page but instead on the title bar. This would also be used by search engines as the title when they display them.
- - This is the meat of the document, this contains the markup for what will be displayed.

Tags can be nested and there are some tags that do not have have an ending tag, most notably the image tag. An example of this:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
    <title>Hello World!</title>
</head>

<body>
   <p><img src="http://www.yourdomain.com/somefolder/someimage.jpg">Hello World!</p>
</body>

</html>

What we have done here is nested an image inside a paragraph. When a person views this from a web browser they'll see the image followed by the text Hello World!

For more in depth information on HTML markup and reference there is an excellent tutorial provided here:
http://www.w3schools.com/html/DEFAULT.asp

CSS

CSS or Cascading Style Sheets is used to format HTML, it can set font sizes and types. colors, positioning, sizes etc. This formatting can be placed inside the head tags, directly in the HTML or what I'm going to focus on in an external document. The trouble with using either of the first two is they are very hard to manage as a site evolves and really negate the benefits of using CSS. For example let's say we have a paragraph on a page and directly in the HTML we set the font color. We can do this by incorporating the style attribute in the p tag:

Code: Select all

<p style="color:#FF0000;">Hello World! I'm a different color!</p>

In this case all the text will appear as red inside this paragraph tag, the #FF0000 is the hex value for a specific color red . Where the issue arises is what if we want to change the background color of our entire site to red? The text is no longer visible and we would have to go through every document on our site to change it to something else. Not such a huge problem if you only have a few pages but what if you have hundreds or even thousands? An externally linked CSS file can solve these issues because it separates the formatting from the mark up as it should be. Linking to this document is quite simple, see the line after our tag. The browser will load this file along with the HTML page:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="http://mydomain.com/mystylesheet.css">
</head>

<body>
   <p class="highlight">Hello World! I'm a different color!</p>
</body>

</html>

Our externally linked stylesheet:

Code: Select all

.highlight
{
color: #FF0000;
}

As you can see I've changed the style attribute in the paragraph tag to a class attribute and assigned it a name. In the stylesheet were are assigning the color. Now this class can be reused anywhere in this HTML document or any other document. If we want to change the color of this paragraph where this class was used on every document on our site we only have to change a single line in the css file.

The reason it's called "Cascading" is because formatting can cascade:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="http://mydomain.com/mystylesheet.css">
</head>

<body>
   <p>Hello World! I'm the default color!</p>
   <p class="highlight">Hello World! I'm a different color!</p>
</body>

</html>

Our externally linked stylesheet:

Code: Select all

p
{
color: #0000BF;
}

.highlight
{
color: #FF0000;
}

Since I assigned a color blue to the paragraph tag every paragraph in this document will appear blue EXCEPT where it''s overridden by another attribute. since we assigned the class to the second paragraph it will be red.

There's excellent tutorial here on CSS and references: http://www.w3schools.com/css/default.asp

PHP

PHP or Hypertext Preprocessor is a server side programming language specifically designed for web pages. It can be used for an infinite amount of things you might want to do with a page before it is sent from the server to the client. This forum for example uses PHP and a MySql backend for data storage. The page you are viewing now does not exist as would the static HTML files previously discussed. When a client makes a request for a forum page a PHP file is executed on the server, it gathers all the information from the database and generates the file on the fly. All within a fraction of a second.

Generally speaking HTML and PHP should be kept separate however doing that is really getting into some very advanced subjects. Instead I'll be using some basic examples here of how we can use PHP and static HTML together. In the following example I'll use the echo and PHP date function:

Note: the file needs to be saved with a .php extension for this to work. If you save it as .html the server will simply output the text.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <title>Hello World!</title>
</head>

<body>
   <p>Hello World! Today is: <?php echo date('l jS \of F Y h:i:s A'); ?></p>
</body>

</html>

Since we have saved our file to the server with a .php extension it will execute any php code in the document. When the file is loaded since there is no php tag to start the server will simply begin outputting the text. When it get's to the it will switch back to HTML mode and start outputting text. We're telling it to "echo" the date and it will output the current date based on the parameters inside the parentheses, In this case something like:

Hello World! Today is: Friday 10th of July 2009 10:36:46 AM

Because this code is dynamic the output sent to the clinet requesting the page will change every time the page is loaded outputting the current date and time. Learning PHP (or other server side language) is really the holy grail because again it presents infinite possibilities. There's thousands of functions like the date function and if the function doesn't exist you can make your own. I'll cover one more function and probably the most widely used one which is the include function. This would also be the most useful for those building their first web pages.

We may have sections of page that need to be the same thing on every page of a site, for example we might have a navigation menu. If we hard code this into every page like the example provided above with the color in the CSS we would have to change this in every document that we have. Again it becomes unmanageable especially as a site grows. You can avoid this by including a file.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <title>Hello World!</title>
</head>

<body>
<?php
  include($_SERVER['DOCUMENT_ROOT'] . '/includes/navigation.php');
?>
   <p>Hello World!</p>
</body>

</html>

I'll break this down, when you write include it's going to look for the value in the parentheses.

Code: Select all

($_SERVER['DOCUMENT_ROOT'] . '/includes/navigation.php')

$_SERVER['DOCUMENT_ROOT']
This is a server variable that will point to the root of your domain, what's important about using it is that it provides an absolute path to where the file is we want to use. You can use this include in any file no matter what folder it resides in.

.
The period simply means append the next value

'/includes/navigation.php'
Where the file resides relative to your domain root.

So providing we have a file that would be located at yourdomain.com/includes/navigation.php it will be included in this document. The contents of navigation.php might havea structure like this:

Code: Select all

<a href="http://www.yourdomain.com/home.php">

<a href="http://www.yourdomain.com/products.php">

<a href="http://www.yourdomain.com/aboutus.php">

The final output when sent to the client will look like this, note the PHP code is not sent to the client:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <title>Hello World!</title>
</head>

<body>

<a href="http://www.yourdomain.com/home.php">Home</a>

<a href="http://www.yourdomain.com/products.php">Products</a>

<a href="http://www.yourdomain.com/aboutus.php">About Us</a>

   <p>Hello World!</p>

</body>

</html>

The benefits are enormous, we only need to change one file if we want to change the navigation of every page of our site.

For more information on PHP you can start with the PHP manual. This is provided online and there is a download version. Probably the best part of the manual is that is in a forum type format. At the bottom of each page you will find user provided examples of how to use the functions beyond what the official manual provides. There is also plenty of books and other material available. The internet is an endless resource as PHP is so widely used.

MySql
MySql is database and the most widely used for web pages. It can be integrated with PHP to store and retrieve data it' really as simple as that. A simple example would be an address book. More advanced examples would be this forum or an ecommerce site. I not going to go into more detail as this is some really advanced stuff but there is an excellent tutorial available here for creating an address book.

A Word of Caution
PHP and Mysql are powerful tools and that can be used against you from hackers. It is important that you learn about security before implementing it. The example I provided for using the include or date functions are not problematic but the address book tutorial should NEVER be used on a live site as it is written. It presents so many vulnerabilities it's a joke. Most notably there is no validation of the input which can lead to SQL Injection for starters.

Conclusion
I hope this was helpful, again this tutorial is meant to give some basic knowledge on what these things are and how they can be used. Most companies employ many people that specialize in certain areas from graphic design, HTML to programming. Ultimately the goal of anyone that wishes to travel this road is to understand how all these things combine. The key to manageable web sites and future upgrades is separation of all these components: Markup (HTML), Formatting(CSS), Programming(PHP) and Data(MySqL). By separating them you have created individual components that can be manipulated independent of the other. Granted total separation is not possible for those starting out and I wouldn't even begin to suggest it to the novice as you will end up beating your head against the wall. What you will want to do is work towards that goal.

Cold_Mainer · Post by **Cold_Mainer** » Sat. Oct. 03, 2009 9:08 pm

So where is the next lesson, Richard? I'd like to learn PHP and MyySql.

Post by **Richard S.** » Sun. Oct. 04, 2009 4:55 am

It's not my place for teaching that as I'm not qualified and this would not be the place. It's a big learning curve. I can certainly try and answer questions if I know it.

If you want to learn the best thing to do is install something like XAMPP so you can test code locally. Start reading through the php manual and other tutorials online. There's also books available but since I need "hands on" books were not something I used so I don't have any recommendations. The manual is actually great resource because it has a forum type format, below the official documentation you'll find code examples and other information posted by users.