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)

*~Tea-Sempai~*(>o
-o)> (#81803)

King of the Jungle
View Forum Posts


Posted on
2016-02-15 05:53:14
#304438850699
Thanks!



Hrt Icon 0 players like this post! Like?

Kaia Ice/SeaWing-all
gemmed up (#69190)

King of the Jungle
View Forum Posts


Posted on
2016-02-15 08:58:55
#304438851280
Shu, I re-sized an image, and it still isn't working. I don't know if I'm typing it right. I tried typing in both height and width, made no difference.
< a href="http://www.lioden.com/lion.php?mid=69190" >< img src="a18tq0" width="630" alt="a18tq0" / >
(has spaces)



Hrt Icon 0 players like this post! Like?


Edited on 15/02/16 @ 16:00:42 by Kaia (IceWing/Seawing) (#69190)

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

Impeccable
View Forum Posts


Posted on
2016-02-15 09:01:28
#304438851285
@Kaia Could you link me to where you tried to resize the image or the code you used that didn't work? You posted a link to your main lion and I'm not sure what to do with that .o.

What is the image you are trying to show? That series of letters/numbers isn't a link, nor an image.



Hrt Icon 0 players like this post! Like?


Edited on 15/02/16 @ 16:02:11 by Shu (#42)

Kaia Ice/SeaWing-all
gemmed up (#69190)

King of the Jungle
View Forum Posts


Posted on
2016-02-15 09:03:14
#304438851291
*smacks self in face* sorry.
I'm trying to get his pic up for my studding thread.
http://www.lioden.com/topic.php?id=304429221287



Hrt Icon 0 players like this post! Like?

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

Impeccable
View Forum Posts


Posted on
2016-02-15 09:04:19
#304438851295
@Kaia Oh, you're linking to a page, not an image. You need to take a screenshot of him, upload it to a site like imgur, then use the image link they provide you in the code.



Hrt Icon 0 players like this post! Like?

Kaia Ice/SeaWing-all
gemmed up (#69190)

King of the Jungle
View Forum Posts


Posted on
2016-02-15 09:05:35
#304438851299
I did, but I think I copied it wrong. Welp, trying it again.



Hrt Icon 0 players like this post! Like?

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

Impeccable
View Forum Posts


Posted on
2016-02-15 09:10:15
#304438851317
@Kaia Make sure you're pulling the image link - there's a small blip about it at the end of the images section of my guide.



Hrt Icon 0 players like this post! Like?

Kaia Ice/SeaWing-all
gemmed up (#69190)

King of the Jungle
View Forum Posts


Posted on
2016-02-15 09:49:57
#304438851485
Well , I don't think I can download imgur, so I'm just going to leave as is. :( thanks anyway!



Hrt Icon 0 players like this post! Like?

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

Impeccable
View Forum Posts


Posted on
2016-02-15 09:53:34
#304438851504
@Kaia Download imgur? ouo;; You just need to right click the image and click copy image location.



Hrt Icon 0 players like this post! Like?

Kaia Ice/SeaWing-all
gemmed up (#69190)

King of the Jungle
View Forum Posts


Posted on
2016-02-15 09:56:20
#304438851520
I already have something downloaded to process screenshot, and I like it, so I don't think I want another one. Thanks!



Hrt Icon 0 players like this post! Like?

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

Impeccable
View Forum Posts


Posted on
2016-02-15 09:58:51
#304438851535
@Kaia I have no idea what you're trying to say xD;; Imgur is an image hosting site, and has nothing to do with downloading? If you're using something like lightscreen, that's perfectly fine too, but you still have to use copy image location on the image to obtain the correct image URL to use in the code.



Hrt Icon 0 players like this post! Like?

Kaia Ice/SeaWing-all
gemmed up (#69190)

King of the Jungle
View Forum Posts


Posted on
2016-02-15 10:00:26
#304438851543
I know its not the right code, I just don't want to use imgur right now.



Hrt Icon 0 players like this post! Like?

Kaia Ice/SeaWing-all
gemmed up (#69190)

King of the Jungle
View Forum Posts


Posted on
2016-02-15 10:10:47
#304438851594
Tried again...Oh...that's how it works. Urgh, coding. Thanks again for your help! It works!



Hrt Icon 0 players like this post! Like?

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

Impeccable
View Forum Posts


Posted on
2016-02-15 10:37:46
#304438851725
No worries, glad you got it to work~ .o.



Hrt Icon 0 players like this post! Like?

Mini Thy Spookys (#80674)

Prince of the Savannah
View Forum Posts


Posted on
2016-03-24 17:10:56
#304438955939
centring doesn't work for me :/



Hrt Icon 0 players like this post! Like?







Join For Free!

Log in
Activate Your Account
Lost Your Password?


day Time wet Season
2nd May, 2024
2:52pm Lioden time
2978 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.01 KB - Queries: 0 - Query Time: 0.00000 - Total Time: 0.00428s