How to Make a (Simple) Custom Profile Layout – Part I, HTML

Coding a layout from scratch might seem like a daunting task, but with a little patience, anyone can make a custom layout. In this tutorial you'll see how to write the HTML for a basic layout. Part II will guide you through the process of writing the CSS to go with it.

This tutorial has been adapted from the Custom Layout Tutorial written by the lovely and fabulous lovecraft, as well as her FAQ (updated FAQ). The bulk of it is her work; I've just updated it a bit for New Mibba.

Important Terms

Here are a few key terms and concepts you'll need to understand to make your own layout:

HTML & CSS: HTML and CSS work together to make your profile. In simple terms, HTML is where you build your layout (ie, what parts there are and where they go on the page) and CSS is where you control the style (eg, colors, font, and background images). HTML uses angle brackets (you may remember them from math class as less than and greater than signs); CSS uses curly brackets – these: {}. On the New Mibba, HTML and CSS are edited on the same page. Your CSS code will always go between these lines:

_{<style type="text/css">
CSS CODE
</style>}

Your HTML code will go below </style>.

<div> & <table>: A <div> is a section (or division) of your profile. A table is the further breakdown of a div. In your HTML, divs and tables will build your layout; then you'll use CSS to change the way they look.

Opening and closing: Every time you use an opening code in HTML, you need to have a closing code when you're done. Closing codes always start with forward slashes. So <div> defines the start of a division in your code and </div> ends the division. There are a few exceptions to this rule, like the code for inserting images and the code for creating a line break.

Making Your Layout – HTML

Enough introductions; time to start making your layout! Take a deep breath and let's get started.

Go to your custom profile editing page by going to My Mibba >> Profile >> Custom profile. If you already have code and think you might want to use it again, save it to a text file on your computer or in a draft on Mibba. Your layout should be blank. Ready for step one? It's pretty simple. Paste this into your layout:

_{<div>
Content
</div>}

Not so bad, eh? We created a division to hold our content, which right now is just one word. Try submitting your changes and looking at your custom profile. It should look like this. Pretty boring so far, but you've just taken your first step to your own layout!

Now we're going to add an identification to our div so that we'll be able to change its appearance with CSS (that'll come later, but it's important to add identifications as you go). An identification looks like this: id="name".

Change your HTML to look like this:

_{<div id="container">
Content
</div>}

(Note: All added code will be in bold.)

Our container div will hold all the content of our profile. It separates the content of our profile from the background of the page. Now we're going to break our layout down further with a table, which will let us divide our layout into as many parts as we want.

Tables have three parts: <table>, which is the entire table; <tr>, which is a table row; and <td>, which is a table division (column). A table needs all three parts to work, even if the table has just one row and one column.

Change your HTML to include a table.

_{<div id="container">
<table>
<tr>
<td>
Content
</td>
</tr>
</table>
</div>}

Your layout will look the same, but now we have internal divisions to work with.

Next we're going to add IDs. You need an ID for your table and for your TD, but not for your TR, because TRs are never coded for with CSS.

_{<div id="container">
<table id="inside">
<tr>
<td id="one">
Content
</td>
</tr>
</table>
</div>}

Now that we have IDs, there are a few rules we need to talk about for tables. First is cellspacing. Cellspacing defines how much distance there is between the cells of a table. If you have it set high, there will be distinctive gaps between your cells. The code to set cellspacing is this: cellspacing="0" (or whatever number you choose).

Second is the table's border. The border that appears automatically is generally unappealing. The border is set with this code: border="0" (this number is the thickness of the border – set to zero, the border won't show up at all).

Your HTML should now look like this:

_{<div id="container">
<table id="inside" cellspacing="0" border="0">
<tr>
<td id="one">
Content
</td>
</tr>
</table>
</div>}

Next we're going to center our layout. It's a very simple code:

_{<center>
<div id="container">
<table id="inside" cellspacing="0" border="0">
<tr>
<td id="one">
Content
</td>
</tr>
</table>
</div>
</center>}

Your profile page should look like this.

What we have now is the skeleton of a layout. Next we need to decide how many sections we want in our layout and how to fit them together. We're going to divide our layout up like this. (The letters and numbers are just labels; we're not going to put those in the layout itself!) How do we turn that picture into code? Remember that a TR is a row and a TD is a column. A, B, and C are TRs. A and C have one TD and B has two.

_{<center>
<div id="container">
<table id="inside" cellspacing="0" border="0">
<tr> <!-- this is row A -->
<td id="one">
Content
</td>
</tr>
<tr> <!-- row B -->
<td id="two">
Content
</td>
<td id="three">
Content
</td>
</tr>
<tr> <!-- row C -->
<td id="four">
Content
</td>
</tr>
</table>
</div>
</center>}

(Note: Words enclosed like <!-- this --> in HTML will not affect your layout. They're just labels to help you keep track of everything. You can take them out if you like, or add more.)

Now your profile will look like this.

We have a problem, though: we want to make the TDs in rows A and C twice as wide as the TDs in row B. To do that, we need a code called colspan. Colspan tells a division how wide to be. We're going to add colspan="2"to TDs one and four so that they'll be twice as wide as TDs two and three.

Your HTML should look like this:

_{<center>
<div id="container">
<table id="inside" cellspacing="0" border="0">
<tr>
<td colspan="2" id="one">
Content
</td>
</tr>
<tr>
<td id="two">
Content
</td>
<td id="three">
Content
</td>
</tr>
<tr>
<td colspan="2" id="four">
Content
</td>
</tr>
</table>
</div>
</center>}

This won't change the way your profile looks right away, but, believe it or not, we're almost done with HTML! Now we just need to add the content, which can be whatever you want – eg, pictures, links to your writing or other sites, an about me section. We're going to put all these things into this layout to see how it all works.

First, let's add some headers. "Header" is what titles are called in web design. We're going to add headers by adding <div class="head">Header</div>. "Header" is the text that'll actually show up on your layout. Class is a type of ID that's used to make everything in that class look the same. We could use an ID instead of a class, or we could use both, but for this tutorial all our headers will be the same style – so by using class, we'll only have to tell headers what to look like once in our CSS for all our headers to look the same.

Let's add headers to each of the TDs in our profile.

_{<center>
<div id="container">
<table id="inside" cellspacing="0" border="0">
<tr>
<td colspan="2" id="one">
<div class="head">Header</div>
Content
</td>
</tr>
<tr>
<td id="two">
<div class="head">Header</div>
Content
</td>
<td id="three">
<div class="head">Header</div>
Content
</td>
</tr>
<tr>
<td colspan="2" id="four">
<div class="head">Header</div>
Content
</td>
</tr>
</table>
</div>
</center>}

(Your profile should look like this. Since we haven't told headers what to look like yet, they still look like regular text. Don't worry, we'll fix that with CSS!)

Now let's add an image to TD "one". To add an image, use this code: <img src="direct link to image">. Only pictures of you can be uploaded to your Mibba gallery, so if you don't want the picture on your profile to be of yourself, you'll need to upload it to an image-hosting site like photobucket, imgur, or tinypic. They'll give you a direct link to your image. For this tutorial, we're going to use this image.

(The rest of your code should still be there, but to save space, we'll just look at TD "one" to see how to add an image. We'll do the same for adding other types of content – just don't delete anything other than the word "Content"!)

_{<td colspan="2" id="one">
<div class="head">Header</div>
<img src="http://i.imgur.com/RNEic.jpg">
</td>}

Now your layout will look like this.

Let's add some links to our TDs in row B, two and three. Links are designated in HTML and CSS with the code <a>. Leaving the URL in our layout is a bit ugly, though, so we're going to hide the URL in text. To do that, we use this code: <a href="URL">Text</a>.

Here's what row B should look like:

_{<tr>
<td id="two">
<div class="head">Header</div>
<a href="http://mibba.com">Mibba</a>
<a href="http://mibba.com">Mibba</a>
<a href="http://mibba.com">Mibba</a>
<a href="http://mibba.com">Mibba</a>
</td>
<td id="three">
<div class="head">Header</div>
<a href="http://mibba.com">Mibba</a>
<a href="http://mibba.com">Mibba again</a>
<a href="http://mibba.com">yet more Mibba</a>
<a href="http://mibba.com">hey do you need a link to Mibba?</a>
</td>
</tr>}

Your layout will now look like this. You might be wondering why all the links are on one line – it's because in HTML, hitting enter doesn't create a line break in your layout. To create a line break, you need to add the code <br> or <br />. Add <br> after each </a> in your code and your layout will look like this.

Now we're going to add some text. As you saw when your profile just held the word "Content", you don't need any special codes to insert text. You do need codes to make text bold, italic, strikethrough, or underlined. Let's add some filler text to TD four and examples of each of these four text modifiers:

_{<td colspan="2" id="four">
<div class="head">Header</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<b>Bold</b> | <i>Italic</i> | <s>Strikethrough</s> | <u>Underline</u>
</td>}

Notice the <br> at the end of our filler text so that our modified text will start on the next line. Our four text modifiers can do much more than the default behaviors you'll see on your profile now, but that's something we control with CSS.

Your layout should now look like this. You might be wondering why everything's been pushed to the left side of the screen when it was in the middle before – this happened because our filler text doesn't have any breaks. Since we didn't tell our container div how wide to be, it's automatically as wide as the screen. We'll fix this with CSS.

Your HTML code should now look like this:

_{<center>
<div id="container">
<table id="inside" cellspacing="0" border="0">
<tr>
<td colspan="2" id="one">
<div class="head">Header</div>
<img src="http://i.imgur.com/RNEic.jpg">
</td>
</tr>
<tr>
<td id="two">
<div class="head">Header</div>
<a href="http://mibba.com">Mibba</a><br>
<a href="http://mibba.com">Mibba</a><br>
<a href="http://mibba.com">Mibba</a><br>
<a href="http://mibba.com">Mibba</a><br>
</td>
<td id="three">
<div class="head">Header</div>
<a href="http://mibba.com">Mibba</a><br>
<a href="http://mibba.com">Mibba again</a><br>
<a href="http://mibba.com">yet more Mibba</a><br>
<a href="http://mibba.com">hey do you need a link to Mibba?</a><br>
</td>
</tr>
<tr>
<td colspan="2" id="four">
<div class="head">Header</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<b>Bold</b> | <i>Italic</i> | <s>Strikethrough</s> | <u>Underline</u>
</td>
</tr>
</table>
</div>
</center>}

If it doesn't, check back and make sure you caught all the steps.

We have our whole layout, but it doesn't look very pretty. That's where CSS comes in! Before we start CSS, we need to add one more thing to our code:

<sub><style type="text/css">

</style>
<center>
<div id="container">
<table id="inside" cellspacing="0" border="0">
<tr>
<td colspan="2" id="one">
<div class="head">Header</div>
<img src="http://i.imgur.com/RNEic.jpg">
</td>
</tr>
<tr>
<td id="two">
<div class="head">Header</div>
<a href="http://mibba.com">Mibba</a><br>
<a href="http://mibba.com">Mibba</a><br>
<a href="http://mibba.com">Mibba</a><br>
<a href="http://mibba.com">Mibba</a><br>
</td>
<td id="three">
<div class="head">Header</div>
<a href="http://mibba.com">Mibba</a><br>
<a href="http://mibba.com">Mibba again</a><br>
<a href="http://mibba.com">yet more Mibba</a><br>
<a href="http://mibba.com">hey do you need a link to Mibba?</a><br>
</td>
</tr>
<tr>
<td colspan="2" id="four">
<div class="head">Header</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<b>Bold</b> | <i>Italic</i> | <s>Strikethrough</s> | <u>Underline</u>
</td>
</tr>
</table>
</div>
</center></sub>

In between those two lines we'll add our CSS code. Find out how to create the CSS to go with this layout here!