Hrvatski

printer friendly version

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

  1. there are easier ways, using CSS
  2. the font tag is deprecated, and shouldn't be used anymore
  3. even if it wasn't deprecated, each font tag 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:

new shirt
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:

  1. <table> - outlines the table area
  2. <thead> - outlines the table header area (contains column headings)
  3. <tbody> - outlines the table body area (contains row headings and table data)
  4. <tr> - outlines the table row
  5. <th> - contains the table heading
  6. <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:

  1. wash the hair
  2. meet Tra
  3. 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 default
  • width - width of the frame in pixels or percents
  • height - height of the frame in pixels or percents
  • name - 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 displayed
  • scrolling - defines if the scrollbars should be shown (possible values are: yes, no, auto)
  • align - alignment of frame (left, right, top, middle, bottom)
  • marginheight and marginwidth - 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 ;)


Share this tutorial with your friends!





Branding & web design by Nela Dunato

Sign up NOW to get a BONUS brush set into your inbox!

You will also get notified when I add new free downloads. I won't spam you, I promise!

Facebook