Posted by HTML GUIDE :: Basics, Images and Tables

{Leaving} (#43698)


View Forum Posts


Posted on
2015-06-16 07:04:48



Hello! This is a HTML Guide I made from other HTML Guides, I couldn't find one with all the info on so I created my own. I do no know a lot about HTML but I know the basics.

Feel free to ask for help on this thread and me or someone else will help

Before we begin, this is really important or the HTML will not work, remove all the spaces! If you don't do this the code will not work



qNfBj4T.png



○○○ Making your text Bold ○○○

< b > TEXT HERE < /b >

line2.png

○○○ Making your text italics ○○○

< i >TEXT HERE< /i >

line2.png

○○○ Making your text underlined ○○○

< u >TEXT HERE< /u >

line2.png

○○○ Making your text striked ○○○

< s >TEXT HERE< /s >

line2.png

○○○ Making your text highlighted ○○○

< span style="background-color:#HEXCODE" > TEXT HERE < /span >

line2.png

○○○ Making your text colored ○○○

< font color=#HEXCODE >TEXT HERE< /font >

line2.png

○○○ Making your text a link ○○○

< a href="URL HERE" >TEXT HERE< /a >

line2.png

○○○ Making your text a different size ○○○

< font size=1-7 >TEXT HERE< /font >

line2.png

○○○ Making a header ○○○

Biggest: < h1 >TEXT HERE< /h1 >
Medium: < h2 >TEXT HERE< /h2 >
Smallest: < h3 >TEXT HERE< /h3 >

line2.png

○○○ Making a block-quote ○○○

< blockquote >TEXT HERE< /blockquote >

line2.png

○○○ Making your text a font ○○○

< p style="font-family:FONT HERE;" >TEXT HERE< /p >

line2.png

○○○ Aligning your text ○○○

< p style="text-align:cener/right/left;" >TEXT HERE< /p >

line2.png

○○○ Color, Align and Font your text! ○○○

< p style="font-family:FONT HERE;color:#HEXCODE;text-align:center;">TEXT HERE< /p>



STVHa0P.png



○○○ Normal Image ○○○

< img src="URL HERE" >

icon-time-night.png


line2.png

○○○ Changing the image size ○○○

< img src="URL HERE" height=HEIGHT NUMBER width=WIDTH NUMBER >

icon-time-night.png


line2.png

○○○ Making the image clickable ○○○

< a href="URL LINK HERE" > < img src="IMAGE URL HERE" > < /a >

icon-time-night.png

line2.png

○○○ Making the image clickable + re-size ○○○

< a href="LINK URL" > < img src="IMAGE URL" height=NUMBER width=NUMBER > < /a >

line2.png

○○○ Making an image 'float' ○○○

< img src="URL HERE" style="float:ALIGN;width:HEREpx;height:HEREpx;" >

line2.png

○○○ Making space(s) between the images/text/etc ○○○

< br >
will make a space

< p >
will make a double space



lScjWm3.png



Tables have changed on LD from the 08-11, here is the news post about it, right near the bottom is all you need to know. Scroll boxes no longer work and have to be implemented in CSS.

line2.png

○○○ This thread table ○○○

< table style="background:#HEXCODE;width:630px;height:70px;border:1px solid;">< tr >< td >TEXT HERE< /td >< /tr >< /table >

Can also be used for dens (example with mine)

line2.png

○○○ Stuff for tables ○○○

Font - ;font-family:HERE;
Color - ;color:#HEXCODE;
Background color - ;background-color:#HEXCODE;
Width & Depth - ;width:HEREpx; | ;height:#HEREpx;
Alignment - ;text-align:center/right/left;





○ Google is amazing, use it! Google stuff and teach yourself HTML
This is my favorite website to find a color
This is my favorite website to find color groups
This thread is amazing for HTML Tables
This is an amazing website, it's basically everything HTML if you want to know more
○ If anyone has anymore HTML I can add let me know through PM or post on here, as well as help others that may post for help if you can
○ Remember: REMOVE the spaces!

Thank you if you use and bookmark






Hrt Icon 28 players like this post! Like?

Edited on 27/09/17 @ 09:20:35 by 🌅 Nocturnal (Sunset) (#43698)

Sketch (Side) (#243813)


View Forum Posts


Posted on
2023-11-26 14:02:25
You've got to use the direct image link instead of the imgur gallery link.

✔️ Imgur direct image link - https://i.imgur.com/HHXGYlH.jpeg

❌ Imgur gallery link - https://imgur.com/gallery/mdlXO1N

So the imgur direct link is


Remove the asterisks of the code below, the style="width:100%;" is to resize the image.
<*img src="https://i.imgur.com/HHXGYlH.jpeg" style="width:100%;"*>



Hrt Icon 0 players like this post! Like?

Sorin {G1 Fringe 2k
olive rlc} (#359327)

Sinister
View Forum Posts


Posted on
2023-11-26 14:05:12
odd that was the only link imgur was showing me, tysm though!



Hrt Icon 0 players like this post! Like?

Sketch (Side) (#243813)


View Forum Posts


Posted on
2023-11-26 14:08:17
Direct image URL links usually end with .jpg, .jpeg, .png or .gif

That is a good tell in general.



Hrt Icon 2 players like this post! Like?

Miso_Mika (#304873)

Maneater
View Forum Posts


Posted on
2023-11-27 11:08:57
Hi! I have a question, how would I center images?



Hrt Icon 0 players like this post! Like?

Ain (#275356)

Prince of the Savannah
View Forum Posts


Posted on
2023-11-27 14:25:12

like this?????




Hrt Icon 0 players like this post! Like?

Miso_Mika (#304873)

Maneater
View Forum Posts


Posted on
2023-11-27 15:13:11
Yes!



Hrt Icon 0 players like this post! Like?

Wyn| Elysian NRLC (#344111)

Heavenly
View Forum Posts


Posted on
2023-11-27 15:21:43
You just put the image code in the align text code. So where you would usually write your text in the align-code, you put the image code, like this:

<*p style="text-align:center;" ><*img src="https://i.imgur.com/HHXGYlH.jpeg"width=200*><*/p>

Shows like this (used the image from earlier comment, since that was just easiest):




Hrt Icon 0 players like this post! Like?


Edited on 27/11/23 @ 15:36:27 by Wyn|G3 9xBO Anubis (#344111)

Miso_Mika (#304873)

Maneater
View Forum Posts


Posted on
2023-11-27 15:35:10
Thank you!



Hrt Icon 1 player likes this post! Like?

clownie (#225187)

Angelic
View Forum Posts


Posted on
2023-12-10 16:07:07
does anyone know how to add scroll boxes side by side? I need two besides each other, but I can't figure out how to do it



Hrt Icon 0 players like this post! Like?

Heidan (#228506)

Bone Collector
View Forum Posts


Posted on
2024-02-25 08:55:53
Love this Guide I use it ALOT



Hrt Icon 0 players like this post! Like?

Korrine [G2 Patches
(Torn)] (#238980)

Protector
View Forum Posts


Posted on
2024-02-25 16:03:02
This is an amazing thread; thank you so much for all this info; it is so helpful!

What size would a thumbnail be for posting a few photos in one post (ex: hoard items)?



Hrt Icon 0 players like this post! Like?

CookieDaddy (#215480)

Total Chad
View Forum Posts


Posted on
2024-03-07 20:24:42
Test please ignore

i give up, clickable images suck



Hrt Icon 0 players like this post! Like?


Edited on 07/03/24 @ 20:29:08 by CookieDaddy (#215480)

T0mbst0ne
{Zēlus/Zeluce} (#276475)


View Forum Posts


Posted on
2024-03-08 13:52:22
How do you get the image url for a lioness image?



Hrt Icon 0 players like this post! Like?

T0mbst0ne
{Zēlus/Zeluce} (#276475)


View Forum Posts


Posted on
2024-03-16 12:44:24
How do you spoiler?



Hrt Icon 0 players like this post! Like?

Luzzil★彡 ‎
┆𝘎𝟣|𝘉𝘖
& 𝘙𝘖┆ (#430000)


View Forum Posts


Posted on
2024-03-16 12:54:07
[*Spoiler] TEXT HERE [*/Spoiler]

Delete the *'s



Hrt Icon 0 players like this post! Like?


Edited on 16/03/24 @ 12:54:29 by Luzzil ◡̈ ╡G1|Bo & Ros╞ (#430000)







Memory Used: 630.12 KB - Queries: 0 - Query Time: 0.00000 - Total Time: 0.00887s