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 43 players like this post! Like?

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

Sacramora (#140353)

Magnificent
View Forum Posts


Posted on
2019-03-17 17:53:50
Ah. I'm doing this on phone, so could you tell me if this is correct?




Hrt Icon 0 players like this post! Like?

Dm me the word Melon (#162228)

Astral
View Forum Posts


Posted on
2019-03-25 19:48:06
How do you use the 'Toggle Spoiler'?



Hrt Icon 0 players like this post! Like?

Nilla ♡ Clean Ice
Pie (#157779)

King of the Jungle
View Forum Posts


Posted on
2019-03-30 08:11:58
[spoiler*]TEXT[*/spoiler}
Without the *!



Hrt Icon 0 players like this post! Like?

~PRIMAL~ Queen
Arison (#172164)

Usual
View Forum Posts


Posted on
2019-03-30 18:56:55
how would i post an image into a scrollbox?



Hrt Icon 0 players like this post! Like?

soot (#164880)

Prince of Terror
View Forum Posts


Posted on
2019-05-12 11:06:00
testing

sC84UB8.jpg



Hrt Icon 0 players like this post! Like?

soot (#164880)

Prince of Terror
View Forum Posts


Posted on
2019-05-12 11:09:48
testing 2

I932H7z.png



Hrt Icon 0 players like this post! Like?

Xygei (#171626)

Divine
View Forum Posts


Posted on
2019-08-06 15:23:05
does anyone know how to have animated image ?



Hrt Icon 0 players like this post! Like?

surrelian [main | BO
Haze] (#103352)


View Forum Posts


Posted on
2019-08-06 15:28:19
@Mazy
If you use Imgur you can upload anything animated and then copy and paste the Orignal Link(Not the Direct Link) and then put it into <*img src="GIF LINK">

Hope that helps :))



Hrt Icon 0 players like this post! Like?

Xygei (#171626)

Divine
View Forum Posts


Posted on
2019-08-06 15:33:10
ooo i see i used Postimage.org. thank you



Hrt Icon 0 players like this post! Like?

surrelian [main | BO
Haze] (#103352)


View Forum Posts


Posted on
2019-08-06 15:34:56
np!



Hrt Icon 0 players like this post! Like?

Nem (#179450)

King of the Jungle
View Forum Posts


Posted on
2019-08-27 13:11:56
What am I doing wrong? I want to post a picture of my lion and link it to my lion's page... I'm using this....

< a href="https://www.lioden.com/lion.php?mid=179450" >< img src="https://imgur.com/T4jguVE" >




Hrt Icon 0 players like this post! Like?


Edited on 27/08/19 @ 13:21:47 by Nem (#179450)

gaz (#122919)

Frivolous
View Forum Posts


Posted on
2019-08-28 05:01:19
@nem, you have to delete the spaces in between the code



Hrt Icon 0 players like this post! Like?

Myr (#188)


View Forum Posts


Posted on
2019-08-28 12:32:59
You haven't closed the final tag, and the image url you're using isn't a direct link (which will end in .jpg or .png) - it should look like this, with changes in red:

<a href="https://www.lioden.com/lion.php?mid=179450"><img src="https://i.imgur.com/T4jguVE.png"></a>

And if you want to use it on the forums and you want the image to show correctly on any size screen (including smaller widths like for players viewing on tablets/phones/etc), you can also add this which will automatically make the size fit the width of the screen without overlapping:

<a href="https://www.lioden.com/lion.php?mid=179450"><img src="https://i.imgur.com/T4jguVE.png" class="fitWidth"></a>



Hrt Icon 0 players like this post! Like?

🌸 Dawnstar 🌸 (#106814)

Heartbreaker
View Forum Posts


Posted on
2019-10-25 00:15:42
Could anyone explain aligning your text one? I can't seem to do it correctly :/



Hrt Icon 0 players like this post! Like?

Zafara (#94023)

Deathlord of the Jungle
View Forum Posts


Posted on
2019-10-26 00:54:25
Well first off there is a typo in their code. There's a simple code for centering text alone. Just remove the spaces

< p style="text-align:center" >TEXT HERE< /p >

Example




Hrt Icon 0 players like this post! Like?


Edited on 26/10/19 @ 00:54:48 by Zafara (#94023)







Memory Used: 634.20 KB - Queries: 2 - Query Time: 0.00090 - Total Time: 0.00798s