Write a comment on this article
This page contains some useful HTML examples and tips. Feel free to copy them und customize them to your needs.
Quickmenu: Basic HTML structure, File upload, Full featured table, Seperate style from content
The following example contains a basic HTML structure using XHTML 1.1 without any content and resources like CSS- or JavaScript-files, just a blank page. It defines the document type and the content type. Perfect to start a fresh website.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The title of your page</title>
</head>
<body>
<-- CONTENT GOES HERE -->
</body>
</html>
Uploading files (images, documents, etc.) with HTML can only be done by using forms. You need to consider two attributes: action and enctype. The action attribute must be set to "post" to send a POST request to the server (files can't be transferred with a GET request) and the enctype attribute must contain "multipart/form-data", so the browser knows it will need to transfer files. To provide a file selection input field you need to define an input-element with type="file".
What to do with the file on the server is up to you. You can read the file's information, store the file, send it via email, anything you want. Anyway, you need a serverside script to handle the file upload, like PHP. For links check the resources below.
<form method="post" action="your_page.php" enctype="multipart/form-data"> <!-- FORM ELEMENTS GO HERE --> </form>
The following code provides a full featured table including table summary, table width, table border, spacing between cells, white space within cells, horizontal and vertical alignment inside cells, table caption and cells spanning over multiple columns and rows.
You can view the output of this code here: Full_featured_table.html.
<table summary="A table showing favorite colors of three people."
width="800" border="1" cellspacing="5" cellpadding="15">
<caption>Table 1: Favorite colors</caption>
<thead>
<tr>
<th> </th>
<th>Red</th>
<th>Blue</th>
<th>Yellow</th>
<th>Green</th>
</tr>
</thead>
<tbody align="center" valign="middle">
<tr>
<td>Mark</td>
<td colspan="2">no</td>
<td>yes</td>
<td>no</td>
</tr>
<tr>
<td>Tina</td>
<td>no</td>
<td colspan="2" rowspan="2">no</td>
<td>yes</td>
</tr>
<tr>
<td>Laura</td>
<td>yes</td>
<td>no</td>
</tr>
</tbody>
</table>
HTML offers some possibilities to spice up your page with cool colors, fancy fonts and blinding backgrounds using attributes like "color", "bgcolor" or "background". But these possibilites are very limited and outdated as well as deprecated. Nowadays, styling should be done using Cascading Stylesheets (CSS). You can find an introduction to CSS here: Introduction to CSS.
In many cases, HTML tables are abused for layout, even though they should be used for structured data only. As CSS provides techniques for positioning, it also is predestined for website layout. See Layout with <DIV>'s for details.
HTML, examples, tips
If you have a question or a problem and you're looking for a solution, please use the forum. Comments might not be answered.