pootato.org » HTML http://pootato.org Tutorials for your website Mon, 26 May 2008 19:56:42 +0000 http://wordpress.org/?v=2.2.2 en Coding a layout http://pootato.org/tutorials/html/coding-a-layout/ http://pootato.org/tutorials/html/coding-a-layout/#comments Wed, 22 Aug 2007 19:42:31 +0000 Clara http://pootato.org/tutorials/html/coding-a-layout/ Edit: Added display: inline; to #text and #sidebar because of IE6 bugs.

You reached the coding part of the tutorial. The first part is here, it explains how to make this simple layout in Photoshop. We're going to code the simple layout we made here. First, let's prepare our HTML file. Put all the codes we'll need first. Between <head> and </head>, don't forget to link the HTML file to style.css that we will create afterwards:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

(more…)

Share This

]]> http://pootato.org/tutorials/html/coding-a-layout/feed/ Favicon http://pootato.org/tutorials/html/favicon/ http://pootato.org/tutorials/html/favicon/#comments Thu, 16 Aug 2007 19:27:57 +0000 Clara http://pootato.org/tutorials/html/favicon/ So you want to create a favicon… But what's a favicon? Look at the adress bar, you will see a little poo. If you're on a site that doesn't have a favicon, you will see Internet Explorer's icon or a bullet in Firefox.

First, you have to create your icon… If you already know how to make an icon, do a 16×16 pixels sized one. If not, I recommend you those helpful links:
Favicon maker
Favicon from pics
Favicon generator
Favicon generator bis

Now that you have your icon, (name and extension should be favicon.ico) Upload it to your server root folder.

<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />

Share This

]]> http://pootato.org/tutorials/html/favicon/feed/ Image Maps Coordinates http://pootato.org/tutorials/html/image-maps-coordinates/ http://pootato.org/tutorials/html/image-maps-coordinates/#comments Thu, 16 Aug 2007 17:43:40 +0000 Clara http://pootato.org/tutorials/html/image-maps-coordinates/ First of all, read the image maps tutorial. Since that question has been asked pretty often… how do you find the right coords when coding an image map? Of course, the easiest way would be to install a software or do it with your code editor, but if you really want to do it by yourself… Here is my solution. I will use this picture; the areas in red are the areas we want to be clickable.

schema

Remember the code? It's something like this.

<map name="Map">
<!– BOX 1–>
<area shape="rect" coords="x1, x2, x3, x4" href="page1.htm" alt="" />
<!– BOX x –>
<area shape="rect" coords="xx, xx, xx, xx" href="page2.htm" alt="" />
</map>

schema

Just like in maths, we will find X1, X2, X3 and X4. Open your image in your graphics editor. Select the area like in this image first, press [ Ctrl + C and Ctrl + N ]. A new document window will pop up, note down the width of the document: it is X1, the height of the document is X2. So now your code will look like this:

<map name="Map">
<!– BOX 1–>
<area shape="rect" coords="27, 18, x3, x4" href="page1.htm" alt="" />
</map>

schema

Now, X3 and X4 are left. Just like before, select the area like I did above. Because now, you need the pixels from the left to the end of the box and the pixels from the top to the bottom of the box. Press [ Ctrl + C and Ctrl + N ]. A new document window will pop up, note down the width of the document: it is X3, the height of the document is X4. Your first rectangular area is done:

<map name="Map">
<!– BOX 1–>
<area shape="rect" coords="27, 18, 110, 51" href="page1.htm" alt="" />
</map>

schema

Now, you just have to repeat the process with the two areas left. Your final code should look like this:

<map name="Map">
<!– BOX 1 (blue)–>
<area shape="rect" coords="27, 18, 110, 51" href="page1.htm" alt="" />
<!– BOX 2 (red)–>
<area shape="rect" coords="45, 98, 122, 140" href="page2.htm" alt="" />
<!– BOX 3 (green)–>
<area shape="rect" coords="298, 95, 415, 138" href="page3.htm" alt="" />
</map>

Let's test it! :) Mouse over one, two, three and see if it works!

schema
schema schema schema

Hooray, it works. The process is the same for polygonal and circular spots, read carefully the other tutorial and try to apply this one?

Share This

]]> http://pootato.org/tutorials/html/image-maps-coordinates/feed/ Image Maps http://pootato.org/tutorials/html/image-maps/ http://pootato.org/tutorials/html/image-maps/#comments Thu, 16 Aug 2007 17:39:18 +0000 Clara http://pootato.org/tutorials/html/image-maps/ What are images maps? Simple, for example, you have a picture, with your menu on, and instead of linking this picture to a page, you need to link it to several pages, you can allow your visitors to go on a page by clicking on a part of the picture, and to an other page by clicking an other part.

<img src="image_url.gif" usemap="#Map" alt="" />

You need to add the attribute usemap you can rename Map by whatever you want but never forget the # before it, it's the anchor. First, here is an exemple of a rectangular hotspot.

<map name="Map">
<!– BOX 1–>
<area shape="rect" coords="x1, x2, x3, x4" href="page1.htm" alt="" />
<!– BOX x –>
<area shape="rect" coords="xx, xx, xx, xx" href="page2.htm" alt="" />
</map>

Significance:
x1 : pixels from the left at the beginning of the rectangle
x2 : pixels from the top
x3 : pixels from the left at the end of the rectangle
x4 : height of your rectangle
To add more boxes, you will have to copy the box 1 code, then paste it and change the coordinate attribute. You can add as many spots as you want.

Let's see circular hotspots, they are the same as rectangular but it's circles! It's obvious, nope?

<map name="Map">
<!– CIRCLE 1–>
<area shape="circle" coords="x1, x2, x3" href="page1.htm" alt="" />
<!– CIRCLE x –>
<area shape="circle" coords="xx, xx, xx" href="page2.htm" alt="" />
</map>

Significance:
x1 : pixels from the left for the circle's center
x2 : pixels from the top for the circle's center
x3 : the circle's radius
Same as before, you can add as many circles as you want, just copy a line and paste it.

Now, the last category, polygonal hotspots, they are a little bit more complicated. Have you learned vectors at school in maths? It's the same! For exemple, let's make a triangle. Don't forget to put the usemap thing in your picture's tag. The coordinates are a little differents from the circles and the rectangles. Each point you'll place will have 2 coordinates, x & y, exactly like in a grid, in maths.

<map name="Map">
<!– POLYGON 1–>
<area shape="poly" coords="x1, x2, y1, y2, z1, z2" href="page1.htm" alt="" />
<!– POLYGON x –>
<area shape="poly" coords="xx, xx, xx, xx, xx, xx" href="page2.htm" alt="" />
</map>

schemaSignificance:
x1 : pixels from the left for the first point
x2 : pixels from the top for the first point
y1 : pixels from the left for the second point
y2 : pixels from the top for the second point
z1 : pixels from the left for the third point
z2 : pixels from the top for the third point
See? They are like couples. Then, the first point will join the second point and this second point will join the third point to make your triangle! Of course, it's polygons, so you can add as many points as you want. I hope this tutorial helped.

Of course, for each category of hotspots, you can change the target, add title, alt, etc. To learn how to determinate the X1, X2, etc. by yourself, read this tutorial.

Share This

]]> http://pootato.org/tutorials/html/image-maps/feed/ Doctypes http://pootato.org/tutorials/html/doctypes/ http://pootato.org/tutorials/html/doctypes/#comments Sat, 11 Aug 2007 19:19:53 +0000 Clara http://pootato.org/website/doctypes/ In order to validate your page, the first thing to do is to choose a doctype. Using valid codes is pointless without the two lines which compose the document type declaration. Besides, using valid codes without or with a wrong doctype can cause the page to show up uncorrectly. (I have already experienced that.)

I will only list HTML 4.01 and XHTML 1.0 doctypes since they're the most commonly used ones. There are 3 types for each: Strict, Transitional or Frameset.

  • HTML 4.01 Strict: you can't use deprecated elements, nor target attributes in links nor frames.
  • HTML 4.01 Transitional: you can use any deprecated elements and have links targets, but if you have frames, use the next doctype.
  • HTML 4.01 Frameset: it is the same as Transitional but it's a doctype for pages using frames.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

It is the same for XHTML 1.0 Strict, Transitional and Frameset.

  • XHTML 1.0 Strict: you can't use deprecated elements, nor links targets nor frames.
  • XHTML 1.0 Transitional: you can use any XHTML 1.0 code, but no frameset.
  • XHTML 1.0 Frameset: it is the same as Transitional but it's a doctype for pages using frames.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Of course, you have to use valid HTML 4.01 or XHTML 1.0 and code properly. Now you can choose the best doctype for you and paste it in your codes. It must be placed at the very top, before the html attribute.

Share This

]]> http://pootato.org/tutorials/html/doctypes/feed/ Display codes http://pootato.org/tutorials/html/display-codes/ http://pootato.org/tutorials/html/display-codes/#comments Sat, 11 Aug 2007 19:18:43 +0000 Clara http://pootato.org/website/display-codes/ Here are various ways to display HTML codes…

Using code: (Take care, you will have to replace all < by &lt; and all > by &gt;!) This is what I actually use. I customized it with CSS:

<code>Your codes come here</code> Using pre:

<pre>It keeps the white space and lines break but you still have to replace < and > by &lt; and &gt;</pre> 

It keeps the white          space and
lines break but you still have
to replace < and > by &lt; and &gt;

Using xmp: (This shows the exact text you put, you don't have to replace anything but it's deprecated)

<xmp><a href="code">example</a></xmp> Of course, all those tags can be customized via CSS so they will look better.

Share This

]]> http://pootato.org/tutorials/html/display-codes/feed/ Tables http://pootato.org/tutorials/html/tables/ http://pootato.org/tutorials/html/tables/#comments Sat, 11 Aug 2007 19:17:29 +0000 Clara http://pootato.org/website/tables/ Tables are based on three main tags: table, tr and td : table, table row and table data. First, let's learn how to make rows. Each tr is a row.

<table>
<tr> <!– first row –>
Row 1 contents
</tr> <!– end of first row –>
<tr> <!– second row –>
Row two contents
</tr> <!– end of second row –>
</table> Unluckily, this isn't enough. You have to add data cells to your rows, like this:

<table>
<tr> <!-- first row -->
<td>This is line 1</td>
</tr> <!– end of first row –>
<tr> <!– second row –>
<td>This is line 2</td>
</tr> <!– end of second row –>
</table>Given there isn't any attribute, it will display this: (the borders aren't visibles)

This is line 1
This is line 2

Now, let's see how to add columns. It's simple, you just have to add another "table data" in the "table row", like this:

<table>
<tr> <!-- first row -->
<td>This is line 1, cell 1</td>
<td>This is line 1, cell 2</td>
</tr> <!– end of first row –>
<tr> <!– second row –>
<td>This is line 2, cell 1</td>
<td>This is line 2, cell 2</td>
</tr> <!– end of second row –>
</table> And it will display: (I added a border to make it more visible)

This is line 1, cell 1 This is line 1, cell 2
This is line 2, cell 1 This is line 2, cell 2

See? It's simple. If you want ten columns, then add td 10 times between tr tags. Now, let's continue with something more complicated… We're going to merge columns. For example, in your first row, you have two cells and you want only one cell in the second row.

<table>
<tr>
<td>Line 1, cell 1</td>
<td>Line 1, cell 2</td>
</tr>
<tr>
<!– add colspan="2" in the td tag. –>
<td colspan="2">Line 2, cell 1</td>
</tr>
</table> It will display: (once again, I added the border attribute)

Line 1, cell 1 Line 1, cell 2
Line 2, cell 1

You can always change the colspan value by the number of columns you need to merge. In fact, it's pretty simple neh? Well, that was for columns, let's see how it works for rows now.

<table>
<tr>
<!– add rowspan="2" in the td tag. –>
<td rowspan="2">Column 1, line 1 and 2</td>
<td>Column 2, line 1</td>
</tr>
<tr>
<td>Column 2, line 2</td>
</tr>
</table>It will display: (I added the border attribute)

Column 1, line 1 and 2 Column 2, line 1
Column 2, line 2

As for the columns, you will have to change the rowspan value by the number of rows you want to merge. Now, let's see some table attributes.

<table width="200" cellpadding="0" cellspacing="0" border="1">
<!– tr, td tags here –>
</table>

  • width can be in pixels (so you just put a number) or in %, but you will need to add % after the number.
  • cellpadding is the space between the cell's border and the text. (pixels or %)
  • cellspacing is the space between cells. (pixels or %)
  • border is the size or the table's border. (pixels) I recommend you to use border="0", it's nicer.

<table align="center" bgcolor="#FFFFFF" dir="ltr">
<!– tr, td tags here –>
</table>

  • align is the table alignment. It can be center, left or right.
  • bgcolor is the table background color. You may use hex color codes.
  • dir is the text direction. It can be ltr (left to right) or rtl (right to left).

Share This

]]> http://pootato.org/tutorials/html/tables/feed/ Metatags http://pootato.org/tutorials/html/metatags/ http://pootato.org/tutorials/html/metatags/#comments Sat, 11 Aug 2007 19:15:32 +0000 Clara http://pootato.org/website/metatags/ Metatags are used by search engines like Google or Yahoo to index your website. They belong to the head part of your document.

<meta name="keywords" content="key, words" />
<meta name="description" content="Your site description" />
<meta name="author" content="name" />
<meta name="copyright" content="name and date" /> There are a lot more so I suggest you to search for metatags generators.

Other functions

They can also be used to hide IE6+ annoying image toolbar (if the user hasn't disabled it).

<meta http-equiv="imagetoolbar" content="false" /> Also, it can be used to refresh your page after x seconds.

<meta http-equiv="refresh" content="seconds" /> And finally, it can redirect the user to an other URL but some people find this annoying because if they're redirected and click the button "back", it's always refreshed so they can't go back anymore.

<meta http-equiv="refresh" content="x;URL=new url" />

Share This

]]> http://pootato.org/tutorials/html/metatags/feed/ Lists http://pootato.org/tutorials/html/lists/ http://pootato.org/tutorials/html/lists/#comments Sat, 11 Aug 2007 19:14:00 +0000 Clara http://pootato.org/website/lists/ Lists are used for many things, such as menus, css drop down, etc. but in this page, I will only list the basic usage of lists. Each time, put the new item between the li element.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul> It shows:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

ul means Unordered List so it uses bullets.

<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
</ol>

  1. Item one
  2. Item two
  3. Item three
  4. Item four

As you probably guessed, ol means Ordered List, thus it uses number.

Customize!

You can easily customize your lists using CSS! For example, change the bullets for Unordered Lists, example of stylesheet:

ul { list-style: circle; }circle can be replaced by square and the default one is disc. You can also use images:

ul { list-style: url(bullet.gif); }As for Ordered Lists, if regular numbers aren't cool enough for you, you can use roman numbers or alphabet letters:

ol { list-style: lower-roman; }lower-roman can be replaced by upper-roman, lower-alpha, upper-alpha and the default is decimal.

  1. Using
  2. lower
  3. alpha

Share This

]]> http://pootato.org/tutorials/html/lists/feed/ Anchors http://pootato.org/tutorials/html/anchors/ http://pootato.org/tutorials/html/anchors/#comments Sat, 11 Aug 2007 19:11:52 +0000 Clara http://pootato.org/website/anchors/ Anchors are used to mark a special part of your page. For example, if your page is very long, you can divide it into 2 or more parts. Add an anchor where you want to mark the beginning of one part and then, add a link to this anchor.

To add an anchor:

<a name="anchor_name"></a> Then, to link to this anchor, add:

<a href="#anchor_name">Go to second part?</a> As you can see, you must add # before the anchor's name in the link. If the anchor isn't in the current page, you can also write otherpage.htm#anchor.

Back to top? You can do that easily, just make a link to # alone.

Share This

]]> http://pootato.org/tutorials/html/anchors/feed/