ComputerHowToGuy.com
Your how-to computer guide

Posts tagged "web page"

What is DHTML?

DHTML may sound like a language but it’s not. DHTML is a term for making web pages dynamic and interactive, by combining the power of HTML, JavaScript, DOM and CSS.

Differences between HTML and XHTML

XHTML stand for EXtensible HyperText Markup Language which is a combination of HTML and XML. In early 2000 XHTML 1.0 became a W3C Recommendation. If you are still using regular HTML, it’s time to change. XHTML isn’t just the future, it’s the now, and HTML is phasing out. But don’t worry too much, the change won’t be painful.

XHTML is a lot like HTML, but more normalized. It forces you to abide by it’s rules, which is a great thing when you are programming! It clearly defines what is OK and what is not. It makes HTML look rather chaotic.

As a result it works in all internet browsers, whereas bad or poorly written HTML may not, especially on mobile phone or other small devices.

So let’s get to it and demonstrate some of the differences between HTML and XHTML.

  • XML requires things to be marked up correctly, in well-formed documents.
  • XML describes data, while HTML displays data.
  • XHTML elements must be properly nested.
  • XHTML elements must be closed even if they are empty.
  • XHTML element and attribute names must be written in lowercase.
  • XHTML documents can only have one root element.
  • Attribute values must be in quotes.
  • Attribute minimization is forbidden, in other words attributes must define a value even if it’s an empty string.
  • The id attribute is now used in place of the name attribute.
  • In XHTML there are some required elements.

The following table contains examples of what works in XHTML and what does not.

Does not work Works 
<b><u>
some bold and underlined text
</b></u>
 
<b><u>some bold and underlined text</u></b>
 
<h1>Header Text
<p>Paragraph text
 
<h1>Header Text</h1>
<p>Paragraph text</p>
 
<br>
 
<br />
 
<P>Some text here</P>
 
<p>Some text here</p>
 
<head>
<title></title>
</head>
<body></body>
 
<html>
<head>
<title></title>
</head>
<body></body>
</html>
 
<a HREF="..."></a>
 
<a href="..."></a>
 
<table width=80%>
 
<table width="80%">
 
<option selected>
 
<option selected="selected">

The XHTML DTD (Document Type Definitions)

All XHTML documents have three main parts:

  • DOCTYPE declaration
  • <head>
  • <body>

The DOCTYPE must be defined before anything else in the document.

Everything but the DOCTYPE declaration will look like HTML, XHTML just holds you to a few rules. That’s the beauty of XHTML!

There are three types of DTDs:

  • STRICT – It forces you to use clean markup when writing your web pages. You use CSS to define your presentation.
  • TRANSITIONAL – This allows you to mix regular HTML features with XHTML. This one seems to be the most commonly used on newer sites, probably because it’s flexible and compatible.
  • FRAMESET – This allows you to use HTML frames

These are some examples of implementing each DTD.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

How to upload a file using PHP

One of the cool things about server side scripting is the ability to upload files from a user’s computer to your web server. In this tutorial I will demonstrate PHP’s ability to capture uploaded files and save them on the web server. Our sample takes a user’s photo and saves it to a folder on the server where other users can view it on the web.

You can download the code here.

Create a file with a name of your choice and put the following code into it.

<form action="upload.php" method="post" enctype="multipart/form-data">
	<div>Upload your photo:</div>
	<input type="file" name="photo_file" />
	<input type="submit" name="submit" value="Upload" />
	<input type="hidden" name="max_file_size" value="8000000" />
	<input type="hidden" name="user_id" value="1" />
</form>

This is the web page where the user can select the file they want to upload.

The first line has two parts I want to point out: the action attribute and the enctype attribute. The action‘s value is the name of your PHP file that will handle the upload. The entype‘s value in this case tells our server that we aren’t just posting your typical text or password type values, but rather we are passing several types, namely a file and a few inputs.

The only required types of inputs for uploading a file are file and submit, but for this example I’ve added a hidden user_id that will be used as well.

Now, on to the juicy stuff… handling the upload on the server.

Create a file called upload.php. This file has the same name that we gave our form’s action attribute. When you are coding your own application you can use whatever file name you want.

Put the following code into your upload.php file:

<?php
 
// Make sure the uploaded file is an image of type JPG, GIF, or PNG and that it does not exceed 8000000 bytes (approx. 8 MB) in size.
if (
!empty($_FILES["photo_file"]["tmp_name"]) &&
$_FILES["photo_file"]["size"] < 8000000 &&
(
	$_FILES["photo_file"]["type"] == "image/gif" ||
	$_FILES["photo_file"]["type"] == "image/jpeg" ||
	$_FILES["photo_file"]["type"] == "image/pjpeg")
)
{
 
    // The file has already been saved to a temporary location on the server.  Get the temp file's path.
    $file_path = $_FILES['photo_file']['tmp_name'];
 
    // Grab the User ID we sent from our form
    $user_id = $_POST['user_id'];
 
    // Create the directory where our user photos where be stored, if it doesn't already exist.
    // We will give our directory name the ID of the user that uploaded the photo.
    $save_dir = "img/users/$user_id";
	if (!file_exists($save_dir)) {
 
		// Our directory does not already exists, so create it.
        mkdir($save_dir, 0755, true);
	}
 
    // Attempt to move the temp file to our user's folder.
	$save_file_path = $save_dir . "/" . basename($_FILES['photo_file']['name']);
    if (move_uploaded_file($_FILES['photo_file']['tmp_name'], $save_file_path)) {
 
        // Moving the file was a success!
        echo("<div>Your photo has been uploaded successfully!</div><div><img src="$save_file_path" />");
 
    } else {
 
        // Moving the file failed.  Prompt the user to try again.
        echo("There was an error uploading your file.  Please try again.");
 
    }
}
 
?>

What does all this do? In a nutshell:

  • Verifies that the uploaded image is of JPEG, GIF, or PNG type.
  • Saves the file to a folder named after the User ID on the server.
  • If successful the picture is displayed on the page for the user to see!

Fun stuff huh! In a later tutorial I will show you how to resize your uploaded images, creating thumbnails, medium sized, and large images.