Jul 10 2010
Quick Start HTML
If you are having trouble with this lesson, try reading the more detailed lesson. To edit the coding, just change what’s in bold to what you need.
Basically, you just need this coding:
<table> -the begging code of a layout
<td>- a coding for a text –will not scroll–
</td> – the end code for a text box, showing that it closed.
</table> – end code for a table, showing the layout is complete.
Using this <tr> code between two <td> codes will align the text boxes next to them. Also, using a colspan=”2” code will stretch out the text box and make it longer to fill the text. If you have three text boxes in a row, you should make it colspan=”3″. If it’s two, make the code colspan=”2″. Place the colspan code after td but before the carrot (>) Ex: <td colspan=”2″>
To add an image:
Add this code after the table code:
<img src=”image link“> (To get the image link, right click on the image and select “Copy image location”)
Want to change the size?
<img style=”width: 500px; height: 350px;” src=”image link“>
As you can see, you just need to add the style snip.
Adding borders, background colors, and fonts to the layout:
Anything that is added in the <table> code will be added to the whole layout (unless if you use div text boxes [scrolling text boxes])
<table border=”1” bgcolor”#000000” font-face=”Arial“>
Need color codes & fonts? Click here.
Complete layout of how it will look:
<table border=”1” font-face=”arial” bgcolor=”#000000“>
<img style=”width: 500px; height: 350px;” src=”image link“>
<td>text here</td>
<tr>
<td>text here</td>
<tr>
<td colspan=”2“>text here, used as a place to put credit – Made by Jessica27</td>
</table>
Adding a scroll box:
Instead of putting a <td> code and text, just add a <div> code:
<td><div style=”overflow: auto; height: 250px; width: 250px;”>text here</div></td>
The overflow part is what makes it scroll. Adding the width and height makes the size of the text box. Once there is text to fill the text box, it will stop expanding and will start scrolling. Notice that after a word is typed, a colon is added. After the number is added, px is put after it as well as a semi-colon. (px means pixels) If you want the scroll boxes to appear next to each other, you need the td code before and after the div code.
Changing the background and text color of a scroll box:
Enter these codes in the style=”x” part, doesn’t matter where:
background-color: #000000;
color: white;
The first is for the background color (needs a color code) and the second code is for changing the text code – no color code needed, just type any solid color (ex: orange, pink, red, etc.)
Complete layout with scroll boxes: **Notice the image is in a separate table!!**
<table border=”1” font-face=”arial” bgcolor=”#000000“>
<img style=”width: 500px; height: 350px;” src=”image link“>
</table>
<table border=”1” font-face=”arial” bgcolor=”#000000“>
<tbody>
<td>
<div style=”overflow: auto; background-color: #000000; color: white; height: 250px; width: 250px;”>text here</div>
</td>
<tr>
<td>
<div style=”overflow: auto; background-color: #000000; color: white; height: 250px; width: 250px;”>text here</div>
</td>
<tr>
<td style=”color: white;” colspan=”2“>text here, used as a place to put credit – Made by Jessica27</td>
</table>
The tbody code that is above is needed to align text boxes next to each other. Just add it right under a table code – no need to edit it. Also, you can see that the style=”" code can be added to anything – images, tables, text boxes, and scrolling text boxes. A separate table is needed so it doesn’t change the alignment of the text boxes.
**If you add these layouts to your page, remove the extra spacing between each row before saving!
Thanks! :)
Thanks this is really helping! Iam on my way to being able to do it on my own!
can you fix this? i messed up somewheres?
http://www.google.ca/imgres?
<img style="widith: 500px; height: 350px;" src="http://www.google.ca/imgres?imgurl=http://farm4.static.flickr.com/3598/3414174239_97cf8bd38c.jpg&imgrefurl=http://monarchbfly.com/2009/04/&usg=__siu6uSH3yLpoJFp5fz1KPoyUrWo=&h=333&w=500&sz=126&hl=en&start=28&sig2=mo8NHcllQU7Q0MePYOic0g&itbs=1&tbnid=88YrJfPXGnAwRM:&tbnh=87&tbnw=130&prev=/images%3Fq%3Dchincoteague%2Bponies%26start%3D20%26hl%3Den%26sa%3DN%26gbv%3D2%26ndsp%3D20%26tbs%3Disch:1&ei=MLBDTJWGPJH84Aau9tSvDwMy real name is Jackie. I haven’t played howrse in a long time. My old account was delete but now i know more. The only real reason i’m on here is because i need somthing to do when i’m inside because i dont wanna do anything. I’m depressed from a really bad break up. Don’t tell me there are other guys or anything because i hate that. I like to go bridge jumping during the summer. this is my first layout ever made :)>I breed chincoteague ponies and i even have a unicorn one. I’m going start to BLUP them. You can ask me anything and ill accept all friend requests. Please if you read this will you check my ponies blups and pm them to me? k thanks. -Help from Jessica 27 :) thanks.
Just a simple mistake – You didn’t put the correct image URL, causing some coding problems. Feel free to send me the link to either the picture itself or the website URL that you found it on. Then I’ll give you the correct coding. ;)
Jessica, please could you give me a little bit more help on the scroll box, because whenever i do it, it doesn’t work
http://www.google.ca/imgres?imgurl=http://farm4.static.flickr.com/3598/3414174239_97cf8bd38c.jpg&imgrefurl=http://monarchbfly.com/2009/04/&usg=__siu6uSH3yLpoJFp5fz1KPoyUrWo=&h=333&w=500&sz=126&hl=en&start=28&sig2=zlmdYbvxUcro_Aw9Vs8rsw&itbs=1&tbnid=88YrJfPXGnAwRM:&tbnh=87&tbnw=130&prev=/images%3Fq%3Dchincoteague%2Bponies%26start%3D20%26hl%3Den%26sa%3DN%26rlz%3D1T4ADSA_enCA378CA378%26ndsp%3D20%26tbs%3Disch:1%26prmd%3Dimv&ei=4shFTPmxK9OLnAfp7pnaAw
this is the piccture. i got it off of google.
Sure thing! Please PM me on horse :)
Aww! So cute! Please PM me on Howrse so I can send the code. It won’t show here.
I really need help on scroll box. When i copy and paste, you can see the code, not a scroll box!
Are you posting it in the HTML mode?
the scroll boxes don’t seem to work on my page on horse!? I’m writing it in html mode, but when I go to regular mode it doesn’t show up and I get an error message. please help! everything else works!
Please send me the coding on Howrse. It should be fine…
I am not good with codes (thats a lie) I dont get it? Can I send you the picture and you make the layout? If you would like pay… aging points would be exeptable.. my username is allycat_123
Hello my html code for my layout isnt working… can you help me?! heres the code:
text here
text here
For Personal use ONLY – Made by Koolkase159
Sorry, coding doesn’t come up in comments. Try PMing me the code.