domenica 21 agosto 2011

HTML / CSS – Site Layout (Part 1/2)

website layout1 HTML / CSS Site Layout (Part 1/2)


Are you ready ? Good because it’s now that everything’s going to start coming together. Up until now you could follow my small examples and invent your own but you still couldn’t create a web site.
The 2 chapters that you are now going to read are the turning point in these lessons : after this, you’ll be able to design your own web site with its design and everything ! icon biggrin HTML / CSS Site Layout (Part 1/2) And for those who are scared of not being able to manage don’t worry : I’m not going to abandon you. I’ve already planned to show you the whole process in a complete web design exercise icon biggrin HTML / CSS Site Layout (Part 1/2)


The title of this chapter says quite a lot. We’ll be setting up our web site, which means it’ll soon be ready !
And, as I’ve thought that some of you may not have listened properly when I was talking about the inline / block tags, I don’t think it would hurt to quickly see what they are again icon wink HTML / CSS Site Layout (Part 1/2)


All the way through the previous chapters, I kept on saying inline and blocks. I insisted on the fact that it was important to understand, because a lot would be based around it after.
Well, guess what, it’s now that understanding the difference is important. If you can’t tell the difference between an inline tag and a block tag, you will quickly be unsettled. Therefore don’t hate me for this small reminder icon wink HTML / CSS Site Layout (Part 1/2)

Euhh, what are we talking about here ?


We’re talking about tags. We can class XHTML tags in one of these two categories : inline and block.
What I’m expecting of you is that you know if a tag is inline or block.


For example,

?
Yes, it’s a block tag.
And ?
That’s an inline tag.

But how do I recognise an inline tag or a block tag ?


In fact, it’s easy enough to understand :

block : a block type tag will automatically create a new line before and after itself. Your website will be created with a series of blocks, one placed after the other. But you will see as well that it’s possible to put one block inside another, which will give us considerably more possibilities to create our site !inline : a tag of th type inline has to be placed inside a block. An inline tag doesn’t create a new line after, the text inside it therefore just goes after the existing text in the block which explains why it’s called inline (on the same line).

Does

start a new line ?
Yes, it’s therfore a block tag.
Does start a new line ?
No, the text just puts itself next to what is already written, it stays on the same line. It’s therefore an inline tag.


Easy, isn’t it ? icon biggrin HTML / CSS Site Layout (Part 1/2)


For those who are still having problems, here’s a quick diagram I made. This diagram illustrates how I see things :

block inline diagram HTML / CSS Site Layout (Part 1/2)


On the blue background is everything that is type block. On the yellow background is an inline tag. I could have put a block inside a block but I don’t want to compicate things too much for the moment icon wink HTML / CSS Site Layout (Part 1/2) The inline tag is inside a block tag (which I said was necessary), and the text is written on the same line. In fact, like on this image, you can ask yourself can go inside such a tag ? If the answer is yes then the tag is a block, if not it’s inline.


To help you recognise inline tags and block tags, here’s a small table with some of the most common tags :



This table is not complete, it’s far from it. If you want to have the complete list of tags that exist, go to our annexe containing all the tags.


You already know them because I presented them a few chapters ago. These tags don’t do anything in particular (differently to

which is a paragraph, which is important etc…).
The main interest of these tags is that we can apply a class (or id) to them when no other tag is convenient.


There are 2 generic tags, and as if by pure luck the only difference between them is that one is inline and the other block :


(inline) : we’ve already used it if you remember. I used it to show you a few CSS properties in the middle of a line. Do you remember the following code ?


Code : HTML


As Neil Armstrong said on 20 July 1969...


If there was an XHTML tag I would have used it. But as that’s not the case I had to use and apply a class to it that I invented (name).


(block) : this tag, like span, doesn’t have any particular meaning. I personally think of it as an invisible box used to do whatever you wish. In the following chapters we will use it a lot, namely for creating the design of your web site. You will see that a design, in fact, is a series of blocks placed as we want.

Universal tags are useful in certain cases, but don’t abuse them. I’ll warn you now : a lot of webmasters use

and too often and forget that other, more adapted tags exist.
Here are 2 examples :


Example of a useless span :
I should never see in one of your codes :

…when exists for that purpose !


Example of a useless div :
In the same way, this is completely useless :


…as there already exists tags made especially for titles (



…)


Yes, but you’ll say that the final result (visually) is the same.. I agree completely.
But, whereas the tags span and div don’t mean anything in particular, the tags strong and h1 do have a meaning. Strong means important and h1 means main title. These tags are therefore important for Google and other search engines !


In XHTML, we ask that you use meaningful tags as often as possible. We call it respecting the semantics.
The advantage is that, by respecting this, your code will have "logic". When Google’s robots reference your site, they will understand the meaning of the tags which will make your search engine rankings better icon biggrin HTML / CSS Site Layout (Part 1/2)


For the moment we’ll only work on block tags.


To start with, we’ll look at the size of the blocks. Differently to an inline, a block has precise dimensions. It has a width and a height.
Which means that, what a surprise, we have 2 CSS properties :

width : the width of the block. It can be given in pixels (px) or as a percentage (%)height : the height of the block. Once again it can be given in px or %.

By default, and it’s very important to know this, a block uses 100% of the available width. Look for example at this XHTML code that doesn’t use any CSS properties.


Code : HTML


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.


If you copy the code into a HTML document you’ll notice that the paragraph takes the whole width of the screen (like all the other block tags).
Now let’s add a bit of CSS to modify the width of our paragraphs. The following CSS says "I want my paragraphs to use half of the available space" :


Code : CSS

p { width: 50%; text-align: justify; /* Justified text to better see the width that's used */}

Let’s test the code on the previous HTML code. You’ll see that the paragraph now uses half of the screen !


Percentages are very useful for making sites that adapt themselves automatically to the resolution of your visitor’s screen.
However, you may need a size in pixels :


Code : CSS

p { width: 250px; text-align: justify;}

It will also be useful for you to tell your blocks to have a maximum or minimum size. It’s here that the following 4 CSS properties come into play :

min-width : minimum widthmin-height : minimum heightmax-width : maximum widthmax-height : maximum height

Be careful however, the properties don’t work at all on Internet Explorer 6, and only partially on IE7.


Let’s suppose that you have a very long paragraph and you want (for a reason that only concerns you), that it’s 250px wide and 100px high.


Code : CSS

p { width: 250px; height: 100px; text-align: justify;}Wait, I thought the paragraph would be 100px high !?


Yes, but if the text doesn’t have enough room, the block will enlarge itself to make all the text visible. If you want to cut your paragraph so that it has an exact dimension of 250×100, you’ll need to use the CSS property overflow.
The values that overflow can take are :

visible (by default) : if the text goes over the size limits, the block will be enlarged to make everything visible.hidden : if the text goes over the limits it will be cut off. You won’t be able to see the rest of itscroll : here again the text will be cut off if it goes over the limits. However, this time the browser will add scroll bars so that you can see the text. It’s a bit like a frame inside a page.auto : automatic pilot mode icon lol HTML / CSS Site Layout (Part 1/2) . Your bowser decides whether or not to put scroll bars (they will be added if needed).

With CSS we can test overflow :


Code : CSS

p { /* All the paragraphs will have these properties */ width: 250px; height: 100px; text-align: justify;}/* And each of the paragraphs will have one of the following properties */.cut { overflow: hidden;}.scroll-bars { overflow: scroll;}.auto { overflow: auto;}

Code : HTML


overflow: hidden


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.


overflow: scroll


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.


overflow: auto


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.


With hidden we can’t see the text at all.
With scroll, horizontal and vertical bars have been added (even though we don’t need a horizontal one).
In auto, the browser has thought I don’t need a horizonatal scroll bar and taken it away.
As you may have guessed, mainly we use overflow:auto when making websites and we want to limit the size of the text boxes.
overflow can be useful if you wish to create frames inside your web page.

There exists an old HTML tag

Nessun commento:

Posta un commento