|
Welcome to my guide! In this post, we’ll be going over basic
HTML additions that you can put in your threads to spice them up! If you want
to try any of these out, simply highlight the coding and paste it where you
want to try it! If you need any help or have any questions, I’ll be here to
answer them.
BASICS
Text Decoration
Bold
<b>Bolded</b>
Italic
<i>Italicized</i>
Underline
<u>Underlined</u>
Scorethrough
<s>Scored</s>
Superscript
<sup> </sup>
Subscript
<sub> </sub>
Colored Text
<font color=white (or Hex code)> white text</font>
Highlighted Text
<span style=”background-color:blue (or Hex code)> highlighted
blue</span>
FONT
Headers (1 being biggest, 6 being smallest)
Biggest
Header
<h1>Biggest Header</h1>
Medium Header
<h2>Medium Header</h2>
Small Header
<h3>Small Header</h3>
Font Size
<font size=1> </font>
Typewriter
<tt> </tt>
(Sizes range from 1 to 7)
FANCY
EXTRAS
Links
<a href=”URL”>link label</a>
Line Break
<br> </br>
Paragraph (double spaces)
<p>example</p>
Center Align
<p style="text-align:center;">
(can also align left or right)
Blockquote
<blockquote> </blockquote>
IMAGES
Image <img src=”URL”>
Sized Image <img src=”URL” height=number width=number>
Linked Image <a href=”URL”><img src=”URL”> </a>
Image Titles <img src=”URL” title=”text here”>
LISTS
To start, you’ll have to make an
unordered list for bullet points.
<ul><li> Bullet 1
</li></ul>
This is how to make a numbered list.
<ol><li> Number 1
</li></ol>
HTML Tables (Basic)
I’ve had many
questions asked about HTML tables lately, and I’d love to share what I’ve
learned so those of you who are curious can make your own if you want to!
First, we’re going to start by classifying the different components that make
up an HTML, and then work on making it look pretty. J
Tags
<table> - this tag defines the code as an HTML table.
Anything within the <table> tag will be inside the table that you’re
making.
<td> - this tag defines a data cell within an HTML
table. There are two types of cells, and one of them is a header cell. We won’t
be discussing data cells in this guide, but if you want to look into what they
are and what they do, go to w3schools.org. They offer an abundance of guides
and tutorials for all types of coding languages! This tag also defaults
elements to be left aligned, so we’ll have to align the text inside our table
in order for our text/links/images/etc to be centered. We’ll call this our “outline”
if you will, for our table.
<span> - as for this tag, it is an inline container
that makes up part of a text or a document- it’s also easily styled by CSS to
make fancy HTML tables for forum topics. We’ll be using this tag to color our
box and style it.
One thing to keep in mind while coding is that we’ll be
using all of these together, they all connect to make the final product/look of
the table! Now, let’s start with the barest
of tables. Example:
Centering & Font Families
<p style="text-align:center;color:#000000;font-family:Roboto;">
Here is a simple styling for a table. We have center aligned
our paragraph text, classified the text color as black (#000000), and made the
font family the default for Lioden- Roboto. Quite a few fonts work on the site,
but I would be sure to research safe to use HTML fonts that work before just
putting in a random font. I mention this because different computer systems use
different fonts by default, so if a font you want to use doesn’t show up, it
has fallen back to font that Wolvden uses or doesn’t allow.
The Fancy Stuff (Headers/Bodies)
This is going to be our header box. After we have this all
coded, we’ll close all of our tags and start on the main box, where the
majority of our text will go.
Now here’s the code for our main content:
<span style="color:#000;background:#FFF;border:1px
solid #000;float:left;height:auto;width:90%;padding:22px;margin:5px 1px 10px
30px;font-size:12px;">text text text text</span>
Margins Note:
margin: 5px 1px 10px 30px
The 5px is the first margin we’re declaring, but first, let’s
give ourselves an easy abbreviation to remember: TRBL. Top, Right, Bottom,
Left. So the top margin will be 5px, the right margin is 1px, bottom is 10px,
and finally, the left margin is 30 px. These dimensions will give us a nicely
margined box!
And finally! Put it together
Let’s put all of our code together! Here’s a default box
that I put together that is great for new learners. I hope this was easy for
you to understand, but please feel free to reply on this guide or message me if
you have any questions! Feel free to copy our box below and reply on this
thread with it, and play with it as you wish! Thank you for reading if you made
it this far. <3
<table style="height:auto;width:100%;border:1px
solid #000;"><tbody><tr><td style="background:#ededed;"><br><p
style="text-align:center;color:#000000;font-family:Roboto;"><span
style="background:#385f71;border:1px solid
#000;float:left;height:auto;width:90%;margin:1px 30px
10px;padding:15px;"><b
style="font-size:18px;color:#FFF;">Basic HTML
Box!</b></span><br><span
style="color:#000;background:#FFF;border:1px solid
#000;float:left;height:auto;width:90%;padding:22px;margin:5px 1px 10px
30px;font-size:12px;">text text text text</span></p></td></tr></tbody></table> Want to see what it looks like? Look down below this post or here: https://www.wolvden.com/chatter/topic/3378/?pid=3547
Links
to table explanation images: https://imgur.com/a/YVIrTiE
Thank you for reading, and happy coding! :)
| 
