Can someone teach me HTML?! I need help with HTML!Original post by catalyst283I know a lot of people who are confused about HTML, so I decided to post this tutorial. It's not mine, I got it off of Neopets at
www.neopets.com/help/html1.phtml*NOTE: This HTML guide is NOT for this forum, things are a bit different here, so don't try using it here; this is for other webpages.So you'll see some neopet images and wording, sorry about that. It's a bit long, but here it is anyway.
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 </command> . That is you add a / after the first <.
<b>a word</b> 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 textThe 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:
<b> this bolds text </b> (you need to end this)
<br> inserts a line break (like pressing enter on a keyboard)
<p> This starts a new paragraph this is very useful for splitting up your text
<i> This makes text in italics </i> (you need to end this)
<u> underlines text </u> (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:
<font size=1>type your text here</font>
You must end your font tag or all text typed afterwards will be that size.
Now you know how to change text sizes and add special effects you are ready to progress onto more complicated HTML. Click the next button to move onto the third lesson.
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 <ul>.
You want each bullet point to appear on a new line so you type <li> before it.
When you have finished all your bullet points type </ul>
The code would look like this:
<ul>
<li>bullet one
<li>bullet two
<li>bullet three
</ul>
This is what would actually be displayed on your web page:
• bullet one
• bullet two
• bullet three
Numbered Lists:Creating a numbered list uses the same principle as creating bullet points except you use ordered list <ol> instead of <ul>. The code for an ordered list would look like this.
<ol>
<li>point one
<li>point two
<li>point three
</ol>
This is what would actually be displayed on your web page:
1. point one
2. point two
3. point three
For horizontal lines please go to the next lesson...
Lesson 3 - More Advanced Text continued....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 <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 web page is normally about 600 pixels wide) or by typing the percentage of the screen you want it to cover. To change the width you simply type <hr width=300> or <hr width=50%>.
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 10 pixel wide line you would type <hr size=10>
By default horizontal rules have shading. You can create a line without any shading by typing <hr noshade>.
You can combine as may variables as possible within the same tag. If you wanted to create a 300 pixel wide rule that was 10 pixels wide and had no shading you would type <hr noshade width=300 size=10>
It doesn't matter what order they are in as long as they are all within the < and > tags.
Lesson 4 - Font Colors You can change the color of your font very easily. For the most frequently used colors 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: <font color="red"> text here </font> and this would appear as text here.
For more specific colors you may need to use a hexadecimal code. This is the unique code given to each shade of colour. All colors 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: <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.
________________________________________
Background colorIf you want to make your page more interesting you can change the background of the page. Background color 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 color you wish. To change your background color simply type this near the top of your page.
<body bgcolor="#FFFFFF"> or <body bgcolor="white">
You do not need to end this tag as it affects the whole page but it is good practice to put </body> at the bottom of your page to keep things tidy.
________________________________________
Lesson 5 - Adding Pictures Pictures can brighten up a web page 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 web site. 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.
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:
<img src="http://www.neopets.com/mypicture.gif">
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:
<img src="http://www.neopets.com/mypicture.gif" border="2">
This will now display your picture with a thick border around it.
For details 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 ones are left, right and center. To make an image centered type this before the image tag:
<div align=center>
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:
</div>
To make something aligned to the left or right you use the same code just replace the word center with left or right.
Background Images:You can also make an image display as a background image instead of just having a solid color. This works well with light colored, simple 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:
<body background="http://www.neopets.com/mypicture.gif">
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. You already know how to insert images or text into your web page, turning that into a link 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:
<a href="http://www.neopets.com"> Click Here</a>
The only thing that will be displayed on the web page is the text click here. This would 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 color, bold, italic whatever but you need to start and finish the tags either side of the text. e.g to make that link bold I would put:
<a href="http://www.neopets.com"><b>click here<b></a>
To make an image click-able you use the same idea but instead of typing the text you put the image tag. E.g:
<a href="http://www.neopets.com">
<img src="http://www.neopets.com/mypicture.gif"></a>
It will automatically put a thin border around your image. To make this thicker or remove it you need to use the border tag (see lesson 5 - inserting pictures). Using this you can choose what thickness 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 be able to contact you. A great way to do this is to post your email address on your web site.
***Beware*** - If you post your email address on your web page that means that absolutely anybody can 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 check 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 you want to pop up. For example if I wanted to post my email address as info@neopets.com I would type:
<a href="mailto:info@neopets.com">info@neopets.com</a>
This would display the text info@neopets.com and when you click on it it will open up a blank email addressed to info@neopets.com. (exactly like this info@neopets.com) You may want to make the font a different size, make it bold or change the color. To do this just type the relevant tag either side of the linking text.
Lesson 9 - Adding Banners People add banners to their sites for a number of reasons. If you decide to add a banner to your site you first need to choose what image you want to use. Underneath the banner you like will be some code. It will look something like this:
<a href='http://www.neopets.com/refer.phtml?username=donna'>
<img src='http://images.neopets.com/creatives/paradise_468x60.gif'></a>
Simply copy that code (highlight the text and press control and c) the paste it into your web page (press control and v).
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, whatever goes inside the cells.
To create a table you need to start and end it. To start a table you need to type <table> and to end the table type </table>. What goes between the start and end table 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, it can be text, images, links, anything. If you want to create a table with two columns and one row. You need to type:
<table>
<tr> - start table row
<td> - start table data cell
type your text or image tags here
</td>
<td> - start the second table data cell
type your text or image here
</td>
</tr>
</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 color or changing the border size and color.
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.
To change the color of the border you use a similar code to changing background color. 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 colors.
Changing the color of the table
Changing the color of a table is very simple. When you start a table you just need to say what color you want the table to be. In this case I want a light blue (CCCCFF). Just type <table border=1 bgcolor=CCCCFF>
background color is CCCCFF
If you want to change the color of just one row or cell you just type bgcolor=CCCCFF inside the start td or tr tag like so:
<tr bgcolor=CCCCFF>
<td bgcolor=CCCCFF>
Now you can change the appearance of you 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 its size. If you don't specify a height or width it will try to fit in your text or pictures automatically but this may not look exactly how you want it. 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 web page 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. E.g
<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.
Adding Music This is a very easy thing to do and can really brighten up your webpage. There are several ways you can add music. It can play in the background, play once only, play continuously, or you can let the person viewing the webpage decide what they want to do. First you need to have your music file saved somewhere on the internet. Simply replace the text
images.neopets.com/help/beep.wav with the URL of your music file.
Creating a playerYou can create a little music player on your page, this will allow the viewer to stop and start the music whenever they wish. What tags you use depends on if you want people to see it in Netscape or Internet Explorer (it may not work in other browsers such as Mozilla, Opera, etc). Netscape supports embed tags and IE supports bgsound tags. It is best to include both, that way it will always work.
<embed src="http://images.neopets.com/help/beep.wav" width=200 height=40>
<noembed>
<bgsound src="http://images.neopets.com/help/beep.wav">
</noembed>
Continous PlayYou can make your music play continually by adding the loop tag, these are slightly different in Netscape and IE. If you want your music to start playing as soon as someone loads the page, type autostart=true in the embed code. The following code would start your music automatically and play it constantly.
<embed src="http://images.neopets.com/help/beep.wav" width=200 height=40 autostart=true loop=true>
<noembed>
<bgsound src="http://images.neopets.com/help/beep.wav" loop=infinite>
</noembed>
Background MusicIf you want to give your webpage a more subtle appearance, you do not need to display the player. If you want to hide the player from your viewers, use the hidden=true tag like so:
<embed src="http://images.neopets.com/help/beep.wav" hidden=true autostart=true>
<noembed>
<bgsound src="http://images.neopets.com/help/beep.wav" loop=infinite>
</noembed>
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. 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 such as 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. Next a window will pop up. 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 drawThe tools are pretty obvious, the pencil draws, the paint bucket fills in shapes, the circle tool draws a circle, etc. You can change colours by clicking on the colours at the bottom. 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.
SavingSave your picture regularly. There is nothing worse than accidentally knocking the power switch and losing all your work after spending 2 hours creating an image. To save click on 'FILE' then 'SAVE' enter a file name for your picture and then press 'SAVE'.
Changing the font for the whole pageYou only need to enter one code to change the background and fonts. Just type
<style> body { at the top of the page, put everything you want to change inside the curly brackets and then end it with
}</style> • font-family allows you to choose what font is displayed, e.g arial, comic sans, verdana
• color lets you set the color of all text on your page
• font-size alters the size of text on your page, choose small, medium or large
Your code should end up looking something like this
<style> body {font-family:verdana; color:#EFA6FF; font-size:small;} </style>
or if you are changing your background colour as well, like this
<style> body {background: fixed; background-color: #9c2000; font-family:verdana; color:#EFA6FF; font-size:small;} </style>
There is a lot more you can do with HTML; this just covers the basics.
[/li][/ul]