not very much but i no a lil with this guide
Lesson 1 - The Basics
HTML stands for Hyper Text Mark-up Language and is the code in which nearly all webpages are written. In spite of its complicated name, the actual code is very simple. Before you can start learning HTML, however, there is one main thing that you need to know.
All commands are typed within triangular brackets < >. These are called tags. When you type something between these tags, it means you want to start a command. When you want to end a command you need to end the tags. To end a tag you type </command> . That is, you add a / after the first <.
<b>a word</b> would make a word display in bold on your page. Since the tags are ended, everything after 'a word' would not be in bold.
There are a few exceptions that do not need to be ended, but we will come to these later. The concept of tags is the hardest thing to grasp in HTML. Once you understand that every command needs to be inside < these tags >, you will be well on your way to mastering webpages.
Lesson 2 - Inserting text
The majority of webpages are made up of text. If you have ever used a keyboard, you already know how to type text in HTML. To type something into your webpage, simply type what you want to appear on your page. You only need to use tags if you want the text to do something special.
Some commonly used tags are:
This bolds text
(You need to end this.)
Inserts a line break
(like pressing ?Enter? on a keyboard)
This starts a new paragraph
This is very useful for splitting up your text
This makes text in italics
(You need to end this.)
This underlines text
(You need to end this.)
You can also change the size of your font. In HTML the sizes range from 1 (very small) to 7 (very big). To change the size of your font, you need to type:
<font size="1">type your text here</font>
You must end your font tag, or all text typed afterward will be that size.
These are the different font sizes that you can use:
Size 1 text
Size 2 text
Size 3 text
Size 4 text
Size 5 text
Size 6 text
Size 7 text
Now that you know how to change text sizes and add special effects, you are ready to move on to more complicated HTML. Click the 'Next' button to move on to the third lesson.
Lesson 3 - More Advanced Text
Once you are comfortable with using simple tags, such as bold and underline, you can move on to other things that will make your text more interesting. Here you will learn how to add bullet points, make numbered lists, and insert a horizontal line.
Bullet points are slightly more complicated. In HTML, bullet points are called 'unordered lists,' or 'ul,' for short. To start bullet points, you need to type <ul>.
If you want each bullet point to appear on a new line, you should type <li> before each one.
When you have finished all your bullet points, type </ul>
The code should look like this:
This is what would actually be displayed on your webpage:
Creating a numbered list uses the same principle as creating bullet points, except that you use 'ordered list', or '<ol>' instead of <ul>. The code for an ordered list would look like this:
This is what would actually be displayed on your webpage:
For horizontal lines, please go to the next lesson...
Lesson 3 - More Advanced Text continued....
If you want to divide the page, a useful command is the horizontal rule (hr). The default rule goes all the way along the page and looks like this:
Wherever you want to add a line to divide a page, simply type <hr> . You can change several things to make it look different, such as its width, height, and the amount of shading it has.
Width can either be measured in pixels (a webpage is normally about 600 pixels wide) or by typing the percentage of the screen you want the line to cover. To change the width you simply type <hr width="300"> or <hr width="50%">. A horizontal rule that is 300 pixels in length looks like this:
Size refers to how large the horizontal rule is. You change it in the same way as you alter the width. If you wanted to make a ten-pixel-wide line, you would type
<hr size=10> and it would look like this:
By default, horizontal rules have shading. You can create a line without any shading by typing <hr noshade>. This will look similar to the line pictured below:
You can combine as many variables as you'd like within the same tag. If you wanted to create a ten-pixel-wide rule that was 300 pixels long and had no shading, you would type <hr noshade width="300" size="10">. It would appear similar to the line below:
It doesn't matter what order the variables are in, as long as they are all within the < and > tags.
Lesson 4 - Font Colours
You can change the colour of your font very easily. For the most frequently used colours, you can use the name of the colour, e.g red, black, green, blue, gray, white. HTML uses American English spellings, so if you want to change the colour of something, you need to type "color." If you want to colour something grey, you need to type "grey." If you want to make a word red, you would type: <font color="red"> text here </font>, which would appear as text here.
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 represents an exact shade. Some common codes are:
Bright red = FF0000
Purple = CC00CC
Pink = FF66FF
Light Blue = CCCCFF
Lime Green = 99FF99
To use the hexadecimal code, simply type: <font color="FF66FF">text here</font> This would make the text pink, like so text here.
If you want to change the font colour and size, you can do this in the same tag eg:
<font size="1" color="red">type text here</font>
This would make the text small and red, like this: type text here.
If you want to make your page more interesting, you can change its background of the page. Background colour works in much the same way as font colour, except it affects the whole page. Normally, backgrounds are white (FFFFFF) or black (000000), but you can use any colour you wish. To change your background colour, simply type this near the top of your page:
<body bgcolor="#FFFFFF"> or <body bgcolor="white">
You do not need to end this tag, since it affects the whole page. It is good practice to put </body> at the bottom of your page to keep things tidy, though.
Background colour in shops
You have to do your background colour slightly differently in your shop. There are two ways of making this change. The first method is to use a background image. Type:
at the beginning of your shop's description, and that image will be tiled as the background for your shop. You can find several Neopets backgrounds to use here. Alternatively, if you want a solid colour, or want a coloured background only in a certain area, you need to use a table. The simplest table would be to type this is your shop description :
Type your text here as usual, and then finish your table by typing the two lines below.
Don't forget to include the last two lines, or your table will be broken. Now you should be able to put a background colour or image in your shop
If you wish to position the table in the centre of your page, simply add the words align=center after <table , for example <table align="center" bgcolor="red">.
Lesson 5 - Adding Pictures
Pictures can brighten up a webpage and they are a great way to show others your work. If you have created a picture that you want to use on your site you need to save it somewhere on the Web. Once you know where you image is stored, it is very easy to add an image to your website. You can use any images already on the Neopets site or an image that is somewhere else on the Web.
Once you know where your images are saved, you are ready to write the code. The code to insert a picture is made up of three things:
1.<img src = " (This command tells the computer to look for an image.)
2.http://www.neopets.com/mypicture.gif (This tells the computer where to find your picture.)
3."> closes the tag
When you put the code together it looks like this:
The image tag is special because you don't have to end it. Now, when you look at your webpage, you should see your picture.
There are several other things you can add into the code to make the image look better, including the border tag. Using this tag, you can choose what thickness of border (if any) you?d like around your image. Some basic borders are:
Border="0" no border
Border="1" thin border
Border="2" thicker border
You simply type in border="2" inside the tag after you have typed the location of your image, like so:
<img src="http://www.neopets.com/mypicture.gif" border="2">
Your picture will now be displayed with a thick border around it.
For details on how to arrange your image on your page and how to add background images, go to the next lesson...
Positioning the image:
You can also change where you want your image to be positioned on the page. The most frequently used positions for images are left, right and center. To make an image centered, type this before the image tag:
Everything typed after this will be centered, so now you need to type your image tags. When you have finished your image tag and no longer want everything centered, you simply end the center tag, like so:
To make something aligned to the left or right, you use the same code, but you would replace the word "center" with "left" or "right."
You can also make an image display as a background image instead of just having a solid color. This works well with simple, light-colored images. It livens up the page, yet you can still read the text clearly. To display an image as the background, you need to type:
This will now display your image in the background.
Lesson 6 - Links
You can turn anything on your site into a link to something else. If your favourite game on Neopets is Dice-a-Roo, you can make a text or image link to the Dice-a-Roo page. You already know how to insert images or text into your wwebpage, so turning those into links is very simple. First, you need to have a URL to link to. In this example, I have used the Neopets url. I wanted to make the text click here link to www.neopets.com so I typed:
The only thing that will be displayed on the web page is the text click here, which will now be click-able. When you click on it with your mouse, it will take you to the Neopets URL. You can make the text a different size, different colour, bold, italic, or whatever you'd like, but you musst start and finish the tags either side of the text. For example, to make that link bold, I would write:
To make an image clickable, you use the same idea, but instead of typing the text, you put the image tag. For example:
This will automatically put a thin border around your image. To make this border thicker (or to remove it completely), you need to use the border tag (see lesson 5 - inserting pictures). Using this tag, you can choose what size of border of any you want to have around your image.
Some basic borders are:
Border="0" no border
Border="1" thin border
Border="2" thicker border
If you don't want to have a border around your picture, you simply type border="0" inside the tag after you have typed the location of your image, like so:
<img src="http://www.neopets.com/mypicture.gif" border="0">
Lesson 7 - Adding your email address and username
If you have your own email address you may want other people to be able to contact you. A great way to do this is to post your email address on your website.
***Beware*** - If you post your email address on your webpage, absolutely anybody will be able to contact you via email. Only do this if you are sure this is something that you want to do. If you are 13 or under, please make sure that this is OK with your parents first.
The code is much the same as creating a link, only instead of typing in the URL of the page you want to link to, you type in the email address that you want to pop up. For example, if I wanted to post my email address as email@example.com, I would href="mailto:firstname.lastname@example.org">email@example.com</a>
his would display the text firstname.lastname@example.org, and when you click on it, it will open up a blank email addressed to email@example.com. (exactly like this: firstname.lastname@example.org) You may want to make the font a different size, make it bold or change the colour. To do this, just type the relevant tag either side of the linking text.
Adding your username:
If you are editing your Neopet's homepage there is a very simple way to get your username to appear. Just type in #OWNERLOOKUP all in capitals, and it will display as your username. This is something you can only do on your Neopet's homepage, though; it won't work on another webpage.
Lesson 10 - Tables
Tables are a great way to divide a page and organise how your page looks. A table is basically a grid made up of columns and rows. Each little box is called a cell. Your text, pictures, or whatever you'd like to post goes inside the cells.
To create a table, you need to start and end it. To start a table, you have to type <table>, and to end the table, type </table>. What goes between the start and end tags depends on what type of table you want. Every table has at least one row. A table row is one horizontal row made up of x number of table data cells. It is completely up to you what you put into each cell. You can enter text, images, links...anything you'd like. If you want to create a table with two columns and one row, you need to type:
<tr> - start table row
<td> - start table data cell
type your text or image tags here
<td> - start the second table data cell
type your text or image here
It will now look like this:
This is the first data cell...
...and this is the second. Woo hoo I have created my first table!
You can have any number of table rows and data cells, as long as you remember to end each tag. The main thing to remember is to start with a <tr>. Adding extra <tr>'s will add extra rows, and adding extra <td>'s will create an extra cell. If you want to add an extra cell or row, make sure you end the one before it before starting a new one.
Lesson 10 - Tables continued...
Changing the look of your table
You can change the appearance of your table by making each cell a different colour or changing the border size and colour.
If you just type <table>, then by default the table will have no border. If you want to make your table stand out you can add a border by typing <table border="1">. This will make a thin border appear around your table, as you can see below:
the border size 1
To change the colour of the border, you use a similar code to changing background colour. Simply type <table border="1" bordercolor="red"> to make a table with a thin red border. You can either use hexadecimal codes or type in the names of common colours. It will look something like this:
the border colour is red
Changing the colour of the table
Changing the colour of a table is very simple. When you start a table, you just need to say what colour you want the table to be. In this case, I want a light blue (CCCCFF)table, so I type <table border="1" bgcolor="CCCCFF">
background colour is CCCCFF
If you want to change the colour of just one row or cell, you type bgcolor="CCCCFF" inside the start td or tr tag, like so:
Now you can change the appearance of your table to look exactly as you want it.
Lesson 10 - Tables continued....
The last thing you will need to know about tables is how to change their size. If you don't specify a height or width, the table will try to fit in your text or pictures automatically. This may not look exactly how you want it, however. To set the width of an entire table, you just need to say how many pixels or what percentage of the screen you want it to span. The average webpage is about 600 pixels in width. It is completely up to you what size you set. You just need to type width="your value" when you start your table. For example:
<table width="600"> or <table width="70%">
Then you just type the rest of your table as normal. Height works in the same way as width, it just insn't normally used. To set the height, you just type height="your value". You can set the height and width at the same time by typing:
<table width="600" height="400"> or <table width="70%" height="50%">
Now you know all the basics and should be able to create a good-looking webpage or shop front. Don't forget, if you get lost of confused at any point, just come back and read over the part you were stuck on.
There is only one way you can add music. If the user viewing your page is using Internet Explorer, your music can play in the background when the page loads.
First you need to have your music file saved somewhere on the Internet. Simply replace the text "http://images.neopets.com/help/beep.wav" with the URL of your music file.
You can use bgsound src files with the extensions of:
Creating a player
Replace the "http://images.neopets.com/help/beep.wav" part of the code with the URL of your own file on the Internet.
This will make a sound when the page loads for Internet Explorer users.
Lesson 12 - Create an image
If you can't find a logo or banner that you like, or simply want to have a unique design, it is really easy to create your own image. The same instructions apply if you wish to create your own Beauty Contest entry, picture for the Art Gallery or any other image. If you are using a computer with Windows on it, you will already have a drawing program called Paint installed. You can open it by clicking on the Start button, then going --> Programs --> Acessories --> Paint. Paint won't give you all the effects that a program like Adobe Photoshop will, but it is easy to use and most computers come with it.
Choose the size of your picture
Paint automatically starts with a HUGE work area, you should change the size of the canvas depending on what you wish to create. To change the canvas size, click on IMAGE and then ATTRIBUTES. A window will pop up. In that window, type the size you want the canvas to be. Below are some example sizes. It is MUCH easier if you decide what size you want your picture to be before you start to draw, so choose carefully.
Begin to draw
The tools are pretty obvious: the pencil draws, the paint bucket fills in shapes with colour, the circle tool draws a circle, etc. You can change colours by clicking on the colours at the bottom of the window. If you make a mistake, use the eraser or press the Control and Z buttons to undo a stroke. If you get stuck, click on 'HELP' in the Paint program, you can then search the help files until you find the answer to your question.
Save your picture regularly. There is nothing worse than accidentally knocking the power switch and losing all of your work after spending two hours creating an image. To save click on 'FILE', then 'SAVE AS', enter a file name for your picture and then press 'SAVE'. do u have all 3 beginners 4 pokemon diamond n pearl?