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.
|
You have liked this post!
 16 players like this post! Like?
Edited on 16/10/16 @ 11:37:31 by Shu .:#Gaggle:Lights On:. (#42) |
16 players like this post! Like? 
Report
