HomeBasic HTML coding
5 posters
Page 1 of 1
Basic HTML coding
by Havik 31/5/2010, 18:01
This guide will encompass the basics of HTML as I learned them. if you feel this is missing anything please, post lower and it will be corrected.
Note: This thread will only cover HTML. It will NOT cover XHTML, Javascript, PHP, or CSS. THIS IS ONLY HTML.
AFTER EACH STEP MAKE SURE TO SAVE IT AS AN HTML FILE. IF YOU DON'T, ANY CHANGES APPLIED WILL NOT SHOW.
To save in Notepad++, just make sure the file type is .html If you are using just plain old notepad, make sure the file type IS NOT .txt Change it to all file types. Then save it as site.html or what ever you would like to save it is. MAKE SURE YOU HAVE THE .HTML ENDING!
As well for any Canadians out there trying to learn code, these programs only recognize American versions of words. So when using colour tags, make sure it is spelt color, not colour. It annoys me that I have to do this, but this is how it goes.
Now, with HTML there are a few things you may want to start with.
Programs:
Notepad++ http://notepad-plus.sourceforge.net/uk/site.htm
Download the Binary files, and you should be good. Make sure it is installed CORRECTLY!.
Now, the benefits to Notepad++ as opposed to say notepad, is it will allow you to write in multiple different coding languages, and it WILL recognize them all. It also makes coding easier for bigger coding projects because it allows you to collapse the <div> codes you may have, or any big javascript, or any large script to compress it, and make it easier to look for data. It also has good search for terms functions, as well as being able to search for a certain line of code, and replace it easily. It also allows you to pick what browser you want to show the site in.
Before we get into details, HTML stands for Hyper Text Markup Language. Name isn't very important, but thats just what HTML stands for
Now, with HTML coding there are a lot of basics to make the site show. First of all, you will have an opening tag of <html>
the tag <html> shows that any further content later will be in HTML (or whatever code) and it will allow browsers to read this. Next you are going to want to add your <title> and <head> opening tags. There are 2 kinds of tags you will find, opening tags, and closing tags. They both inter-relate, and we will find this out now. For now, your code should look like this:
Don't forget your closing </html> tag. This ends the site, and will make it show. IF you forget it, nothing will show.
Now, the <head> tag has a closing tag of </head> that means anything that encloses the <head> and </head> tag will finish being showed. The <title> tag also has a closing tag. The <title> tag helps show what your site is. So if you put "insert site name here" between <title> and </tittle> the words "insert site name here" will show up in the bottom bar, as well as in the tab bar at the top of your browser. If your title tag is not inside the head tag, the head tag will end up showing in the title tag, which is bad. It will also mess up the <head> tag and what ever else is in it. So watch out make sure you don't mess up.
The point of the <head> tag is to insert such things as the tab name, whether or not you are using javascript in the document, using PHP, using a CSS script, etc. that is more advanced, and this is for basic HTML. Now, onto the next item.
HTML TEXT FUNCTIONS
Now, HTML can make web-pages show various kinds of text, and in various colours, fonts, sizes. Whatever. Lets cover the basics of how to show font, and edit it on an HTML page.
So, we start with our standard HTML page. (this starting will show up a lot, as it is a basic part of HTML coding)
Now, this code is missing one part, that is the <body> opening and closing tag. It will end up looking like this:
Now, your body opening and closing tags will be after the <html> opening tags, and before the </html> closing tag. nothing that is past the </html> tag or before the <html> tag will show up in the site page on the internet.
The body tags are basically the body of the site. they will house everything that is in the site body. This includes pictures, nav bars, text, ads, twitter feeds, news feeds whatever you want it will be in the body tag. Now onto the text portion:
Text can be changed many ways with HTML. It can be underlined, Bolded, and Italicized.
To underline text in HTML, use the <u> and </u> tags. the content between those two tags will be underlined.
To bold text in HTML, use the <b> and </b> tags. the content between those two tags will be underlined.
To italicize text in HTML, use the <i> and </i> tags. the content between those two tags will be underlined.
Try this code out for size!
Alright, now save it, and check it out in your browser!
You will notice that in your browser, the words are beside each other, I will explain how to stop this later in the paragraph functions section.
Now, text just doesn't have to be plain times new roman, and black. We can change it up! make it awesome. make it something like arial, size 20, and red! how do we do this, simple, the <font> tag to the rescue!
The <font> tag allows you to do much more than just colour, it allows different sizes, and fonts too! So say you want a cool font such as Tahoma, and make the text blue, to do this you just have to use some font tags!
Notice how you could put all of those options in one font tag! wow. To do this, make sure they are seperated by a space, and make sure to remember the quotation marks. Also, don't forget your closing </font> tag.
If you forget your closing tag, the rest of the font in the document will end up with these options!
Line Breaks, New Paragraphs
Now, of course you don't want a big clump of font. You want it seperated, spread out, looking nice. To do this, we have the line break, and new paragraph tags. For a new paragraph, you use the <p> tag. This says that the next text after this, until another <p> tag or <br> tag will be in the next paragraph.
Let us test the code:
If you notice, there is really no noticeable difference, but it is good to use the two in there respective occasion instead of using the <br> tag just for a new paragraph. Also, to the keen eye you will notice NO closing tag. Some codes for HTML require no closing tag because of there nature. This does not mean all code doesn't need a closing tag. In fact, most code has closing tags, these are the exceptions.
Lists and Tables
HTML coding lets us make lists, and tables on web pages. Lets check out this code shall we. There are two different lists, Un-ordered lists, and Ordered lists. Since they are two different things, they have two separate codes.
Notice the different opening and closing tags. un-orded lists have the <ul> tag, which makes sense, right? the Ordered lists have the <ol> tag, which makes sense, right? Of course it does! But, in between them they have the same <li> tag :O this is the list tag, which defines it as a list item, IF in between the right tags.The numbers and bullets can go on and on, and make sure you remember your closing tags! Also, <li> does not have a closing tag! it is an exception!
Now for the table.
The table has a few main tags. The <table> and </table> tags. The <td> and </td> tags. The <table border="2"> and </table> tags. and last but not least the <tr> and </tr> tags. Lets explain these tags.
<table> and </table> Content of the table must go in between these two tags.
<td> and </td> these go inside the table tag, this is the table data tag.
Table border is obviously self-explanitory, but basically it gives a border around the table.
and when you want a new table row, you add the <tr> and </tr> tags.
Lets test these codes out!
As you can see, the table will make more rows if necesary, as well as more columns if you choose and put in the right tags. Now HTML consists of MUCH more coding, as you can see this is a lot of code and this is just barely the surface! Here are some more useful HTML codes that can be used.
Images:
Save them in the same folder as web page files, therefore you do NOT have to specify a path, just the file name in the code. The image tag is <img src="image.jpg"> There is NO closing tag, you must specify the image ending, whether it be jpg, gif,etc. Make sure the image name is correct, and make sure you don't forget your quotation marks.
Background:
Want to have a coloured background, and not a plain background? well here is how you do it!
Make sure it is in the <body> tag. If it is a colour, the code is <body bgcolor="black"> or whatever colour you choose. The Image background code is <body background="imagename.jpg">
Links:
Links use the <a> and </a> tags. this allows you to re-name links, possibly allowing you to rick-roll people, or just make it easier to read and not having it as a long http://www.sitename.blablabla.com/forums/index/post.html/newpost. Instead it can be as easy as it saying New Post. How you do this is easy. You write <a href="http://www.sitenamehere.com"> What link will say </a>
Again, this is just an HTML intro. Some nice HTML stuff can be found here at http://www.htmlgoodies.com
NOTE: This is just some of what HTML is, if I wrote EVERYTHING I knew about site coding, it would be a long long LONG guide, and this is just the basic basics. Hope you have fun! if you have any problems with it, post below!
Note: This thread will only cover HTML. It will NOT cover XHTML, Javascript, PHP, or CSS. THIS IS ONLY HTML.
AFTER EACH STEP MAKE SURE TO SAVE IT AS AN HTML FILE. IF YOU DON'T, ANY CHANGES APPLIED WILL NOT SHOW.
To save in Notepad++, just make sure the file type is .html If you are using just plain old notepad, make sure the file type IS NOT .txt Change it to all file types. Then save it as site.html or what ever you would like to save it is. MAKE SURE YOU HAVE THE .HTML ENDING!
As well for any Canadians out there trying to learn code, these programs only recognize American versions of words. So when using colour tags, make sure it is spelt color, not colour. It annoys me that I have to do this, but this is how it goes.
Now, with HTML there are a few things you may want to start with.
Programs:
Notepad++ http://notepad-plus.sourceforge.net/uk/site.htm
Download the Binary files, and you should be good. Make sure it is installed CORRECTLY!.
Now, the benefits to Notepad++ as opposed to say notepad, is it will allow you to write in multiple different coding languages, and it WILL recognize them all. It also makes coding easier for bigger coding projects because it allows you to collapse the <div> codes you may have, or any big javascript, or any large script to compress it, and make it easier to look for data. It also has good search for terms functions, as well as being able to search for a certain line of code, and replace it easily. It also allows you to pick what browser you want to show the site in.
Before we get into details, HTML stands for Hyper Text Markup Language. Name isn't very important, but thats just what HTML stands for
Now, with HTML coding there are a lot of basics to make the site show. First of all, you will have an opening tag of <html>
the tag <html> shows that any further content later will be in HTML (or whatever code) and it will allow browsers to read this. Next you are going to want to add your <title> and <head> opening tags. There are 2 kinds of tags you will find, opening tags, and closing tags. They both inter-relate, and we will find this out now. For now, your code should look like this:
- Code:
<html>
<head> <title> Insert Name Here </title> </head>
</html>
Don't forget your closing </html> tag. This ends the site, and will make it show. IF you forget it, nothing will show.
Now, the <head> tag has a closing tag of </head> that means anything that encloses the <head> and </head> tag will finish being showed. The <title> tag also has a closing tag. The <title> tag helps show what your site is. So if you put "insert site name here" between <title> and </tittle> the words "insert site name here" will show up in the bottom bar, as well as in the tab bar at the top of your browser. If your title tag is not inside the head tag, the head tag will end up showing in the title tag, which is bad. It will also mess up the <head> tag and what ever else is in it. So watch out make sure you don't mess up.
The point of the <head> tag is to insert such things as the tab name, whether or not you are using javascript in the document, using PHP, using a CSS script, etc. that is more advanced, and this is for basic HTML. Now, onto the next item.
HTML TEXT FUNCTIONS
Now, HTML can make web-pages show various kinds of text, and in various colours, fonts, sizes. Whatever. Lets cover the basics of how to show font, and edit it on an HTML page.
So, we start with our standard HTML page. (this starting will show up a lot, as it is a basic part of HTML coding)
- Code:
<html>
<head> <title> Insert Name Here </title> </head>
</html>
Now, this code is missing one part, that is the <body> opening and closing tag. It will end up looking like this:
- Code:
<html>
<head> <title> Insert Name Here </title> </head>
<body>
</body>
</html>
Now, your body opening and closing tags will be after the <html> opening tags, and before the </html> closing tag. nothing that is past the </html> tag or before the <html> tag will show up in the site page on the internet.
The body tags are basically the body of the site. they will house everything that is in the site body. This includes pictures, nav bars, text, ads, twitter feeds, news feeds whatever you want it will be in the body tag. Now onto the text portion:
Text can be changed many ways with HTML. It can be underlined, Bolded, and Italicized.
To underline text in HTML, use the <u> and </u> tags. the content between those two tags will be underlined.
To bold text in HTML, use the <b> and </b> tags. the content between those two tags will be underlined.
To italicize text in HTML, use the <i> and </i> tags. the content between those two tags will be underlined.
Try this code out for size!
- Code:
<html>
<head> <title> Insert Name Here </title> </head>
<body>
<i> I am italicized! </i>
<b> I am bolded! </b>
<u> I am underlined! </u>
</body>
</html>
Alright, now save it, and check it out in your browser!
You will notice that in your browser, the words are beside each other, I will explain how to stop this later in the paragraph functions section.
Now, text just doesn't have to be plain times new roman, and black. We can change it up! make it awesome. make it something like arial, size 20, and red! how do we do this, simple, the <font> tag to the rescue!
The <font> tag allows you to do much more than just colour, it allows different sizes, and fonts too! So say you want a cool font such as Tahoma, and make the text blue, to do this you just have to use some font tags!
- Code:
<html>
<head> <title> Insert Name Here </title> </head>
<body>
<font color="blue"> Yay blue text!!!!</font>
<font size=1> This font is smaller D: </font>
<font face="Tahoma"> This font is Tahoma!!! </font>
<font color="blue" size="+4" face="Tahoma"> I have combined them all! </font>
</body>
</html>
Notice how you could put all of those options in one font tag! wow. To do this, make sure they are seperated by a space, and make sure to remember the quotation marks. Also, don't forget your closing </font> tag.
If you forget your closing tag, the rest of the font in the document will end up with these options!
Line Breaks, New Paragraphs
Now, of course you don't want a big clump of font. You want it seperated, spread out, looking nice. To do this, we have the line break, and new paragraph tags. For a new paragraph, you use the <p> tag. This says that the next text after this, until another <p> tag or <br> tag will be in the next paragraph.
Let us test the code:
- Code:
<html>
<head> <title> Insert Name Here </title> </head>
<body>
<br> I have just made a new line
<br> and another one!
<p> but now I am a new paragraph!
</body>
</html>
If you notice, there is really no noticeable difference, but it is good to use the two in there respective occasion instead of using the <br> tag just for a new paragraph. Also, to the keen eye you will notice NO closing tag. Some codes for HTML require no closing tag because of there nature. This does not mean all code doesn't need a closing tag. In fact, most code has closing tags, these are the exceptions.
Lists and Tables
HTML coding lets us make lists, and tables on web pages. Lets check out this code shall we. There are two different lists, Un-ordered lists, and Ordered lists. Since they are two different things, they have two separate codes.
- Code:
<html>
<head> <title> Insert Name Here </title> </head>
<body>
<ul>
<li> Bullet One
<li> Bullet Two
</ul>
<ol>
<li> Number One
<li> Number Two
<ol>
</body>
</html>
Notice the different opening and closing tags. un-orded lists have the <ul> tag, which makes sense, right? the Ordered lists have the <ol> tag, which makes sense, right? Of course it does! But, in between them they have the same <li> tag :O this is the list tag, which defines it as a list item, IF in between the right tags.The numbers and bullets can go on and on, and make sure you remember your closing tags! Also, <li> does not have a closing tag! it is an exception!
Now for the table.
The table has a few main tags. The <table> and </table> tags. The <td> and </td> tags. The <table border="2"> and </table> tags. and last but not least the <tr> and </tr> tags. Lets explain these tags.
<table> and </table> Content of the table must go in between these two tags.
<td> and </td> these go inside the table tag, this is the table data tag.
Table border is obviously self-explanitory, but basically it gives a border around the table.
and when you want a new table row, you add the <tr> and </tr> tags.
Lets test these codes out!
- Code:
<html>
<head> <title> Insert Name Here </title> </head>
<body>
<table border=2>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
</table>
</body>
</html>
As you can see, the table will make more rows if necesary, as well as more columns if you choose and put in the right tags. Now HTML consists of MUCH more coding, as you can see this is a lot of code and this is just barely the surface! Here are some more useful HTML codes that can be used.
Images:
Save them in the same folder as web page files, therefore you do NOT have to specify a path, just the file name in the code. The image tag is <img src="image.jpg"> There is NO closing tag, you must specify the image ending, whether it be jpg, gif,etc. Make sure the image name is correct, and make sure you don't forget your quotation marks.
Background:
Want to have a coloured background, and not a plain background? well here is how you do it!
Make sure it is in the <body> tag. If it is a colour, the code is <body bgcolor="black"> or whatever colour you choose. The Image background code is <body background="imagename.jpg">
Links:
Links use the <a> and </a> tags. this allows you to re-name links, possibly allowing you to rick-roll people, or just make it easier to read and not having it as a long http://www.sitename.blablabla.com/forums/index/post.html/newpost. Instead it can be as easy as it saying New Post. How you do this is easy. You write <a href="http://www.sitenamehere.com"> What link will say </a>
Again, this is just an HTML intro. Some nice HTML stuff can be found here at http://www.htmlgoodies.com
NOTE: This is just some of what HTML is, if I wrote EVERYTHING I knew about site coding, it would be a long long LONG guide, and this is just the basic basics. Hope you have fun! if you have any problems with it, post below!
Havik- Posts : 427
Join date : 2010-02-16
Age : 29
Location : Canada -
Re: Basic HTML coding
by Epps 31/5/2010, 18:07
I rushed trough reading this since I allready know the basics of HTML and one thing you did wrong was the br code (and others). You should ALWAYS end every code, so instead <br> you should use <br />, same goes for img script and other codes.
Anyway, next to that this is a very nice guide although I prefer DreamWeaver over Notepad++ (although it is a great program!).
Anyway, next to that this is a very nice guide although I prefer DreamWeaver over Notepad++ (although it is a great program!).
Epps- RINGO MOGIRE BEAM!
- Posts : 2052
Join date : 2009-11-16
Age : 34
Location : Oss, Netherlands -
Re: Basic HTML coding
by Havik 31/5/2010, 18:14
meh, I have used notepad++ too long, when I tried dreamweaver I was like, meh but anyways the end coding isn't wrong, you don't have to end it, but ending it is a good idea because it lets you remember to end codes. I also just lol'ed that I called it HTML basics, and it is a really long guide XD
but anyways the end coding isn't wrong, you don't have to end it, but ending it is a good idea because it lets you remember to end codes. I also just lol'ed that I called it HTML basics, and it is a really long guide XD
Havik- Posts : 427
Join date : 2010-02-16
Age : 29
Location : Canada -
Nick- Clan Recruiter
- Posts : 786
Join date : 2010-03-20
Age : 31
Location : South Carolina
Re: Basic HTML coding
by Nicobbq 31/5/2010, 19:00
Now show us how to make a pacman game using the google logo 
Nicobbq- Forum Admin
- Posts : 1083
Join date : 2010-01-02
Age : 34
Location : Quebec, Canada
Re: Basic HTML coding
by Google 31/5/2010, 19:06
I believe that's javascript.Nicobbq wrote:Now show us how to make a pacman game using the google logo
Google- Clan Member
- Posts : 998
Join date : 2010-04-01
Age : 32
Location : New York, USA
Re: Basic HTML coding
by Epps 31/5/2010, 21:25
I made one (bugged) version in Flash once and I loved the Gogole Pacman logo =DNicobbq wrote:Now show us how to make a pacman game using the google logo
Epps- RINGO MOGIRE BEAM!
- Posts : 2052
Join date : 2009-11-16
Age : 34
Location : Oss, Netherlands -
Re: Basic HTML coding
by Havik 31/5/2010, 21:26
Chuck wrote:copy pasta or is this the REAL DEAL
It's the real deal. I can show you some of my work if you want
I spent almost 2 hours writing this. Not non-stop of course.
Havik- Posts : 427
Join date : 2010-02-16
Age : 29
Location : Canada -
Re: Basic HTML coding
by Google 31/5/2010, 21:40
How dare you spell my name wrong =/Sgt Pepper wrote:I made one (bugged) version in Flash once and I loved the Gogole Pacman logo =DNicobbq wrote:Now show us how to make a pacman game using the google logo
Google- Clan Member
- Posts : 998
Join date : 2010-04-01
Age : 32
Location : New York, USA
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum