PDA

View Full Version : Step-by-Step HTML Guide 2


HonorP00ner
10-27-2007, 12:01 AM
If you have problems seeing this guide press Control and + to increase font size. Hold Control and press + repeatedly will further increase size. Control and - decreases size.

Goto your Notepad editor Start Menu + Accessories + Notepad
Let's start making your guide! Copy the code below
<html>
</head>
<body>
</body>
</html>

Guides are full of text and you can change how that text looks using the <font></font> tags. Copy the code below and place it in between the <body></body> tags
<font face ="" size="" color=""></font>
Here is an example of proper placement
<html>
</head>
<body>
<font face="" size="" color=""><font>
</body>
</html>

Now apply the font to your text by putting your text between the <font></font> tags like the example below
<font face="" size="" color="">Hello this is text I may put!</font>
What you can change
size changes size; color changes color; face changes font
Example <font face="arial" size="3" color="skyblue">Hai!</font>
Example 2 <font face="impact" size="5" color="#d9a0c0">Hello</font>
Here are other tags you can use. Place text in between these tags to change their display.
<b></b> Text; <i></i> Text; <u></u> Text
Example<b><i><u>Bai!</b><i></u>
Example 2 <font face="" size="" color=""><b>HAI!</b></font>

You should know.... Pressing enter doesn't create a new line, you must use <br> to do that. Pressing space before a line doesn't move the text you must use &nbsp;. You do not need &nbsp; when typing in between text
Got screenshots? Use the <img></img> tags to add your images. Copy the code below and place them wherever necessary
<img scr="" alt="" width="" height=""></img>

src is where the image is, alt is alternate text [optional]; width changes width [optional]; height changes height [optional]
Example<img src="img152.imageshack.us\example.jpg" alt="MY PICTURE IS MISSING >.<" width="50%" height="400"></img>
If you want to put a horizontal line use the code below
<hr width="" height="" color=""></hr>
width changes width; height changes height; color changes color
Example<hr width="100%" height="4" color="red"></hr>
Wanna make a bulleted list? This is a bit complicating.
<ul>indents; </ul>Ends indent; <li>Creates bullet
<ul><li>Text
<ul><li>Text
<li>Text
</ul></ul>
Creates this
Text
Text
Text
Got a link? No problem copy the code below
<a href="" target=""></a>
href is where the link is going to; target is where the link will open, typing _blank will open the page in a new tab\window [optional]
Example<a href="http:\\www.pawngame.com" target="_blank"></a>
Puting text in between the <a></a> tags will also work
Example 2 <a href="http:\\www.pawngame.com"><font face="arial" size=2">Visit Pawn Game!</font></a>
Wanna make a table with rows and columns? Copy the code below
<table width="" height="" border="">
<tr height="">
<td bgcolor="" bgimg="" width=""></tr></td></table>
table creates a table; border sets border width; bgcolor sets a background color while bgimg sets a background image
tr creates a new row; td creates a new column;
Example<table>
<tr>
<td bgimg="img152.imageshack.us\example.jpg"><font>Text</font></td>
<td>Stuff</td>
</tr></table>

gunslinger64
10-27-2007, 12:07 AM
honor this is a good guide, its very useful to noobs lol
this deserves a stickeh!!....when the guide is done lol :D

JediLucas5
10-27-2007, 01:05 AM
yay! you finally mixed our guides to make one HUGE one, or did you?


if not, remember you have all rights to go ahead and just copy and paste some of mine, just make sure you add me into credits

HonorP00ner
10-27-2007, 01:21 AM
yay! you finally mixed our guides to make one HUGE one, or did you?


if not, remember you have all rights to go ahead and just copy and paste some of mine, just make sure you add me into credits

Actually I started this from scratch with no cut and paste.

HonorP00ner
10-27-2007, 08:50 PM
Got bumped down by Guide to Dying :(