BFF
Hello Guest, And welcome To
BFF: Best Friends Forever
Please register or Log On so you can:
Make new friends
Post and Chat
join clubs
Join Contests and Discussions
Play games in our Arcade section
And much, much More!!!

A Fun Place For Friends

Welcome to BFF: Best friends Forever.A place to hangout with your Best Of Friends.To join the fun u need To Login or register.Registering takes just a couple of minutes and if you are a member what are you waiting for login and enjoy!!

Log in

I forgot my password



Latest topics
» happy birthday to ayushi
Tue Jan 07, 2014 1:01 pm by

» DBZ fans come here !!!!
Fri Mar 08, 2013 6:46 am by

» better arcade having good games .
Fri Mar 08, 2013 6:41 am by

» Attendance Record Book
Fri Mar 08, 2013 6:37 am by

» predict something about the next person
Fri May 27, 2011 3:45 am by

» Count To 5000
Fri May 27, 2011 3:43 am by

» Pet Shop
Mon May 02, 2011 8:08 am by

» Greetings All
Mon May 02, 2011 8:02 am by

» Hey Everyone!
Mon May 02, 2011 8:01 am by

Follow Us on Social Networking sites
Follow BFFForum on Twitter
Calendar Widget

You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Josh's HTML Guide! on Sat Jul 10, 2010 5:14 am

Josh

avatar
Sr. Member
Sr. Member
Alright, the first thing you'll need to know are the basics to coding your very own webpage. First, open up wordpad or notepad, I prefer wordpad.

~Alright, the first thing you should always add to your webpage at the begining when coding it is the tag
Code:
<html>
and it's closing tag
Code:
</html>
The html tag will start the webpage while it's closing tag will end it.
~The second tag that is important to your webpage is to add the tags
Code:
<title></title>
once those tags are made, you will put the title of your webpage between them. An example of this could be
Code:
<title>Avatar RPG</title>
The reason for these tags is that they tell you're browser what the name of the website is so that it may present it on TABs or the very top of your window. It's not extremely important to use this, but it really helps to make your site look more professional.
~After you've decided on and made your title, you will move on to the body of your webpage! The body is where the information you wish to put will be shown at. This is actually probably the most important tag of all. You start and end the body with
Code:
<body></body>
-In accordance to your body, you will also need a header to start off each section of it. To make a heading simply use the tags
Code:
<hl></hl>
and like anything else in HTML, just put your heading text between the two tags.
-And of course, with every heading you will need a paragraph or two. start and end a paragraph just use the tags
Code:
<p></p>
and type the paragraph of information between these two tags. Only one paragraph per two tags, though, and you may use as many paragraphs per heading as you'd like!

That's about it for a basic webpage, however here are some other codes you may find useful or important!
~
Code:
<img src="Image URL">
By right-clicking an image and selecting "Copy Image Location" you will be able to acquire it's URL and paste it below the quotation marks in the tag. This will post up that image in HTML.
~
Code:
<href="Webpage URL">
Like posting images, simply get the URL to a specific webpage you wish to link to and paste it between the quotation marks! This will post the link and hyper link it to it's destination.
-To hyperlink text or an image use:
Code:
<a href="Webpage URL">Image Code, Text, or Both Here</a>
~
Code:
<br>
This code will form a line break in the text. This means that it will skip to the next line instead of continuing on the same line.
Ex.
"Potatoes are cool

Yeeeesh!"
~
Code:
<strong></strong>
or
Code:
<b></b>
will bold the text that is put in between the tags.
~
Code:
<u></u>
will underline the text that is put in betwwn the tags.
~
Code:
<i></i>
will italicize or 'slant' the text that is put in between the tags.
~
Code:

<ul>
<li>Text #1
<li>Text #2
<li>Text #3
</ul>
you can add as many of the "li" tags as you wish, but these tags will create a list of things.
Ex.
"
  • Text #1
  • Text #2
  • Text #3
"

Alright, if you've been making your webpage in wordpad or notepad as I've asked you'll be able to do this! Click the 'x' icon to exit the wordpad, but save it as "name.html" you can replace name with whatever, but keep the '.html' at the end. Once saved, go to it on your desktop or whatever, click it, and watch what comes up.

~Advanced HTML
~Horizontal Rules
Code:
<hr />
This is the general code to form a 'Horizontal Rule' across the body of your webpage. A horizontal rule is a basically a long line separating one area of your site from another through the use of a horizontal line. However, there are more advanced ways of going about making a horizontal rules. If you'd like a more customized one, use one of the codes below.
Ex:


Code:
<hr width="50%" size="3" />
This code will make the height of the line only 3 pixels, as seen next to 'size='. The width, which is 50%, means that it will only cover 50% of your webpage's body. Both the width and size field can be changed to any percentage or number to your liking.
Code:
<hr width="75%" color="#ff0000" size="4" />
This code will allow you to give the line a color that you like, by filling out the 'color=' field. For a list of the different HTML colors, you can try going Here
But the basic color codes are:
#FF0000 - Red
#6698FF - Blue
#00FF00 - Green
#FF8040 - Orange
#8D38C9 - Purple
#FFFFFF - White
#000000 - Black
#FFFF00 - Yellow

~Margin Allocation
Code:
<center></center>
This code will center it's contents so that it stays at the very middle of the webpage's body. It can work with images, text, or anything else you may want to center.
Ex: See?


Basic Alignments:

This would be what your text looks like when it's centered


This would be what your text looks like when aligned to the left


This would be what your text looks like when aligned to the right



~Forms and Buttons
- Input Field 1
Code:
<form method=post action="/cgi-bin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Ex:





- Input Field 2
Code:
<form method=post action="/cgi-bin/example.cgi">
<input type="text" style="color: #ffffff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Ex:





- Input Field 3
Code:
<form method=post action="/cgi-bin/example.cgi">
<table border="0" cellspacing="0" cellpadding="2"><tr><td bgcolor="#8463ff"><input type="text" size="10" maxlength="30"></td><td bgcolor="#8463ff" valign="Middle"> <input type="image" name="submit" src="yourimage.gif"></td></tr> </table>
</form>
Ex:



- Input Field 4
Code:
<form method=post action="/cgi-bin/example.cgi">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
Ex:

Enter Your Comments:







- Input Field 5
Code:
<form method=post action="/cgi-bin/example.cgi">
<center>
Select an option:
<select>
<option >option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit" value="Submit"></center>
</form>
Ex:


Select an option:





- Input Field 6
Code:
<form method=post action="/cgi-bin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3
<br>
<br>
Select an option:<br>
<input type="checkbox" name="selection"> Selection 1
<input type="checkbox" name="selection" checked> Selection 2
<input type="checkbox" name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>
Ex:

Select an option:

Option 1
Option 2
Option 3




Select an option:

Selection 1
Selection 2
Selection 3



~Font Editing
When editing a font's attributes, such as it's 'color', 'size', 'type', amongst other things, you must always start off with a specific tag.
[code][/size]
In this code, you may remove any of the 'color=""' 'size=""' etc. type of fields so long as you keep the tags and word 'font' as they are. To edit the given attributes of your text, simply fill in the field between the quotation marks. An example of this would be:
[code]Your Text Here![/code]
What it will come out as:
Your Text Here!
Basic Colors:
#FF0000 - Red
#6698FF - Blue
#00FF00 - Green
#FF8040 - Orange
#8D38C9 - Purple
#FFFFFF - White
#000000 - Black
#FFFF00 - Yellow

Basic Sizes:
Size 1
Size 2
Size 3
Size 4
Size 5
Size 6
Size 7

Basic Types/Faces:
Arial
Arial Black
Comic Sans MS
Century Gothic
Lucida Console

View user profile http://www.avatarrpg.com/index.htm

2 Re: Josh's HTML Guide! on Sat Jul 10, 2010 5:47 am

Blue Bird

avatar
Sr. Member
Sr. Member
gr8 work josh ..... and thx for the guide Smile

View user profile

3 Re: Josh's HTML Guide! on Sat Jul 10, 2010 5:51 am

Josh

avatar
Sr. Member
Sr. Member
Thanks, and no problem. I made it a long time ago and just copied and pasted it. ^.^

View user profile http://www.avatarrpg.com/index.htm

4 Re: Josh's HTML Guide! on Sat Jul 10, 2010 7:22 am

i know all this but this can be useful for the members who want to learn html anyways thanks for the guide josh Wink


_________________




Rules/ Portal/ Announcements

View user profile http://bfforever.forumotion.com

5 Re: Josh's HTML Guide! on Thu Jul 15, 2010 11:31 pm

udarsha45

avatar
Junior Member
Junior Member
is there a username code ?

View user profile

6 Re: Josh's HTML Guide! on Fri Jul 16, 2010 1:32 pm

Josh

avatar
Sr. Member
Sr. Member
Well, for Forumotion forums only the code to where it shows up as the username of the reader, such as: Guest
The code is:
Code:
{USERNAME}

View user profile http://www.avatarrpg.com/index.htm

7 Re: Josh's HTML Guide! on Fri Jul 16, 2010 9:32 pm

udarsha45

avatar
Junior Member
Junior Member
thanks Guest

View user profile

8 Re: Josh's HTML Guide! on Sun Jul 18, 2010 9:01 pm

Josh

avatar
Sr. Member
Sr. Member
No problem.

View user profile http://www.avatarrpg.com/index.htm

9 Re: Josh's HTML Guide! on Mon Jul 19, 2010 7:30 am

loversparadise

avatar
Sr. Member
Sr. Member
Josh wrote:Well, for Forumotion forums only the code to where it shows up as the username of the reader, such as: Guest
The code is:
Code:
{USERNAME}




SEEMS LIKE MY NAME IS GETTING POPULAR Smile

roflmao..

View user profile http://torrentmania.forumotion.com/forum.htm

10 Re: Josh's HTML Guide! on Tue Jul 20, 2010 12:51 am

heheh thats the code


_________________




Rules/ Portal/ Announcements

View user profile http://bfforever.forumotion.com

11 Re: Josh's HTML Guide! on Tue Jul 20, 2010 3:13 am

loversparadise

avatar
Sr. Member
Sr. Member
but still it has my name Smile

View user profile http://torrentmania.forumotion.com/forum.htm

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum

Protected by Copyscape Unique Content Checker

 
  •  

Free forum | © PunBB | Free forum support | Contact | Report an abuse | Free forum