HTML Tutorial

About this guide
This tutorial should teach you the basics of HTML, even if you have never done anything with HTML before! We've tried to explain everything as basic as possible so it is easy to understand. However, if there are any things you think are unclear, feel free to let us know!

A lot of html tags that used to work, have been depreciated in newer versions of html. This means they no longer work sadly. We will show you how to do a few things with some basic CSS as you go through this tutorial.

Navigation

1. The basics:	- Learn about tags
2. Editing text:	- Basic special effects - Breaks and paragraphs - Font size - Font colour - Font type - Combining font characteristics
3. Aligning the page content:	- Positioning
4. Inserting Images:	- Finding the image URL - Adding an image - Giving an image a border
5. Creating links:	- Making a text link - Making an image link - Changing the border of a linked image - Making links open in a new window
6. Making lists:	- Making bullet points - Making numbered lists - Changing the border of a linked image
7. Adding backgrounds:	- Adding a background - Adding a fixed background - Adding a solid colour background
8. Making page anchors:	- A simple navigation system
9. Making a table:	- Making a basic table - Giving the table a border - Changing the background of a table - Changing width - Changing the positioning - Cellpadding and cellspacing - Colspan and rowspan
10. Creating textareas:	- Displaying your code

1. The basics

Learn about tags:
All the HTML codes are typed within triangular brackets < >. These are called tags. To start a HTML code you type a command between these tags. If you want to end a command you need to use a / right after the opening tag.
Like this:
<begincommand> </endcommand>

Some HTML tags do not have a beginning and ending tag. For example IMG (an image tag) and BR (a break tag). When this is the case, you will include the / at the end of the tag, before you close it with > like this:
<img /> and <br />

2. Editing text

Basic special effects:
If you type text without the use of HTML codes, your text will just show up as normal, basic font type, black, not bold or in italics. In order to make your text bold etc, you need to use short HTML codes, you can see them in the table below.

When you use the little HTML codes they should have this form:

<Command to start> Insert your text here </Command to end>

Effect	Command to start	Command to end	Example	Code for the example
Making text bold	<b>	</b>	Your text will be bold	<b>Your text will be bold</b>
Making text in italics	<i>	</i>	Your text will be in italics	<i>Your text will be in italics</i>
Making underlined text	<u>	</u>	Your text will have an underline	<u>Your text will have an underline</u>
Making a line through your text*	<s>	</s>	~~Your text will have a line through it~~	<s>Your text will have a line through it</s>
Making text centered	<center>	</center>	Your text will be centered	<center>Your text will be centered</center>
Making text scroll	<marquee>	</marquee>	Your text will scroll	<marquee>Your text will scroll</marquee>

* On Neopets this code does not work, you will need to use <strike>text</strike>

Breaks and paragraphs:
Just typing text without any breaks or paragraphs won't be very easy on the eyes. So you'll also need to use little HTML codes for that. However, these codes don't have a begin and end command, this is because you just insert one break, there's not a place where you want to stop inserting breaks, its just one break for each command, if you want more, you'll need to repeat the code.

Effect

Command

Example

Code for the example

Inserting a break

<br />

First line
Second line

First line<br />
Second line

Inserting a new paragraph

First paragraph

Second paragraph

<p>First paragraph</p>

<p>Second paragraph</p>

Font size:
With HTML codes it is also possible to change your font size, there's a range of font sizes; 1 being smallest, and font size 7 being biggest.

The HTML code for changing font size is:

<font size="#">type your text here</font>

Change the # into the number of the font size you'd like to have. Below you can see each font size so you know what it looks like.

Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7

Font colour:
Just like size, you can also change the colour of your text. For the most commonly used colours you can use their name (American spelling, not British). For more specific colours you may need to use a hexadecimal code. This is the unique code given to each shade of colour. All colours have a combination of 6 numbers and letters that represent an exact shade.

If you are looking for a colour you can use SunnyNeo's Eyedropper Tool Tutorial or SunnyNeo's Colour Chart.

The HTML code to change a font colour with is:

<font color="COLOUR">type your text here</font>

The hexadecimal code for red is #FF0000. So in order to change your font red, you can use both the following codes:

<font color="red">type your text here</font>
<font color="#FF0000">type your text here</font>

Font type:
Not just the size and color are up for a change, you can also change the font type. If you don't want to be typing in Arial but in Verdana, then you can easily change that.
The code for the font type looks much like the code for font color and font size. It is:

<font face="FONT TYPE">type your text here</font>

The code for making our font Verdana would be:

<font face="Verdana">type your text here</font>

Combining font characteristics:
If you want to change more than just one characteristic of the font, like color AND size, then you don't need to use both codes after each other, you can also combine them.

The combined code for all three characteristics is:

<font face="FONT TYPE" size="#" color="COLOUR">type your text here</font>

The code for size 5, red Verdana writing would look like and be:

<font face="Verdana" size="5" color="red">type your text here</font>

If you just need two out of three characteristics you can remove one of them out of the code. Like the code for just size and color would be:

<font size="#" color="COLOUR">type your text here</font>

3. Aligning the page content

Positioning:
Normally your text (and other content such as images) will automatically be positioned to the left of the page, but you can also position them to the middle of the page, or to the right.

To begin the positioning you use the following code:

<div align="POSITIONING">

Instead of 'POSITIONING' you enter: left, center or right (see below for examples)

left:

Text here

center:
Text here

right:
Text here

After that everything on your page will either be: left, in the middle or right, which you might not want, you might just want a little bit to be that way. In order to end it you use:

</div>

An example is: <div align="center">Page content here</div>

4. Inserting images

Finding the image URL:
If you want to add an image to your page, you need to find out the URL of the image first. We will use an example so you can learn how to find the url of an image.

In order to find the URL of this image, you need to right click on it. In the menu that appears next you need to pick the bottom option; properties. Then you will get a little screen that gives you the URL. The URL of this image is:

https://www.sunnyneo.com/linktous/draikbanner.jpg

If you found the URL displayed above, then you've successfully completed this step. This means that you can move on with the next step in adding an image.

Adding an image:
The code to insert images is:

<img src="IMAGE URL">

So all you need to do is put the URL of the image, there where it says IMAGE URL in the code.
To complete the example, this is what your code would look like if you wanted to add the SunnyNeo banner:

<img src="https://www.sunnyneo.com/linktous/draikbanner.jpg">

Note: Images only show up once you have them uploaded online at a host that allows direct linking (or hot linking), if you want to learn more about uploading images, visit Uploading Images Tutorial.

Giving an image a border:
The HTML attribute BORDER no longer works. This is the first area where we will show you how to do this with some basic CSS instead. As you have been doing above, to add in attributes to html tags, you have been adding things like Color="COLOR" into the html tags. You can add in a basic CSS tag style="" to use CSS with HTML to do things.

If you want to give the image a border, you need to add

style="border:TEXT;"

IN the html code of the image. The total html code would then look like this:

<img src="IMAGE URL" style="border:TEXT;">

Below you can see some examples of the border widths, so you know what they look like. The first part of the TEXT is how thick you want your border in pixels, then the type of border, followed by the border color. Examples are all solid black borders with different widths.

Border TEXT	Example	Code for the example
None		<img src="https://www.sunnyneo.com/linktous/bannerbee.gif" style="border:none;" height="45px" width="115px">
1px solid black		<img src="https://www.sunnyneo.com/linktous/bannerbee.gif" style="border:1px solid black;" height="45px" width="115px"> Second paragraph
2px solid black		<img src="https://www.sunnyneo.com/linktous/bannerbee.gif" style="border:2px solid black;" height="45px" width="115px"> Second line
3px solid black		<img src="https://www.sunnyneo.com/linktous/bannerbee.gif" style="border:3px solid black;" height="45px" width="115px">

5. Creating links

Making a text link:
Not just images have an URL, pages also have an URL. When you want to make a link, you'll need to find the URL of the page you want to link to. This isn't very hard, you can see the url of a page in in the address bar op top of your screen. An example of an url is https://www.neopets.com

The code for a link is the following:

<a href="URL">TEXT HERE</a>

Where it says URL, you enter the URL of the page you want to link to.
Where it says 'TEXT HERE' you enter the text you would like to have linking to that page.

For example:
This is the URL of SunnyNeo:
https://www.sunnyneo.com

If you would want to create a link to SunnyNeo your code would look as follows:

<a href="https://www.sunnyneo.com">Link to SunnyNeo</a>

This will become:
Link to SunnyNeo

Note: you can not link to an outside neopets site from neopets. TNT has blocked this function.

Making an image link:
You can also make images link, not just text. Now you know how to make text links, and how to insert images, it's just a matter of combining those two codes. Where you type the text in text links, you now insert the code of an image. Like this:

<a href="URL"><img src="IMAGE URL"></a>

Combining what you've learned before, you can now make the SunnyNeo banner link to the website. The code to do so would be:

<a href="https://www.sunnyneo.com"><img src="https://www.sunnyneo.com/linktous/draikbanner.jpg"></a>

This gives you the image, that links to the site:

Changing the border of a linked image:
If you would like to add a border to your linked image, you can do that the same was as we added a border to an image earlier, with some basic CSS:

style="border:TEXT;"

IN the html code of the image.

This results into

<a href="URL"><img src="IMAGE URL" style="border:TEXT;"></a>

By default, your linked image will not have a border. If you would like to add one, the code will then look like this:

<a href="https://www.sunnyneo.com"><img src="https://www.sunnyneo.com/linktous/draikbanner.jpg" style="border:3px solid black;"></a>

Which results into:

Notice that you now have an image, linking to the website with a border.

Making links open in a new window:
In normal links, when you click on them you get directed to the page in the same window. However, you can also let it open that page in a new window. If you wish to do that you need to insert:

target="_blank"

into the link part of the html code. (not like with the border in the image part of the code, but in the link part)

<a href="URL" target="_blank">TEXT HERE</a>
or
<a href="URL" target="_blank"><img src="IMAGE URL" border="#"></a>

For example:
<a href="https://www.sunnyneo.com" target="_blank">Link to SunnyNeo</a>
or
<a href="https://www.sunnyneo.com" target="_blank"><img src="https://www.sunnyneo.com/linktous/draikbanner.jpg"></a>

These examples result into:

Link to SunnyNeo

and

6. Making lists

Making bullet points:
If you have a lot of information, and you would like to make a list, you can choose to make one with bullet points. The code for bullet points is the following code:

<ul>
<li>bullet one</li>
<li>bullet two</li>
<li>bullet three</li>
</ul>

When you make that it looks like this:

bullet one
bullet two
bullet three

The <ul> means that you are beginning a list with bullet points.
The <li> stands for a new bullet. You can make as many of these as you wish.
The </ul> means that you are done with your list of bullet points.

Making numbered lists:
You can also make a numbered list. The code for a numbered list is the following:

<ol>
<li>point one</li>
<li>point two</li>
<li>point three</li>
</ol>

When you make that it looks like this:

point one
point two
point three

The <ol> means that you are beginning your numbered list.
The <li> stands for a new number. You can make as many of these as you wish.
The </ol> means that you are done with your numbered list.

7. Adding backgrounds

Adding a background:
With HTML you can easily add a background. All you need to know is the url of the image you would like to use (see 4. Inserting Images). The code that is used for backgrounds is:

<body background="IMAGE URL">

This background will keep repeating its self if you scroll down the page. An example:

<body background="https://www.sunnyneo.com/background/bg_party.jpg">

Inserting this code into your page will make it look like this: Normal background example.

Adding a fixed background:
Notice how the background will keep repeating itself as you scroll down the page? You can also make your background 'stand still' when you scroll down the page. This is called a fixed background. If you want to do this, you need to use a basic CSS style tag again, and then set the background-attachment attribute:

style="background-attachment:fixed;"

The code will then look like this:

<body background="IMAGE URL" style="background-attachment:fixed;">

The example will look like this:

<body background="https://www.sunnyneo.com/background/bg_party.jpg" style="background-attachment:fixed;">

Inserting this code into a page will make it look like this: Fixed background example.

Adding a solid colour background:
Instead of using an image you can also use a solid color for your background. Just like with text, you can use the name of the most commonly used colors and for more specific colours you need to use a hexadecimal code. Use the SunnyNeo Colour Chart or SunnyNeo Eyedropper Tool Tutorial to get hexadecimal codes.

The code for a solid color background is:

<body bgcolor="COLOUR">

In the example for a red background you can use one of the following codes:

<body bgcolor="red">
<body bgcolor="#FF0000">

You can see an example of what this looks like here: Solid colour background example.

Note: this code does not work anywhere on neopets, except on petpages! You can use it outside neopets however.

8. Making page anchors

A simple navigation system:
The word anchors might not be familiar to you, but there are actually anchors on this very page. The navigation system links are all anchors. Anchors are links within one page, transferring you to a particular place in that page. You click on the title of the chapter at the top of the page, and you immediately go to that chapter without having to scroll down the page. This can be very handy in long petpages for example.
Anchors are also links, so the coding for those is very familiar to the coding of a link.

Where you want the link to the particular place on the page to be (in our case, the navigation system), you put the following:

<a href="#CODEWORD">text you want to make link</a>

You also need to put a html code at the place the link directs to. This code should have the same codeword as the link has, that way they are connected. Where you want the link to direct to you put the following code:

<a name="CODEWORD"></a>

You can replace 'CODEWORD' with anything you like, as long as the codeword in the link is he same as the codeword in the code at the place the link directs to. If your codeword isn't the same your link will not work.

9. Making a table

Making a basic table:
Firstly we will start with explaining how a basic table is made, after that we can get into border changes, color changes, width changes, positioning changes etc.

This is a column
↓

Data Cell			Data Cell
	Data Cell
		Data Cell

←This is a row

Above you can see what rows, columns and data cells are, so you get an idea about what we are talking about.

Below you can see the code for a basic table. The blue is the actual code, the text in italics is explaining what that part of the code does.

<table> - start table
<tr> - start new row
<td> - start new data cell
type your text or image codes here
</td> - end data cell
<td> - start the second data cell
type your text or image codes here
</td> - end data cell
</tr> - end row
</table> - end table

This means, that every time you:

- want a new row, you use <tr>
- want a new data cell, you use <td>
- want to end a data cell, you use </td>
- want to end a row, you use </tr>

The example above has only one row, which contains two data cells:

This is my first data cell

This is my second data cell

If we want to make more than one row, we have to add a <tr> after the data cells of our first row to start one. Lets try to make a table with two rows, of each two data cells:

<table>
<tr> - start first row
<td>First data cell</td>
<td>Second data cell</td>
</tr> - end first row
<tr> - start second row
<td>Third data cell</td>
<td>Fourth data cell</td>
</tr> - end second row
</table>

This table looks like this:

First data cell	Second data cell
Third data cell	Fourth data cell

You can choose to make as many rows as you wish. You can also make as many data cells as you like.

Giving the table a border:
Just like you can give images a border, you can also choose to give tables a border. You can vary the table borders in color and thickness.

If you want to adjust the thickness of the border of the table, you must insert a code about the thickness inside the <table> part of the table code. The code you must insert is:

border="#"

You can change # into a number. 0 means no border at all, 1 is a thin border, the higher the number gets the thicker the border will be. A standard table will have a border of 1, so if you want a table without a border you need to change it to 0, if you want it to be a bigger border you can change it into 2 or 3.
Your code to start a table with adjustable thickness is:

<table border="#">

Not only thickness of the border can be adjusted. You can also change the colour of your border. In order to change the colour of your border you need to put in a basic CSS style tag to the <table> part of the table code.

style="border:COLOUR;"

You can change 'COLOUR' into the name of commonly used color, or into a hexadecimal code.
Your total code to make a table with adjustable border thickness and colour is:

<table border="#" style="border:COLOUR;">

If I want to make a table with one row and two data cells, that has a border with a thickness of 2 and a red border colour, we get the following code:

<table border="2" style="border:red;">
<tr>
<td>First data cell</td>
<td>Second data cell</td>
</tr>
</table>

This table looks like this:

First data cell

Second data cell

Below you can see what the different border thickness' look like.

Border thickness number

Example

Code for the example

data cell

data cell

data cell

data cell

data cell

Changing the background of a table:
To make your table more interesting looking you can also give it a background. You can give it a colour, or you can use an image for the background of your table. For starters we will explain how to give your background a colour.

You can choose whether you want the whole table to be coloured, a row, or just one data cell. You need to use your CSS style tag to do this. The code for giving the table, or row or data cell a background colour is:

style="background-color:COLOUR;"

You change 'COLOUR' into the name of commonly used colour, or into a hexadecimal code. You can add this either in the part of the code where the table starts, or in the part where the row starts, or in the part where the data cell starts, depending on how much you want to colour.

That will give you one of the following codes:

<table style="background-color:COLOUR;"> - the whole table will be coloured
<tr style="background-color:COLOUR;"> - the row will be coloured
<td style="background-color:COLOUR;"> - the data cell will be coloured

All three of the above will be shown in an example below.
The first example is one where we colour the whole table pink, hex code #FFD8FA:

<table border="1" style="background-color:#FFD8FA;">
<tr>
<td>First data cell</td>
<td>Second data cell</td>
</tr>
<tr>
<td>Third data cell</td>
<td>Fourth data cell</td>
</tr>
</table>

First data cell	Second data cell
Third data cell	Fourth data cell

Secondly, a table where the first row will be coloured pink (#FFD8FA), and the second will be coloured purple (#D3B6F0).

<table border="1">
<tr style="background-color:#FFD8FA;">
<td>First data cell</td>
<td>Second data cell</td>
</tr>
<tr style="background-color:#D3B6F0;">
<td>Third data cell</td>
<td>Fourth data cell</td>
</tr>
</table>

First data cell	Second data cell
Third data cell	Fourth data cell

In the third example we will give each different cell of the table a different colour. Pink (#FFD8FA), purple (#D3B6F0), green (#BEFC94) and blue (#B4E2FA).

<table border="1">
<tr>
<td style="background-color:#FFD8FA;">First data cell</td>
<td style="background-color:#D3B6F0;">Second data cell</td>
</tr>
<tr>
<td style="background-color:#BEFC94;">Third data cell</td>
<td style="background-color:#B4E2FA;">Fourth data cell</td>
</tr>
</table>

First data cell	Second data cell
Third data cell	Fourth data cell

As mentioned before you can also use an image to be the background of your table.

If you want to do this, you don't use the code style="background-color:COLOUR;", but a slightly different one. You are still using your CSS style tag and you do need to enter it at the same place at the code to change color, in <table>, <tr> or <td>. The code is:

style="background-image:url(IMAGEURL);"

You change image url into the url or the image you want to use for the background.

That will give you one of the following codes:

<table style="background-image:url(IMAGEURL)">
- the whole table will have a background

<tr style="background-image:url(IMAGEURL)">
- the row will have a background

<td style="background-image:url(IMAGEURL)">
- the data cell will have a background

Below you can see an example of the whole table getting a background. If you want to give just one row or data cell a table you should be able to do that without an example since it works the same way as colouring a data cell or table.

<table border="1" style="background-image:url(https://www.sunnyneo.com/gallery/GAL_chomby_back.gif)">

<tr>
<td>First data cell</td>
<td>Second data cell</td>
</tr>
<tr>
<td>Third data cell</td>
<td>Fourth data cell</td>
</tr>
</table>

First data cell	Second data cell
Third data cell	Fourth data cell

Changing width:
It is also possible to change the size of a table. You can set a size in pixels, or in percentages of the screen.
Note that if you use percentages, the table will look different on different computers, depending on their screen resolution settings. You can also change the size of the data cells in your table.

The code for changing the width of a table or data cell is:

width="#"

Instead of # you can enter the amount of pixels, like 300. Or you can enter a percentage, like 70%.
You can use it for the whole table or for data cells:

<table width="#"> - changes the width of the table
<td width="#"> - changes the width of a data cell

As mentioned before you can use either pixels or percentages to change the width of a table. Below you can see some examples of both.

Example 1: width is 200 pixels

data cell

Example 2: width is 300 pixels

data cell

Example 3: width is 40%

data cell

Example 4: width is 60%

data cell

Above you see that on this table both data cells have an equal size. Both are 50% of the total table width. Your table cells will automatically adjust in size. If one of the data cells has more info in it than the other, the first data cells will become bigger. See example:

data cell 1 has loads on information, while data cell 2 is nearly empty.

data cell 2

You can also set the width of the individual data cells yourself. If you change the size of the data cells in the first row, all data cells in the rows below that will also be in that size. In this example we make the first data cell 70% of the total table width:

data cell	data cell
data cell	data cell

Changing the positioning:
When you don't enter any information about the positioning of the content in the table, the content will automatically be positioned left. But you can also get the content in your table to be positioned in the center on at the right. You can change the positioning for a row, or for an individual data cell. The code you use is:

align="POSITIONING"

<tr align="POSITIONING"> - changes the positioning of the row
<td align="POSITIONING"> - changes the positioning of a data cell

The following example shows the position of each different cell being changed:

data cell

You can do the same for vertical positioning. In the example below you see a standard table without vertical positioning:

data cell 1
information
information
information
information
information
information
information
information

data cell 2

As you can see the information in data cell 2 is automatically set to the middle of the cell. But often you will find that you want the information to be at the top of the cell rather than in the middle of it. For this you can use the following code:

valign="POSITIONING"

Where it says 'POSITIONING' you can enter either top, middle or bottom.

<tr valign="POSITIONING"> - changes the positioning of the row
<td valign="POSITIONING"> - changes the positioning of a data cell

The following example shows the position of each different cell being changed:

<table width="450"" border="1"><tr>
<td valign="top">information
<br>information
<br>information
<br>information
<br>information
<br>information
<br>information
<br>information</td>
<td valign="top">data cell 2</td>
<td valign="middle">data cell 3</td>
<td valign="bottom">data cell 4</td>
</tr></table>

information
information
information
information
information
information
information
information

data cell 2

data cell 3

data cell 4

Cellpadding and cellspacing:
Cellpadding and cellspacing are both ways to increase distance between your data. Cellpadding refers to the amount of space between the information you entered in your data cell and the table's border.
Cellspacing is the amount of space between the actual cells.
Both are measured in pixels, and can be adjusted for the entire table only.

The coding used for these is:

cellpadding="#"
cellspacing="#"

First an example of cellpadding. We make the distance between the text in our data cells and the data cell border 20 pixels. The code is:

<table border="1" cellpadding="20">
<tr>
<td>First data cell</td>
<td>Second data cell</td>
</tr>
<tr>
<td>Third data cell</td>
<td>Fourth data cell</td>
</tr>
</table>

First data cell	Second data cell
Third data cell	Fourth data cell

Then an example of cellspacing. We make the distance between our data cells 20 pixels. The code is:

<table border="1" cellspacing="20">
<tr>
<td>First data cell</td>
<td>Second data cell</td>
</tr>
<tr>
<td>Third data cell</td>
<td>Fourth data cell</td>
</tr>
</table>

First data cell	Second data cell
Third data cell	Fourth data cell

Colspan and rowspan:
As you've seen in the paragraph 'Changing width', data cells all have to be the same size throughout the whole table. Colspan and rowspan can help you change the size of the data cells however.
Colspan is the tag you use when you want your one data cell to span more than one column. So say you have a table that consists of 3 columns, and you want one of your cells to span 2 whole columns instead of just the 1, you would then use colspan.
Rowspan is basically the same but then you use it for cells you want to span more than one row.
This may sound a bit confusing, so look below for some examples.

The codes you use for colspan and rowspan are:

colspan="#"
rowspan="#"

In the first example you will see a table in which data cell 4, on the second row, spans two columns.

<table border="1" >
<tr>
<td>First data cell</td>
<td>Second data cell</td>
<td>Third data cell</td>
</tr>
<tr>
<td colspan="2">Fourth data cell</td>
<td>Fifth data cell</td>
</tr>
</table>

First data cell	Second data cell	Third data cell
Fourth data cell		Fifth data cell

Now you will see an example in which data cell 4 takes up two rows.

<table border="1" >
<tr>
<td>First data cell</td>
<td>Second data cell</td>
<td>Third data cell</td>
</tr>
<tr>
<td rowspan="2">Fourth data cell</td>
<td>Fifth data cell</td>
<td>Sixth data cell</td>
</tr>
<tr>
<td>Seventh data cell</td>
<td>Eight data cell</td>
</tr>
</table>

First data cell	Second data cell	Third data cell
Fourth data cell	Fifth data cell	Sixth data cell
Fourth data cell	Seventh data cell	Eight data cell

You can use as many rowspans and colspans in your table as you like, you can combine them as well.

10. Creating textareas

Displaying your code:
When you make something and you want to display the HTML code for other people, you will need to make a textarea. An example of this could be that you made a font award, and you want other people to be able and copy and paste the code for it. Making a textarea is very easy. A basic textarea has the following code:

<textarea>YOUR CODE HERE</textarea>

This textarea will look like this:

Isn't that fun? Well you can also adjust it to your own likings by changing the number of columns and rows it displays. For this you will be able to use the following code:

<textarea cols="#" rows="#">YOUR CODE HERE</textarea>

An example of a textarea with 6 columns and 1 row:

Note: On petpages if you want to make a textarea; you have to replace the word textarea with text_area, the rest is the same.

HTML Tutorial

SunnyNeo

Quick Links

Search SunnyNeo!

Get Instant News!