Images

Considerations

Images have two important numbers which must be observed. First, are the dimensions of the image, in pixels. The second, is the size on disk, in bytes. For example; a common digital camera might take an image with dimensions of 2000x2000, and that file might be about 1MB.

As a rule, images should always be displayed in their natural state on a webpage -- they should never be stretched, zoomed or distorted. This often means that an image must be resized (using a tool like Gimp or Photoshop) to an appropriate size, before being uploaded.

Additionally, when saving a resized image, many image editors now offer a "Save to Web" (or similar) option -- these functions will go to extra lengths to reduce the size of the image on disk. This makes the image faster for the end-user (visitor) of your website.

Syntax

The <img> tag has several attributes. The more important ones include src="", alt="", and title="".

<img src="grumpycat.jpg" alt="Grumpy Cat" title="That's one grumpy cat.">

Lists

Lists come in two flavors; ordered and unordered. Within a given list, there should be list items. The structure looks like this:

 <ol>
  <li>item number 1</li>
  <li>item number 2</li>
 </ol>

 <ul>
  <li>bullet number 1</li>
  <li>bullet number 2</li>
 </ul>

There are lots of neat things that can be done with lists, using CSS. Stay tuned!

Tables

Tables are a great way to display things. Tables consist of rows and cells . Here is a basic structure:

 <table>
  <tr>
   <td>A1</td>
   <td>B1</td>
  </tr>
  <tr>
   <td>A2</td>
   <td>B2</td>
  </tr>
 </table>

Tables can get very rich with data. Here is a table with a complete header and footer, as well as some extra fanciness.

 <table border="1">
  <thead>
   <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
   </tr>
  </thead>
  <tfoot>
   <tr>
    <td colspan="4" style="text-align: center;">Page 1</td>
   </tr>
  </tfoot>
  <tbody>
   <tr>
    <td>A1</td>
    <td colspan="2" style="text-align: center;">B1</td>
    <td>D1</td>
   </tr>
   <tr>
    <td rowspan="2">A2</td>
    <td>B2</td>
    <td>C2</td>
    <td rowspan="2">D2</td>
   </tr>
   <tr>
    <td>B3</td>
    <td>C3</td>
   </tr>
   <tr>
    <td>A4</td>
    <td colspan="2" style="text-align: center;">B4</td>
    <td>D4</td>
   </tr>
  </tbody>
 </table>

Block & Inline Elements

The various HTML elements, generally speaking, fall into these two camps. Using CSS we can manipulate them as we please.

Block Elements

Block level elements will force all following elements to appear below it. (like pressing enter on a typewriter, the rest of the line is left blank)

<h1>
<p>
<ul>
<table>

Inline Elements

Inline elements appear uninterrupted, along with other elements. For example, a link. It can appear next to other text or tags, and it does not interrupt the flow.

<b>
<a>
<img>
<td>

Forms

Forms are a great way for users to be able to provide information. There is a <form></form> element, which wraps all of the elements.

Defining the Form

First step is to create the form element. There are two attributes which are required. They are action="", which is a URL, where the browser will send the data -- and method="", which can be either get or post. In short, get will put the form data in the URL (which the user can see), and post will provide the data behind-the-scenes, which the user cannot see.

<form action="index.php" method="post"></form>

Form Elements

Most form elements are created using the <input> tag. Important attributes include type="" and name="". Type is rather self-explanatory, it declares what the input element should look like. Name is used to identify the submitted data. Here are some common examples of inputs.

Text & Password

<input type="text" name="username">
<input type="password" name="password">

Radio buttons

<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female

Checkboxes

<input type="checkbox" name="vehicle" value="bike">I have a bike
<input type="checkbox" name="vehicle" value="car">I have a car

Drop-down lists

<select name="fruit">
 <option value="apple">Apples</option>
 <option value="banana">Bananas</option>
 <option value="orange">Oranges</option>
 <option value="pear">Pears</option>
</select>

And a really fancy example;

<select name="produce">
 <optgroup label="Fruit">
  <option value="apple">Apples</option>
  <option value="banana">Bananas</option>
  <option value="orange">Oranges</option>
  <option value="pear">Pears</option>
 </optgroup>
 <optgroup label="Vegetables">
  <option value="beet">Beets</option>
  <option value="carrot">Carrots</option>
  <option value="celery">Celery</option>
  <option value="cauliflower">Cauliflower</option>
 </optgroup>
</select>

Textarea

<textarea name="story"></textarea>

Submit & Reset buttons

<input type="submit" value="Submit">
<input type="reset" value="Reset">

Complete Form

Here is a complete form example.

<form action="index.php" method="post">
 <input type="text" name="username">
 <input type="password" name="password">
 <input type="submit">
</form>

HTML 2

Contents