Before you can do anything with images, you'll need it to actually exist in the text box first. You can upload an image to your post by copying its image address. Select the Picture button and paste your link!

However, if you're trying to insert a wolf image from this site, we'll need to add an extra few steps. Start by downloading the wolf's image (Save image, found on the wolf's page). Upload this image somewhere (Discord, imgur, etc.) then do the copying and pasting.

Tisq's Tips: Make sure you copied the image address and not the plain site address! If you use a site address, it will load nothing. Also, if you're on mobile, it might be more worth your time to save the image and upload to an image-sharing site that generates the link for you as sometimes it's a little bit of a hassle to do it from the original.
If you're putting an image in your signature, the maximum size is 800x200.

So, you've got an image down. But do you wanna move it somewhere else? Let's talk about how to align to the center. We won't be going over how to left-align as that is the default, and right-aligning is disabled so showing how to do it is kinda pointless.

We'll be using the Code View button, pictured above, to do this. Go ahead and click it - when you do this, you'll see a sprawl of HTML code. We're looking for your image, which will be written similar to this…

…with the link you used for pasting the image between the quotes (""). Now we can start writing.

To center an image, you can put a center tag around the image line:

Tisq's Tips: I'll be including the tags and/or attributes in these little blurbs so you can copy-paste if you'd like!
Tags/Attributes: <center> </center>

Putting a link on an image means clicking the image will bring you to the attached location. This is especially convenient when talking about wolves - instead of just providing the link and hoping someone looks at its profile, you can put the actual image with its page attached!

We'll be using the Code View button, pictured above, to do this. Go ahead and click it - when you do this, you'll see a sprawl of HTML code. We're looking for your image, which will be written similar to this…

Around this, we'll put the code to make the link. Type the following "a" tag and "href" attribute around your image line...

...and replace "lorwolf.com" with your intended destination! Nice, you've done it! You can test to make sure it works by using the Preview function.

Tisq's Tips: You might be wondering - Tisq, couldn't I just use the Link button on the Editor? The answer is no - I checked! Unless they change how it functions, it currently is text only.
Tags/Attributes: <a href="lorwolf.com"> </a>

"Tooltip" refers to the text that pops up when you hover over an item - you see it all across the site! Adding a tooltip to an image can give additional information like a wolf's colors/genes, the source of the image, and the like.

We'll be using the Code View button, pictured above, to do this. Go ahead and click it - when you do this, you'll see a sprawl of HTML code. We're looking for your image, which will be written similar to this…

Inside this "img" tag, we'll put the code to make the tooltip. Type the following "title" attribute...

IMPORTANT NOTE: This function worked before the TE change. It no longer does.

A "floating" image is more literal than one might think - it really does make an image hover where you put it. This can make it a much smoother reading experience!

We'll be using the Code View button, pictured over on the left, to do this. Go ahead and click it - when you do this, you'll see a sprawl of HTML code. We're looking for your image, which will be written similar to this…

Unlike the previous sections, we're not adding anything around the image code - we're putting it inside! After the quotes containing your image link, hit space then type the style attribute pictured below:

Unlike the other sections in this thread, this one isn't going to contain HTML at all. Here, I'll be running through the built-in features the Text Editor provides for text - there's a lot of 'em!

Style
The Style button resembles a small wand. It has a variety of funky styles:
Normal

Quote - reply to a specific part of a post!

Code (preformatted)

Header (6 varieties)

Formatting
The row following Style contains bold, italics, underscore, strikethrough, and Remove Font Style. The first four can be combined in any way, while the last one clears all applied effects.

Lists
The Editor offers unordered and ordered lists. The former is a bulletpoint-styled list, while the latter increasingly numbers each new row.

Rule
A Horizontal Rule is just a thin line that can break up sections.

Link
Highlight the text you want to use as a button that brings someone to your destination, then use this feature. Doesn't work on images.

Tisq's Tips: Even the basics can make for a savvy experience. Understanding these can be the beginning of a creative journey!

IMPORTANT NOTE: This section shows deprecated code. If the HTML version is updated, this section will be altered accordingly.

Before you lies a beautiful sea of words (or word), from your own making. But would you like to exercise your power even more and shift their location? Let's talk about how to align to the center. We won't be going over how to left-align as that is the default, and right-aligning is disabled so showing how to do it is kinda pointless.

Around this, we're going to put a center tag:

Tisq's Tips: I'll be including the tags and/or attributes in these little blurbs so you can copy-paste if you'd like!
Tags/Attributes : <center> </center>

"Tooltip" refers to the text that pops up when you hover over an item - you see it all across the site! Adding a tooltip to your text can give additional information like a definition or clarification.

We'll be using the Code View button, pictured above, to do this. Go ahead and click it - when you do this, you'll see a sprawl of HTML code. We're searching for the text you want to have the tooltip, which will be written similar to how it appeared normally, just with some tags around it:

Inside the tag surrounding your text, we'll be inserting a "title" attribute...

...and you can insert whatever you want to pop up between those quotes! You can check to see how it might appear here: This is example text.

Tisq's Tips: In theory, you can put the "title" attribute in whatever tag is surrounding your text. For example, mine looks like <b title="I'm a tooltip">This is example text.<\/b>, just without the \ in the end of the tag.
Tags/Attributes : title="I'm a tooltip"

IMPORTANT NOTE: This function currently does not work on site.

"Marking" text adds a little highlight to its background, making it stand out amongst other items nearby.

We'll be using the Code View button, pictured above, to do this. Go ahead and click it - when you do this, you'll see a sprawl of HTML code. We're searching for the text you want to highlight, which will be written similar to how it appeared normally, just with some tags around it:

Around your text, we'll be adding our "mark" tag:

...and that's it! You can check to see how it might appear here: This is example text.

Tisq's Tips:
Tags/Attributes : <mark> </mark>

IMPORTANT NOTE: This function currently does not work on site. Saving a post with text utilizing BDO deletes the affected text.

BDO, or "bi-directional override", is a process that changes the direction text is written. Essentially, this means visually reversing it.

We'll be using the Code View button, pictured above, to do this. Go ahead and click it - when you do this, you'll see a sprawl of HTML code. We're searching for the text you're wanting to reverse, which will be written similar to how it appeared normally, just with some tags around it:

Around your text, we're going to be putting the "bdo" tag and its required "dir" attribute...

...where "rtl" is an acronym for "right-to-left". "ltr", or "left-to-right", is how your text is normally written and displayed.

And that's it! You can see how it might look in action right here:

Tisq's Tips: If you're an avid lore writer, BDO could be a fun and easy way to make a strange message!
Tags/Attributes: <bdo dir="rtl"> </bdo>

If you've been using the links scattered throughout this guide like Back to top, you'll notice that such links are bringing you to a place I've set. These are utilizing bookmarks!

First, we'll set up the part our bookmark will jump to. Open up Code View and find the text and/or image you want to bring someone to. I'll be using this example blurb:

Next, we'll want to make your "destination". Add an id attribute within the tag. These can be named however you like:

Now we'll do your "sending bookmark", which sends someone to the destination. We need to consider something: is your destination bookmark and sending bookmark on different pages? This does matter!

Destination and Sending on Same Page

Highlight the item(s) you want someone to click to bring them somewhere. Use the Link button on the Editor ribbon and type the bookmark:

Here is an example bookmark that brings you to the first Text topic: Jump to example

Destination and Sending on Different Pages

This is only a touch more complicated than the destination and sending bookmarks being on the same page. First, copy the web link the destination is on.

Next, highlight the item(s) you want someone to click to bring them somewhere. Use the Link button on the Editor ribbon and paste the link you copied. However, after this, type the bookmark at the end of the line:

Here is an example bookmark that brings you to a post on the third page of this thread: Jump to example

Tisq's Tips: If you want to go to the top of the page, you don't need to add a destination for the bookmark. Without a location to go to, it automatically goes to the top!
I like to name my bookmarks according to where they go. For example, a bookmark named #I1 brings you to the first section of the Images topic.
Last but not least, you don't need to keep it limited to just plain text. You can do this with images, headers, and the like! Just pop the id attribute in there. For using an image as a sending bookmark, refer to Links on an Image.
Tags/Attributes: id="E1"

You may have noticed that every topic in this thread is under a collapsing section. This is great for reducing the amount of space taken up and making the thread less visually busy!

Let's start by making the actual collapsing section. Open up Code View. This might feel like a lot compared to other sections, so just hang in there!

Start off by typing a details tag with nothing in it:

Next, we're going to add a summary tag inside the details tag. Inside this new tag, put your section title:

Now go wild! You can put whatever you want your collapsible section to contain between the end of the summary and details tags:

You can put images, tables, links...basically, there's no changes from the norm except for the fact that it can be collapsed to a convenient size!

Tisq's Tips: Occasionally, the arrows on the summary won't show up after saving the post. When this happens, just reload! Don't worry, other people can see it at all times.
There's no shame in copying and pasting your code. It'll save you time, and the HTML we're using is consistent enough to not be worrisome. Every time I add a new section I copy an entire previous section then just change it up to what I need.
Tags/Attributes: <details> </details> <summary>Example title</summary>

IMPORTANT NOTE: This function currently does not work on site. It is removed from your code upon saving the post.

When you're in Code View, you might wish that you could jot a little note on what something does that doesn't pop up in the actual post. In this case, writing a comment will be quite beneficial!

Like previously mentioned, your comments are in Code View and aren't displayed on your actual post. Find a spot you'd like to have a little note - whether it be at the top of the post, the bottom, or somewhere in between.

Next, we'll type something that might seem a little different compared to the other things covered in this thread. Write the following syntax, which looks like arrows:

...and that's all! You can put whatever you want between those dashes; they won't show up on the post and will be exclusively found in your code.

Tisq's Tips: As a programmer, I prefer to comment every single different section I do. Of course, you don't need to do this, but you may find it handy to put a note so you remember what something is there for.
Tags/Attributes: <!-- This is a comment -->

First things first - you'll need a table to exist before you work on its specifics! We'll use the built-in Table feature to insert one.

Using this feature, you can make a table with a specific number of rows and columns. The Table button expresses these numbers as x by y, where x is the column count and y is the row count.

For example, the table below would be considered a "3x2" table:

Tisq's Tips: Need to find a quick way to count the number of cells in your basic table? Just multiply the row count by the column count!
I suggest opening Code View to see what a table's code looks like...it'll come in handy if you want to do more!

IMPORTANT NOTE: Resizing a table in HTML5 as opposed to the Editor's HTML4 is pretty different. If the HTML version is updated, there will be a huge rehaul of this section.

You may have noticed that the standard table can look a little awkward with so much extra space around its contents. Here, we'll discuss resizing rows and columns to your needs. Code View is going to be a good friend of ours for this!

Right now, the Code Viewer currently slaps all your code together into a big heap ("minified") if you don't format it as you go. To make the writing process easier, I recommend Code Beautify's HTML Viewer! Simply copy all the code in Code View over to the viewer, click Beautify HTML, then paste it back in! The format will be preserved.

Making your code easier to read isn't Code Beautify's only use! You can also use it to type your code to begin with! The Output box updates to reflect your live changes. Just click Run / View to start the process.

Maybe you want to learn HTML to apply it to your posts, or maybe you want to learn CSS to go even further in your creations! Or a secret third thing...you want to learn HTML and CSS to apply this knowledge outside the site!

I am a front-end programmer, but I certainly didn't start that way. Books were the first big push that convinced me to learn the art of coding.

I recommend the for Dummies site and books. The site contains amazing cheat sheets and term definitions. For a book, I personally enjoy Coding All-in-One for Dummies. But above all, I suggest that you head to a local library! The knowledge there is presented freely, so use it!

Talk with friends! The journey is fun together. No matter how much you may or may not know, it's fun to compare notes and grow.

Q: I can't save my post! It keeps telling me to close Code View when it's not open.
A: This is a glitch. Open Code View, copy all your code, then reload the page. Paste it back into your post's Code View and try saving again!

Q: My collapsible section doesn't have the arrows on the side! Did I do something wrong?
A: No, you did nothing wrong! Just reload the page - they're there!

Q: Why do some sections say they're "deprecated" or not working?
A: "Deprecated" means the code I showed doesn't work on the newest version of HTML. For example, the <center> tag is considered deprecated because in the new HTML version you need to use CSS instead. I include that note because if the editor is ever updated, I may need to change the section. Notes saying that something doesn't work means it originally worked on-site and/or it doesn't work and I thought it was still important or fun to show.

Q: Why might CSS matter if we're using HTML?
A: HTML and CSS pretty much go hand-in-hand nowadays. CSS, AKA "Cascading Style Sheets", is what makes the site visually appealing. Text color, table formatting, background images...it's all CSS working with HTML!

Q: I saw someone do XYZ, how do I do it?
A: I am more than happy to explain a concept, but I also advocate for self-learning. Before you request an explanation, I suggest looking using the Inspect Element feature (accessible by right-clicking on the element) and attempting to dissect what you see!