Euro PC Solutions Blog

Is used to define acronyms like C.I.A.
Normally it is used with the title attribute to give the definition of the acronym when a user rolls over it :

Code : HTML

<acronym title="Central Intelligence Agency">C.I.A.</acronym>

Long quotation.
You must put a paragraph inside the blockquote. Example :

Code :HTML

<blockquote>
     <p>
          Text of the quotation.
     </p>
</blockquote>

Adds a lot of value to the text.
Generally makes the text bold.

Adds a bit of value to the text.
Generally makes the text italic.

Inserts an image.
Use the src (to indicate the address of the image) and alt (to give text description) attributes. These 2 attributes are obligatory.
Example :

Code : HTML

<img src="images/smiley.png" alt="smiley face" />

Hypertext link.
Give the URL of the destination with the href attribute :

Code : HTML

<a href="otherpage.html">Go to the other page</a>

Lets you insert an address or the author of a document.
Generally makes the text italic.

Lets you indicate text that has been deleted.
Generally the text is crossed out.

Allows you to indicate text that has been added.
Generally the text is underlined.

Unordered bullet point list. You must use <li></li> for each element of the list. Example :

Code : HTML

<ul>
     <li>An element</li>
     <li>Another element</li>
</ul>

Ordered list (with numbers). You must use <li></li> for each element of the list. Example :

Code : HTML

<ol>
     <li>Element 1</li>
     <li>Element 2</li>
</ol>

Lets you create a new element in a list.
The type of this tag is peculiar as it is neither inline nor block. It is a list-item

Definition list. You must alternate each term (<dt>) with a definition (<dd>). Example :

Code : HTML

<dl>
     <dt>Door</dt>
     <dd>An opening in a wall to let people enter and exit</dd>
     <dt>Theatre</dt>
     <dd>Place for putting on shows</dd>
</dl>

Surrounds the contents of the table. Here’s a simple example :

Code : HTML

<table>
     <caption>Passengers of flight 377</caption>

     <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Country</th>
     </tr>

     <tr>
          <td>Carmen</td>
          <td>33 Yrs Old</td>
          <td>Spain</td>
     </tr>
     <tr>
          <td>Michelle</td>
          <td>26 Yrs Old</td>
          <td>United States</td>
     </tr>
     <tr>
          <td>Ben</td>
          <td>19 Yrs Old</td>
          <td>England</td>
     </tr>
</table>

Optional tag that allows you to insert a header in the table.
If you decide to use <thead>, <tfoot> and <tbody>, they must be used in the following order in your source code :

1. thead
2. tfoot
3. tbody

Surrounds the contents of a form.
It is normally used with 2 attributes :

• method : indicates the sending method of the form (get or post). If you don’t know what to put use post.
• action : the page towards which the visitor should be redirected after sending the form.

Groups several elements of a form.
Generally used in large forms.

To give a title to the group use the legend tag.

Title of a group in a form.
To be used inside <fieldset>

Title of an element in a form.
Normally, you should use the for attribute with this tag to give the ID of the element that corresponds to the label.

Input area.
There are several types of input boxes. Use the type of input you want with the type attribute :

Code : HTML

<!-- Text input with one line -->
<input type="text" />

<!-- Password (text is hidden) -->
<input type="password" />

<!-- Send a file -->
<input type="file" />

<!-- Box to tick -->
<input type="checkbox" />

<!-- Option button -->
<input type="radio" />

<!-- Send button -->
<input type="submit" />

<!-- Reset button -->
<input type="reset" />

<!-- hidden box -->
<input type="hidden" />

Think to give names to your fields with the name attribute.

Text input for several lines.
You can set its size with the row and cols (number of lines and columns) attributes or with the CSS by using width and height.

Scrolling list.
Use the option tag to create each element of the list :

Code : HTML

<select name="country">
     <option value="england">England</option>
     <option value="usa">U.S.A.</option>
     <option value="italy">Italy</option>
</select>

Group of elements in a scrolling list.
To be used in large lists.
Use the label attribute to give a name to the group.