An HTML Tutorial. (For Fancy Posts)

View previous topic View next topic Go down

An HTML Tutorial. (For Fancy Posts)

Post by Fray on Fri May 31, 2013 1:02 am

Alright so I am posting this little tutorial as it was requested. Please know this is just really basic stuff as I am no expert here. Not even close. Honestly I know very little... So I can't promise this will be very good, or will even make sense, but I will do my best. Also not sure the best place to post this since the fancy post section is actually locked... this seemed like the best bet. But lets get started...

So in this tutorial I am going to attempt to make a simple "fancy post" for you all, and when we are done it should look something like this...

Spoiler:


Ember

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.



So lets get started then...



So the first part of the code we are going to need it the div... dont ask me what it stands for because I couldn't tell you. But from what I understand it sets up the base for our post... adds a field I guess you could say. We are also going to want to center it. The center code for HTML is basically the same as BBC only between the carrots rather than the brackets. So lets put it in there... Again make sure to put it between the two sideways carrots! BBC uses brackets... HTML uses the carrots.

Code:
<center><div></div></center>


Obviously that's not going to get us very far... we need to give it dimensions... style... make it look pretty ya know? The way we start that is by taking our first
block and changing it to
.

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:


ember


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:


ember




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:


Ember

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.




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...


Last edited by Fray on Fri Oct 11, 2013 1:15 pm; edited 1 time in total

_________________
With my dearest love...

~Fray
avatar
Fray
Administrator

Join date : 2013-03-21
Posts : 164
Age : 23
Location : On a forum...

Personal Stats
Forum Activity: Active
RP Activity: Not Really Active
RP- Experience : ★★★★

http://rp-central.forumotion.com

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Brute on Sun Aug 04, 2013 8:12 am

YOU ARE SO AWESOME!!!!

_________________
94% of Girls would cry if justin Bieber were about to jump off a skyscraper. 6% would push him off, the grab popcorn and a camera and shout, "DO A FLIP!!!" Put this in your siggie if you are part of that 6%.
When life gives you lemons, make lemonade, but unless life also gives you sugar, your lemonade is going to suck. So, if life gives you lemons, throw them at Justin Bieber and or One Direction.

Click this for an awesome party song!!! =D 
COME ON, PEEPS!!! LET'S GET THIS PARTY STARTED!!!
avatar
Brute
Old Timer

Join date : 2013-05-03
Posts : 343
Age : 18
Location : Trying to get this site back up and rollin'!!!

Personal Stats
Forum Activity: Active
RP Activity: Active
RP- Experience : ★★★★★

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Tealight on Sun Aug 04, 2013 1:49 pm

I second that motion, Brute. Indeed I do.

....not that I could ever make a post that fancy @-@

Great job, Fray.
avatar
Tealight
Moderator

Join date : 2013-01-27
Posts : 556
Age : 18

Personal Stats
Forum Activity: Active
RP Activity: Active
RP- Experience : ★★★★

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by katy719 on Sun Aug 04, 2013 9:20 pm

Wow. I'm mostly just good at editing fancyposts. I'm better at the BBC version. Do you mind if I use this version? If you don't answer within a week, I will.


katy

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.

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.


_________________
A newbie and proud.
avatar
katy719
Newbie

Join date : 2013-03-19
Posts : 6
Location : The U.S. of A

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Fray on Tue Aug 06, 2013 4:55 pm

Haha thanks brute but I only know a tiny bit. And go ahead katy! I dont mind at all.

_________________
With my dearest love...

~Fray
avatar
Fray
Administrator

Join date : 2013-03-21
Posts : 164
Age : 23
Location : On a forum...

Personal Stats
Forum Activity: Active
RP Activity: Not Really Active
RP- Experience : ★★★★

http://rp-central.forumotion.com

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Brute on Tue Aug 06, 2013 9:03 pm

Well, my dad's an actual computer programmer and he has NO IDEA about this stuff!!! You're great!!! XD

_________________
94% of Girls would cry if justin Bieber were about to jump off a skyscraper. 6% would push him off, the grab popcorn and a camera and shout, "DO A FLIP!!!" Put this in your siggie if you are part of that 6%.
When life gives you lemons, make lemonade, but unless life also gives you sugar, your lemonade is going to suck. So, if life gives you lemons, throw them at Justin Bieber and or One Direction.

Click this for an awesome party song!!! =D 
COME ON, PEEPS!!! LET'S GET THIS PARTY STARTED!!!
avatar
Brute
Old Timer

Join date : 2013-05-03
Posts : 343
Age : 18
Location : Trying to get this site back up and rollin'!!!

Personal Stats
Forum Activity: Active
RP Activity: Active
RP- Experience : ★★★★★

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Guest on Tue Aug 06, 2013 10:18 pm

I keep trying that and mine comes out as... *insert choice word here*....

Guest
Guest


Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Fray on Tue Aug 06, 2013 10:57 pm

Haha Wolf... Thats only a simple one. Like I said Im not great with this stuff myself. Should see some of the ones Gaia/Selly/whatever shes called now, can make... its kinda amazing...

And thanks again Brute! Dont really think this has anything to do with computer programming though... no expert though.

_________________
With my dearest love...

~Fray
avatar
Fray
Administrator

Join date : 2013-03-21
Posts : 164
Age : 23
Location : On a forum...

Personal Stats
Forum Activity: Active
RP Activity: Not Really Active
RP- Experience : ★★★★

http://rp-central.forumotion.com

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Guest on Wed Aug 07, 2013 6:32 pm

I would love to see one of hers... shall have to ask next time I see her...

Guest
Guest


Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Fray on Thu Aug 08, 2013 10:59 pm

You should. Ill see if I can get one to display maybe, doubt she would allow it to be used though.

_________________
With my dearest love...

~Fray
avatar
Fray
Administrator

Join date : 2013-03-21
Posts : 164
Age : 23
Location : On a forum...

Personal Stats
Forum Activity: Active
RP Activity: Not Really Active
RP- Experience : ★★★★

http://rp-central.forumotion.com

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Fray on Mon Aug 12, 2013 3:31 pm

So I asked and have received permission to display one of the more amazing ones. It is apparently still being  worked on though I am not sure I see whats left that could possibly be done. This one may NOT be used. I am only allowed to show it.

Preview:
(c) Selly


Header

Not for free use.
Header
Not for free use.
Not for free use.
Not for free use.


Header
Not for free use.

Header
Not for free use.

Header
Not for free use.

Header
Not for free use.
Header
Not for free use.




_________________
With my dearest love...

~Fray
avatar
Fray
Administrator

Join date : 2013-03-21
Posts : 164
Age : 23
Location : On a forum...

Personal Stats
Forum Activity: Active
RP Activity: Not Really Active
RP- Experience : ★★★★

http://rp-central.forumotion.com

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Brute on Wed Aug 14, 2013 7:32 am

Boy, that's advanced.

*Brutality in awe

_________________
94% of Girls would cry if justin Bieber were about to jump off a skyscraper. 6% would push him off, the grab popcorn and a camera and shout, "DO A FLIP!!!" Put this in your siggie if you are part of that 6%.
When life gives you lemons, make lemonade, but unless life also gives you sugar, your lemonade is going to suck. So, if life gives you lemons, throw them at Justin Bieber and or One Direction.

Click this for an awesome party song!!! =D 
COME ON, PEEPS!!! LET'S GET THIS PARTY STARTED!!!
avatar
Brute
Old Timer

Join date : 2013-05-03
Posts : 343
Age : 18
Location : Trying to get this site back up and rollin'!!!

Personal Stats
Forum Activity: Active
RP Activity: Active
RP- Experience : ★★★★★

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Resaix on Wed Oct 02, 2013 11:21 am

Oh my gosh I love making things like that. Take me forever but I enjoy it. Could probably do something like the advanced one but only after months of work... months and months and months...
avatar
Resaix
Beginner

Join date : 2013-10-01
Posts : 50

http://rp-central.forumotion.com

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Fray on Thu Dec 12, 2013 5:52 pm

This is being moved to the Fancy Post forum which has now been reopened.

_________________
With my dearest love...

~Fray
avatar
Fray
Administrator

Join date : 2013-03-21
Posts : 164
Age : 23
Location : On a forum...

Personal Stats
Forum Activity: Active
RP Activity: Not Really Active
RP- Experience : ★★★★

http://rp-central.forumotion.com

Back to top Go down

Re: An HTML Tutorial. (For Fancy Posts)

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum