Noivian
Drinker of coffees
[COLOR= green]For beginners, by a beginner.[/COLOR]
[COLOR= green]They say the best way to learn is to teach. So I decided to make this little thing to help out people who don't want to go off-site to learn some basic HTML. I personally learned from other people and from dissecting code, as well as using w3schools.com for reference. In this tutorial, we'll be going over some basics, making boxes and borders, and using backgrounds. There's a lot of fancy things one can do with HTML, but I'm not the best person to teach you that.
First, let's take a look at the code itself, and pick apart what exactly we're looking at. Below is the code for the box, or div, I'm currently using. [/COLOR]
<div style="border: 10px solid orchid; padding: 50px; text-align: center;">
<span style="color: green; font-size: 20px;">For beginners, by a beginner.</span>
</div>
The first thing you should notice about the code above is that I've gone ahead and color coded some of it for you.
We'll start off with the red words and symbols. This is basically just what you need to start and end with if you want to make a div. Over time, it'll become second nature to type these out. The <> work just the same as [], only they're slightly more of a pain to type out. Oh, well. Note that there is quotations around the next few groups of words. This is very important, and if you don't have this it WILL mess you up.
Secondly, we have the blue words. These define the border of the div, much like how the BBCode [border] did. You're going to enter specifications for the border in order of: width style color;. The width is usually in pixels, or px, and it's generally much easier to code with than inches or centimeters. It's extremely important that you include the punctuation while you code, putting a colon : after what you want to modify and a semicolon ; after you define how you want it to change (otherwise known as values). Again, if you don't have these, it WILL mess you up.
The purple and orange words work the same mechanically as the blue words, the only difference being what they change and what kind of values you put in for them. Padding refers to the distance between the words and the edge of the div, and is measured in px. Text-align refers to where the text is centered to; you would either enter left, right, or center. For my div, I decided to make the text centered.
The golden words is basically the code that allows you to put text in your div instead of doing more coding. There's no real equivalent for this in BBCode that I know of. You can also use the shorthand <p>words</p> if you don't want anything fancy with your text. The text that you want to show up inside your div would be between the beginning <span> or <p> and the end </span> or </p>. Don't forget to add your ending </div> after your ending </span> or </p>, otherwise your words won't be in your div.
Some more bits for your div include adding background, which is defined with "background: (color name or hex code);". You can also put span options in between the quotation marks for your div so you don't have to keep typing out <span style="color: blue; text-align: right;"> every time you need a new line of text. Speaking of new lines, HTML doesn't register enter presses as new lines when you're trying to add spaces between your paragraphs. You need to use </br> which is basically the code equivalent of an enter press.
That's pretty simple, right? There's a lot more fancy things you can do with divs and HTML, and I highly recommend checking out w3schools.com for more coding tips. Or feel free to ask around, or ask me! I wouldn't be against looking up things for anyone. If something is unclear, go ahead and ask, either here or in PM is fine with me.
Note! This tutorial does not by any means encompass everything you can do with HTML or CSS. I highly recommend poking around other tutorials and sites, and picking apart code of posts that you like.
View full tutorial
[COLOR= green]They say the best way to learn is to teach. So I decided to make this little thing to help out people who don't want to go off-site to learn some basic HTML. I personally learned from other people and from dissecting code, as well as using w3schools.com for reference. In this tutorial, we'll be going over some basics, making boxes and borders, and using backgrounds. There's a lot of fancy things one can do with HTML, but I'm not the best person to teach you that.
First, let's take a look at the code itself, and pick apart what exactly we're looking at. Below is the code for the box, or div, I'm currently using. [/COLOR]
<div style="border: 10px solid orchid; padding: 50px; text-align: center;">
<span style="color: green; font-size: 20px;">For beginners, by a beginner.</span>
</div>
The first thing you should notice about the code above is that I've gone ahead and color coded some of it for you.
We'll start off with the red words and symbols. This is basically just what you need to start and end with if you want to make a div. Over time, it'll become second nature to type these out. The <> work just the same as [], only they're slightly more of a pain to type out. Oh, well. Note that there is quotations around the next few groups of words. This is very important, and if you don't have this it WILL mess you up.
Secondly, we have the blue words. These define the border of the div, much like how the BBCode [border] did. You're going to enter specifications for the border in order of: width style color;. The width is usually in pixels, or px, and it's generally much easier to code with than inches or centimeters. It's extremely important that you include the punctuation while you code, putting a colon : after what you want to modify and a semicolon ; after you define how you want it to change (otherwise known as values). Again, if you don't have these, it WILL mess you up.
The purple and orange words work the same mechanically as the blue words, the only difference being what they change and what kind of values you put in for them. Padding refers to the distance between the words and the edge of the div, and is measured in px. Text-align refers to where the text is centered to; you would either enter left, right, or center. For my div, I decided to make the text centered.
The golden words is basically the code that allows you to put text in your div instead of doing more coding. There's no real equivalent for this in BBCode that I know of. You can also use the shorthand <p>words</p> if you don't want anything fancy with your text. The text that you want to show up inside your div would be between the beginning <span> or <p> and the end </span> or </p>. Don't forget to add your ending </div> after your ending </span> or </p>, otherwise your words won't be in your div.
Some more bits for your div include adding background, which is defined with "background: (color name or hex code);". You can also put span options in between the quotation marks for your div so you don't have to keep typing out <span style="color: blue; text-align: right;"> every time you need a new line of text. Speaking of new lines, HTML doesn't register enter presses as new lines when you're trying to add spaces between your paragraphs. You need to use </br> which is basically the code equivalent of an enter press.
That's pretty simple, right? There's a lot more fancy things you can do with divs and HTML, and I highly recommend checking out w3schools.com for more coding tips. Or feel free to ask around, or ask me! I wouldn't be against looking up things for anyone. If something is unclear, go ahead and ask, either here or in PM is fine with me.
Note! This tutorial does not by any means encompass everything you can do with HTML or CSS. I highly recommend poking around other tutorials and sites, and picking apart code of posts that you like.
View full tutorial