An HTML Tutorial. (For Fancy Posts)

.

Code:

<center><div style=></div></center>

This will set us up to style the post. The dimensions, background, other fields and so on... You could do a lot with this. But lets keep it simple shall we?



First comes the dimensions... First width then height. Be sure to put the dimension px. For this example we are going to use width 450 and height 500.

Code:

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

Alright so now we're getting somewhere. Not much maybe but its turning into something. Lets get a background now shall we? We'll insert it right after the height.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://www.derekwarden.com/Portfolio_files/Red_Background.jpg)"></div></center>

And guess what? If we were to take a peek, there would actually be something to display now... and it would look something like this...

Spoiler:

How about a boarder now? Well, the boarder is going to be the last section in the first part of our code here... we'll take care of the color, its thickness, and the distance from the boarder to the picture and text box. We call that the padding... assuming you understood what I was trying to say. Im not fully sure I did... Anyway we are going to put a 10px boarder with 10px padding.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://www.derekwarden.com/Portfolio_files/Red_Background.jpg); border: #530000 10px solid; padding: 10px 10px 10px 10px"></div></center>

And now it should look something like this...

Spoiler:

Next comes the picture, assuming you want/have one. The code to insert would be with the link to your picture between the quotation marks.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://www.derekwarden.com/Portfolio_files/Red_Background.jpg); border: #530000 10px solid; padding: 10px 10px 10px 10px"><img src="http://www.scenicreflections.com/ithumbs/Wolf%20Sleeping%20in%20Flowers%20Wallpaper__yvt2.jpeg"></div></center>

It's now starting to look like something right?

Spoiler:

Alright so our next section of code will add the little name banner... For this we want to start a new block. This means a new div... Be sure to put it before the ending div and center... It wont be in the same block otherwise. Anyway obviously we only want a small section here. So we have to make our dimensions smaller. Lets go with a 20px height. We don't have to worry about the width on this. That first section of coding sets the limit on how wide it can go. So here we go... you may want to insert a space or two in the code so as to make things easier to view.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://www.derekwarden.com/Portfolio_files/Red_Background.jpg); border: #530000 10px solid; padding: 10px 10px 10px 10px"><img src="http://www.scenicreflections.com/ithumbs/Wolf%20Sleeping%20in%20Flowers%20Wallpaper__yvt2.jpeg">

<div style="height: 20px;"></div>
</div></center>

There wont be any visible difference with just that so I'm not going to bother with a preview. Lets add a background first. For this one I just did the same color as the boarder.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://www.derekwarden.com/Portfolio_files/Red_Background.jpg); border: #530000 10px solid; padding: 10px 10px 10px 10px"><img src="http://www.scenicreflections.com/ithumbs/Wolf%20Sleeping%20in%20Flowers%20Wallpaper__yvt2.jpeg">

<div style="height: 20px; background: #530000;"></div>
</div></center>

Now it will look like this...

Spoiler:

Next we would take care of font, font size, coloring, padding, and other details. Lets just start with font, size, and coloring. We're going to use Georgia, size 16, and we are going to color it white since that will show nicely on the red. Lets also put in some text so you can preview it properly.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://www.derekwarden.com/Portfolio_files/Red_Background.jpg); border: #530000 10px solid; padding: 10px 10px 10px 10px"><img src="http://www.scenicreflections.com/ithumbs/Wolf%20Sleeping%20in%20Flowers%20Wallpaper__yvt2.jpeg">

<div style="height: 20px; background: #530000; font-family: Georgia; font-size: 16px; color: white;>ember</div>
</div></center>

It will now look like this...

Spoiler:

Lets add some more details now. For one the text goes right up to the edges of the box, or just about so lets add some padding. Obviously this box isn't very big so we are only going to do 5px. You may also have noticed I put the text in all lowercase... Now I could fix that, or I could put something in the code to fix it for me. We are also going to space the letters some...

Code:

<center><div style="width: 450px; height: 500px; background: url(http://www.derekwarden.com/Portfolio_files/Red_Background.jpg); border: #530000 10px solid; padding: 10px 10px 10px 10px"><img src="http://www.scenicreflections.com/ithumbs/Wolf%20Sleeping%20in%20Flowers%20Wallpaper__yvt2.jpeg">

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

It now looks like this...

Spoiler:

We're on the last part now... the text box. For this we want to start yet another div box and we are going to put its height at 180 so as to bring it right up to the boarder but not over. Again don't worry about width.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://www.derekwarden.com/Portfolio_files/Red_Background.jpg); border: #530000 10px solid; padding: 10px 10px 10px 10px"><img src="http://www.scenicreflections.com/ithumbs/Wolf%20Sleeping%20in%20Flowers%20Wallpaper__yvt2.jpeg">

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

Wont bother with much preview on this step since there isn't really anything new to show. So lets move on shall we?



Basically the rest of this section includes the font, size, text aligning, text color, padding. We aren't going to put in a background. And since we aren't putting it in it will be transparent. I am sure you could put in another background if you wanted... honestly I have never done that though. I may try it at a later date...However one new thing we do want to add is overflow... so that on those particularly long posts a scroll box will automatically appear. We want to put that right after the height... We also want to add line-height, which from what I can tell has to do with spacing... So lets get to it.

Code:

<center><div style="width: 450px; height: 500px; background: url(http://www.derekwarden.com/Portfolio_files/Red_Background.jpg); border: #530000 10px solid; padding: 10px 10px 10px 10px"><img src="http://www.scenicreflections.com/ithumbs/Wolf%20Sleeping%20in%20Flowers%20Wallpaper__yvt2.jpeg">

<div style="height: 20px; background: #530000; font-family: Georgia; font-size: 16px; color: white; padding-top: 5px; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 5px">Ember</div>
<div style="height: 180px; overflow: auto; font-family: Tahoma; font-size: 11px; line-height: 110%; color: white; text-align: justify; padding-right: 5px;">Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here.

Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here.

Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here. Your text here.</div>
</div></center>

And voila! You have finished your HTML and have your fancy post all ready to go!

Spoiler:

Well I hope that was easy enough to follow... And made sense... If not. Well I did warn you ahead of time it probably wouldn't be very good...