Html Tutorial

Greetings guest!!

You have just reached the brand new HTML guide of The Avril Lavigne guild. With this tutorial, we aim to equip you with the most basic knowledge of HTML, so that you will find it easier to customise your shop and your petpage!

Before we start, something you should note is that, most HTML tags will need to have another tag to end it. E.g. ends with a , with the exception of some, e.g. .

Another thing is that you end the tags in an 'inside-out' fashion, e.g.
Quick Access

[Background]
[Background Color]
[Text Input]
-blocked-[Adding Images]
[Adding Music]
[Page Anchors]
[Bulleted/Numbered Text]
[Marquees]
[Horizontal Lines]
-blocked-[Text-areas]
[Colored Scrollbars]
[Tables]
[Useful HTML/CSS Help]
Background

  • Insert the following if you would like to have an image as your background:
    invalid tag

  • If you would like to fix the background, so that it doesnt move along with the words,
    invalid tag


    [*Pop* What is a URL?] URL stands for "uniform resource locator." It's the standard address that can take you to a document, or a specific place on a document, anywhere on the WWW.

    Top

    • Background color

  • If you would like to have just a single color as your background,


    • [*Pop* What's "#000000"?] It is a Hex Color code that represents the color you want. It can range from anything to everything. It's always with a # and then a 6-digit code. The code can comprise of both letters and numbers at the same time. e.g #66CC66

    For a list of really simple colors, go to
    Lissa Explains it All -- Color Tutorial, RGB Hex Chart at http://www.lissaexplains.com/color.shtml

    Top

    Text Input

  • To start a paragraph,

  • To end it,

    But whenever you start a new paragraph, you will have to retype the HTML codes for your font. However, you can choose to use stylesheets (CSS) on your page, so that all the text on your page will have uniform font size, color and face throughout. To know more about CSS, go to the CSS tutorial page.

  • To make your text go to the next line (just like the effect of pressing 'enter' on your keyboard),
    invalid tag

  • To make more than one space in between words,


    Alignment of text...

  • To align your text to the left,

  • To align your text to the center,

  • To align your text to the right,


    Let's look at how you can change your font attributes...

  • To change the font for your entire page (the base font),
    invalid tag

  • To change the font attributes only for some words,

    ¤ size - refers to the size of your font. The larger the value of your number, the larger your font goes.
    ¤ face - the font you would like to use on your page. You can choose from a wide variety, the more common ones are Tahoma, Trebuchet Ms, Arial, Courier etc..
    ¤ color - the color of your font! You can use Hex Color Codes or just simple words like "red", "blue" etc.
    1 2 3 4 5 6 7


  • You can also bold your text:

  • Or make your text intalics:

  • Or underline your text

  • Or strike-through your text:

    Top

    • -blocked-Your text
    E.g. Click to go T.A.L.G

  • To open the link with another window when clicked on,

    E.g. Guild Email

  • To link your text to your neomail,

    E.g. Neomail me now!

    Top

    • Adding images

    Remember that you need to upload the images to your server space. If you don't, when you look at your page you will see a red x where the image should be. This means you either didn't upload it, or there is an error in your HTML code.

  • To add an image,

    E.g.

  • To add a border to your image,

    E.g.
    You can change the thickness of the border by changing the numerical value, where higher value means thicker border. To get rid of it, just change the numerical value to 0

  • To change the dimensions of your image,

    The numerical values is in terms of pixels!
    E.g. I make the image larger:

  • To link your image,

    E.g. T.A.L.G Logo For July (hover over it to see the tag)


    To position your image, use to do it,

  • To position your image to the left,

  • To position your image to the center,

  • To position your image to the right,


  • To add spaces between your images,

    ¤ hspace - horizontal space b/w images
    ¤ vspace - vertical space b/w images
    The larger the numerical value, the more space there is between your images.

    Remember, you can combine all the codes for the properties of the image under a single tag. For example, I want an image that has a border of 2, an alt tag that says "Neopets rules!", and a height of 62 px and width of 480 px.


    Neopets rules!
    There! You have it!

    Top

    • Adding Music

  • To add music into your shop,

    A player will show on the page.

  • To make the player smaller,


  • To make the music play continuously,

    To make the music play only once, just substitute infinite with once

  • To hide the player,


    Music can come in several formats, like .midi, .wma, .mp3 or .wav. The more desirable formats would be .midi and .wma, because their files are smaller and takes less time to load.

    Top

    • Page anchors

    Have you visited a page where you click on a link, and it brings u down to a sub-header on the same page? That's using page anchors.

  • To add the link to the text,


  • To tell the link where to go, you need to include the following at the sub-header you wanted the text to link to,

    Top

    • Adding bullets and numbered text

  • To make a numbered list,

    It turns out to be like this:
    1. rainbow_pot65
    2. ldgal99
    3. flute_rocks2002


  • To state what the number to start from,

    It turns out to be like this:
    1. rainbow_pot65
    2. ldgal99
    3. flute_rocks2002

  • To change the numbers to roman characters,

    It turns out to be like this:
    1. rainbow_pot65
    2. ldgal99
    3. flute_rocks2002

  • To change the numbers to "A, B, C...",

    It turns out to be like this:
    1. rainbow_pot65
    2. ldgal99
    3. flute_rocks2002

  • To make bullets,

    It turns out to be like this:
    • rainbow_pot65
    • ldgal99
    • flute_rocks2002

  • You can change the bullets appearance to circle,

    It turns out to be like this:
    • rainbow_pot65
    • ldgal99
    • flute_rocks2002

  • Or change the bullets to squares,

    It turns out to be like this:
    • rainbow_pot65
    • ldgal99
    • flute_rocks2002

    Top

    • Marquees

    Have you looked at the guild's contests page, and wondered how we make the text scroll from left to right, then bottom to top etc? We used marquees.. :)

  • To basically make a text scroll from right to left,

    E.g. Hello!

  • To make it scroll from left to right? Just change the direction!

    E.g. Hello!

  • You can also make your whole chunk of text scroll upwards/ downwards. Just put up or down respectively in the direction tag.

    E.g. Welcome to T.A.L.G's HTML Tutorial!
    Proudly brought to you by ldgal99
    I've spent a lot of time on this tutorial, so do make full use of it!
    Of course, I hope it has been helpful!

  • To make the text scroll back and forth,

    E.g. Hello!

  • To make the text slide in, then stop at the end margin,

    E.g. Hello! (Reload the page to see it again)
    To change the direction, just alter the tag accordingly.

  • To choose the width that the text will scroll in,

    E.g. Hello!

  • To have a background behind your scrolling text,

    E.g. Hello!

  • To change the speed at which your text scrolls,

    E.g. Hello!
    The larger the numerical value of scrollamount, the faster your text will scroll.

  • To change your scrolling text attributes, just add the font tag before the marquee. Make sure you end both the marquee tag and font tag!

    E.g. Hello!

  • To add a link to your marquee,

    E.g.

    There are a lot of tags you can combine to produce lotsa variation, try it out and sample yourself. :)

    Top

    • Horizontal Lines

    These are lines that you can use to section off your page.

  • To create a line that stretches across the page,

    E.g.


  • To make it a specified length,

    E.g.


  • To make it thicker,

    E.g.


  • To create a colored line,

    E.g.

    Top

    • -blocked-Text area

    These are boxes in which you can type large amount of stuff, so that they don't clutter up your whole page.

  • To have a typical text area box,
    invalid tag
    ¤ rows ~ The number of rows you want in the box
    ¤ cols ~ The number of columns in the box

  • To make your box colorful,
    invalid tag
    ¤ style="background:red" ~ this is the background color of your box
    ¤ font-family ~ well, the font you wanna use in the box!
    ¤ style="color:blue" ~ this refers to the border color of your box & the font color in the box
    ¤ style="border style:solid" ~ this refers how you would like your border to be like. Choose from ridged, double, dashed etc
    ¤ background-image ~ the background in the box

    The result is as follows:

    Top

    • Colourful scrollbars

  • For colored scrollbars in shops,

    ¤ face-color ~ the color of the bar that moves up and down
    ¤ track-color ~ the color of the background of the scrollbar
    ¤ arrow color ~ uh, color of arrow at both ends!

    Top

    • Tables

    Tables are especially useful in positioning pictures besides text etc.. your shop codes all work with tables you know!

  • To start creating a table, with a cell in it,

    ¤ table ~ indicates the start of a table HTML code
    ¤ tr ~ the start of a new row
    ¤ td ~ the start of an individual cell in the row
    ¤ /td ~ the end of the cell
    ¤ /tr ~ the end of the row
    ¤ /table ~ the end of the table
    		• It looks like this:

    Text in here
  • If you don't want the border of the table to show,

    To adjust the border thickness, change the "0" to other numerical values, where higher value means thicker border.
    		• It looks like this:

    Text in here (no border around!)
  • To change color of the border,
    		• It looks like this:

    Text in here
  • To change the color of your entire table,
    		• It looks like this:

    Text in here
  • To adjust the space between the text and the margin of the cell it is in,

    If you don't want any space, just change the numerical value to 0
    		• It looks like this:

    Text in here
  • To adjust the spacing between all the cells in the table,

    If you don't want any space, just change the numerical value to 0
    		• It looks like this:

    Text in here
  • To adjust the dimensions of the table,

    The "%" is the percentage of the height and width of the page that the table will be occupying respectively.
    		• It looks like this:

    Text in here
  • To align your text in within the cell,

    ¤ align ~ horizontal alignment of text in cell.
    Choose either left, middle, or right.
    ¤ valign ~ vertical alignment of text in cell.
    Choose either top, middle, or bottom.

    In this case, I chose a vertical alignment in the middle, and a horizontal alignment at the left.
    		• It looks like this:

    Text in here



  • So, if you want to have a table with two cells in a single row,
    		• It looks like this:

    Text in here Text in here
  • To adjust the dimension of the cells in the table, taking example of the previous table,

    In this case, I let the first cell occupy 80% of the table, and the second cell 20%. Note that you can choose px to adjust the dimensions, not purely through %.
    		• It looks like this:

    Text in here Text in here
  • If you want to have different color for each cell,
    		• It looks like this:

    Text in here Text in here
  • If you want to have 2 rows in the table, and 2 cells in each row,
    		• It looks like this:

    Text in here Text in here
    Text in here Text in here
    Like the tag, you can also combine all the table properties under a single tag. Let's take the table at the linkies page as an example, the code is


    To change the font attributes of the text in the table itself, just do it the way you do for normal text. :) That is, add in the font tag! :)

    Top

    I've reached the end of the HTML tutorial. There are much much more to learn in HTML. Not just the above, but if I'm to type everything out, I can't! Because I'm not that well-versed in HTML, and because that would take too long. :) So go out there and learn more when you can!!

    Any broken HTML codes that don't work or something, either post on message board or neomail me (ldgal99).

    Top

    Sites that are useful in providing both CSS and HTML Help

    [draac.com] [lissaexplains.com] [csshelp's petpage]


    Credits
    ¤ Lissa Explains It All ¤ Draac.Com ¤

    Top



    [Click to go to "Linkies"]


    NEOPETS, characters, logos, names and all related indicia
    are trademarks of Neopets, Inc., © 1999-2008.
    ® denotes Reg. US Pat. & TM Office. All rights reserved.
    PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
    Use of this site signifies your acceptance of the Terms and Conditions