So... you want to use HTML on your profile?

After my CSS post, I figured HTML was probably the next thing to go over.

If you used MySpace back in the day, you probably remember finding some sites like CreateBlog, MyspaceTweaks etc. where you would find random codes online, then copying it, putting it in your profile and just hoping for the best.

Sometimes it worked exactly how you wanted. Sometimes it completely destroyed your profile. One of the hands on ways I've learned to use HTML was by finding these codes, yet had absolutely no idea what the code even did, but it looked cool so I kept it and played with it until I figured out how to make it my own. Some of these codes came with additional ad space built into them where a portion of the code would link back to where you found it.

Ultimately this is what taught me to look at the code and learn how to make adaptations.

FriendRewind brings a lot of that back with custom HTML, so I wanted to put together a list of the MySpace HTML that actually works on FriendRewind, along with some of the older MySpace code that needs to be changed a little bit.

This is basically the second part to my CSS post. The CSS controls how everything looks, while HTML is what you actually use to put things on the page.

I'm keeping this list pretty simple. I'm also not going to throw a bunch of random HTML tags in here just because they exist. These codes are tailored for being used on FriendRewind.

What's in here?

• HTML that works exactly the same
• Bold, italic and underlined text
• Line breaks
• Centered content
• Links
• Images
• Multiple images
• Paragraphs
• Headings
• Lists
• Tables
• Marquees
• Changing text colors
• Changing font sizes
• Changing fonts
• Centered images
• Colored boxes
• Image sizing
• Image spacing
• Combining HTML and CSS
• Old MySpace code → FriendRewind code

1. The Basic HTML Stuff

Let's start with the really basic stuff.

A lot of the HTML you remember from MySpace can still be used without changing anything. Which is nice because it means you don't have to relearn everything just because we're using FriendRewind now.

If you know what a tag does, congratulations. You're already halfway there. lol.

2. Bold Text

<b>This is bold</b>

You can also use:

<strong>This is bold</strong>

Both are useful if you just want to make something stand out.

3. Italic Text

<i>This is italic</i>

Or:

<em>This is italic</em>

Nothing complicated here. Just some good old-fashioned text formatting.

4. Underlined Text

<u>This is underlined</u>

Because apparently we still need to underline things sometimes.

5. Line Breaks

The
tag is one of those little pieces of HTML that you'll probably end up using constantly.

This is line one<br>
This is line two

Want more space?

Line one<br><br>
Line two

You can keep adding them if you really want to. I'm not judging...

6. Horizontal Lines

<hr>

That's it!

It's just a simple way to separate different parts of your profile.

7. Center Things

If you remember MySpace, you probably remember this one.

<center>
This is centered
</center>

You can put pretty much anything inside of it.

<center>
<img src="IMAGE URL">
<br>
Welcome to my profile!
</center>

Simple, but still useful.

8. Links

<a href="https://example.com">Click Here</a>

You can also make an image clickable:

<a href="https://example.com">
<img src="IMAGE URL">
</a>

This was useful for buttons, blinkies, fan pages, shrines, graphics, and basically anything else you wanted people to click on.

9. Images

This one should be pretty obvious, but images are a huge part of making an old-school profile.

<img src="IMAGE URL">

Set the Width

<img src="IMAGE URL" width="200">

Set the Height

<img src="IMAGE URL" height="200">

And yes, animated GIFs are part of this too. Because what would an old MySpace-style profile be without at least one GIF somewhere?

10. Multiple Images

<img src="IMAGE 1">
<img src="IMAGE 2">
<img src="IMAGE 3">

This is useful for putting graphics, blinkies, stamps, buttons or whatever else you have next to each other.

You can basically make your own little collection of graphics right inside your profile.

11. Paragraphs

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Pretty basic, but useful if you're actually writing something instead of just throwing a million GIFs onto your page.

12. Headings

<h1>This is a heading</h1>

You can also use:

<h2>This is a heading</h2>

<h3>This is a heading</h3>

And there are also h4, h5 and h6.

You probably won't need all of them, but they're there.

13. Lists

Bullet List

<ul>
<li>Music</li>
<li>Movies</li>
<li>Games</li>
</ul>

Numbered List

<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>

14. Tables

Tables were probably one of the most abused things on MySpace.

But honestly, they were useful too.

<table>
<tr>
<td>
Hello!
</td>
</tr>
</table>

Multiple Columns

<table>
<tr>
<td>Left side</td>
<td>Right side</td>
</tr>
</table>

Multiple Rows

<table>
<tr>
<td>Row 1</td>
<td>Something</td>
</tr>

<tr>
<td>Row 2</td>
<td>Something else</td>
</tr>
</table>

You can get pretty creative with tables once you start combining them with CSS.

15. Marquee

Now for one of the most MySpace things ever.

<marquee>
Welcome to my profile!
</marquee>

You can change the direction:

<marquee direction="right">
Welcome to my profile!
</marquee>

You can also change the speed:

<marquee scrollamount="10">
WELCOME!!!
</marquee>

And yes, you can put an image inside of it.

<marquee>
<img src="IMAGE URL">
</marquee>

If you want your profile to look like it came straight out of 2006, this is probably one of the easiest ways to do it.

16. Changing Text Colors

Now we're getting into the stuff that used to be done with some of the really old MySpace HTML tags.

The old MySpace way was:

<font color="red">
Hello!
</font>

For FriendRewind, I'd use:

<span style="color:red;">
Hello!
</span>

Or use a hex color:

<span style="color:#ff00ff;">
Hello!
</span>

This gives you a lot more control over the colors you're using.

17. Changing Font Size

The old MySpace version:

<font size="5">
Big text
</font>

For FriendRewind:

<span style="font-size:24px;">
Big text
</span>

You can also combine it with color:

<span style="font-size:24px;color:#ff00ff;">
Big pink text
</span>

Which is already a lot more useful than just picking some number from 1 to 7.

18. Changing Fonts

The old MySpace version:

<font face="Comic Sans MS">
Hello!
</font>

For FriendRewind:

<span style="font-family:'Comic Sans MS';">
Hello!
</span>

Or if you want something a little more old-school computer looking:

<span style="font-family:'Courier New';">
Hello!
</span>

This is one of those things where you can keep changing the font until you find something that actually fits your profile.

19. Centering an Image

The old MySpace way:

<center>
<img src="IMAGE URL">
</center>

You can also use CSS with a div:

<div style="text-align:center;">
<img src="IMAGE URL">
</div>

The nice thing about doing it this way is that you can put multiple things inside the same section.

<div style="text-align:center;">
<img src="IMAGE URL">
<br>
<b>Welcome to my profile!</b>
</div>

20. Make a Colored Box

This is where

<div style="
background-color:#000000;
color:#ffffff;
border:2px solid #ff00ff;
padding:10px;
">

<b>My Profile</b><br>
Welcome to my page!

</div>

<img src="IMAGE URL" width="200">

<img src="IMAGE URL" style="width:200px;height:auto;">

<img src="IMAGE URL" style="margin:5px;">

<img src="IMAGE1" style="margin:5px;">
<img src="IMAGE2" style="margin:5px;">
<img src="IMAGE3" style="margin:5px;">

<div class="my-box">

    <h2>Welcome</h2>

    <p>
        Welcome to my little corner of the internet.
    </p>

</div>

.my-box {
    background: #111;
    color: #fff;
    border: 2px solid #ff00ff;
    padding: 20px;
}

<center>

<img src="IMAGE URL" width="200">

<br><br>

<span style="color:#ff00ff;font-size:24px;">
<b>WELCOME TO MY PROFILE</b>
</span>

<br><br>

<marquee>
Thanks for stopping by!
</marquee>

</center>

<div style="
background:#000;
color:#fff;
border:2px solid #ff00ff;
padding:15px;
">

<center>

<h2>ABOUT ME</h2>

<img src="IMAGE URL" width="150">

<br><br>

I like music, old websites, and making my profile look way too complicated.

</center>

</div>

<font color="red">
Hello!
</font>

<span style="color:red;">
Hello!
</span>

<font size="5">
Big text
</font>

<span style="font-size:24px;">
Big text
</span>

<font face="Comic Sans MS">
Hello!
</font>

<span style="font-family:'Comic Sans MS';">
Hello!
</span>

<center>
CONTENT
</center>

<div style="text-align:center;">
CONTENT
</div>

<img src="IMAGE URL" width="200">

<img src="IMAGE URL" style="width:200px;height:auto;">

<b>Bold</b>

<i>Italic</i>

<u>Underline</u>

<br>

<hr>

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

<img src="IMAGE URL">

<center>Centered</center>

<p>Paragraph</p>

<h2>Heading</h2>

<ul>
    <li>Item</li>
</ul>

<ol>
    <li>Item</li>
</ol>

<table>
    <tr>
        <td>Content</td>
    </tr>
</table>

<marquee>
    Scrolling text
</marquee>

<span style="color:#ff00ff;">
    Colored text
</span>

<span style="font-size:24px;">
    Bigger text
</span>

<span style="font-family:'Courier New';">
    Different font
</span>

<div style="text-align:center;">
    Centered content
</div>

<b><u>WORKS THE SAME</u></b>

<b>
<i>
<u>
<br>
<hr>
<a>
<img>
<p>
<h1> through <h6>
<ul>
<ol>
<li>
<table>
<tr>
<td>
<marquee>


<b><u>CHANGE TO THE FRIENDREWIND VERSION</u></b>

<font color="red">
        ↓
<span style="color:red;">


<font size="5">
        ↓
<span style="font-size:24px;">


<font face="Comic Sans MS">
        ↓
<span style="font-family:'Comic Sans MS';">


<center>
        ↓
<div style="text-align:center;">


<img width="200">
        ↓
<img style="width:200px;height:auto;">


<b><u>THE BASIC IDEA</u></b>

Keep the idea.
Keep the graphics.
Keep the colors.
Keep the old-school look.

Change the code when it needs to be changed
so it works with FriendRewind.