Home
1
Josh's HTML Guide! Sat Jul 10, 2010 5:14 am
Josh
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
~The second tag that is important to your webpage is to add the tags
~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
-And of course, with every heading you will need a paragraph or two. start and end a paragraph just use the tags
That's about it for a basic webpage, however here are some other codes you may find useful or important!
~
~
-To hyperlink text or an image use:
Ex.
"Potatoes are cool
Yeeeesh!"
~
~
~
~
Ex.
"
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.
Ex:
But the basic color codes are:
#FF0000 - Red
#6698FF - Blue
#00FF00 - Green
#FF8040 - Orange
#8D38C9 - Purple
#FFFFFF - White
#000000 - Black
#FFFF00 - Yellow
~Margin Allocation
Ex: See?
Basic Alignments:
~Forms and Buttons
- Input Field 1
- Input Field 2
- Input Field 3
- Input Field 4
- Input Field 5
- Input Field 6
~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
~Alright, the first thing you should always add to your webpage at the begining when coding it is the tag
- Code:
<html>
- Code:
</html>
~The second tag that is important to your webpage is to add the tags
- Code:
<title></title>
- Code:
<title>Avatar RPG</title>
~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>
- Code:
<hl></hl>
-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>
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">
~
- Code:
<href="Webpage URL">
-To hyperlink text or an image use:
- Code:
<a href="Webpage URL">Image Code, Text, or Both Here</a>
- Code:
<br>
Ex.
"Potatoes are cool
Yeeeesh!"
~
- Code:
<strong></strong>
- Code:
<b></b>
~
- Code:
<u></u>
~
- Code:
<i></i>
~
- Code:
<ul>
<li>Text #1
<li>Text #2
<li>Text #3
</ul>
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 />
Ex:
- Code:
<hr width="50%" size="3" />
- Code:
<hr width="75%" color="#ff0000" size="4" />
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>
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>
- 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>
- 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>
- 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>
- 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>
- 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>
~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
