Most of your coding needs covered, but this time in chat

Iko · 04-13-2021, 03:07 PM

Code Guide

So first off, I would definitely just recommend googling things like "bold html" or "bold html w3 schools" or something. W3 Schools is also going to have most of your resources anyway, but here's one on site. For reference, all knowledge and errors posted through this guide are purely my own and/or W3 Schools as those are my only two sources.

Ok so first off, you have tags. Idk what other people call them, but basically it's going to be

Code:
<>

to open a tag and

Code:
</>

to close a tag. Now, normally something goes INSIDE of those tags like if you want to bold text you may use:

Code:
<b>text</b>

See how we opened and closed the bold tag? There are several common tags you may use while posting or styling profiles such as

Italics
Bold
~~Strikethrough~~

Heading 1

Heading 2

Heading 3

Paragraph

Link
Emphasized

horizontal line (doesn't need closing)

Break. Used for spacing. Doesn't need to be closed.
Marked/Highlighted

Image
And ^{Superscripted}
Also _Subscripted

Code:
<i>Italics</i>

<b>Bold</b>

<s>Strikethrough</s>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<p>Paragraph</p>

<a href="https://www.w3schools.com">Link</a>

<em>Emphasized</em>

<hr> horizontal line (doesn't need closing)

<br> Break. Used for spacing. Doesn't need to be closed.

<mark>Marked/Highlighted</mark>

<img src="url">Image</img>

And <sup>Superscripted</sup>

Also <sub>Subscripted</sub>

Some of these tags also need attributes, however. This is mostly used in profiles and table text. For this, I would refer again to W3 Schools since there's no way I can list every percentage or every font family. For these things you usually use:

Code:
<tagname style="property:value;">

Such that we can change text and things to fit our liking and preferences.

Code:
<font style="font-family:verdana; font-size:160%; color:rgba(120, 30, 54, 1); line-height:20px;">Such that we can change text and things</font> <font style="font-family:courier; font-size:200%; color:rgba(20, 130, 124, 1); line-height:20px;">to fit our liking and preferences.</font>

In this example, I changed many things mid-sentence using the font tag. You may also use paragraph or header tags similarly. Notice I used rgba values. Here you have values for red, green, blue, and alpha/transparency. This you can research on your own, but you can also use color:#ffffff and other colors just fine!

Lastly, we have images! Usually we'll use image links since players don't typically source things on this site personally. Above you'll see the a href tag is used for images, but we can also apply attributes here just the same as with the font.

Code:
<img src="https://www.ardently.org/images/lilardy/confused.png" alt="Question Ardy" style="width:400px;height:200px;">

OR

Code:
<img src="https://www.ardently.org/images/lilardy/confused.png" alt="Question Ardy" height="200px" width="400px">

This terribly squashed Ardy shows a common thing in our code. If we specify something, it forces the image to those proportions. To get around that, set height or width to auto!

Code:
<img src="https://www.ardently.org/images/lilardy/confused.png" alt="Question Ardy" style="width:400px;height:auto;">

Getting into tables is a whole other can of worms, and that's not what I'm here for today! Enjoy learning how to stylize things until your heart is content. If you have any questions, please ask W3 Schools!