Minecraft Blogs / Article

HTML Part 2: Colour and Text - Dozentorials

  • 215 views, 4 today
  • 2
  • 1
  • 3
Diamonddozen's Avatar Diamonddozen
Level 55 : Grandmaster Baconator
157
Welcome to another sitting of Dozentorials. Last time we learned about the four more basic tags: {html}, {head}, {body}, and {title}. Remember that you don't write your tags with the {} symbols. Always surround your tags with < and >

evrzopng
You want your website to have some fun in it right? Well then aren't you glad I cam around? Today I am going to teach all about colour and text. Everything from background colours to more intense things like the {font} tag. Now before we start don't forget to bring your website up. I forgot to mention this, but you can edit the tags with anything that displays text (except WordPad and Microsoft Office). So anything from Notepad to Notepad++. If you are going to take my suggestions I suggest you either use Notepad++ or Programmer's Notepad, because they are meant for editing code.

ntljpgGet Programmer's Notepad here.
tphjpgGet Notepad++ here.


gjjpg

The background is the first thing people are going to look at. Sure it may seem like they want to know what's up with the places you can actually click, but if they are anything like me the first thing they are going to do is look at the background. Most websites use a picture of some sort, but you will learn how to do that in part 3: Images and Borders.

So let's look at the code for this. How do you think we do this. "That's easy there's a background tag right?" No, not right. You will put the background in with the body tag. How do you do this you ask? You have to type it in like this: {body background-color=""} What's in between that those brackets is up to you. I'm going to put in red. To do this all you can type red or you can type a colour code. The colour code for red is #FFOOOO.
Code So Far
{html}
{head}
{title}My First Site{/title}
{/head}
{body background-color="#FF0000"}
{/body}
{/html}
You can put in any colour. Watch out, though, because some colours you HAVE to put in a colour code. A decent website I like to use for colour codes is HTML Color Codes.

karsmjpg
Hmm, maybe I should of called this viewing the site. Ah well, whatchya gonna do? Anyways, this is the easiest thing you are ever going to do. All you have to do is go into the file and double click on whatever you saved it as. Don't forget to save it as index.html or something.html. If you did it right your browser will pick it up. Now for some reason my background tag wasn't working. This happens quite a bit, but that's not a problem. You are going to learn the style tag early.

The Style tag is a tag that replaces CSS. CSS stands for Cascade Style Sheet. It's used for better design of your website. Spoiler alert the next tutorial series will be of CSS. How CSS works is quite simple really. There are certain things you have to input. Click on the spoiler and I will show you what you must do.
Code So Far
{html}
{head}
{title}My First Site{/title}
{style}
body{
background-color: #FF0000;}
{/style}
{/head}
{body background-color="#FF0000"}
{/body}
{/html}
{style} is another head tag. How CSS works is that you have to put the name of the thing you are styling and the style that, well, styles it.

cxigppng

That's the site so far. Nothing special. I blacked out some parts that don't need to be there.

bgfojpg
Now that we have our background we need some text. Did you know you can add colour to text as well? If you didn't it's simple you just need to use the font tag. If you want you can just change the font for one colour, or you can change the colour to be like I do for the banners. For the tutorial I will show you how to do both.When you are working with any text that will show up on screen it is best to use the {p} tag.
Text with one color
{html}
{head}
{title}My First Site{/title}
{style}
body{
background-color: #FF0000;}
{/style}
{/head}
{body background-color="#FF0000"}
{font color="black"}
{p}
Text.
{/p}
{/font}
{/body}
{/html}
This is the easier and more practical way. If you want to get crazy with you text you are going to have to type the {font} tag for every letter like so:
Text with Multiple colors
{html}
{head}
{title}My First Site{/title}
{style}
body{
background-color: #FF0000;}
{/style}
{/head}
{body background-color="#FF0000"}
{p}
T{font color="green"}e{/font}{font color="brown"}x{/font}{font color="white"}t{/font}
{/p}
{/body}
{/html}
So now you have funky coloured text. You can't see it can you? I'm going to make this my head text. Or the text that you see at the top. You can make it bigger by switching the color attribute with the size attribute like this:
Bigger Text
{html}
{head}
{title}My First Site{/title}
{style}
body{
background-color: #FF0000;}
{/style}
{/head}
{body background-color="#FF0000"}
{font size="50"}
{p}
T{font color="green"}e{/font}{font color="brown"}x{/font}{font color="white"}t{/font}
{/p}
{/font}
{/body}
{/html}
Okay we are at 50, but it just doesn't seem big enough. Let's try 76.
Bigger Text
{html}
{head}
{title}My First Site{/title}
{style}
body{
background-color: #FF0000;}
{/style}
{/head}
{body background-color="#FF0000"}
{font size="76"}
{p}
T{font color="green"}e{/font}{font color="brown"}x{/font}{font color="white"}t{/font}
{/p}
{/font}
{/body}
{/html}
A little bit bigger, but still not enough. How about 100? Turns out the highest you can go is 76. If you want any bigger you are going to have to make a picture, and I will show you how do add it next tutorial.

Let's move on. Now that you have the size right you can put it in the center. To do this just use the {center} tage.

Centered
{html}
{head}
{title}My First Site{/title}
{style}
body{
background-color: #FF0000;}
{/style}
{/head}
{body background-color="#FF0000"}
{center}
{font size="76"}
{p}
T{font color="green"}e{/font}{font color="brown"}x{/font}{font color="white"}t{/font}
{/p}
{/font}
{/body}
{/html}
Let's have a look-see at what we have so far.
olqqpng

Not bad. I think that's it for the tutorial.

If you want to support Dozentorials or any other of my Minecraft blogs just diamond them. If you want to keep track of my blogs hit the subscribe button. If you want to show some love hit that favourite button.

One last thing here are my social pages: @DiamondBlogPMC (Twitter), DiamondBlog (Facebook), Diamondblogifacation (first video Tuesday (Youtube), notsoromanianreviews (Skype), TanPics (DeviantArt)
If you want to read the entire series just click on one of these blogs:
Part 1: Tags
Part 2: Colour and Text <-- You are reading this one
Part 3: Images and Borders <-- Not out yet.
Tags

Create an account or sign in to comment.

1
09/08/2012 6:10 pm
Level 44 : Master Gent
Hydrian
Hydrian's Avatar
Not a bad tutorial
1
09/08/2012 10:29 pm
Level 55 : Grandmaster Baconator
Diamonddozen
Diamonddozen's Avatar
Thanks did you see part 1?
1
09/08/2012 11:16 pm
Level 44 : Master Gent
Hydrian
Hydrian's Avatar
No need to, already know what its about
Planet Minecraft

Website

© 2010 - 2024
www.planetminecraft.com

Welcome