Post by Square*** on Nov 26, 2007 9:31:59 GMT -5
HTML Coding Tutorial Part 1: HTML Basics and Colors
Hey guys,
I get a lot requests from people who want me to create a simple HTML script.
So I thought that it would be easier if I just wrote a little tutorial to
teach them something about HTML.
To start with HTML you first need some basic character knowledge
<HTML> Means all the following are HTML codes.(If you forget this, it wont
work at all)
<HEAD> The top center of your page (For title bars)
<TITLE> Your Title bar
<BODY> This indicates the start of you site contents
-> At the end of every command you use the / (</HTML>, </BODY>, </HEAD>)
THis closes for example your title bar, your body contents or the whole
HTML code
Some more important character groups
<BR> Works as your "Enter" key, lets you go one text line down.
<H1> Head lines
<H2> Also a healine
<H3> Also a headline and so on to <H6>
<U> Works as in Word , this underlines the words
<I> Works as in Word, called italy
<B> Works as in Word, this bolds the words
<S> Puts a line through the words
Now lets start with the beginning of all HTML codes:
THe main:
On A site it will look like this:
img30.picoodle.com/img/img30/5/11/26/f_HTMLtutoriam_6626967.png
THis is how your main code will look like (NOTE: this are the very first settings
you will need a lot more!)
As you see above, you can put as many commands behind each other as you want.
You can bold, underline and cross words just like in Word.
So you now know the very basics of the HTML,
Lets add some colors now,
Lets start with the background color:
This is the code you need for the background color,
The code FF0000 is red, but you can add every color you want.
(NOTE: if you already added the code <BODY> you must put it
behind it like this <BODY BGCOLOR="FF0000">)
Example colors
FF0000 = Red
FFFF00 = Yellow
0000FF = Blue
008000 = Green
000000 = Black
You can search on the internet for a program that generates color codes. For example this one: www.freewr.com/freeware.php?download=html-color-maker&lid=22
You can put every text or links in colors.
Example
(Check out tutorial 2 for links!)
This are some example of colors used on your web.
Now you know how to add text and make it look a bit good,
But I dont like all my text to stand on the left of the page, So lets center it.
So, off course you can put all the above commands in one page:
Example:
At your site it will look like this:
img26.picoodle.com/img/img26/5/11/26/f_HTMLtutoriam_e8a2eb0.png
You have now learned the basics of HTML and how to add colors.
If you are ready to move on to
HTML Tutorial 2: Pictures and Links
square127.proboards54.com/index.cgi?action=display&board=htmtuto&thread=1196088982&page=1
Square
Hey guys,
I get a lot requests from people who want me to create a simple HTML script.
So I thought that it would be easier if I just wrote a little tutorial to
teach them something about HTML.
To start with HTML you first need some basic character knowledge
<HTML> Means all the following are HTML codes.(If you forget this, it wont
work at all)
<HEAD> The top center of your page (For title bars)
<TITLE> Your Title bar
<BODY> This indicates the start of you site contents
-> At the end of every command you use the / (</HTML>, </BODY>, </HEAD>)
THis closes for example your title bar, your body contents or the whole
HTML code
Some more important character groups
<BR> Works as your "Enter" key, lets you go one text line down.
<H1> Head lines
<H2> Also a healine
<H3> Also a headline and so on to <H6>
<U> Works as in Word , this underlines the words
<I> Works as in Word, called italy
<B> Works as in Word, this bolds the words
<S> Puts a line through the words
Now lets start with the beginning of all HTML codes:
THe main:
<HTML> //Beginning of the code
<HEAD> //creates the Page bar
<TITLE>Tutorial Example 1</TITLE> //Your Page Title
</HEAD> //End of the Page bar
<BODY> //Beginning of your contents
This is how your contents will look like
without any bolded, underlined or crossed words<BR>
<B>This is bolded</B><BR>
<I>This is called Italy</I><BR>
<U>THis words are underlined</U><BR>
<S>Crossed words</S><BR>
</BODY> //The end of the contents
</HTML> // the end of the code
On A site it will look like this:
img30.picoodle.com/img/img30/5/11/26/f_HTMLtutoriam_6626967.png
THis is how your main code will look like (NOTE: this are the very first settings
you will need a lot more!)
As you see above, you can put as many commands behind each other as you want.
You can bold, underline and cross words just like in Word.
So you now know the very basics of the HTML,
Lets add some colors now,
Lets start with the background color:
<BODY BGCOLOR="FF0000">
This is the code you need for the background color,
The code FF0000 is red, but you can add every color you want.
(NOTE: if you already added the code <BODY> you must put it
behind it like this <BODY BGCOLOR="FF0000">)
Example colors
FF0000 = Red
FFFF00 = Yellow
0000FF = Blue
008000 = Green
000000 = Black
You can search on the internet for a program that generates color codes. For example this one: www.freewr.com/freeware.php?download=html-color-maker&lid=22
You can put every text or links in colors.
Example
TEXT="000000" -Makes you text Black
LINK="FF0000"- Makes your links Red
VLINK="800080"- Makes your visited links purple
ALINK="800080" - Makes your active link purple
(Check out tutorial 2 for links!)
This are some example of colors used on your web.
Now you know how to add text and make it look a bit good,
But I dont like all my text to stand on the left of the page, So lets center it.
<CENTER> Put this under your <BODY> To center all following text. Offcourse, to close use </CENTER>
So, off course you can put all the above commands in one page:
Example:
<HTML>
<HEAD>
<TITLE>Title of your page</TITLE>
</HEAD>
<BODY TEXT="FFFF00" BGCOLOR="FF0000"> //Sets the background
color and text color.
<CENTER>
This is how your contents will look like
without any bolded, underlined or crossed words<BR>
<B>This is bolded</B><BR>
<I>This is called Italy</I><BR>
<U>THis words are underlined</U><BR>
<S>Crossed words</S><BR>
</BODY>
</HTML>
At your site it will look like this:
img26.picoodle.com/img/img26/5/11/26/f_HTMLtutoriam_e8a2eb0.png
You have now learned the basics of HTML and how to add colors.
If you are ready to move on to
HTML Tutorial 2: Pictures and Links
square127.proboards54.com/index.cgi?action=display&board=htmtuto&thread=1196088982&page=1
Square