Playing with HTML :: A Tutorial by Sapphire

Hallo. People have asked me before to teach them how to code but I always refused because I consider myself a lousy teacher (still do lol). That and I really don't know how to teach people HTML because it's such a broad topic and I didn't know where to start. But then this idea just came to me a few days ago and I thought, 'well, maybe this could work.' This, of course, led to the birth of this tutorial you're now reading. So now you might ask, how is this going to work?

Basically, instead of me listing down what the terms in HTML mean, I will be showing you the step-by-step creation of a basic posting layout I made for the sake of this tutorial, all the while explaining what each code does. This will let you see the application of the code in an actual posting layout.

In short, I will explain how to do this:

kim raziel swift

Humming softly to herself, Raziel made her way towards Half Blood Hill. Armed with only a shoulder bag containing essentials (including bottled water, ambrosia and of course, make-up), the daughter of Hyperion certainly didn't look like someone who was going on a dangerous mission to... what was it again? Find some goddess' keys... or something like that, Raziel finished in her thoughts. Details, details. It wasn't her job to figure out the specifics of the quest. To tell the truth, what really drew her in was the company of her questgoers and not the quest itself - although she did appreciate the opportunity to deviate from the usual (and boring) camp routine she was subjected to during the past few years.

There was no denying the spring in her step as her black Vans padded across the ground. To say that Raziel was excited was an understatement. She had never felt more enthusiastic in her life. Panting a little, she finally reached the top of the hill. She smirked, catching sight of their leader who seemed as disappointed as she was thrilled. Raziel had no idea how Athena Boy was roped into this kind of quest, much less how she actually ended up as one of his companions. All things considered, she was probably on the very bottom of the Conrad List of Possible Questers, no thanks to how their first meeting involved a laptop taking a sudden dip in the creek... His 'laptop,' she remembered with a sly grin as she looked over his light-looking backpack. He had better brought it along.

"I knew you were trouble when you walked in," Raziel sang to announce her arrival, not caring if she suddenly woke Peleus up with the volume of her voice. Slowly removing the jet black Beats headphones from her ears and replacing them around her neck, she confidently strode up to Conrad and hooked her arm around his shoulders playfully. "We're actually going on a quest together! Aren't you just excited, Athena Boy?" She laughed, an arm still slung around him, and glanced around hopefully. "So... where's Kylee?"

lol guys don't mind the pokemon on the bottom-right corner I just wanted a background picture and it was the first thing that occurred to me xD

Simple enough, right? Some people might look at it and be like 'omg how is that done' or 'that looks hard D:'. I hope this tutorial will answer that question and make you realize that coding isn't that hard. However, before you go on, make sure you read this guide that Dean made because I will no longer be explaining those that he mentioned there. Capiche?

Anyhow, let's get started.



First, let's start off with a div tag that will contain everything there is regarding the content of the layout. I want the thing's size to be 450 x 500. This means that it will be 450 pixels wide and 500 pixels long, which gives us a nice little rectangle. Let's put this in a code:

Code:

<div style="width: 450px; height: 500px"></div>

This is easy enough. Width specifies how wide the div is going to be while height specifies how long. Px is just short for pixel. You always have to put a colon between the property (i.e. width, height, etc.) and its value, and a semi-colon to separate each property from another. If you miss even one of these essential punctuation marks, your code will screw up.

Now, if you try typing that code above and hit Preview, you might think that there's something wrong because nothing is showing up. There isn't. The code will work exactly how you told it to, however you haven't yet done anything to make it visible or fancy-looking. Notice how there seems to be huge blank space in your post? That's the div right there.

Let's make it a little more fancy and add a background. I want to use this picture. I will now expand the code above to add it:

Code:

<div style="width: 450px; height: 500px; background: url(http://i.imgur.com/oCm2Pq5.jpg)"></div>

What it will look like:

The background property obviously refers to the background of the div. The value url( ) tells the div to use a background picture. You simply place the link to your desired picture inside the parentheses, as shown above. You might notice that the picture seems a little cut off; that's normal. That happens when the picture is too big for the div and the div just shows the portion of the picture - the size of said portion depending on the width and height we just set above.

I don't like how the div is on the left side. Most layouts are on the center of the post, so let's add a center tag to align it that way. Also, it's time to add a border. Let's expand on the div a bit more.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://i.imgur.com/oCm2Pq5.jpg); border: #bcbcbc 10px solid"></div></center>

What it will look like:

The center tag is to make the layout in the center of the post, like I said. By default, a div always positions itself on the left side of the page. If you want your div to stay on the right, just replace the word 'center' with 'right'. Easy enough, right? Let's move on to the borders.

Yay borders! I like borders. In the code above, I used the general border property which has three values specified: color, width, and style (it doesn't have to be in order). Actually that code I used is a shortened version. It can also be written into this:

Code:

border-color: #bcbcbc; border-width: 10px; border-style: solid

But that's too long. I generally keep my codes nice and short because it's easier to edit that way. Border-color and border-width are self-explanatory, so I'll focus instead on border-style. These are the styles that can spice up your layouts along with what they will look like:

Spoiler:

But wait Saph! What if I only want a border on the left side of the div? That's cool too. You just have to change the 'border' into 'border-left'. It goes the same way if you want it on other sides. Simply change the property into 'border-right', 'border-top' or 'border-bottom'.

Looks like we're pretty much done with the background, right? Now let's shift our attention to the content. In my layouts, I include a picture of my character. I'm going to use this gif like so:

Code:

<center><div style="width: 450px; height: 500px; background: url(http://i.imgur.com/oCm2Pq5.jpg); border: #bcbcbc 10px solid"><img src="http://i277.photobucket.com/albums/kk54/flareon03/09.gif"></div></center>

What it will look like:

Remember: everything that you want to be contained in that fancy rectangle we coded earlier should go inside the div tags, meaning it should be between the <*div> and the <*/div> (just ignore the stars). Also, the image is automatically centered because of the center tag we added a moment ago.

I used a different code to add an image instead of the [*img] and [/*img] tags that are commonly used in forums (again, just ignore the stars). Both codes yield the same result actually. I prefer using the html one for layouts because it's easier if I want to resize the image to my preference, but that's a story for another day. Anyway, notice how the image sticks to the top border of the div? We'll deal with that later. Actually, we can deal with it now but I'd rather show you later on so that you will understand it more.

Now let's add that little box after the image with my character's name. We're going to use another div tag for this. Yes, it is alright to have a div within a div DIVCEPTION. Adding it to the code we have:

Code:

<center><div style="width: 450px; height: 500px; background: url(http://i.imgur.com/oCm2Pq5.jpg); border: #bcbcbc 10px solid"><img src="http://i277.photobucket.com/albums/kk54/flareon03/09.gif">

<div style="height: 20px; background: #bcbcbc">kim raziel swift</div></div></center>

What it will look like:

Wow doesn't that look hideous xD
To make this div fancy I used the height and the background property we used earlier. This time though, instead of using an image for my background, I just used the color #bcbcbc. Of course, you can also use actual words like 'white' or 'black' as in 'background: white'. As you may have noticed though, this new div is sticking to the borders of the layout in the similar way the gif does. To fix that, let me introduce to you a new property: padding.

Padding refers to the space between the borders of a div and its content. Right now, we have absolutely zero padding because everything inside our layout is sticking to the borders like glue. Let's make our layout prettier by adding that necessary space. You add the padding not in the content but in the div tag itself. Below, I added it right after the border property of the first div we made:

Code:

<center><div style="width: 450px; height: 500px; background: url(http://i.imgur.com/oCm2Pq5.jpg); border: #bcbcbc 10px solid; padding: 10px 10px 10px 10px"><img src="http://i277.photobucket.com/albums/kk54/flareon03/09.gif">

<div style="height: 20px; background: #bcbcbc">kim raziel swift</div></div></center>

What it will look like:

See the difference? ;D
Now, notice how there are four values right after the padding property. These values determine how wide the space is in pixels and, unlike the border property earlier, it goes in a definite order: top, right, bottom, and left. The first 10px specifies how far the content will be from the top border, the second 10px referring to the space on the right, and so on. It doesn't have to be all equal. For instance, if you want the left space to be much wider than the others, you can give it a higher number. It depends on how you want your layout to look like.

Let's move on to my character's name. It's too bland, isn't it? This time, I'm going to add a few familiar properties you would find in Dean's guide in the div tag that contains the character name only. I will also add some padding for there to be a little space between the text and the top and bottom of the div.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://i.imgur.com/oCm2Pq5.jpg); border: #bcbcbc 10px solid; padding: 10px 10px 10px 10px"><img src="http://i277.photobucket.com/albums/kk54/flareon03/09.gif">

<div style="height: 20px; background: #bcbcbc; font-family: Georgia; font-size: 16px; color: white; padding-top: 5px; padding-bottom: 5px">kim raziel swift</div></div></center>

What it will look like:

Note: If you compare the one in the spoiler to the finished product above, you will probably notice how in the spoiler, the character name is a little farther from the bottom. This is due to forummotion's spoiler making it look different. I assure you, it will look right when it's outside the spoiler.

There ya go.
But wait, I want the name to be in uppercase instead of lowercase. Did you know that there's actually a way to do that in html without actually retyping the text? We're now going to use a property called text-transform. This property will transform your text without you having to change it manually. You can make them appear in lowercase, uppercase, and capitalize. We're going to use uppercase and add this property to the code.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://i.imgur.com/oCm2Pq5.jpg); border: #bcbcbc 10px solid; padding: 10px 10px 10px 10px"><img src="http://i277.photobucket.com/albums/kk54/flareon03/09.gif">

<div style="height: 20px; background: #bcbcbc; font-family: Georgia; font-size: 16px; color: white; padding-top: 5px; padding-bottom: 5px; text-transform: uppercase">kim raziel swift</div></div></center>

What it will look like:

Now that we have the text in upper-case, I'll introduce you yet again to a new property: letter-spacing. This refers to the space between the letters in the text (lol obvious definition is obvious) measured in pixels. Now let's add this property just after the text-transform we just added:

Code:

<center><div style="width: 450px; height: 500px; background: url(http://i.imgur.com/oCm2Pq5.jpg); border: #bcbcbc 10px solid; padding: 10px 10px 10px 10px"><img src="http://i277.photobucket.com/albums/kk54/flareon03/09.gif">

<div style="height: 20px; background: #bcbcbc; font-family: Georgia; font-size: 16px; color: white; padding-top: 5px; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 5px">kim raziel swift</div></div></center>

What it will look like:

YAY WE'RE ALMOST DONE :D
We're done with everything else, and all that needs to be added is your actual rp post. Let's make another div for this one, going right under our character's name, and type our post inside it.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://i.imgur.com/oCm2Pq5.jpg); border: #bcbcbc 10px solid; padding: 10px 10px 10px 10px"><img src="http://i277.photobucket.com/albums/kk54/flareon03/09.gif">

<div style="height: 20px; background: #bcbcbc; font-family: Georgia; font-size: 16px; color: white; padding-top: 5px; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 5px">kim raziel swift</div>
<div>Humming softly to herself, Raziel made her way towards Half Blood Hill. Armed with only a shoulder bag containing essentials (including bottled water, ambrosia and of course, make-up), the daughter of Hyperion certainly didn't look like someone who was going on a dangerous mission to... what was it again? [i]Find some goddess' keys... or something like that,[/i] Raziel finished in her thoughts. Details, details. It wasn't her job to figure out the specifics of the quest. To tell the truth, what really drew her in was the company of her questgoers and not the quest itself - although she did appreciate the opportunity to deviate from the usual (and boring) camp routine she was subjected to during the past few years.

There was no denying the spring in her step as her black Vans padded across the ground. To say that Raziel was excited was an understatement. She had never felt more enthusiastic in her life. Panting a little, she finally reached the top of the hill. She smirked, catching sight of their [i]leader[/i] who seemed as disappointed as she was thrilled. Raziel had no idea how Athena Boy was roped into this kind of quest, much less how she actually ended up as one of his companions. All things considered, she was probably on the very bottom of the Conrad List of Possible Questers, no thanks to how their first meeting involved a laptop taking a sudden dip in the creek... [i]His 'laptop,'[/i] she remembered with a sly grin as she looked over his light-looking backpack. [i]He had better brought it along.[/i]

[color=goldenrod]"[i]I knew you were trouble when you walked in,[/i]"[/color] Raziel sang to announce her arrival, not caring if she suddenly woke Peleus up with the volume of her voice. Slowly removing the jet black Beats headphones from her ears and replacing them around her neck, she confidently strode up to Conrad and hooked her arm around his shoulders playfully. [color=goldenrod]"We're actually going on a quest together! Aren't you just [i]excited[/i], Athena Boy?"[/color] She laughed, an arm still slung around him, and glanced around hopefully. [color=goldenrod]"So... where's Kylee?"[/color]</div>
</div></center>

What it will look like:

Crap it's screwed, isn't it? xD
This is because our post is so long that it overflows the dimensions we set for the layout at the start of this tutorial. There's an easy way to fix this. Let's give the new div a scrollbar! And this brings us to a new property: overflow.

Overflow property will tell the div what to do when its content overflows (lol how obvious is that). Like what happened above. There are different values to overflow, but I will discuss only one: auto. If you set the overflow to auto, it will tell the div to produce a scrollbox if the text is too long. However, if the text is short enough not to overflow, you won't see any scrollbox.

However, there is one important thing involving overflow. It will only work if you specify a height property in the same div. Meaning if you haven't specified the div's height, overflow will not work. To fix the problem we have, let's set the new div's height to 200px and overflow to auto.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://i.imgur.com/oCm2Pq5.jpg); border: #bcbcbc 10px solid; padding: 10px 10px 10px 10px"><img src="http://i277.photobucket.com/albums/kk54/flareon03/09.gif">

<div style="height: 20px; background: #bcbcbc; font-family: Georgia; font-size: 16px; color: white; padding-top: 5px; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 5px">kim raziel swift</div>
<div style="height: 200px; overflow: auto">Humming softly to herself, Raziel made her way towards Half Blood Hill. Armed with only a shoulder bag containing essentials (including bottled water, ambrosia and of course, make-up), the daughter of Hyperion certainly didn't look like someone who was going on a dangerous mission to... what was it again? [i]Find some goddess' keys... or something like that,[/i] Raziel finished in her thoughts. Details, details. It wasn't her job to figure out the specifics of the quest. To tell the truth, what really drew her in was the company of her questgoers and not the quest itself - although she did appreciate the opportunity to deviate from the usual (and boring) camp routine she was subjected to during the past few years.

There was no denying the spring in her step as her black Vans padded across the ground. To say that Raziel was excited was an understatement. She had never felt more enthusiastic in her life. Panting a little, she finally reached the top of the hill. She smirked, catching sight of their [i]leader[/i] who seemed as disappointed as she was thrilled. Raziel had no idea how Athena Boy was roped into this kind of quest, much less how she actually ended up as one of his companions. All things considered, she was probably on the very bottom of the Conrad List of Possible Questers, no thanks to how their first meeting involved a laptop taking a sudden dip in the creek... [i]His 'laptop,'[/i] she remembered with a sly grin as she looked over his light-looking backpack. [i]He had better brought it along.[/i]

[color=goldenrod]"[i]I knew you were trouble when you walked in,[/i]"[/color] Raziel sang to announce her arrival, not caring if she suddenly woke Peleus up with the volume of her voice. Slowly removing the jet black Beats headphones from her ears and replacing them around her neck, she confidently strode up to Conrad and hooked her arm around his shoulders playfully. [color=goldenrod]"We're actually going on a quest together! Aren't you just [i]excited[/i], Athena Boy?"[/color] She laughed, an arm still slung around him, and glanced around hopefully. [color=goldenrod]"So... where's Kylee?"[/color]</div>
</div></center>

And look the problem's fixed!:

Wow that looks nicer now, doesn't it?
And now, for the finale, I'm just going to add a few more familiar properties to the text to improve it along with two new ones that will be explained below:

• Line-height will specify how close each line will be to the other. It can be in pixels or in percent (it's more advisable to use percent). Let me show you how it works in the spoiler below.
  

  Spoiler:

• Text-align simply tells where the content or the text will be positioned inside the layout. You can set this property to left, right, center, or justify. It's exactly similar to how Microsoft Word aligns your text.

Now let's apply those two new properties. This last code contains the whole layout and what it will look like will no longer be contained in a spoiler.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://i.imgur.com/oCm2Pq5.jpg); border: #bcbcbc 10px solid; padding: 10px 10px 10px 10px"><img src="http://i277.photobucket.com/albums/kk54/flareon03/09.gif">

<div style="height: 20px; background: #bcbcbc; font-family: Georgia; font-size: 16px; color: white; padding-top: 5px; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 5px">kim raziel swift</div>
<div style="height: 200px; overflow: auto; font-family: Tahoma; font-size: 11px; line-height: 110%; color: #242424; text-align: justify; padding-right: 5px;">Humming softly to herself, Raziel made her way towards Half Blood Hill. Armed with only a shoulder bag containing essentials (including bottled water, ambrosia and of course, make-up), the daughter of Hyperion certainly didn't look like someone who was going on a dangerous mission to... what was it again? [i]Find some goddess' keys... or something like that,[/i] Raziel finished in her thoughts. Details, details. It wasn't her job to figure out the specifics of the quest. To tell the truth, what really drew her in was the company of her questgoers and not the quest itself - although she did appreciate the opportunity to deviate from the usual (and boring) camp routine she was subjected to during the past few years.

There was no denying the spring in her step as her black Vans padded across the ground. To say that Raziel was excited was an understatement. She had never felt more enthusiastic in her life. Panting a little, she finally reached the top of the hill. She smirked, catching sight of their [i]leader[/i] who seemed as disappointed as she was thrilled. Raziel had no idea how Athena Boy was roped into this kind of quest, much less how she actually ended up as one of his companions. All things considered, she was probably on the very bottom of the Conrad List of Possible Questers, no thanks to how their first meeting involved a laptop taking a sudden dip in the creek... [i]His 'laptop,'[/i] she remembered with a sly grin as she looked over his light-looking backpack. [i]He had better brought it along.[/i]

[color=goldenrod]"[i]I knew you were trouble when you walked in,[/i]"[/color] Raziel sang to announce her arrival, not caring if she suddenly woke Peleus up with the volume of her voice. Slowly removing the jet black Beats headphones from her ears and replacing them around her neck, she confidently strode up to Conrad and hooked her arm around his shoulders playfully. [color=goldenrod]"We're actually going on a quest together! Aren't you just [i]excited[/i], Athena Boy?"[/color] She laughed, an arm still slung around him, and glanced around hopefully. [color=goldenrod]"So... where's Kylee?"[/color]</div>
</div></center>

kim raziel swift

Humming softly to herself, Raziel made her way towards Half Blood Hill. Armed with only a shoulder bag containing essentials (including bottled water, ambrosia and of course, make-up), the daughter of Hyperion certainly didn't look like someone who was going on a dangerous mission to... what was it again? Find some goddess' keys... or something like that, Raziel finished in her thoughts. Details, details. It wasn't her job to figure out the specifics of the quest. To tell the truth, what really drew her in was the company of her questgoers and not the quest itself - although she did appreciate the opportunity to deviate from the usual (and boring) camp routine she was subjected to during the past few years.

There was no denying the spring in her step as her black Vans padded across the ground. To say that Raziel was excited was an understatement. She had never felt more enthusiastic in her life. Panting a little, she finally reached the top of the hill. She smirked, catching sight of their leader who seemed as disappointed as she was thrilled. Raziel had no idea how Athena Boy was roped into this kind of quest, much less how she actually ended up as one of his companions. All things considered, she was probably on the very bottom of the Conrad List of Possible Questers, no thanks to how their first meeting involved a laptop taking a sudden dip in the creek... His 'laptop,' she remembered with a sly grin as she looked over his light-looking backpack. He had better brought it along.

"I knew you were trouble when you walked in," Raziel sang to announce her arrival, not caring if she suddenly woke Peleus up with the volume of her voice. Slowly removing the jet black Beats headphones from her ears and replacing them around her neck, she confidently strode up to Conrad and hooked her arm around his shoulders playfully. "We're actually going on a quest together! Aren't you just excited, Athena Boy?" She laughed, an arm still slung around him, and glanced around hopefully. "So... where's Kylee?"

And how about that! The layout is done!

I wouldn't advise you to use the layout exactly as it is. I intended it to be more of a reference than an actual layout you should use. Try and tweak some of the colors or add a few new divs of your own to give it more designs. Don't be afraid to edit what you would like in the code and experiment, because how else will you learn? Even the best of us will screw up from time to time, so don't be afraid to try adjusting a few codes here and there just to see how it would affect the whole layout. To be honest, that's how I come up with most of my designs - by trial-and-error xD

I really hope you learned something from reading this tutorial. I tried to explain everything to the best of my ability but if you have any questions, feel free to post below or PM me and I'll get to answering it asap. Later! :D


I would like to thank Dean for letting me pick up where he left off in his last tutorial. I would also like to thank Crispy, Panda and Summer for reviewing this before it was officially posted. Last but not the least, I would like to thank Guest for reading! Thank you! c:

*If you took a code and edited it, no matter how much, credit still goes to the original owner unless stated otherwise.

Cher's right but if I put in this code:

Code:

<div style="width: 400px; height: 500px; background: white"></div>

and you guys add stuff and edit it in whatever way you want you want I promise I won't bite your head off for not giving me credit xD

Obviously though if you see a code and realize that the creator must've put in some effort designing it so it looks good and fancy and all that, have the courtesy to give him/her credit if you use and edit the stuff.

SO THAT IS HOW YOU DID IT. /off to experiment