10-12-2009, 12:59 PM
hey guys conan here. need to learn HTML fast to look like a stud? hes some essentials and some ways to jazz up you website/myspace
firstly you need to know how to test your code. write all your code into a blank notepad document (or any html based editor) and save it as enternamehere.html
basic knowledge
to start an HTML document use these tags in the very beginning and the very end of said document
also here are some basic essentials when writing HTML
background and colors
so we now basically have the basics down heres some BASIC CSS to help you add some pizazz to any webpage
firstly when writing in css these "decelerations" go on the very top of the document right under the <html> tags.
all CSS declarations go in between these tags
now to add some color to our masterpiece i am going to post it exactly how it needs to be and put notes beside it to show what it does
as you can see before you say what color you want things you have to tell it were.
for example if you wanted the text in <h1> to be green and the text in <body> to be blue it would look like this
also if you want the ENTIRE background to be one color you must label it in the <body> section like this
[that would make the background black]
images, tables, and basic snazzynes
lets start by teaching you how to add an image easily
to change the size of the image use
with url it would look like this
now adding tables is a little tricky.
im going to teach you in the simplest way possible.
sounds a little confusing right? dont worry it isnt. in a nutshell
the more <td></td> you have in each row the more cells you will have going left to right
the more <tr></tr> the more cells you will have going up and down
----------------------------------------------------------------------------------------------------------
now onto basic snazyness
here is some code that can really give your "professional" webpage/myspace that real kick
also you can replace solid with
dotted: Defines a dotted border
dashed: dashed border
double: two borders. The width of the two borders are the same as the width value
groove: 3D grooved border. The effect depends on the border-color value
ridge: 3D ridged border. The effect depends on the border-color value
inset: 3d inset border. The effect depends on the border-color value
outset: 3D outset border. The effect depends on the border-color value
________________________________________________________________________________________________________________________________
ok heres just something you can use to add some design to your web page its essentially a box
you can play around the settings as you choose
heres a page i built with this same knowledge
firstly you need to know how to test your code. write all your code into a blank notepad document (or any html based editor) and save it as enternamehere.html
basic knowledge
to start an HTML document use these tags in the very beginning and the very end of said document
Code:
<html>
</html>
Code:
<center></center> centers text,images, even videos
<p></p> paragraph
<body></body> the body of the webpage
<h1></h1> biggest heading
<h2></h2> second biggest heading
<h3></h3> third biggest heading
<h4></h4> fourth biggest heading
<h5></h5> fifth biggest heading
<h6></h6> smallest heading
<a href="http://www.supportforums.net">support forums</a> how to "mask" a link
background and colors
so we now basically have the basics down heres some BASIC CSS to help you add some pizazz to any webpage
firstly when writing in css these "decelerations" go on the very top of the document right under the <html> tags.
all CSS declarations go in between these tags
Code:
<style type="text/css">
</style>
now to add some color to our masterpiece i am going to post it exactly how it needs to be and put notes beside it to show what it does
Code:
body {background-color: black} <--change the background color
body {color:blue} <---change the font color for the text inside <body> tags
h6 {color:green} <---- change the font color for the text inside <h6> tags
h6 {text-align:center} <--- text alignment in the <h6> tags you can also replace center with justify and right (for right alignment)
as you can see before you say what color you want things you have to tell it were.
for example if you wanted the text in <h1> to be green and the text in <body> to be blue it would look like this
Code:
body {color:blue}
h1 {color:green}
also if you want the ENTIRE background to be one color you must label it in the <body> section like this
Code:
body {background-color: black}
[that would make the background black]
images, tables, and basic snazzynes
lets start by teaching you how to add an image easily
Code:
<img src=""/>
to change the size of the image use
Code:
<img src=""width="104" height="142"/>
with url it would look like this
Code:
<img src="http://www.malvager.com/images/blackbb/logo.gif"width="104" height="142"/>
now adding tables is a little tricky.
im going to teach you in the simplest way possible.
Code:
<table border="4"> <---- <table></table> brackets along with a number that will change the thickness of the border of said table
<tr> <--------------<tr> = table row need this for EACH cell
<th>Heading</th> <-------<th> = table heading this text will be bigger and bolder and go on the cell of a table (not needed just some added snazz)
<th>Heading</th> <---- same as above
</tr> <----- the end of one row in a table
<tr>
<td>hey</td> <----<td> = table data to add data into each cell you need these tags
<td>fallen</td>
</tr>
</table> <----need this to end the table
sounds a little confusing right? dont worry it isnt. in a nutshell
the more <td></td> you have in each row the more cells you will have going left to right
the more <tr></tr> the more cells you will have going up and down
----------------------------------------------------------------------------------------------------------
now onto basic snazyness
here is some code that can really give your "professional" webpage/myspace that real kick
Code:
h1 {text-decoration:overline} <-----puts a line above the text
h1 {text-decoration:line-through} <----puts a line throught the text
h1 {text-decoration:underline} <----underlines the text
h1 {text-decoration:blink} <---makes the text blink
body {border-style:solid;
border-color:red} <---this would be used to put a border around your text you can put it in any variable not just <body>
also you can replace solid with
dotted: Defines a dotted border
dashed: dashed border
double: two borders. The width of the two borders are the same as the width value
groove: 3D grooved border. The effect depends on the border-color value
ridge: 3D ridged border. The effect depends on the border-color value
inset: 3d inset border. The effect depends on the border-color value
outset: 3D outset border. The effect depends on the border-color value
________________________________________________________________________________________________________________________________
ok heres just something you can use to add some design to your web page its essentially a box
Code:
{width:1500px; <---px is pixel
padding:110px; <--- padding is the space between the box and the data
border:10px solid black; <---how thick your border is along with what color
margin:100px;} <---how big of a margin you want
you can play around the settings as you choose
heres a page i built with this same knowledge
Code:
<html>
<head>
<style type="text/css">
body
{width:1500px;
padding:10px;
border:5px solid gray;
margin:50px;}
body {background-color: black}
body {color:blue}
h4 {color:green}
h4 {text-decoration:blink}
h4 {text-align:center}
table
{border-style:groove;
border-color:blue;}
{width:220px;
padding:10px;
border:5px solid gray;
margin:0px;}
</style>
<body>
<center><p><img src="http://www.malvager.com/images/blackbb/logo.gif"/></p>
<p>hey guys its conan you should so totally join our IRC chat were the most popular HF/SF members hang out
irc.malvager.com #malvager</p>
dont know what IRC is? click <a href"http://www.youtube.com/watch?v=UMEd-mYJiak">here</a>
</center>
</head>
<center><table border="4">
<tr>
<th>server</th>
<th>channel</th>
</tr>
<tr>
<td>heyyy</a></td>
<td>sup?</td>
</tr>
</body>
<h4>made by conan </h6>
</html>