Basic HTML codes (part 2)
Here is an explanation of HTML tags you will certainly need. Note that this tutorial has a part 1, so if you're not familiar with the basics, read it first.
Paragraphs and headings
When you write your textual content, basically, you could write it without any markup,
but it wouldn't look right, not to mention structured. Using font for this purpose is also
wrong, because
- there are easier ways, using CSS
- the
fonttag is deprecated, and shouldn't be used anymore - even if it wasn't deprecated, each
fonttag means larger code, and you want your code to be optimized.
If you take a look at my source code, you will see that all the paragraphs are marked with
<p> tag. It enables me to make the style of each paragraph exactly the same,
and I can easily manage the margins, padding, text align, indent... Each paragraph should be inside
its own <p> tag. See the example:
<html>
<head>
<title>Page title here</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.
</p>
</body>
</html>
Since your textual content probably has titles of different importance, you might need
one large title for the entire page, and several smaller titles for portions of your
text. Luckily, this is very easy with heading tags <hX> (where X
represents a number from 1 to 7).
The most important title should be inside the <h1> tag. A smaller,
less important title, should be inside the <h2> tag. If you need
more small titles inside this block of text, you should use the <h3>
tag, etc. See the following example:
<html>
<head>
<title>Page title here</title>
</head>
<body>
<h1>The Page Title</h1>
<h2>The Title of the First Section</h2>
<h3>The Title of the First Subsection</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</p>
<h3>The Title of the Second Subsection</h3>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</p>
<h2>The Title of the Second Section</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</p>
</body>
</html>This example is a well formed, structured text. You should use this method whenever possible, because it's also the most accessible.
div and span elements
They are often used to divide parts of text that need a different formatting. In the
tutorial about classes and ID's,
I showed how to use the div to separate
navigation from content, and this is probably the most often used way. However, if you
have a part of text that needs to be separated from the rest, it is also a way.
The difference between div and span is that div
is a block-level element, and span is an inline element. What does this
mean? Well, the simplest explanation would be: block-level elements are, unless otherwise
stated, using the whole width of their parent element (100%) - this means that a
div inside the body would be as wide as your screen is. The
content of each new div would be placed inside a new row, no matter if
you added a linebrake or not. Inline element is an element that takes only the actual
content width, so if you have a word that's 100 pixels wide, set inside a span,
what comes after it would follow the word in the same line, except if you added a linebrake
or a new paragraph.
I hope you understood this, because it's the best I can do.
I already mentioned when div should be used. span should be used
when you want to add special visual effects to a small part of text, for example, when you
want to colorize it, or something similar. Take a look at this example:
This is my <span style="color: red">wishlist</span>:
<div>
new shirt<br />
<span style="text-decoration: line-through"
title="got them! :D">sunglasses</span><br />
F: Herbert "Dune"<br />
</div>It looks like this:
This is my wishlist:
sunglasses
F: Herbert "Dune"
Tables
Here we are, the famous tables. If you're using a
WYSIWYG editor, you have no idea
what is coding a table like. And I'll tell you: it's a pain in the ass. Don't use tables unless
you have to, use them only when the table makes sense. And it makes sense when both the columns
and rows are required for your content. Otherwise, consider divs or lists.
Table consists of 6 essential tags:
<table>- outlines the table area<thead>- outlines the table header area (contains column headings)<tbody>- outlines the table body area (contains row headings and table data)<tr>- outlines the table row<th>- contains the table heading<td>- contains the table data
There are some limitations you must be careful about:
<tr>must be inside a<table>tag<th>and<td>must both be inside a<tr>tag
Now that you know this, let's code a simple table with 3 rows, 3 columns and a heading for each column.
<table cellpadding="1" cellspacing="1" border="1" width="300">
<thead>
<tr>
<th>Country</th>
<th>Continent</th>
<th>Capital</th>
</tr>
</thead>
<tbody>
<tr>
<td>Croatia</td>
<td>Europe</td>
<td>Zagreb</td>
</tr>
<tr>
<td>Japan</td>
<td>Asia</td>
<td>Tokio</td>
</tr>
<tr>
<td>Brazil</td>
<td>South America</td>
<td>Brasilia</td>
</tr>
</tbody>
</table>This is how it looks:
| Country | Continent | Capital |
|---|---|---|
| Croatia | Europe | Zagreb |
| Japan | Asia | Tokio |
| Brazil | South America | Brasilia |
Lists
There are two kinds of lists - ordered and unordered. Elements inside an ordered list
are marked with a number, and ones in an unordered list are marked with a bullet (offcourse,
bullet can be changed or disabled in CSS in case you don't like it).
Lists are very practical because you can stack elements vertically (and even horizontally
if you wish) without having to use table cells. A neat usage of lists in navigation is
described in my tutorials Simple rollover menu and
Image rollover menu.
You must be careful about the following:
<li>tag must be inside the<ul>or<ol>tag- all content must be inside the
<li>tag
Here is an ordered list...
Things to do:
<ol>
<li>wash the hair</li>
<li>meet Tra</li>
<li>learn math</li>
</ol>...that looks like this:
Things to do:
- wash the hair
- meet Tra
- learn math
It's a lot better than writing the numbers yourself, because if you wish to move learn math before meet Tra, you will just change the rows, without having to change the numbers. It looks like an unnecessary feature, but if you have a list of 20 things, having to change the numbers accordingly would be much fun, wouldn't it?
Here is an unordered list...
Things to do:
<ul>
<li>wash the hair</li>
<li>meet Tra</li>
<li>learn math</li>
</ul>...that looks like this:
Things to do:
- wash the hair
- meet Tra
- learn math
iFrames
iframe is an abbrevation from inline frame. Nowadays, frameset is rarely used
- if you have to use frames, use iframe.
The frame must have these attributes:
src- URL to the page that will be opened in the frame by defaultwidth- width of the frame in pixels or percentsheight- height of the frame in pixels or percentsname- all the links that should be opened inside the frame, must have the name of the frame as target (see the example below)
This link:
<a href="mypage.html" target="mywindow">my page</a>
will open in a frame named mywindow
These attributes don't have to be defined, but you'll probably find them useful:
frameborder- set to 0 if you don't want the border to be displayed, 1 if you want it to be displayedscrolling- defines if the scrollbars should be shown (possible values are: yes, no, auto)align- alignment of frame (left, right, top, middle, bottom)marginheightandmarginwidth- frame margins in pixels
Here is an example:
<iframe src="mypage.html" name="mywindow" width="300"
height="100" frameborder="0" scrolling="auto"></iframe>
This tutorial (part 1 and 2) should cover all the tags you need for a start... and if you're good enough with using them, it's all the tags you'll need... ever ;)