Yes, this thread is a tutorial on how to make a blogskin.
Here goes...

How do I make a blogskin?
To the average blogger, a blogskin is made of random text that nobody understands.
But however, blogskins are not random text. It is a code called HTML.
First, you must know HTML, and a bit of CSS. Most schools teach this by Secondary One,
so if you don't know anything about HTML, perhaps borrow a book or something.

What is HTML/CSS and what does it do?
HTML basically is text that tells the browser (Internet Explorer, Firefox, Etc.) how to
show the page you are viewing. CSS is a kind of style. Without CSS, plain HTML would look
very, very boring.

Ok, enough talk. I want to LEARN how to make a blogskin.
Firstly, you need to know some HTML tags and their properties.

Okay, here goes...

Each HTML tag is contained inside angled brackets <>.
Basically a tag has a start and an end.
A start tag looks like this: <This is a starting tag>
and an ending tag looks like this: </this is an ending tag>
So the difference is only the slash.

So, if I were to describe a typical person using HTML, it would be like this.

<person>
<head>
</head>
<body>
</body>
<legs>
</legs>
</person>

So you can see that the <person> tag wraps up all the content inside it.
Hope this example can clear up the mess.

So, like the example above, HTML uses tags.
A typical HTML document looks like this:

<HTML>
<head>
</head>
<body>
</body>
</HTML>

Yes. A HTML document does not have the 'legs' part of the example above.
So what is applied to the <HTML> tag is also applied to the <head>
and <body> tags, simply because the <HTML> tag wraps around both tags.
If a tag were to be outside any other tag, the rule will not be applied to that tag.

To make it simpler, imagine this.
A rule is like a special order for that ingredient.
Just read below.

A super unhealthy BURGER.
=================================
BUN (+ oil)
MEAT (+ salt)
VEGGIE (rotten)
CHEESE (smelly)
TOMATO (spicy)
/TOMATO
/CHEESE
/VEGGIE
/MEAT
/BUN
=================================

Okay. let's explain this. In HTML, it goes like this.

SINCE the MEAT, VEGGIE, CHEESE and TOMATO are inside the bun, they all get (+ oil).
SINCE the VEGGIE, CHEESE and TOMATO are wedged in between the MEAT, they get (+ salt).
SINCE THE CHEESE and TOMATO are wrapped inside the VEGGIE, they are (rotten).
SINCE the TOMATO is inside the CHEESE, the TOMATO is (smelly).
BUT HOWEVER, NOTHING IS INSIDE THE TOMATO, SO ONLY THE TOMATO IS SPICY.

GEDDIT? (:
If you don't, hmm maybe try reading until you understand.


Here are some common HTML tags to help you:

HTML TAGS
<html> The opening of ANY HTML document.
<head> The "head" of a HTML document, inside you can place STYLE and SCRIPT tags.
<body> The "body" of a HTML document, here is where the general interface is.
<style> Defines the style of a HTML, like colours of LINKS or BACKGROUNDS.
<script> You can put javascript content inside.
<br> A break tag, use it to go down a line when editing.
<li> List tag, use it when you are making lists.
<ul> An unordered list. Numbers, etc.
<div> This tag defines a division or a section in an HTML document.
<h1> to <h6> headers. h1 (largest heading) h6 (smallest heading).
<font> defines font elements.
<b> Bold.
<u> Underline.
<i> Italics.
<s> Strikeout.
<a> The starting of a Link tag.

====================================================================
CSS
CSS stands for Cascading Style Sheets. CSS is very flexible and allows
the designer to create dynamic and pleasing pages.

Here is a tutorial on CSS.

All CSS is put in the <head> section of the page.
Remember that a CSS always starts with a HTML tag to define what it is.
Most people will use this tag.

<style type="text/css">

So every style sheet starts with this HTML tag. Inside the style sheet,
the format is totally different from normal HTML. One thing, it's easier to understand.
With CSS, you can do ANYTHING with a page. You will be able to define colours, images and
positions. So let's start!

Let's say you want to make the background of a div (called stupiddiv) tag red, the width set to 100px; and the font colur white, and add a black border, with the text in the center, the stylesheet would look like this.

<style type="text/css">

#stupiddiv{
background-color: red;
color: white;
border: 3px solid black;
width: 100px
text-align: center
}

</style>

Yes, even the stylesheet needs a closing tag. As you can see, you can name a div anything you want.
the # sign is known as a selector. Basically it tells the browser what the style is applied to.
The two most common selectors are .(class) and #(id).
There is no difference between them, except that class can be applied more than once on many elements.
So, if I were to take the example stylesheet above, and apply it to the div below, it would work.

<div id="stupiddiv">HELLO</div>

It would turn out like this:

HELLO



So, to make an entire PROFILE COLUMN, this is how to do it.


<HTML>
<head>
<style type="text/css">

#profile{
background-color: ivory;
color: black;
font-family: arial;
font-size: 11px;
width:200px;
border:3px solid black;
padding:3px; }

.head{
background-color: gray;
font-weight:bold;
color:black;
font-family:century gothic;
font-size: 12px;
border-bottom: 3px solid yellow;
}

</style>
</head>
<body>
<div id="profile">
<div class="head">
Profile
</div>
Hi my name is blah.
<div class="head">
Links
</div>
links here
<div class="head">
Tagboard
</div>
cbox here
<div class="head">
Archive
</div>
archive here

And the result would be:

Profile
Hi my name is blah.

Links
links here

Tagboard
cbox here

Archive
archive here



Yes, so now you have learned CSS!


Resources
Image Hosting
PhotoBucket
ImageShack
TinyPic
Flickr

Hexadecimal Color Codes
Html-color-codes.com
Html-color-codes.info
HtmlColorCodes.org

Help and Reference
W3Schools HTML Help
W3Schools CSS Help

Bloghosts
Blogger/Blogspot
LiveJournal
WordPress
Webs (Previously Freewebs)

Image Sites
DeviantArt
PhotoBucket
ImageShack
TinyPic
Flickr

Note: Remember to ask for permission from DeviantArt users.
Image hosting sites can be used for browsing too.

Complied © 2009 iLoveNotepad