Lesson 1 - The Basics HTML stands for Hyper Text Mark-up Language and is the code that nearly all web pages are written in. Despite having a complicated name the actual code is very simple. Before you can start learning HTML 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 . That is you add a / after the first <. a word would make a word display in bold on your page. As the tags are ended then everything after a word will 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 > then you are well on your way to mastering web pages.
Lesson 2 - Inserting text
The majority of web pages are made up of text. If you have ever used a keyboard then you know how to type text in HTML. To type something into your webpage simply type what you want to show up. 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) underlines text (you need to end this) Font Size: 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: type your text here You must end your font tag or all text typed afterwards will be that size. These are the different size fonts 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
Lesson 3 - More Advanced Text Once you are comfortable with using the simple tags such as bold and underline, you can move onto other things that can make your text more interesting. Here you will learn how to add bullet points, make numbered lists and insert a horizontal line. Bullet Points: 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
Horizontal Lines: 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: -------------------------------------------------------------------------------- Where ever you want to add a line to divide a page simply type
Lesson 4 - Font Colours You can change the colour of your font very easily. For the most frequently used colours you can use their name. e.g red, black, green, blue, gray, white. HTML uses American English spellings, if you want to change the colour of something, you need to type color. If you want a Grey colour you need to type Gray. If you want to make a word red you would type: text here and this 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 represent 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: text here 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: type text here This would make the text small and red, like this type text here. -------------------------------------------------------------------------------- Background colour If you want to make your page more interesting you can change the background of the page. Background colour works in much the same way as font color 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.
or You do not need to end this tag as it affects the whole page but it is good practice to put at the bottom of your page to keep things tidy. -------------------------------------------------------------------------------- Background colour in shops You have to do your background colour slightly differently in your shop, you can do one of two things. 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 get several Neopet backgrounds that you can 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 normal and then finish your table by typing the two lines below. |
http://www.neopets.com/mypicture.gif (this tells the computer where to find your picture)
)
closes the tag
When you put the code together it looks like this:
The image tag is special as you don't have to end it, that is all you need to type to display an image. Now when you look at your web page 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 you can choose what thickness border, if any you want 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:
