1. Home
  2. Chatter
  3. HTML Help
  4. HTML Guide (Without spaces or *'s to remove!)

Report
Posted by HTML Guide (Without spaces or *'s to remove!)

Shu .Gaggle™
Clean.G4 [5K] (#42)

Impeccable
View Forum Posts


Posted on
2015-10-21 07:34:44
HTML Guide (Without spaces or *'s to remove!)
STILL HEAVILY UNDER CONSTRUCTION, but the first section's there.

I'll be adding a tables section and all that later x~x Message me if there are other things you want to see!

-----

So I know there are already a ton of guides out there, but throughout the past year, I have yet to see one written where the code can be conveniently copy pasted without the need to remove extra spaces or other characters from the code.

So here's mine!

It's formatted a bit more like a tutorial to help you learn about how to manipulate it, and also included a few tips and fixes for mistakes that I've picked up over the years. If you're just here browsing for the code itself, just scroll on and ignore the text blocks. Codes have been quoted out for your convenience.

Now I'm not a master at HTML, so there's no way I can list everything you could possibly need from the get go. That being said, if there's anything you'd like me to add, drop me a message and I'll dig up the necessary code to add it here. c:


Basics

Here are your basic text codes:

Italics:
<i>Texthere</i>

Bold:
<b>Texthere</b>

Strike:
<s>Texthere</s>

Underline:
<u>Texthere</u>

Link:
<a href="Linkhere">Texthere</a>

Font color:
<font color="#HEXCODE">Texthere</font>

Text alignment(Center/Left/Right):
<p style="text-align:center;">Texthere</p>

Headers(h1 through h3 all work):

<h1>Texthere</h1>

Change font:

<p style="font-family:Fontnamehere;">Texthere</p>

Highlight:

<p style="background-color:#HEXCODE;">Texthere</p>

Font size:
<font size="Number">Texthere</font>

Note: You don't actually need to put in a #HEXCODE for it to work! Some colors such as black, white, or red, will be recognized and suffice without the need to dig up a hex #.
Images

Images:

<img src="ImageLinkHere"/>

Resizing images:

<img src="ImageLinkHere" width="#px" height="#px"/>
Making images links:

<a href="Linkhere"><img src="ImageLinkHere"/></a>
Note: You don't actually need to put in the last / in there. LD will automatically correct it for you if you forget it. I just like to have as little possibility as...possible for the machine to screw it up.

You can put either width, height, or both! They don't need to be in the order I have them in above. Simply replace the # sign with some number of pixels to resize that dimension to your desired size. (Standard lioden post width on PC appears to be 630 or so.)

**It may be tempting to resize both height and width, but resizing one is usually sufficient! When you resize with either width or height, the other dimension will be shrunk down proportionately for the image. That means no image stretching! Go ahead and play around with it, but I personally only ever use either width or height when resizing my images. Both is usually unnecessary and will, most often, end up stretching your image.

When an image doesn't show up, and just shows up as a series of letters and numbers, what's most likely the mistake is your link. What you want to paste where it says ImageLinkHere is the link to your image - that is, on PC, the link you get by right clicking the image and clicking Copy Image Location. On mobile, you want to click and hold until the option to Copy appears. The link you obtain should end in something along the lines of: .jpg, .jpeg, .png, .gif, etc.

More than one at a time

With all of the above codes, 'burying' is possible! That means if you want something bolded and italicized, you can simply write it like this:

<b><i>Texthere</i><b>
Similarly, to have an image link to a page:

<a href="Linkhere"><img src="ImageLinkHere"/></a>
Now what if you wanted to do two slightly longer codes at a time? Say, change the size and color at the same time? That's where style comes in handy.

Using "style"

You may have noticed that the text alignment text in the basics was a bit different from the rest. That's because it uses style. Style can actually be used for a variety of things, and are especially helpful in tables where your code is already overflowing and you really, really don't need another less than or greater than sign in there. Here's something you can do with style:

<p style="text-align:center;font-size:12px;"></p>
This text will align your text in the center as well as shrink the text size to 12px.

Note: I've never looked into why, or how to fix it, but font size="12px" gives a different size than p style="font-size:12px;". I only know that it seems p style gives you a lot more freedom to adjust the size, so I prefer using p style to adjust size much more than font size.

Style is the easiest way to bury a bunch of stuff together. To use more than one at once, simply copy this code:

<p style="CODEHERE">Writing here</p>

And put the code you want where it says CODEHERE. To add more than one, just add a ; in between each set of codes.

Note: Style isn't restricted to p. It can also be used within tables, divs, and other things in HTML. However, for the sake of explaining how to use it, I'll stick with p here. To use it within anything else, just add the style tag inside whatever it is you're working with. i.e. <td style="code">

Here are all of the codes to use with style:
Font:
font-family:fontfamily
Color:
color:#HEXCODE
Text alignment(left/center/right):
text-align:center
Height:
height:#px
Width:
width:#px
Scrollable Box:
Who knows - trying to find out
Highlighting/Background Color:
background-color:#HEXCODE
More:
color:#HEXCODE
Tables: Basics

First for a table, you need the base of the table.

<table></table>

Now that we've got the table, gotta add stuff in! The following things need to be added in order. For each row in the table, you've got to add one of these guys:

<tr></tr>

For each column inside the table, you'll need one of these:

<td></td>

So for the simplest table, this will be your code:

<table><tr><td>Writing here</td></tr></table>

If you want a table with, say, three columns and two rows, just repeat the procedure by burying accordingly. Remember, columns are buried within rows:

<table><tr><td>Row 1 Column 1</td><td>Row 1 Column 2</td><td>Row 1 Column 3</td></tr><tr><td>Row 2 Column 1</td><td>Row 2 Column 2</td><td>Row 2 Column 3</td></tr></table>

As I mentioned above, style can also be used for tables. When coding tables, you have the freedom of coding anything from each individual cell to the entire table at once, depending on where you put your style. If you put it in a tr tag, it will apply to the whole row. Similarly, if you put it in the table tag, it'll be applied to the whole table. However, sometimes it's best to code individual cells of a table rather than the entire row, in case the row elements get overwritten. Code in td will take priority over code in tr, which takes priority over code in table.

Now that we've got the basics for tables down, here are more codes you can use for styling your tables(All the codes above can still be used):

Thinking of stuff:
Stufff
Thinking of stuff:
Stufff
Tables: A bit more complex
Under Construction

So you want your post to be able to scroll? There's actually a way to do this, even though you can't do it in the same way you do it in CSS. And the way to do it kind of...breaks the table, so note that you can't add a border around the entire table if you make a scrolling post.

Scrolling first post:
<table style="height:#px;"><tr><td><p style="height:#px;">TEXT</p></td></tr><table>
Requirements/limits of scrolling: You can't add borders with this kind of table, unless you do them manually as images. Likewise, you can't add anything like background color either because of the way the table is broken by the scrolling code. The two heights in the above code must be the same, otherwise you're gonna end up with some funky stuff. Any rows you add must be above the one with the 'p' height. Lastly, you can only do it on the first post of a thread, as doing it on another post will break the post and start going through any editing notes you have on the post.



Hrt Icon 12 players like this post! Like?

Edited on 16/10/16 @ 11:37:31 by Shu .:#Gaggle:Lights On:. (#42)

reals (#418972)

Heavenly
View Forum Posts


Posted on
2023-08-08 12:43:08
#304445912425
to get an image in a post, find an image and hold down, then press copy image address. then put it in this code: <*img src="image address here" width=200*> and remove the asterisks (*'s)



Hrt Icon 0 players like this post! Like?

Agate (#243010)


View Forum Posts


Posted on
2023-08-08 13:07:40
#304445912455
What if it's an image from my gallery? Cause holding down on it doesn't seem to be working..?



Hrt Icon 0 players like this post! Like?

reals (#418972)

Heavenly
View Forum Posts


Posted on
2023-08-08 13:10:30
#304445912460
find a website called 'postimage' and put your image through there, and copy the direct link



Hrt Icon 0 players like this post! Like?

Agate (#243010)


View Forum Posts


Posted on
2023-08-08 13:11:18
#304445912461
Okay, thank you



Hrt Icon 0 players like this post! Like?

reals (#418972)

Heavenly
View Forum Posts


Posted on
2023-08-08 13:11:48
#304445912463
mhm



Hrt Icon 0 players like this post! Like?

Lucas | G1 Nefer Pie
M-Rlc (#229613)

Nice Guy
View Forum Posts


Posted on
2023-09-23 07:50:12
#304445984660
Table doesn't seem to work for me

πŸ’˜πŸ’˜πŸΉπŸΉπŸ”₯πŸ”₯
Heat 1Heat 1Heat 1


Which makes me thing its this one I found on another guide (but didn't function to my liking. Maybe input a wrong number on my part?)

Code:
< table border="NUMBER HERE" cellpadding="NUMBER HERE" cellspacing="NUMBER HERE" width="NUMBER HERE" >< tr >
< td >Column 1< /td >
< td >Column 2< /td >
< /tr >< /table >

Column 1 Column 2


My Tests
A:

πŸ’˜πŸ’˜πŸΉπŸΉ
Heat 1


B:


πŸ’˜πŸ’˜πŸΉπŸΉ
Heat 1


C:

πŸ’˜ 🏹


Heat 1 Heat 1

It doesn't line up right amd doesnt create really any "rows". Border:1 cellpadding: 5 cellspacing: 5 width:10

I'm just trying to get a chart to keep my lion information on how many times they pass during each heat



Hrt Icon 0 players like this post! Like?


Edited on 23/09/23 @ 07:51:35 by Lucas G2 Basalt Pie (#229613)

Lucas | G1 Nefer Pie
M-Rlc (#229613)

Nice Guy
View Forum Posts


Posted on
2023-09-23 07:56:40
#304445984663


Column 1 Column 2


Okay had to ask someone what each of the things meant

Test:












πŸ’˜πŸ’˜ 🏹🏹
Heat1 Heat1
Heat2 Heat2
Heat3 Heat3
Heat4 Heat4
Heat5 Heat5
Heat6 Heat6
Heat7 Heat7
Heat8 Heat8







πŸ’˜πŸ’˜ 🏹🏹 πŸ”₯πŸ”₯🌹🌹
Heat 1Heat 1Heat 1Heat 1
Heat 2Heat 2Heat 2Heat 2
Heat 3Heat 3Heat 3Heat 3
Heat 4Heat 4Heat 4Heat 4
Heat 5Heat 5Heat 5Heat 5
Heat 6Heat 6Heat 6Heat 6
Heat 7Heat 7Heat 7Heat 7
Heat 8Heat 8Heat 8Heat 8



border=1: sets the border thickness of the table to 1 pixel.
cellpadding=10: sets the padding inside each cell to 10 pixels.
cellspacing=5: sets the spacing between cells to 5 pixels.
width=300: sets the width (of the table?) to 300 pixels.



Hrt Icon 0 players like this post! Like?


Edited on 24/09/23 @ 03:29:53 by Lucas G2 Basalt Pie (#229613)

#1 Mel fan | -4r1-.
he-him. (#378108)


View Forum Posts


Posted on
2023-11-28 16:34:39
#304446083213



Hrt Icon 0 players like this post! Like?


Edited on 28/11/23 @ 16:35:25 by R A T (#378108)

|β™‘| Ari |β™‘| [G4
Ferus Demi] (#294135)


View Forum Posts


Posted on
2024-01-20 22:09:58
#304446231127
Hi! Tysm for the guide! Im trying to link image and change the width at the same time! I put the link image Html in front of the change width HTML but its not really working



Hrt Icon 0 players like this post! Like?

βͺ˜ SiRah (#159527)

Divine
View Forum Posts


Posted on
2024-01-21 00:42:13
#304446231333
(I'm subscribed here for easy reference so just going to try assisting as I believe the OP is not rolling at the moment. <3)

@ *``~|β™‘| Ari|β™‘|~``* (#294135) -

You'll need to nest the image dimensions inside the link image html, like this:
<*a href="Linkhere"><*img src="ImageLinkHere" width="#px" height="#px"/><*/*a>

*without the *'s, sorry I don't see how to paste html directly.

All should work fine when used together, the ending <*/*> just needs to be in the right spot.



Hrt Icon 0 players like this post! Like?

❀königs_leftn
ut❀ (#396622)

Pervert
View Forum Posts


Posted on
2024-01-29 04:21:07
#304446246205

Just messing around and testing for future reference.

Screenshot-2024-01-29-6-10-24-AM


oh em gee



Hrt Icon 0 players like this post! Like?


Edited on 29/01/24 @ 04:24:48 by ChososLeftToe | Ashe tri ros (#396622)

♑꧁ π‘‡β„Žπ‘’
π·π‘’π‘Žπ‘™π‘’
π‘Ÿ ꧂♑ (#417178)


View Forum Posts


Posted on
2024-04-06 21:57:59
#304446374770

YIPPEEE IT WORKS -



Hrt Icon 0 players like this post! Like?


Edited on 06/04/24 @ 21:58:26 by ♑꧁ π‘‡β„Žπ‘’ π·π‘’π‘Žπ‘™π‘’π‘Ÿ ꧂♑ (#417178)







Join For Free!

Log in
Activate Your Account
Lost Your Password?


day Time wet Season
2nd May, 2024
6:16pm Lioden time
2768 members online
Lioden Ltd © 2012-2024. All rights reserved.
Company number 09846917 registered in England & Wales. VAT number 234362915.
Lioden Ltd © 2012-2024. All rights reserved.
Company number 09846917 registered in England & Wales. VAT number 234362915.
Terms of Service - Code of Conduct - Privacy Policy - Contact Us - Modbox - FAQ - Conservation Efforts
Memory Used: 646.51 KB - Queries: 0 - Query Time: 0.00000 - Total Time: 0.00541s