Xhtml css School

[Arbalest]

hello everyone
Here is the first chapter of this tutorial for beginners that will teach you to create your own website!

This tutorial will let you learn how to create a website from A to Z.
You'll discover 2 computer languages, called XHTML & CSS. They are the ones that you will create your website.
First let me explain what's xhtml and css:

To create a website, you must indicate
information to the computer. It is not enough
Simply type the text that will be in its site,
must also be able to place the text, insert images,
make connections, etc. ...
To explain to the computer what you want, it will
have to use a language he understands.

There are languages that are used to create programs, such as C + + or Java. These languages
are still complex and for people who already have some computer knowledge.
XHTML and CSS, they serve precisely create websites, and they have been created so
be simple to use. My role will be to teach you how to use them.

It is true that when I tell you that you will learn 2 languages at once, you wonder if it is not already too much for you.
Do not worry, you will report as and as everything was very well thought out. Each of these 2 languages used to do something specific, and the two complement each other naturally in the end give a website:
XHTML: it stands for eXtensible HyperText Markup Language. Between us, if you do not remember what it means, it will not prevent you from sleeping .
This XHTML is one with which you type the content of your website. It contains logical information: for example you say "This is my title, this is my menu, there is the main text of the page, here is a picture etc. etc. ...".

You may have also heard of HTML. In fact, XHTML and HTML are very similar and can both be used to create web pages. They are virtually identical. XHTML works on rules, however a little more strict than HTML.
In short, if you know programming in XHTML, then you know how to program in HTML. That's why we study this tutorial in XHTML.

CSS: it is the abbreviation for Cascading Style Sheets ( "Stylesheet"). This language serves only to present the web page. In CSS we say: "My credentials are in red and underlined, my text is in Arial, my name is centered, my menu has a white background ..." etc. etc..
With this language, we will be able to quickly and simply the layout of your site. We may as well give it a nice presentation, without being experts in graphics (and they're not alone, because me too my knowledge of design is bellow 0)

In summary, it uses:
XHTML to write the content of our web pages.
CSS to present the content.

These languages are complementary, the two go hand in hand. If you remember that XHTML is used to enter the content and CSS to present this, then believe me, you already understand 95% of principle!

In the first part of this tutorial, however, we will not talk about following CSS. It will not do that XHTML, because that is where to start.
Without CSS, you'll be able to make your first web pages. They are quite ugly, but patience ... Once you get to Part II of this tutorial, we introduce the CSS, and you'll see all of a sudden embellish your web pages (almost) effortlessly.

note: xhtml and serve to make a static web site:
A static website is a site where each page
is created in HTML. A computer that connects to
server, requests a page. The latter is directly
served (it is stored ready on the server)


In contrast, a dynamic website is a website
whose pages are generated dynamically on demand.
The content is obtained (for example) by combining
using a scripting language or
programming and database. It is often
PHP for language and MySQL database.

A question you should be sure you have asked is: "What software will I need to create my website?"

In fact, software that can create a website, there are tons.
But why pick a shareware software and complicated, then you already have everything you need in your home?

Yes, brace yourself because ... well it is Notepad!
Believe me if you want, but this software is more than sufficient to create a website!
If you have a Mac, you probably have a similar software: a text editor simple.

Well, in theory, therefore, Notepad will suffice.
But with a little research, I discovered a really useful software that helps a lot in color automatically XHTML / CSS. it's a simple free software called [URL="http://sourceforge.net/projects/notepad-plus/files/notepad%2B%2B%20releases%20binary/npp%205.6.6%20bin/npp.5.6.6.Installer.exe/download"]notepad++[/URL].
look at the image how the tags are in color and take a look at the line i selected with mouse how its each part is colorized,later it will help keep the code clean and clear to see , the part that's not colorized mean its wrong

with this i'm done with the introduction, so let's get started ,i'm gonna make separated lessons xhtml and css so i'm gonna keep going with xhtml once i'm done with it i'll move on with css:

Indeed in an XHTML page, more text, you'll find another element among these are the tags.
A tag begins with "<" and ends with ">". For example:
<tag>

The tags are invisible to the visitor, they serve as markers to indicate something to the browser. For example, a tag can specify that this text is the title of your page, another text is a quote etc etc ...

There are 2 types of tags: Some tags always appear in pairs, others are contrary to their own.
The existing pair tags: what are the most common. We wrote the first tag, you type text, then "strong" tag in the rewriting with a slash before "/". For example:

<title>Welcome in xpam school</title>

to know what it do take a look at the arrow drown in the image

The first <title> tag indicates the beginning of the title, and is further closed with </title>.
The browser includes what is between <title> and </title> is the title of your website,
The tags themselves: they are kinda rare, but there nonetheless. It is used in general to insert an element in a page.
This type of tag always ends with a slash "/", but this time the slash is at the end of the tag. For example, the tag that can insert an image:

<img />

notice i made a space don't forget it, later you'll see it's a basic knowlge.

Attributes:
Attributes are a means to report on a tag. You can find attribute on both types of tags (in pairs or alone).
For example, take the tag only <image />. It is fine to say that inserts an image, but does it indicate which one. We'll do that with an attribute:

<image name="sun.jpg" />

Here, the attribute is "name", and it is set to "sun.jpg". This indicates that the image you want to insert called "sun.jpg" simply.
note: this attribute doesn't exist i just made it to make an example ^^
so let's make a test how to make a code ,saving it and getting your first page: with few words let's prepare a <page.html>
first copy paste this code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>welcome in my site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>

then in notepad++ go to the menu select language => H =>HTML
with this u'll see your code colorized,now go to Files=>Save as and type for example test.html i advise you to file a new file in c:// named site in which u will save your test pages to evoid the mess in your desktop, once it's done just go to that file and double click on it and it will give something like this:

you propably noticed there is too much words that got almost no meaning never mind it, later if you gonna upgrate to use dream weaver will be auto generated for now lets focus on the basics here an explanation of the code i gave you early :
On the first line is the declaration DOCTYPE. It is a rather particular tag, and is the only one who does not obey the rules I gave you earlier.
Specifically, this tag is used to tell the browser what you are doing is an XHTML page, and you are using version 1.0 of XHTML (yes, as in programs there are versions!).
Why am I telling you to use XHTML 1.0? Because it is one of the most recent versions, and your site will be updated
Just then the beacon <html>. This is the main tag that will encompass your entire page (x) HTML. As you can see, we do not farm with a last </ html>, which indicates that the page (x) HTML stops there. There is nothing after the </ html>.
The tag <html> contains 2 attributes:

• xmlns: this attribute is mandatory, indicates an address dealing with xHTML. Do not worry about this and leave it like that, it does not interest us particularly.
• xml:lang : This attribute is used to indicate in which language is written your web page. If you write a web page in French put "fr" as I did. If the page is in English put "us", put "it" as Italian , "es" as Spanish etc etc ...

The <head>: contains some information header for your webpage. It closed a little further.

Within the <head> you are including the <title>. It is very important: it contains the title of your web page. Here, the title is "Welcome to my site!", But you put the right title for your page
Then you can see a <meta />. There are many beacons of this type, but I'll tell you about that later because they are not indispensable. Only one I gave you is essential : it serves to indicate that you are going to type specific French (EEAE etc. ...).

Finally (phew!), After the closure of the <head> starts a new tag: <body>
Between <body> </ body> you type the content of your webpage. Clearly, it is between these 2 tags that we spend 99% of our time .
For now, there is nothing between these 2 tags, so the page displays nothing (there is a white background as you have seen earlier).

Before concluding this chapter rich in new knowledge, I would quickly tell you about the "comments".

Feedback is information that you write for you. The comments do not appear to visitors.
For example you can use comments to mark milestones if your XHTML page is very large, or to serve as a reminder.

A comment is a bit special tag starting with <! -- And ending with -->
Here is an example of comments in the code just now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>welcome in my site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<!-- Reminder: This is where you write the content of our web page -->
</body>
</html>

Try to save this webpage and see what it gives in your browser: there is no difference with the code just now. What's in the commentary appears nowhere.

In general, it uses very little feedback, but I wanted to show you how it is used so you do not be surprised if you see them.
It could be that I used in some of my examples to explain the middle of the rest of XHTML.
that's it for now i hope you enjoyed your first lesson, when you read this lesson don't try to jump parts, u'll probably get lost later and you'll have to do it all over again, so be patient, get into the meaning of what said, and FEEL FREE to ask about anything i wrote it's open topic to make you learn so even if you think it's a stupid question, ask it
oki, got to go now see you tomorrow with lesson 2

[Cen]

Writers: cen, arbalest, mizige

"Students": keka, nobber, efko, sina, mitsuki, and others

3 of us will be posting different kind of programming lessons for beginners. It's up to you if you want to read it or not.

[Arbalest]

hello again everyone today we keep on going with lesson 2 last time we saw the main structure of a html page and we stopped
at <body> </body> tags, the white page is very nice, but your web site
may have limited success if you leave it as
it

The first step to "fill" your site is to write text inside ... give him what content.
We will see that writing the text is very simple but we must separate the different types of text.
Indeed, we see successively in this
Chapter:

• How to write paragraphs
• How work titles
• How to give importance to certain words of the text

And finally, we'll see some slightly more tags "rarely" used, but you never know maybe you gonna need them some day.
Motivated? Come on, you'll see it's a fun part ^^

So you want to write text into your web page, but you do not know how?
In XHTML, things are rather simple: it works in paragraphs. Each section can be found between the tags and <p> </ p> (which means "paragraph").
here an example:

<p>hello every one i'm a paragraph written in a html page</p>

<p> means "start paragraph"
</p> means "end of paragraph"
let's add this in the code of the last chapter and we obtain :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>welcome in my website!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p> hello every one i'm a paragraph written in a html page!</p>
</body>
</html>

try it your self,see it's nice it still not a symphony but it's something to start with ,
let's make another test between the <p> </p> try to type a long paragraph and try to make it in 2 lines or 3
did you do it? then you propably noticed that to press enter to get back to line doesn't have any effect the text will continue on until he reach the end of the page
to evoid that we gonna add <br />
to it will give this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>welcome in my website!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>
hello everyone!<br />
this is my first test, i'm learing xhtml step by step so in the end<br />
i will make my own website
</p>

<p>
for now it still empty <br />
but with time i'll make it
</p>
</body>
</html>

You can theoretically put several tags <br /> straight for multiple line breaks, but normally you will not need to do when you know CSS.
in global :
<p> </ p>: to organize the text into paragraphs.
<br />: to go on line.

Write the text is fine, but give a title to your text is even better.
In XHTML it is varnished, it has the right to use 6 levels of different titles.
I mean is you can say "This is a" highly important "," This is a title a little less important, "" This is a title much less important "etc ... We are 6 heading tags different that we can use:
<h1> </ h1>: means "as very important." In general, it is used to display the page title above.
<h2> </ h2>: means "as important". Use them for example to organize your paragraphs and give them a title.
<h3> </ h3>: like is a way a little less important (one might say a "Subtitle" if you want)
<h4> </ h4>: as even less important.
<h5> </ h5>: not as important.
<h6> </ h6>: title really not important at all.


Caution: do not confuse with the <title> </title> Tag displays the title of the page in the title bar of the browser as we have seen. Titles <h1> company and they are used to create titles that will be displayed on the webpage.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<h1> super important</h1>
<h2>mportant title</h2>
<h3>less important kinda used as sub-title</h3>

<h4>not really important</h4>
<h5>even less important</h5>
<h6>not important at all</h6>
</body>
</html>

see the picture bellow to see what it gives.
and here an example using all the last tags we learned

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>welcome aboard</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>welcome in xpam school !</h1>

<p>
welcome in , this tutorial is developped by arbalest<br />
as lessons to teach xhtml
</p>

<h2>tutorials for beginners</h2>
<p>
it's a step by step lessons to the reader can take his time in understanding xhtml
</p>
<p>
it's a tutorial for those who got no knownlge background so even if don't anything about websites<br />
this tutorial will keep you informed with everything you gonna need to know
</p>

<h2>active community</h2>
<p>
Got something you don't understand?<br />
feel free to ask any kind of question

</p>
</body>
</html>

If, within your paragraphs, there are several words that you would like to highlight, XHTML offers 2 tags:
The first allows for "a little" highlight the words in your text.
The second property can highlight the words.

We'll see what these tags and how to use them.

Put a little value


To put "a little" off your text, you must use the tag <em> </ em> Usage is simple: Surround the words to highlight these tags, and it's good! I take a little the example just now, and I put a few words show:
also the tag <strong></strong>
the <em></em> will make word written in italic and the <strong></strong> will make it written in Bolt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>welcome aboard</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>welcome in xpam school !</h1>

<p>
welcome in , this tutorial is developped by arbalest<br />
as lessons to teach xhtml
</p>

<h2>tutorials for <em>beginners</em></h2>
<p>
it's a step by step lessons to the reader can take his time in understanding xhtml
</p>
<p>
it's a <strong>tutorial</strong> for those who got no knownlge background so even if don't anything about websites<br />
this tutorial will keep you informed with <strong>everything</strong> you gonna need to know
</p>

<h2>active community</h2>
<p>
Got something you don't understand?<br />
feel free to <em>ask</em> any <strong>kind</strong> of question.

</p>
</body>
</html>

check image bellow to see what it looks like

I know you've heard a lot of new tags in this chapter, but necessary if you want to get your web site.
Contrary to what seems, it's easy to remember and it's coming very quickly with a little practice

If the tags that I've shown so far are very commonly used (paragraphs, titles, development ...), those I'll show you below are a few more rarely used.
As they are more rare, I do not require you to hold them by heart (but if you do it better of course: p)
I do not have all the tags that exist which could be used on our text, it would be too long, and sometimes the difference is minimal. You will find the complete list of XHTML tags in the appendices.

We will see the following tags:

• To superscript or subscript
• Quotations
• Acronyms

superscript and subscript
an example is good enough to make you see what its about :

<p>
x_n = x_{n - 1} - 2x_n-2
</p>

check image bellow
Well, the setting index may serve mainly to those who want to enter mathematical formulas, but you never know,
you can make it as : 1_st i think it got it effect too

Quotations

We can make 2 types of quotations:
-Short quotations within a paragraph: the short citations are made within a paragraph. It oversees the citation by the tag <q>, who works as <em>, <strong>, <sup> etc ... Here is an example of short citation in the middle of a paragraph:

<p> You remember the famous phrase hath spoken by asking Neil Armstrong's first walk on the moon? <q>'s one small step for man, one giant leap for mankind </q>. It was a July 20, 1969 ...</p>

here the <q></q> served to add a double " " to what Armstrong.

Long quotations, not a paragraph: If you need to make a rather long quote, you should use the <blockquote>. You have to put paragraph tags <p> inside the blockquote like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blockquote</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1> The Raven and the Fox </h1>
<p> Here is what is undoubtedly one of the most famous fables of La Fontaine <em> </ em>: </ p>
<blockquote>
<p>
Master Crow perched on a tree, <br />
Holding in its beak a cheese. <br />
Mr. Fox, by the smell, <br />
He insisted on something like this: <br />
"Hey, bonjour, Monsieur du Corbeau. <br />
Whether you are beautiful! that you seem nice! <br />
Truly, if your song <br />
Refers to your feathers, <br />
You are the Phoenix of these woods. "<br />
At these words the Ravens did not feel joy; <br />
To show off his beautiful voice, <br />
He opens his beak wide, lets fall his prey. <br />
The Fox snapped it up and said: "My good sir, <br />
Learn that every flatterer <br />
Lives at the expense of the listener: <br />
This lesson is well worth a cheese no doubt. "<br />
The Crow, ashamed and confused, <br />
Swore, a bit late, did it take over.
</p>
</blockquote>
</body>
</html>

In XHTML, there are 2 types of tags:

• The inline-tags: these are tags that are used within a paragraph. These include tags <strong> <em>, <q> etc. ...
• The block-tags: these tags are used to structure the page into several "blocks". The first one has learned is the tag <p>, but there is also the title tags <h1>, <h2>, <blockquote> ... You do NOT get a title or long citation within a paragraph. Each of these tags is a separate block.

An acronym is a series of initials commonly used to shorten some names, such as XHTML, FBI, CSA etc. ...

The problem with acronyms is that they do not always know what they mean. For the visitor knows what it is, you must surround your acronym tag <acronym>
The novelty here is that you'll need to use an attribute (title) to explain what the acronym means.
neverless an example will explain it much better :

<p> <acronym title="eXtensible HyperText Markup Language"> XHTML </ acronym> is the language used to create a website. </ p>

check image bellow the see what it looks like

As you can see, if you point the mouse on XHTML, description of the acronym.
note : acronym tag doesn't work on internet explorer.
thats ot for today i hope i helped it and see you on the next lesson which will speak about creating links in xhtml

[Nobber708]

I've just read the first post... I guess I have to do it again to get it 100%
But for some reason I cant see your pictures =S (with Mozilla) =S

Anyway, nice job

and mby w8 a little long between the lessons =p

[Arbalest]

I've just read the first post... I guess I have to do it again to get it 100%
But for some reason I cant see your pictures =S (with Mozilla) =S

Anyway, nice job

and mby w8 a little long between the lessons =p

thx ,about the pictures right click on each 1 of them and select copy image url, then open them in another tab, it should be appeared in full screen mode,about the timing i figured to hurry up with the easy part so u guys get busy until i get ready the hard core part
oh ya btw in the coming lessons i'm gonna add a button to view directly what code gives , i won't be posting pictures for long time

[Shoocky3V]

I`ll try to do smth of this tomorrow, anyway, keep up the good job : )

[Arbalest]

In the previous chapter, you learned how to create a simple XHTML page. Although ugly I grant you,
but it was an XHTML page anyway. You have learned many things at once. Also, to let you
time to digest this chapter is much less condensed the previous
In this chapter we will learn to makelinks between your pages.

I guess you all know what a link:
a link is:
a text on which you can click to go to another page.
It may be a link to a page to a page a.html to b.html, but can also make a link to another
site (exp: [url]http://www.eurobattle.net[/url]). In both cases the operations are the same.

Before you show the XHTML code that allows you to
creating links, I'm gonna show you how to make the difference between absolute links and links
related .
Come on, who loves me follow me!

As I told you early in the introduction, there are 2 types of links:

• Internal links to their site : normally, your site will contain several pages (XHTML or it will be very poor!). If you want to link from one page to another, you will most often what are called relative links. A relative link is relatively short, exp: "file/destination.html.
• Links to other sites : These are example links to "http://www.eurobattle.net" or to a particular file (eg "http://www.eurobattle.net/file.html" ). These links are called absolute links and, unlike the relative links, they often begin with "http://".

Now let's suppose you have 2 XHTML pages that are in the same folder on your hard disk:

c:\site\source.html
c:\site\destination.html

now let's say you Want to link to source.html to destination.html. This is very simple, as the files are in the same folder it enough just to write "destination.html"!

If the files are not in the same folder:
If your file cible.html is located in a subfolder, for example:
c:\site\folder\cible.html
you won't be needing any kind of modification on "source.html.
we gonna have add "File/cible.html. If there are several sub-folders, simply write the following: "folder1/folder2/destination.html".
it's quiet simple if you got the idea
attention: Do not confuse with the backslash (\) Windows: Internet, it Always uses slash (/).
If your file cible.html is in a parent folder, for example:
c:\destination.html
Then there to go up one folder it will write ".. / cible.html" see the expamle above "folder1/folder2/destination.html"
A link to another page:
let's start with an example:

<p>yo! welcome in eurobattle.net forum alias: <a href="http://www.eurobattle.net">xpam</a><br />
here we teach you net programming languages it's really <em>cool</em> worth visiting it </p>

[URL="http://tutoriliez.eb2a.com/link1.html"]test the code[/URL]

awsomely simple isn't it? You put the link text between the tags <a></a>, and you specify the page address in the href = "example ".

We just made here in an absolute link to another site ( "http:// "...). Now we'll see how to make a related link.

I created 2 pages: source.html and destination.html.
source.html contains a link to destination.html, and 2 pages are in the same folder. Here's how we'll proceed :
source.html code :

<h1> source.html </ h1>

<p> You are on source.html <br />
Would you visit <a href="destination.html"> file destination.html </a></p>

destination.html code :

<<h1> destination.html </h1>
<p> Good Job! You have just landed on destination.html </p><!-- now let's make another link from destination to source
to make it complete-->
<p>wanna try again? then <a href="source.html">click here</a></p>

[URL="http://tutoriliez.eb2a.com/source.html"]test the code[/URL]

cool isn't it?
And what if I want my link opens in a new window?

It is not possible.
Many sites do, it's true, but in XHTML it is possible to open links in a new window.

It is a decision that was taken now can not force more links to automatically open a new window. This order not to impede the navigation of the visitor who did not necessarily want to see 50 of their browser windows open.
It is the visitor to decide itself if it wants to open the link in a new window.

Finally, important thing to know that you understand a little better: the blind people who surf the web is disturbed by opening a new window of their browser. When new window opens, it is possible to "back", and that disturbs many people with disabilities.
It is also out of respect for these people we decided today not to force a link to open a new browser window.

I hope that you understand and that you apply this rule,^^

now its up to make a link to send an email
If you want your visitors can send you an email, you can use "mailto" links. Nothing changes at the tag, you simply change the value of the href like this:
href = "mailto: [email]myname@blabla.com[/email]"
So just to start the link with "mailto:" and write the email address where we can contact you. An example:

<h2> Contact Me </ h2>

<p> To contact me, <a href="mailto:myname@blabla.com"> click here </a></p>

If you click on the link, a new blank message opens, ready to be sent to your e-mail .

anc.. say Woot ? Oo

An anchor is a kind of landmark that you can put in your big XHTML pages.
In fact, if your page is very large it may be useful to make a link to further down the same page to bring the visitor directly to the part the visitor is interested in.

To create an anchor, just add the id attribute to a tag which will then serve as a benchmark. This can be any tag, a title for example.
Use the id attribute to name the anchor, which will then serve you to link to this anchor. For example:

<h2 id="my_anchor"> Title </h2>

Then just make a link as usual, but this time the href attribute contain a hash (#) followed by the name of the anchor. Example:
<a href="#my_anchor"> Moving anchor </a>

Normally, if you click on the link, it will take you further down the same page (provided that the page contains enough text for the scroll bars move automatically).
Here is a sample page containing lots of text and using anchors (I put anything in the text to fill ):

<h1>anchors test</h1>

<p>
go directly to : <br />
<a href="#kitchen">the kitchen</a><br />
<a href="#rollers">the rollers </a><br />
<a href="#arbalest">shoot with an arbalest</a><br />
</p>
<h2 id="kitchen">the kitchen</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo. Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diam.</p>

<p>Etiam pede lectus, facilisis sit amet, varius a, malesuada varius, nisl. Aenean aliquam, odio quis semper cursus, nisl lacus rutrum ipsum, a laoreet neque ante vitae tortor. In hac habitasse platea dictumst. Ut at neque interdum enim pharetra commodo. Curabitur erat mi, congue ut, volutpat vel, semper ac, wisi. Sed non metus vel massa pharetra euismod. Nunc quis quam. Curabitur non libero a libero semper tincidunt. Mauris vehicula dui a wisi. Quisque nisl dolor, tempus nec, tristique vitae, eleifend eget, nunc. Duis dapibus, lectus eget egestas consectetuer, nibh metus pharetra nisl, vitae rutrum mi tellus placerat nulla. Praesent sed libero non enim suscipit aliquet. Proin tincidunt pede sit amet eros.</p>

<p>Phasellus sed nisl. Integer rhoncus risus vitae arcu. Praesent sed diam non justo sagittis vulputate. Etiam faucibus posuere tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam porta. Vestibulum lectus ante, laoreet a, condimentum sit amet, dictum ac, sapien. Ut et tortor. Aliquam vitae lacus. Vestibulum non pede eget ante elementum elementum. Quisque accumsan wisi id quam. Integer tortor justo, cursus volutpat, vehicula ut, pellentesque ultrices, neque. Aenean eu tortor vitae dui pretium molestie. Sed dui nibh, rhoncus ut, egestas quis, commodo id, magna. Morbi gravida tellus id diam. Nunc nonummy leo nec velit. Curabitur id lacus a ipsum lacinia accumsan.</p>

<h2 id="rollers">the rollers</h2>

<p>Nunc ullamcorper imperdiet lorem. Aliquam convallis, sapien sit amet malesuada dignissim, sem tortor interdum risus, vel scelerisque sapien est ac justo. Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst. Donec eget massa. Vivamus arcu ante, condimentum eu, imperdiet et, pulvinar vel, neque. Morbi auctor. Sed ac ligula. Pellentesque adipiscing orci id ipsum. Fusce ipsum. Cras eget neque. Nulla at sapien ornare augue tempor viverra. Praesent vulputate. Mauris mi. Quisque quam. Cras fermentum orci non risus. Phasellus quis augue vitae felis tincidunt dignissim. Vestibulum ut nulla at eros sagittis ullamcorper.</p>

<p>Sed vel erat. Aenean a massa. Quisque ultricies, dolor non rutrum ullamcorper, lorem ligula blandit pede, malesuada volutpat magna dolor et ante. In tellus felis, tincidunt eget, adipiscing eu, gravida sit amet, lorem. Proin dolor. Proin vel elit. Morbi vel enim. Aenean congue enim sed ipsum. Praesent tristique. Ut placerat metus sed nibh. Sed sit amet urna. Morbi et lorem. Sed a erat eget dolor sollicitudin ornare. Maecenas nibh. Quisque tincidunt. Sed odio diam, dapibus a, interdum non, convallis id, pede. Donec condimentum eros eu nunc consequat commodo. Donec tempus fringilla eros.</p>

<p>Mauris mollis luctus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse consectetuer sem at urna. Aliquam dui magna, congue non, porttitor vitae, varius a, lacus. Duis nec enim. Quisque malesuada, lectus vel laoreet egestas, lorem nibh ultricies elit, et varius velit erat vel risus. Maecenas pellentesque nibh et purus. Nulla commodo justo vitae odio. Sed ornare. Quisque at tortor. Donec mi. Vestibulum consectetuer congue purus. Aenean pulvinar.</p>

<h2 id="arbalest">shoot with an arbalest</h2>

<p>Nam vel arcu quis justo condimentum egestas. Aliquam dictum wisi. Nam lorem. Ut scelerisque. In velit tortor, venenatis eget, ultricies id, mollis nec, dui. Morbi nec ante vitae libero fermentum aliquam. Ut non quam. Cras ac urna. Aenean sollicitudin turpis sit amet quam. Quisque lacinia. Proin mollis. Vestibulum dapibus, nulla sit amet lacinia dapibus, est odio condimentum lorem, id aliquam lorem enim vitae nibh. Nulla tortor. Nunc pulvinar. Vestibulum malesuada wisi et urna.</p>

[URL="http://tutoriliez.eb2a.com/anchor.html"]test the code[/URL]

If nothing happens when you click on the links, there is not enough text. In this case, you can either add blabla of the page to there (yet) more text, or reduce the size of your browser window to display the scroll bars on the side.

The id attribute is used to give a name "unique" to a tag, for use of reference. And believe me, you have not heard the last of this attribute.
Here it is used to link to an anchor, but in CSS it will be very useful for "identifying" tags , you will see
Link to an anchor located in another page :

The idea is to make a link that opens a new page and that leads directly to an anchor located lower on this page.
In practice it's pretty simple to do: just type the name of the page, followed by a hash (#), followed by the name of the anchor.

For example:
<a href="anchor.html#rollers">
... will take you to the page cible.html directly at the anchor called "rollers"
here an example:

<h1>Xpam ^TM</h1>
<p>
Rendez-vous in another anchor page :<br />
<a href="anchor.html#kitchen">the kitchen</a><br />
<a href="anchor.html#rollers">the rollers</a><br />
<a href="anchor.html#arbalest">shoot with an arbalest</a><br />
</p>

[URL="http://tutoriliez.eb2a.com/xpam.html"]test the code[/URL]

that's it for today see you in the next lessons which will be about Images in XHTML have a nice day.

[Arbalest]

Inserting an image into a web page? Pfeuh it's a disconcerting easy As long as you understand how the
relative addresses in the previous chapter, this Chapter images does not offer any
difficulty like taking a candy from a baby.

So as to make this chapter a real cruise, we will start quietly studying
What are the different types of images that can be use in a webpage (JPEG, PNG, GIF ...).

This is the last chapter of Part I of this Tutoriel. In Part II, we will (finally) introduce the CSS and it will
make a lot of news so ... Enjoy this Chapter.
in global, in the first chapter we learned the basics of (x)Html in chapter too we gonna see the basics of CSS
the in the chapter III we gonna see the power of xhtml and css combined from there you gonna see the real show of these 2 languages
allthought xhtml and css have limits but i can assure you they will cover allmost everything you gonna need to make your websites pages.

Do you know what an image format?

When you have a picture in his hands, you can save it in several "formats" different. The weight (in KB) of the image will be higher or lower depending on the chosen format and the image quality will change.
For example, the drawing program Paint (although this is far from being the best) you can choose between several formats when you save an image:

Certain formats are more suitable than others depending on the image (photograph, drawing, moving picture ...). Our goal here is to make the rounds of various sizes that are used on the web, so that you know and know the choice that best suits your image. Rest assured, there are not many different formats, it will not be very long

All images displayed on the Internet have in common: they are compressed. This means that the computer makes the calculations so they are lighter and therefore faster to load.
The following image formats that are used on the web:

• JPEG: is widespread. It is particularly suitable for photographs, and indeed often in this format then that is the image of your wallpaper images of type JPEG usually have the extension. "Jpg", but also sometimes. "jpeg" (this is the same).
  Here is an example of image in JPEG format:
  
  
• PNG: is the newest of all. This format is suitable for most charts (I'm tempted to say "anything that is not a photo). The advantage of PNG is that it can be made transparent, which is very significant.
  PNG comes in 2 versions:
  
  1. 8-bit PNG : PNG version of the limited to 256 colors. 256 colors is not enough, when we know that the JPEG supports millions of colors ... But it is often sufficient for small graphics, such as the following:
     
     
  2. PNG 24-bit PNG: is 24-bit version of PNG's most advanced, it supports millions of colors (like JPEG). What interest to use the 24 PNG rather than JPEG? Transparency! It can create beautiful effects of transparency on easily graphics, including the design of your website.
     Unfortunately now, it would be too good and there was a catch: the slightly older versions of Internet Explorer (IE6 in particular) are grounded. The 24-bit PNG is not handled well: IE 6 can display the image, but will not display transparency. Look at this picture:
     
     
     
     
     Look at this picture the first time in Mozilla Firefox, you'll see that transparency is correct. Then look at the image in Internet Explorer 6: no transparency, it's pretty ugly. In internet Explorer 7,8 solved this problem but in IE 6 it's still the same.
  
  
• GIF Format : it's quite old, which was still widely used (and still widely used out of habit). Today, PNG is far better than the GIF images are lighter and transparency is better. I therefore recommend you to use PNG if possible.
  The GIF format is limited to 256 colors (while PNG can go up to millions of colors). If I speak of GIF is that it still retains an advantage that PNG does not: it can be animated. Example:

Other formats not mentioned here, as bitmap (*. bmp) are not advised because they often are not compressed, so too big, not at all suited to the web.

If we summarize, here is what format to adopt according to the image you have :

1. for a picture (or an image with many colors) use a JPEG.
2. A graph with few colors (less than 256) use an 8-bit PNG if possible because the format is best.
3. An animated image: using an animated GIF.

Come, let us now XHTML

To insert an image, you must use the tag <img />.
It is a single tag type (as <br />).
It may take several attributes, and 2 of them are essential:

• src : it can indicate where the image you want to insert. You can either put an absolute path (eg "http://eurobattle.net/sun.png") or put on the path (so often done). So if your image is in a subfolder "images" you would type:
  src="images/sun.png"
• alt: it means "alternate text". We must always specify alternative text to images for example:alt="A flower"

I am aware that it must seem boring to an alternative text, especially since it seems you do not a priority , but it is imperative that you do. If you do not, your page will not be an XHTML page "valid" and your site will be detected as non-compliant.
here an example :

<p>
here a good picture of a nice rainbow :<br />
<img src="images/rainbow.jpg" alt="picture of rainbow" />
</p>

[URL="http://tutoriliez.eb2a.com/images.html"]test the code[/URL]

Avoid at all costs accents, capital letters and spaces in file names and folders. Here is a path that will cause problems:
"Images of the site or any image bête.jpg"
It would remove the spaces (or replace the symbol "_"), remove accents and everything in lowercase like this:
"images_of_the_website/imageof_the_rainbow.jpg".

A tooltip :

The attribute is to display a tooltip is the same as for the links, is title. This attribute is optional (unlike "alt").
Here's what happens:

<p>
here a good picture of a nice rainbow :<br />
<img src="images/rainbow.jpg" alt="picture of rainbow" title="colorful rainbow" />
</p>

[URL="http://tutoriliez.eb2a.com/rainbow.html"]test the code[/URL]

Clickable Image :

As the text, a picture may very well serve as a link. Instead of putting the text between the tags <a> </ a>, you can very well post a <img /> tag!
For example:

<p>
here a good picture of a nice rainbow :<br />
<a href="http://www.eurobattle.net/index.php"><img src="images/rainbow.jpg" alt="picture of rainbow" title="colorful rainbow" /></a>
</p>

[URL="http://tutoriliez.eb2a.com/anchor2.html"]test the code[/URL]

notice: the <a></a> has been closed right after the <img /> in a manner of fact the <img /> is contained in the tag <a></a>
in my example when you gonna press the (test the code) u'll see i used an anchor link so you click on the image it will redirect you into the the preview chapter III
on the next chapter which will be Chapter I in Part II: u'll learn how can we modify pictures proprities of the img's framework. that's it for today ,thx for reading see you in on the part II Next week.

edit: if the picture doesn't appear to you then just refresh the page or right click => open image in a new tab and it should be fine

[Nobber708]

No time for it today =(
But ofc I will read it tomorrow

[Cen]

First of all, gj arbalest and thank you for taking your time.

Just a short notice from my side, I've read about.

IE shows alt as it would be the title of the image, which is wrong. By the standard, it should only show the title attribute (firefox displays this correct).

I havent tested what happens in IE if you use both tho.

[Arbalest]

I`ll try to do smth of this tomorrow, anyway, keep up the good job : )

thx man

No time for it today =(
But ofc I will read it tomorrow

allright gl

First of all, gj arbalest and thank you for taking your time.

Just a short notice from my side, I've read about.

IE shows alt as it would be the title of the image, which is wrong. By the standard, it should only show the title attribute (firefox displays this correct).

I havent tested what happens in IE if you use both tho.

thx dude,and about ie that's right and as i said it before that's in ie 6 versions after that got it solved.

[Arbalest]

Introduction : as u will see this lesson is kinda long, normal since i had to make necessary definitions and long explanations before i get started ,since it's a new language ,so a piece of advise read it all slowly, you have nothing to proove
just go the way that suit you and hf .

here we are at last,After a first part of the tutoriel work only on XHTML, we now
learn the CSS that I had voluntarily made away.

The CSS is no more complicated than XHTML, it is just different because it serves to make the presentation
your web page.

There, you'll see a lot of "properties" to know (just like the XHTML tag names, except it
there are more). Fortunately, nobody asks you remember everything by heart and a reminder will be your
provision attached to help you (list which I myself need, I do not accept everything).

In this first chapter on CSS, we'll see theory on the CSS: What's this? What ddoes it look like? Where do you write CSS code? This
theory is not complicated, but you must necessarily know it because it constitutes the basis of
CSS. This is the only thing I ask to retain by heart in CSS, the rest can
be found in the attached memo.

allright then let's get started :

Remember that CSS mean? I ve talked about rapidly in the first chapter of the course. This means: "Cascading Style Sheets".
They say "Stylesheet" because in general, we write the CSS code in a separate file (the extension file.Css instead of file.Html). This is a file where we write the likelihood that our site must have: color and text font, the size of the text, the position of menus, color or background image etc. ... Believe me, the CSS can do many things!

• Method A: in a file.Css (the most recommended)
• Method B: in the header of the XHTML file
• Method C: in tags.

in a file.Css
As I told you, the more often you write the CSS code in a special file with the extension. Css (unlike XHTML files have the extension. Html).
This is the easiest practice that I use almost all the time in the rest of the course. Among the many benefits this solution brings, there is the possibility to easily offer several different designs to your visitors.

note: later after i presented the 3 ways : i'll explain why i said it's the favorite option.

Remember Notepad + + go to into the menu "Language=>c=>css" to activate the color of the CSS. You think to save your file. Css instead of.Html


example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple d'utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<p>This page contains an external style sheet. This is the best method to use CSS.</p>
</body>
</html>

What you see is an overview of CSS code that we write. Do not worry about what that means yet, I'll explain it a little further

Now go to your XHTML file. We must add a line between the <head> </head> which will help to "tell" what the file XHTML CSS file to load it:

The <link /> has several attributes. You can modify two of them yet:

• title : is the name you give to your stylesheet (put whatever you want).
• href : this is the location where your stylesheet as a relative link. In this example the CSS is in the same folder as the html file.

Directly in the header of the XHTML file (Method B):
It is also possible to enter the CSS directly from within the XHTML file, between <head> </ head>. You need to put a tag <style> </style> inside, like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple de CSS dans le header</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Vous taperez votre code CSS ici */
</style>
</head>
<body>
<p>This page includes the CSS directly into the header.</p>
</body>
</html>

• Begin the style tag by typing the following code in the header section of the Web page: <STYLE>
  Step
  
• Decide which HTML element should always use the same formatting (syntax and attributes). Example:< P >, the "paragraph" tag.
  
• Insert the appropriate style for the HTML element.

P
{ color : blue;
font-size : 12px;
font-family : Arial
}

Close the style tag by typing the following HTML code:< /STYLE >. The end result should resemble the following:

<STYLE>
P
{ color : blue;
font-size : 12px;
font-family : Arial
}
</STYLE>

In this example, all the text in each paragraph would default to and display as a blue, 12px Arial font without having to encase the paragraphs in separate font tags.

including the css into tags(method C) :
it's about adding a style attribute into tags to apply a particular style. This attribute works on all tags. For example a title:

<h1 style="/* your style for this tag here */"> Title </h1>

This method has all the faults not only the CSS will not see inside the tags, but also it does not allow us to enjoy all the benefits of CSS, including the ability to change the color of all securities Quick links.
In short, I showed you the only method that you are not lost if you see it.

why use external css?

• It keeps your website design and content separate.
• It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag.
• You can make drastic changes to your web pages with just a few changes in a single CSS file.

so in general: When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in your HTML using the <link> instead of <style> or inside tags.

In CSS, there are 3 different elements:

• tags Name : write tag names that you want to change the appearance. For example, if I want to change the appearance of all styles <h1>, I must write h1
• CSS properties : the "style effects" on the page are stored in properties. One example is the color property allows to specify the text color, font size, which can indicate the size of text etc etc. ... There are many CSS properties and, as I've said, I do not require you to know them all by heart.
• Values : each CSS property you must specify a value. For example, for color, indicate the name of the color. For the size, indicate what size you want etc...

here an example:

tag1
{
property: value;
property: value;
property: value;
}
tag2
{
property: value;
property: value;
property: value;
property: value;
}
tag3
{
property: value;
}

You see on this figure tags, properties and values that I just mentioned.

As you see, you write the tag name (eg h1), and it opens braces to put the properties and values that you want inside.

You can put as many properties as you want within braces (finally, we must put at least one otherwise it is useless)
Each property is followed by the symbol "colon" (:) and its corresponding value. Finally, each line ends with a semicolon (;)

I will teach you many properties in the following chapters. For now, we'll use two or three at random for example, but rest assured I will explain in later chapters in more detail.

For example, suppose I want to change all my paragraphs to whether written in blue, with a size of 18 pixels.
I know all my paragraphs of text between the tags are <p> </p> I'm going to write the following CSS code:

p
{
color: blue;
font-size: 18px;
}

it means I want all my paragraphs are written in blue with a size of 18 pixels.
Never put a space between "18" and "px", otherwise the CSS code does not work!

Save this CSS code in a file "test.css" for example.

We will now create an XHTML file commonplace to test our CSS. Do not forget to put the <link /> which I mentioned above to indicate where our CSS file.
Here is the test file I created, keep it in a corner because it contains many tags and it is likely that it serves a testing time for our future CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>example page to test the css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="test" href="test.css" />
</head>
<body>
<h1>Discovery CSS </h1>

<p>
Hello! <br />
I am a XHTML page <em> apparently </ em> trivial, but I serve in fact test file <acronym title="Cascading Style Sheets"> CSS </acronym> for tutorials of <a href ="http://www.eurobattle.net "> xpam </a>
</p>

<h2> Only the blabla </h2>

<p>
As Neil Armstrong said a July 20, 1969: <q>'s one small step for man, one giant leap for mankind </q> <br />
I love canned sauerkraut. <br />
love potatoes!
</p>
<p>
However, that does not mean anything I write? Who cares, it's for our test file. Rhalala viva css o)
</p>
</body>
</html>

[URL="http://tutoriliez.eb2a.com/css.html"]test code[/URL]

Try changing the CSS file, putting a different color ( "red" to red for example, and "24px" to have a written text very large).
What's great about CSS is that you can change the color of all paragraphs of your pages at once! Simply edit the file. Css hop and the changes are applied

To lead, try to apply CSS styles also other tags such as title (h1, h2, em etc. ...). Ok, yet I have shown you that CSS 2 properties, but it should be enough to make small tests.
Apply a style to multiple tags
let's take this example:

h1
{
color: red;
}
h2
{
color: red;
}

It means that our h1 tag should be in red, and our tags h2.Oui but here is repetitive because that is exactly the same thing.

Fortunately, there is a way in CSS to go faster if the styles of 2 tags should have the same format. Simply separate the tag names with commas, like this:

h1, h2
{
color: red;
}

This means: "I want the text of my titles <h1> and <h2> are written in red.

You can enter as many tags as a result you want. For example, if you want to put your titles in red, your links and quotes, you would type:
h1, h2, a, q

and dont forget the space

Like XHTML, it is possible to put comments. The comments will not be displayed, they are simply used to specify information for you, for example you find in a looong CSS file.

Besides, you are going to realize in general the XHTML file is small enough, and the CSS sheet large enough (if it contains all the elements of style of your site, it's fairly normal). It is possible (and recommended) to create multiple CSS files: one file for the design, another for the forum, one for the menu etc etc ...

... What are we talking already? Ah yes, comments in CSS (sorry I'm getting a bit senile: p).

So to make a comment, it fastoche you type /* followed by your comment, and then */ to end your comment.
Your comments may be one or more lines. For example:

/*
test.css
---------

by arbalest
file created 24/02/2010
*/

p
{
color: blue; /*the paragraphs are in blue */
font-size: 18px; /* size is at 18 pixels,sound good enough for me */
}

later I will use a lot of comments in the rest of the tutoriel to give you an explanation from inside files .Css

What I've shown so far still has a flaw: it implies for example that all paragraphs are messages such as blue / 18 pixels.
How to only certain paragraphs (or some title or some quotes) are written in a different way?

We have the opportunity to do this using special attributes that work on all the tags:

• The attribute class
• The attribute id

Let me be clear from the outset: the class and id attributes are almost identical. There are only a small difference that I will reveal below.
For now and quite simply, no one will look at the class attribute.

As I tell you, is an attribute that can be put on any tag, as well as that paragraph, image, etc. ...
<h1 class=" "> </h1>
<p class=" "> </p>
<img class=" " />

you propably asking yourself: "Yes but what do we put as value for the attribute class?

In fact, you put any name. Whatever you want.

The class lets you define a custom style.
Suppose you want to define a style called "important" to write the text in red / 18 pixels. You will add the attribute class = "important" for each tag that you want to edit.

here in the preview example I added a class attribute :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>example page to test the css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="test" href="test.css" />
</head>
<body>
<h1>Discovery CSS </h1>

<p>
Hello! <br />
I am a XHTML page <em> apparently </ em> trivial, but I serve in fact test file <acronym title="Cascading Style Sheets"> CSS </acronym> for tutorials of <a href ="http://www.eurobattle.net "> xpam </a>
</p>

<h2> Only the blabla </h2>

<p>
As Neil Armstrong said a July 20, 1969: <q class="important"> one small step for man, one giant leap for mankind </q> <br />
I love canned sauerkraut. <br />
love potatoes!
</p>
<p class="important">
However, that does not mean anything I write? Who cares, it's for our test file. Rhalala viva css o)
</p>
</body>
</html>

how to go from there to say in the CSS: "I want all my tags that have class" important "are written in red and 18 pixels?
It's very simple: instead of putting the name of the tag before the braces (like p or h1), you must write a paragraph followed by the name of the class, such as:
.important

.important
{
color: red;
font-size: 18px;
}

Try now XHTML previous page and see how the class "important" that we have created changes the text:
now let's see about the attribute id
this attribute works exactly the same way that class, except for one detail: it can be used only once.
A name id must start with a letter and can then be followed by letters and numbers. An id named "3tables" is invalid because it begins with a digit. Id "Table3" is valid, however.

What interest? There was little to tell you, this will be useful if you later Javascript to recognize some tags. Moreover, we have already seen the id attribute in the chapter on the links (to make anchors).

In practice, we will put the "id" on elements which are unique to your page, such as the logo:
<img src="images/logo.png" alt="php website" id="logo" />

In CSS, this is not something that you put before the name of the id, but a hash (#):

#logo
{
/* css code */
}

now it's up to the last part of this lesson:

Sometimes you need to apply a class (or id but rarer) certain words that are not surrounded by tags.
Indeed, the problem is that class is an attribute, so you can put in as a tag.

For example, if I want to change only "Neil Armstrong" in the following paragraph:

<p> As Neil Armstrong said a July 20, 1969 ...</ p>

It would be easy to do if there was a tag around "Neil Armstrong", unfortunately there is none. Fortunately, we invented the tag-which-is-for-nothing
In fact, we invented 2 tags that are useless, with a small (but important!) Difference between the two:

• <span> </span>: it is an inline tag. You remember what an inline tag? It is a tag that goes inside a paragraph, as <strong> <em>, <q>. This tag is used then in the middle of a paragraph, and that is where we will use for coloring Neil Armstrong.
• <div> </div>: is a type tag block. As <p>, <h1> etc. ... It creates a new "block" on the page, and therefore causes a mandatory newline. It is a very widely used tag to a design. i'll also dedicate a whole chapter in a next leson of the tutoriel to help you build the design of your website.

For the moment, therefore, we will instead use the tag <span>. It puts around Neil Armstrong, he adds a class, we create the CSS:

html code:

<p> As stated <span class="name"> Neil Armstrong </ span> a July 20, 1969 ...</p>

css code :

.name
{
color: blue;
}

You'll probably see me using alot the tag <span> all along in the tutoriel

Nestings of tags
A recent concepts of "basic" I want to teach you about the CSS we have the opportunity to indicate the order of nesting tags in the CSS.
You might think it's still something twisted invented by geek wearing thick glasses ... but no!
It's actually simple to understand, and most useful.

We are in our CSS file. We would define a style only for tags <em> located within a title <h3>. We must do this:

h3 em /* => all the em situated inside h3 titles */
{
color: blue;
}

As you can see, we just separate the 2 tag names with a space, not a comma as was done above.
This means "I want to change the style of all tags <em> located within <h3> titles. It was stated in the CSS in what order should be nested tags.

The order is very important! If you put 'em h3 "would have meant" All <h3> located within <em> tags. It is indeed impossible to do because you can not put a tag type block inside an inline tag.

Here is an XHTML file that you can you to understand how this works:

<h3> Nesting is <em> Practice </em> </h3>

<p> This example shows how the nesting. <br /> The word "practice" in the title is written in blue, but not this one: <em> Practice </ em>. </p>

You can also mix tags and class:
p. important
Which means: All class" important "contained in <p> tags.

A small twisted example to finish in style:
strong blockquote p, h1. important
Attention please, do not mix everything. The comma "cut" line in two, it means "AND" :
strong blockquote p, h1. important
Which means: "All tags <strong> <p> contained in a self-contained in a <blockquote> and all classes" important "contained in a title <h1>"

in the next chapter we're going deep in css properties and there will be QUIZZ made by Cen to test your understanding of the lesson if you got less then 3/5 you better restart reading the lesson again
that's it for today as always if you got something you didn't get i'm here to answer all kind of questions,thx for reading and have a nice day

[Cen]

Quiz: [url]http://cenarius.hostzi.com/test3.php[/url]

[Nobber708]

Here we go again

[Arbalest]

here we finally reached a chapter that should interest you a lot
No, the "text formatting" has nothing to do with the destruction of all data on your hard drive simply means that we will change the appearance of text (formatting mean "sets form "). Be reassured, therefore, at the end of this chapter your hard drive will always be alive

No particular surprise: we are still in the CSS, and we will reuse what we have learned in the previous chapter. I hope so, this way, that you have read and understood how they used one. Css

This time, we pass to the concrete: we'll see how to turn change the size of the text, change fonts, align text etc ... You have many things to discover, and so as not to bore you with a chapter too big I decided to split into 2 parts.
The good news is that at the end of these 2 chapters begin your site (finally) starting to get look like a site
text size :

In fact, in the previous chapter I have given you an example without much explanation, to illustrate just how a CSS. In reality, the possibilities to change the size of the text are numerous (and varied!).

What you already know is that the CSS property that can change the text size is font size. Ca, it does not change. But cons, you can specify the size of text in different ways:

• In pixels : one is very accurately indicate the size of the text. It's up to you to say exactly how many pixels the text should be.

For a text by 16 pixels high, you must write:
font-size: 16px;
like this example :

p
{
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
font-size: 22px; /* Titres de 22 pixels */
}

If you are allergic to pixels, know that it is also possible to specify a size in centimeters ( "2cm" for example) and millimeters ( "14mm" for example).
specifying the font size in pixels, centimeters and millimeters is very practical and very accurate. Certainly. But it is preferable to indicate a relative size (as we shall see) so that the text size adapts to the choices of everyone (some prefer to text rather large, others quite small so ... )[*]By giving a relative value that is to say by writing altogether "big", "very large", "small", "tiny". But of course, like everything is in English: P. Listed below are the different values you can set and their meaning:[/list]

1. xx-small: tiny
2. x-small: tiny
3. small: small
4. medium: medium
5. large: large
6. x-large: very large
7. xx-large: uh ... gigantic
   css code:
   
   

   .tiny
   {
   font-size: xx-small;
   }
   .smaller
   {
   font-size: x-small;
   }
   .small
   {
   font-size: small;
   }
   .medium
   {
   font-size: medium;
   }
   .large
   {
   font-size: large;
   }
   .very large
   {
   font-size: x-large;
   }
   .gigantic
   {
   font-size: xx-large;
   }

   xhtml code:
   

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
   <title>css test page</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
   </head>
   <body>
   <p class="tiny">Text in xx-small</p>
   <p class="smaller">Text in x-small</p>
   <p class="small">Text in small</p>
   <p class="medium">Text in medium</p>
   <p class="large">Text in large</p>
   <p class="very_large">Text in x-large</p>
   <p class="gigantic">Text in xx-large</p>
   </body>
   </html>

   [URL="http://tutoriliez.eb2a.com/test10.html"]test code[/URL]
   note:The text size is perhaps not exactly the same in all browsers ... but it is not very serious, because in every case "xx-small" is a very small text, and "xx-large" to a very large text. the rest it doesn't mater it fit
   
8. In em: that's another way to indicate how the relative size of the text. A little tricky to understand, I grant you, but once you just tested it just comes and you realize that this is a very practical method.
   It should indicate the size of text relative to the normal size of the font. Let me explain: "1em" means "normal size". If you put a higher number (usually a decimal number) as "1.3em", the text has a size 1.3 times larger. Also to reduce "0.8em" and your text has a size 0.8 times smaller.
   This is personally the method I use most often to indicate the size of the text (most of my font-size are in "em").
   Be careful, there must be a point instead of a comma for decimals. You must then write "1.4em" and not "1,4 em"!
   css code:
   
   

   .small_em
   {
   font-size: 0.7em;
   }
   .large_em
   {
   font-size: 1.3em;
   }

   code xhtml:
   

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
   <title>css test page 2</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Exemple2" href="design2.css" />
   </head>
   <body>
   <p class="small_em">Text height 0.7em</p>
   <p class="large_em">Text height 1.3em</p>
   </body>
   </html>

   [URL="http://tutoriliez.eb2a.com/test2.html"]test code[/URL]
9. in Percent(%) : that's easy. If you enter "100%", the text has a "normal" size. If you put "130%", the text has a size corresponding to 130% of normal size. It is very similar to 'em "(actually it's more or less the same). After everything is a matter of taste.

wp done, there is plenty of choice to indicate the size of text
So much so that one gets lost a little addition ...

As I've said, the pixel is very convenient to be accurate, but not very "recommended" because it is possible that a size too small (or too big) disturbe some people.
as shown above the method of 'em "(or%) is more practical: it has the advantage of automatically adapt to the preferences of visitor's browser and easy to use .

Indeed, the problem is that for a font is displayed correctly, requires all Internet users have it. If a user does not have the same font that you take a browser's default font (a standard policy) which may have nothing to do with what you expected.

Certainly, everyone has "Times New Roman" and "Arial" you will say ... And yet, the Mac is "Time" and not "Times New Roman".
But if you planned to use the last font gothic fashion for your Heavy Metal site, it will perhaps have to revise your plans.
Well, specifically how it's done?
The CSS property that can tell the police-do family. You must specify the font name like this:
font-family: police;

But to avoid there being any problem if the user does not have the same font you, it is typically several font names, separated by commas:
font-family: police1, police2, police3, police.4;

The browser will first try to put police1. If he did not he try to save the police2. If he did not he try the police3 and so on.
In general, it uses latest "serif", which corresponds to a standard font (which begins only if no other font has been found).

Yes, but what are the most common fonts that have the "right" to use you ask?
Here is a list of fonts that work well on most browsers and you can use without fear:

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

If you want to test different fonts listed above, click the button below:

[URL="http://tutoriliez.eb2a.com/test3.html"]test code[/URL]

If the font name contains spaces, you must enclose it in quotes, as I did for "Arial Black".
allright, let's make a little CSS example to summarize all of this and it shall be fine :

xhtml code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>css test page 4</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple4" href="design4.css" />
</head>
<body>
<h1> Test Font </h1>
<p> This sample page is used to test the use of fonts in CSS. <br />
Remember to specify multiple fonts in case the user does not what you want exactly, and remember to put the font "serif" (standard) at the end to a base font is displayed if no Another police has been found. </p>
</body>
</html>

css code :

h1
{
font-family: "Arial Black", Arial, Verdana, serif; / * We try to have Arial Black priority * /
}
p
{
/* in my opinion The Comic Sans MS font is readable to paragraphs */
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}

[URL="http://tutoriliez.eb2a.com/test4.html"]test code[/URL]

Rosters simple :


The CSS language allows us to make all alignments that we know: left, center, right and justified.

• It's simple. It uses text-align property, and it indicates the desired alignment:
• left: the text will be aligned left (default setting).
• center: The text will be centered.
• right: the text is right-aligned.
• justify: the text is "justified". Justify the text can make it take the whole width possible without leaving any white space at the end of lines. The texts of newspapers, for example, all the time are justified.

Look at the different alignments on this example:

xhtml code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>css test page 5</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple5" href="design5.css" />
</head>
<body>
<h1>wise man </h1>

<p>once a wise man said:</p>

<blockquote><p>Morbi fermentum libero non libero. Nunc in turpis in justo adipiscing scelerisque. Donec id elit non diam aliquet semper. Maecenas pede. Maecenas fringilla. Fusce eleifend dui quis lectus. Praesent facilisis, ligula a consequat posuere, metus purus porta mi, at consectetuer justo wisi id dui. Maecenas mattis. Ut imperdiet pharetra enim. Suspendisse quis leo nec arcu interdum aliquam. Vivamus dictum quam id tellus. Maecenas in quam sit amet risus semper auctor. Integer leo dui, malesuada eu, fermentum at, vehicula at, nisl. Pellentesque hendrerit. Proin ut libero. Curabitur sem ipsum, porta non, feugiat vel, mollis ut, justo. Sed a orci id metus pretium lobortis. Morbi ultrices, quam a facilisis faucibus, odio nunc dignissim enim, eget rhoncus purus erat ac quam.</p></blockquote>

<p class="sign">Signed : Arbalest</p>
</body>
</html>

css code :

h1
{
text-align: center; /* To center the title */
font-family: "Arial Black", Arial, Verdana, serif; /* A title in Arial Black is better: o */
}
blockquote
{
text-align: justify; /* The quotation is justified */
}
.sign
{
text-align: right; /* To right align my signature */
font-family: "Comic Sans MS", Georgia, "Times New Roman", serif;
font-size: 80%;
}

[URL="http://tutoriliez.eb2a.com/test5.html"]test code[/URL]

note: You can not change the text alignment of a tag inline (like span, a, em, strong ...). Alignment only works on block-type tags (p, div, blockquote, h1, h2, ...), and it's just logical when you think: you can not change the alignment of some words in the middle of a paragraph!.
So in general the entire paragraph that you must align.

What is indentation? It's just the indentation of text. This allows for example to start a paragraph a little further to the right, which makes (I think) reading much easier and enjoyable. This method is found in most books elsewhere.(see example next in the css code).

It uses text-indent property. It should indicate the size of withdrawal: it can be done in pixels, centimeters, millimeters ...
In short, my best advice is to use the pixels ^ ^. See how I put all the texts of paragraphs indented with text-indent:
css code :

p
{
text-indent: 30px; /* Sections begin 30 pixels on the right */
text-align: justify; /* They are justified * /
font-size: large /* Come on, let's be crazy Enlarge text: o */
}

[URL="http://tutoriliez.eb2a.com/test6.html"]test code[/URL]

The advantage of CSS is that you just say once and for all: "I want all my paragraphs are indented by 30 pixels on the right" and every time you write a new paragraph, the will be automatically indented.
Before XHTML (then HTML) this kind of thing was impossible or rather difficult and repetitive. Here is a snap to align the text as you want
Note 2 properties similar to which I need not dwell:

• word-spacing : space between words (in pixels).
• letter-spacing : space between the letters (in pixels).

that's it for today hope u understood css properties, see you in the lesson and have a nice day.