Blogskins Times

Sunday, June 25, 2006

How to make a basic blogskin PART I
Breaking down the elements covered in the tutorial

I've been wanting to make this quickie for awhile now, especially after snowflakes13 mentioned the whole idea. Well, HTML explanations aren't an easy task to break down let alone layout tutorials. Perhaps I was just too lazy. However, since I'm unable to sleep, I shall take the initiative to type out a basic layout tutorial. Where to start, where to end.

Must Read
We'll be focusing on the ever so common layout style- The div layer style AKA the never ending style. It'll basically be broken down using a sample of codes that I personally and frequently use. I'll explain the different elements that's used in the layout's coding. Shouldn't be too difficult. In this tutorial/guide, you are not required to have a website creating program (frontpage, dreamweaver..etc) nor are you required to have an indept knowledge of sprucing up dull pictures aka, no photoshop knowledge needed. All you need, is perhaps a basic of html, tags, maybe a knowledge on what CSS also known as Cascading Style Sheets.

No worries though, I'll be sure to detail everything. I hope :P But it shouldn't be difficult, because this is perhaps the simplest of layout coding you can ever come across without any advance addons of "I can't even bear to imagine the consequences of telling you people" type of codes :)

credits
I shall be quoting various websites such as,

http://www.htmlcodetutorial.com
powerelf-server-appliance.greencomputer.com
www.brontedesign.com
http://www.lissaexplains.com/

Break down of what I'll be going through, bare in mind, I'm not an html expert unfortunately -.- So please, bear with me. I'm trying as best as I could now.

What is HTML?

HyperText Markup Language.
Our main element for any layout, or 'skins' alike.
No idea what the heck that means? Neither do I! Let's take a look at the source I copied and pasted from powerelf-server-appliance.greencomputer.com/solutions/glossary.shtml

"HTML is a set of codes that are displayed over a web browser. It is a guide for the browser with instructions on how the page is set-up, where and how text and graphics should be placed."

See? In other words, HTML would determine where your contents go, even alter the size of your graphics, align the different tables and layers according to your taste as well as change the overall outlook and basic design of your layout such as your text's font, size, color, your layout's background color as well as the title of your layout. What I mean by title? If you look at the top of your browser, you'll see "Blogskins Times". Yes, you'll be able to alter those as well.

However, your layout does not completely rely on HTML itself. Which brings us to the next element.

What is CSS?

Cascading Style Sheet.
I shall quote out of www.brontedesign.com/glossary.asp

"A new feature being added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These Style Sheets can then be applied to any Web page."

Easily said, CSS is an easier way to control the outlook of your links and contents. It saves you the hassle of adjusting the color, font, size of every section word by word. CSS would automatically adjust all that for you with the correct div tags added in for each individual section/text. We'll head on to how CSS is used later on in the guide.

With CSS and HTML explained, we still dont' know where our contents go!!?? Hence I introduce to you, Div Layers

What are Div Layers?

Quoted from http://www.lissaexplains.com/

"A div element is a block of content that can be positioned anywhere on your site by using absolute positioning and the div tag. The purpose of div elements is to hold content, whereas frames hold pages. This content can be placed anywhere on your site and it can even overlap. The content can consist of images or html. All of the style elements like scrollbar color and font color can be controlled by a simple style sheet."

Simply put, you can use DIV LAYERS to align your contents, it's also the 'box' where you place all your contents in. You can use DIV tags to apply CSS to your content, and also to specifically align your objects on specific coordinates. For example, you can adjust your div block(box) to be in the center, OR you can adjust it so that it only moves 20px from the extreme left of your screen. You are also given the ability to apply filters using your DIV tags, such as filtering out colors of scrollbars which are frequently used for transparency, or you can also apply filters that alter the opacity of your content 'box'. We'll touch on this when we use a full sample of a layout code.

Do you have an understanding of the basic elements involved in "Divide Layer" skins now? Try to digest all that for now. It is possibly the easiest to learn other than Mapping. What will we be covering in the next section of this layout tutorial? Let me do a quick breakdown.

1. We'd be understanding the basic build of a layout, slowly using the below example and building it into a basic skin, learning at the same time of course.

<HTML>
<HEAD>
<TITLE>Your Page Title</TITLE>
</HEAD>
<BODY>

This area will contain all your div layers and contents whatsoever.
CSS style sheets shall be between the above TITLE and /HEAD tags

</BODY>
</HTML>

2. I'll also be showing you what CSS is often made up of and how you can ~~abuse~~ make good use of CSS.

3. A real sample of the end product that the tutorial should lead you to produce.

4. Many more things that you'll just have to check back to know :)

Hope you learnt something. Yes, I suck at this. Oh well.

Anonymous.
update @ 2:41 AM

Remember you drop us a comment!

The ones who spoke:

where's the rest of the tutorial?

Said

Anonymous @ 29 July, 2006 21:47

Contributors