Login

Conan · 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

Code:
<html>

</html>

also here are some basic essentials when writing 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>

cheeseburger · 10-12-2009, 03:43 PM

Nice [TUT] / guide

Lord_Scorch · 10-12-2009, 05:33 PM

Hello;

This is a good little tutorial. Though HTML is a simply coding language, it's essential. And as for the writing itself, I recommend some punctuation. As well as changing the color blue, as it's a little difficult on the eyes.

-LS

Akshay* · 10-13-2009, 08:13 AM

That was a nice on..thanks...but u can learn it from www.w3schools.org

Conan · 10-13-2009, 11:18 AM

(10-13-2009, 08:13 AM)Danger Wrote: That was a nice on..thanks...but u can learn it from www.w3schools.org

You can also learn spelling of the word you on dictionary.com but you just leanred how to in the post ^__^

Headshot · 10-13-2009, 11:30 AM

(10-13-2009, 11:18 AM)Conan Wrote: You can also learn spelling of the word you on dictionary.com but you just leanred how to in the post ^__^

EPIC FAIL!

I couldn't resist this. xD

Conan · 10-13-2009, 06:36 PM

(10-13-2009, 11:30 AM)Headshot Wrote: EPIC FAIL!

I couldn't resist this. xD

notetoself: dont correct bitches on your Itouch XD

Apparatus · 10-13-2009, 10:19 PM

Nice tut. Html is a very basic website programming language that everyone should learn. This will help out alot of people.

Conan · 10-15-2009, 06:10 AM

thanks for the nice comments guys ^__^

ßeowulf · 10-18-2009, 07:19 AM

I'd say it's an okay tutorial.

Login
Username:
Password:	Lost Password?
	Remember me

Possibly Related Threads…
Thread		Author	Replies	Views	Last Post
	Free Worker HTML, CSS, Javascript	ImFocuzz	2	1,072	04-05-2014, 10:01 PM Last Post: VHPanda
	Forum CSS code problem.	inferno.lion	0	645	06-10-2013, 02:48 AM Last Post: inferno.lion
	HTML Video Tutorial Collection (7 Videos and growing)	etcBro	1	658	06-05-2013, 08:44 AM Last Post: Toxhicide
	Contact form for HTML	Crystal	36	8,364	05-24-2013, 05:51 PM Last Post: Akai
	MyBB CSS Postbit Buttons	Peter L	1	1,301	07-14-2012, 05:52 PM Last Post: 'Snorlax