Thread: HTML Formatting guide

You can adjust the size of the image by changing the number in "max-height: 100px; ;"! Here's what some image sizes look like

Size	Image	HTML Code
100px		<img src="Your picture's link here!" style="max-height: 100px; border-radius: 50%;">
150px		<img src="Your picture's link here!" style="max-height: 150px; border-radius: 50%;">
200px		<img src="Your picture's link here!" style="max-height: 200px; border-radius: 50%;">
250px		<img src="Your picture's link here!" style="max-height: 250px; border-radius: 50%;">
300px		<img src="Your picture's link here!" style="max-height: 300px; border-radius: 50%;">

You can adjust the radius of the rounded borders by changing the % in "border-radius: 50%;"! Here's what some other %'s look like

%	Image	HTML Code
200px - 40% Borders		<img src="Your picture's link here!" style="max-height: 200px; border-radius: 40%;">
200px - 30% Borders		<img src="Your picture's link here!" style="max-height: 200px; border-radius: 30%;">
200px - 20% Borders		<img src="Your picture's link here!" style="max-height: 200px; border-radius: 20%;">
200px - 10% Borders		<img src="Your picture's link here!" style="max-height: 200px; border-radius: 10%;">

You can adjust the text color and size using the "color" and "font-size" properties. You can just use a color name (blue, white, black, etc), or you can use specific hex codes. Here's what some different combinations look like

 <span style="color: white; font-size: 20px;">This is white text at 20px!</span> 

 <span style="color: #FFC860; font-size: 25px;">This is FFC860 text at 25px!</span> 

 <span style="color: #E37944; font-size: 30px;">This is E37944 text at 30px!</span> 

 <span style="color: #2C0400; font-size: 18px;">This is 2C0400 text at 18px!</span> 

You can add background colors to your text elements and combine them with rounded borders to create the illusion of badges.


To turn these into functional buttons, wrap the badge in an <a> tag to create a hyperlink. Here’s an example:

<a href="https://chicken.pet/forums/creative-corner/115" title="This link will take you to my other template thread! 💛"> <span style="background-color: #F0CD35; color: #AB0000; padding: 5px 10px; border-radius: 5px;">Grab a trade status template here!</span></a>

Here's the basic structure to use the <a> tag

<a href="URL">Link Text</a>

 <span style="background-color: #161616; color: #D3D3D3; padding: 8px 12px; border-radius: 8px;">BADGE NAME HERE</span> 

 <span style="background-color: #491D2D; color: #F5F5DC; padding: 10px 15px; border-radius: 12px;">BADGE NAME HERE</span> 

 <span style="background-color: #734340; color: #FFF8DC; padding: 6px 10px; border-radius: 5px;">BADGE NAME HERE</span> 

You can actually have gradient backgrounds too! I haven't used them much myself yet because I haven't figured out how I'd want to integrate them yet, but it doesn't mean you can't do it first

Here's the structure!

background: linear-gradient(direction, color1, color2, ...);

Here's what you can customize

Example of a Linear Gradient:

background: linear-gradient(to right, #7B2F91, #4E4C9D);

This creates a gradient that transitions from purple to blue.

Example Usage:

<div style="background: linear-gradient(to right, #7B2F91, #4E4C9D); color: white; padding: 20px;">This is a gradient background!</div>

This creates a section with a gradient background and white text:

Example Badge (with gradient):

Gradient Badge

<span style="background: linear-gradient(135deg, #7B2F91, #4E4C9D); color: white; padding: 10px 20px; border-radius: 5px;">Gradient Badge</span>

Example Badge (with unpleasant gradient):

Unpleasant Gradient Badge

<span style="background: linear-gradient(135deg, #A3D700, #FF4F81, #7B4D3A); color: white; padding: 10px 20px; border-radius: 5px;">Unpleasant Gradient Badge</span>

The <div> tag is used to group content for styling or layout purposes, essentially, it creates a "block" with all the content inside of it.

Alignment:

- Center Alignment: Use text-align: center; to center text within a div.
- Left Alignment: Default is left alignment (no code needed for this).
- Right Alignment: Use text-align: right; to align text to the right.

Example of a Right-Aligned <div>:

<div style="text-align: right;">This text is right-aligned!</div>

This creates a div with right alignment text:

Using Backgrounds on a <div>:

You can easily add a background color or image to a div! Makes cute little "box" containers for your code

<div style="background-color: #47A6B8;">This div has a light blue background!</div>

This creates a div with a light blue background:

<div style="background: linear-gradient(to right, #7B2F91, #4E4C9D);">This div has a gradient background!</div>

This creates a div with a gradient background:

<div style="background-image: url('https://i.imgur.com/mJQEcD5.jpeg'); background-size: cover; color: white; padding: 20px;">This div has an image background!</div>

This creates a div with an image background:

Example of an Image Background + Rounded corners :

<div style="background-image: url('https://i.imgur.com/mJQEcD5.jpeg'); background-size: cover; border-radius: 50px; color: white; padding: 20px;">This div has an image background and rounded corners too!</div>

This creates a div with an image background and rounded corners:

"Hey! There's a "padding" tag in there that I don't recognize!"

Padding is the space between the content and the border. It's there so it doesn't look all shrink-wrapped and ugly :(

Comparison:

Badge Without Padding:

<span style="background-color: #4E4C9D; color: white; border-radius: 5px;">I'm a sad badge with no padding</span>

Badge With Padding:

<span style="background-color: #4E4C9D; color: white; padding: 15px; border-radius: 5px;">I'm extra chunky</span>

The <br> tag is used to insert a line break in your text, while the <hr> tag creates a horizontal line, often used as a divider. If you don't use them, your content may sometimes be all combined into a single line.

<br> (Line Break):

Use the <br> tag to break lines without starting a new paragraph.

Example:

This text will have a line break here.
And this text is on a new line!
You can even use multiple

for even more space.

<hr> (Horizontal Rule):

Use the <hr> tag to create a divider.

Example:

Text above the divider

Text below the divider.

You can format your text using the following tags:

Bold Text:

Use the <strong> or <b> tag for bold text.

Example: This text is bold!

Italic Text:

Use the <em> or <i> tag for italicized text.

Example: This text is italicized!

Underlined Text:

Use the <u> tag for underlined text.

Example: This text is underlined!

Strikethrough Text:

Use the <del> or <s> tag for strikethrough text.

Example: This text is strikethrough!

Code Text:

Use the <code> tag for code snippets!

Example: This is code text!

Small Text:

Use the <small> tag for smaller text.

Example: This text is smaller!

Example 2: This text is even smaller! Use the tag more times to "stack" the effect.

Subscript Text:

Use the <sub> tag for subscript text.

Example: _{Well, hello there! I am tiny subscript text.}

Click me to learn how to use make collapsible drawers
Useful for keeping your posts organized! Especially extra long ones like this one

The <details> tag creates a collapsible drawer that hides or shows content when clicked! Just like the ones you've been clicking so far. The <summary> tag inside of <details> specifies the visible text that that the user can click on to expand or collapse the content.

Basic Structure:

To create a collapsible drawer, you’ll need a <details> tag and a <summary> tag right underneath.

 <details> <summary>Click me</summary> <p>Here is the hidden content!</p> </details> 

Example:

Customizing the <summary> Style:

You can actually put pretty much anything inside the <summary> tag! For example, I've been using badges for this post. You can also format the text just like you would anywhere else.

You can use an HTML table to create columns; maybe there's a more efficient way, but this is what I've been doing, and it seems to work well enough. By adjusting the width attribute, you can control the ratio of each column.

Example:

Here, the first column takes up 30% of the table's width, while the second column takes up 70%:

Code:

 <table style="width: 100%; border-collapse: collapse;"> <tr> <td style="width: 30%; border: 1px solid #ddd; padding: 8px;">Column 1 (30%)</td> <td style="width: 70%; border: 1px solid #ddd; padding: 8px;">Column 2 (70%)</td> </tr> </table>  

You can adjust the width percentage in each <td> tag to set the column ratios to be whatever you want, as long as they add up to 100%

Changing Background and Border Colors:

To change the background color of a table or its cells, use the background-color property:

 <td style="background-color: #4268AC;">Your content here</td> 

Example:

To change the border color, adjust the border property:

 <td style="border: 1px solid #ff0000;">Your content here</td> 

Example:

If you want to remove the borders entirely, set the border property to none:

 <td style="border: none;">Your content here</td> 

Example:

This website uses Bootstrap, which means we can use these! Just copy one of the templates below and customize it with your own links

Dropdown Menu Example:

Dropdown template code

Code:

 <div class="d-flex justify-content-center"> <div class="dropdown"> <a class="btn btn-primary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu Title Here </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="ITEM #1 URL HERE" title="Description for Item #1">ITEM #1 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #2 URL HERE" title="Description for Item #2">ITEM #2 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #3 URL HERE" title="Description for Item #3">ITEM #3 NAME HERE</a></li> </ul> </div> </div> 

Code:

 <div class="d-flex justify-content-center"> <div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu Title Here </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="ITEM #1 URL HERE" title="Description for Item #1">ITEM #1 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #2 URL HERE" title="Description for Item #2">ITEM #2 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #3 URL HERE" title="Description for Item #3">ITEM #3 NAME HERE</a></li> </ul> </div> </div> 

Code:

 <div class="d-flex justify-content-center"> <div class="dropdown"> <a class="btn btn-success dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu Title Here </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="ITEM #1 URL HERE" title="Description for Item #1">ITEM #1 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #2 URL HERE" title="Description for Item #2">ITEM #2 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #3 URL HERE" title="Description for Item #3">ITEM #3 NAME HERE</a></li> </ul> </div> </div> 

Code:

 <div class="d-flex justify-content-center"> <div class="dropdown"> <a class="btn btn-warning dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu Title Here </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="ITEM #1 URL HERE" title="Description for Item #1">ITEM #1 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #2 URL HERE" title="Description for Item #2">ITEM #2 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #3 URL HERE" title="Description for Item #3">ITEM #3 NAME HERE</a></li> </ul> </div> </div> 

Code:

 <div class="d-flex justify-content-center"> <div class="dropdown"> <a class="btn btn-danger dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu Title Here </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="ITEM #1 URL HERE" title="Description for Item #1">ITEM #1 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #2 URL HERE" title="Description for Item #2">ITEM #2 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #3 URL HERE" title="Description for Item #3">ITEM #3 NAME HERE</a></li> </ul> </div> </div> 

Code:

 <div class="d-flex justify-content-center"> <div class="dropdown"> <a class="btn btn-info dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu Title Here </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="ITEM #1 URL HERE" title="Description for Item #1">ITEM #1 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #2 URL HERE" title="Description for Item #2">ITEM #2 NAME HERE</a></li> <li><a class="dropdown-item" href="ITEM #3 URL HERE" title="Description for Item #3">ITEM #3 NAME HERE</a></li> </ul> </div> </div>