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.
Please help me =.=”
I’ve been searching the web for like, hours, but I can’t find a result. Maybe you can help me.
I want a layout picture WITH s text box on it, but it has to be faded, it you know what I mean o.0 What is the coding for this?
The fade on the picture needs to be added with an editing program.
Please message me for the coding on Howrse – the coding won’t show in a comment.
I think I made a mistake somewhere, could you please help me find it?
text here
text here, used as a place to put credit – Made by Jessica27
sorry, meant to type my name in the bottom, and the text didn’t come up
Sorry, but you’ll have to message me on Howrse; coding doesn’t show on the comments.
You can’t continue…
The presentation that you have written cannot be published for one of the following reasons:
The HTML tags are incorrectly formulated
It contains HTML tags that are not authorized
If this problem occurs, it’s probably because you tried to edit your file with the HTML mode. Check the formatting of your text carefully!
I get that why I try and save my presentation…What am I doing wrong?
How do I make a layout with a picture and scroll boxes on top?
Check the pre-made layouts. ;)
I did what you said and it still didnt work
What do you need help with?
Thank you so much! I have just finished my first ever layout! Hopefully now I’m gonna start making layouts for other people, too.
Thank you so much for your help!
LMgirl1 on Howrse (feel free to message me)
ok, i am a banner and avatar making, i call myself ‘Naddy Graphix’.
but to the point. i am wanting to start making layouts, and i have read this. and i still dont have a clue =/
could you maybe pm me and try taking it step by step with me?
my username is eeyore991
ok i am making little layouts onto my page, but when i try and save the HTML code it wont let me??? help please
ok now it worked :P
but the other problem is it came out with the picture, then just text under it (so it is just like a banners, with writing under it, not a layout) ???
pm me at eeyore991
Mines not working correctly. My code is really short and messed up.
Can you PM me on howrse (I’m jerseygurl16), I’m having trouble with the layout code.
Hey I need help with some simple things with HTML on howrse. PM me please. I am sparky’sgirl97 on howrse thanks!
How do you change the colour of the text? At the minute the text and the background are black :L (I want to keep the black background)
Sorry, I can’t show it in the comments. Please message me on Howrse.
Wow this is SO amazing! Thanks for making this site you are a life saver!!!!!!
I find it easier to insert the image by just making the table then on normal mode inserting it into the box.
This is awesome, I was just able to make my first layout and actually understand what I was doing
Thanks so much for this
Jet
I don’t get it, I tried but completely messed.
I also, everytime I try, it says I in correctly format it, but I deleted all the space and stuff and it still won’t work….
do you know if microsoft word 2003 has html mode on it?
I want to practise layout coding when my dad MAKES me get off of howrse…..
GRRR
I’m not aware of any programs that allow you to practice HTML by typing AND viewing it, but you can still just type up code on Word and post it on Howrse later.
If you search “HTML practice” or go to the www3 school site, you can find practice areas that will let you do this. I think photobucket also used to have one, but I’m not sure they still do.
Alternatively you’d use a website writing software like dreamweaver ($$$) most of the free ones, I’ve found, don’t work very reliably.
I’ve tried making my own codes but whenever I try to save my Howrse presentation, it goes:
“The presentation that you have written cannot be published for one of the following reasons:
The HTML tags are incorrectly formulated
It contains HTML tags that are not authorized
If this problem occurs, it’s probably because you tried to edit your file with the HTML mode. Check the formatting of your text carefully!”
I’ve checked over and over again, edited and reedited, but whenever I save it, the message pops up. What am I doing wrong?
It [the code] works on HTML Practice and HTML Code Tester, but it doesn’t work on Howrse. o_o”
I’m Bekaji on Howrse.
Hm…that’s weird. I suppose there may be a code that is too advanced for Howrse that it won’t show up, such as using CSS. I can take a look at it if you would like. Feel free to PM me.
I can’t figure it out!! :(
Well, i try to put in a picture at the bottom of my very plain presentation.
I type
but i only get a redcross :S
and when i go back into the htmlsite, it has changed the code to
Any idea what i do wrong ? :S
I copied the HTML code of the section “Complete layout with scroll boxes: **Notice the image is in a separate table!!**”, customized it a little bit, just to see if it worked. It shows up, but when I try to save it, it says “You can’t continue…
The presentation that you have written cannot be published for one of the following reasons:
The HTML tags are incorrectly formulated
It contains HTML tags that are not authorized
If this problem occurs, it’s probably because you tried to edit your file with the HTML mode. Check the formatting of your text carefully!” Can I get help with this?
Thanks,
~Golden
Hi Jessica! Can you help?
On my PC, when I right-click on an image, the option to copy its location does’t show up. What is wrong?
Thanks,
NewfoundlandCate on Howrse
Hello there Jessica!
I am fairly new to Howrse but not new to Gaming (I have played WoW among other MMO-RPGs) for over 5 years as an End Game Raiding – Warrior Tank in a top guild), rode show jumpers and dressage horses most my life and…. I graduated in 2005 with an advanced degree in Multi Media/web and game design.
I just wanted to say I think it is ABSOLUTELY AMAZING that you take so much time and investment in aiding sooooo many with this lovely site and all the PMs answered with HTML explained so thoroughly and in easy to understand lay-mans terms.
Taking on this project is just mind blowing to me.
I just want to alert others to the fact that what you are doing to aid many howrse players with HTML and Layouts exhibits an extraordinary amount of kindness and investment in time and energy.
This type of investment clearly demonstrates a giving and sacrificial heart. <3
I do have a question: Will Java script work? work on a Horwrse presentation page? I have seen rotating images where personal icons are placed.
Have an amazing week!!!
I will update you when I have my presentation completely done.
Blessings in all you do.
Peace, Love and Unicorns
MarieElena
*(also my Horse player name on the International Server)
***PS because I graduated many years ago & primarily work with graphics and multi media, my HTML and other web related programming languages are very rusty. It has been 4-5 years since I have even used HTML. With that said, I may need some advice from you. Thanks again.***
Yes, some java script should work; I believe I have seen it done. Thank you for your kind message as well!
How do you make the scroll boxes on the image?
Hey I dont understand where I type the html into… Do I type it into Paint? Or is there some special place I type it into? Thanks in advance for your help and providing these html codes. My username on Howrse is gmango99 if you want to PM me where I type it in
It can be anywhere. There is a coding preview on HowrseHelper under the layouts tab. You can also type in a notepad on your computer or right on Howrse in the HTML mode.
Hey! If you want to put an image on your page, just upload it to Photobucket and they give you the HTML code for your picture, then you can just copy and paste it onto your page.
i’m 0oBekso0 on International and UK howrse :D
Thankyou so much Jessica,
Your website Is awesome and everything about it is so helpful!
-Great Job!
Hi,
I am on the Canadian Version as Alaskan Girl, but I realize you don’t come on much there so I decided to contact you here.
What is the code for putting a scroll box ontop of an image?
Hello,
I’d just like to say thanks for all the help with HTML. I have been looking for a site that could teach it to me without completely confusing me, and I finally found one! Of course, I’m not the best… and I can’t get on every single day to practice, but of course everyone has to start somewhere. My profile might just be one simple picture and a text box and a footer, but I’m proud of it because I did it by myself (after learning the basics from your site.) Good job!
Hey, Jessica. :)
Good job on the site, by the way. but I was just wondering what it is that I need to do to make an image as my background? is it just or something like that? feel free to pm me on howrse… my username is marketta. :)
You can find it in the layouts; I can’t post it in the comments, but I’ll add it to the website soon.
Hi
How do I choose the positioning of the text boxes?
Thanks
der er en eller andet fejl jeg kan ikke gemme er det billedet?
I have created a Layout using Gimp…Do you know how to generate a code for it?
I used to know but Howrse has made changes so the old way doesnt work anymore
Hi, I have been creating layouts using your methods:) Thay are all fantastic, but the second row doesn’t appear below the first, it appears on the right. Do you know why it happens? Or how to fix it?
You’ll have to add a tr code in between the first text box and the second text box.
I cannot get even one to work. Nothing is working…