DevHints

Crash Course: HTML

Posted on: November 24, 2006

Lets jump right into it here. HTML is based on tags. Each tag performs a specific function, and most tags have attributes that modify them. In HTML, tags are delimited (separated) by < and > signs. Here’s what a tag should look like:

<tagname attribute=”value” attribute=”value”>content</tagname>

As you can see, the syntax is very simple. The tag name comes first. Some tags are <b>, which makes the content appear boldfaced, <i> which makes the content appear italicized, and <br> which is considered a line-break…aka a new line. A tag doesn’t have to have any attributes, but some, like the img tag require attributes.

Not all tags have endtags (</tagname>) either. Linebreak (<br>) tags, for example, do not need to be closed…in fact…they can’t be. Paragraph tags (<p>) don’t have to be closed either, though they can be.

Here’s a list of common tags:

<b> – Bold text

<i> – Italic text

<u> – Underlined text

<img> – Display an image. Common attributes for an img tag are src (the URL of the image), width, height, and alt (alternate text in the cast that the image cannot be displayed).

<br> – line break

<p> – Paragraph. By default this places two linebreaks before the content and two linebreaks after the content if explicitly closed with </p>.

You’ll almost certainly find that there isn’t much to be done with the above tags. You really can’t create anything fancy, and even doing modest styling is difficult. This is where CSS, tables, and divs come into play. Since divs are harder to grasp the concept of, I’ll only explain tables.

<table> Creates a new table.

<tr> Creates a new row in a table.

<td> Creates a new cell within a row.

When you envision a table, think of a chart or spreadsheet. It has rows and columns, which define individual cells. In an HTML table you certainly have rows and columns, but you do not explicitly set columns, rather, the number of columns is defined by how many cells are in a row.

To create a simple table with numbers 1 and 2 in the top cells and 3 and 4 in the bottoms cells, here’s what we would do:

<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

We created our table with the <table> tag. Then we created our first row with the <tr> tag. We created 2 cells by placing 2 <td> tags in that first row. Then we closed the row and opened a new one. We created two cells in this row as well, then closed it and the table. This table will display as a 2×2 table, meaning it has 2 rows and 2 columns.

You can use a table to position things on your page better. You can create a table to display content on the left or right of your menu, for example. A very large percentage of websites use tables to layout their content. I strongly suggest you view the source of websites you visit to get a better understanding of how they lay out their website.

With this I leave you. This is by no means an all inclusive session on HTML. It is, as the title declares, a crash-course.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: