HTML-CSS-AbdelkaderRhouati

Document Sample
HTML-CSS-AbdelkaderRhouati Powered By Docstoc
					« HTML – CSS »
   I. Langage HTML :
         1. Définitions :

HTMl : Hyper Text Markup Language ou langage hypertexte est le langage dans lequel sont écrites
les pages du web. Un site web est constitué d’un ou plusieurs documents HTML, appelées aussi
pages. Pour se déplacer d’une page à l’autre on passe par l’intermédiaire d'hyperliens (cette notions
sera expliqué dans ce document par la suite).
Un document HTML est un document qui a l’extension HTML ou HTM indifféremment. C’est un
simple fichier texte avec l’extension htm ou html.

XHTMl : est un langage de balisage servant à écrire des pages pour le World Wide Web. Conçu à
l'origine comme le successeur d'HTML, XHTML se fonde sur la syntaxe définie par XML, plus
récente, mais plus exigeante que celle définie par pour HTML. Le but est en effet de présenter un
contenu affichable non seulement par les ordinateurs classiques, mais également sans trop de
dégradation par des PDA bien moins puissants.

         2. Les déclarations :

Le codage des caractères :


<?xml version="1.0" encoding="iso-8859-15" ?>


La norme utilisée (ici XHTML 1.0 strict) :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">


         3. Le validateur :

Toute au long de la création des site web, Il faut s’assurer d’avoir respecter les règles de syntaxe,
ceci impliquera que toutes les pages sont valides, donc auront le même sens pour tous les
navigateur.

Une page HTML (XHTML) valide est une page qui passe le test du validateur (http://
validator.w3.org)

         4. Le principe des balises :

Une balise est une limite d'une boîte où l'on peut mettre des choses (du texte et autres balises)


<balise> chose </balise>
Important : à chaque balise ouvrante <balise>, On associe une balise fermante </balise>
Exception : Certaines balises ne peuvent pas avoir un contenu, ce qui implique qu’elle n’ont pas de
balise fermante, on les nomes des balise auto-fermante ; <autrebalise />

Une balise peut avoir des attribues, on les notes comme suite :


<balise attribut1="valeur1" attribut2="valeur2">...</balise>


Important : les deux attribues « class » et « id », sont utiliser pour identifier des balises dans la
pages html sur lesquels par la suite appliquer des règles de style :
   - L’attribue « id » permet d’identifier une seule balise et il doit être unique dans la page.
   - L’attribue « class » permet de regroupe plusieurs balise dans un ensemble. Utiliser dans le
       cas d’un style commun pour plusieurs balise (les balises peuvent être de différents types
       (div, a, img….).

Dans le langage HTML, un commentaire est représenté par :


<!—ceci est un commentaire html -->


          5. La structure d'une page HTML :

La structure d’une page HTML est la suivante :


<?xml version="1.0" encoding="iso-8859-15" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

< !-- la balise html-->
<html>
         <head>
               <!-- l'en-tête -->
         </head>
         <body>
               <!-- le corps -->
         </body>
</html>
         a. L’entête :

L’entête regroupe plusieurs informations qui ne seront pas affichées sur la page HMTL, les
informations sont :

   -   Titre de la page :

<title> ma page html</title>

   -   Informations utilisées par les moteurs de recherche :


< !-- Information sur la langue du site : fre-FR, eng-Uk, ect… -->
<meta http-equiv="Content-Language" content="fre-FR" />

< !-- Information sur l’auteur du site : une société, une personne … -->
<meta name="author" content="SoftWeb " />

< !-- Information sur le droits de publications -->
<meta name="copyright" content="SoftWeb " />

< !-- Description du contenu du site -->
<meta name="description" content="une description” />

< !-- les mot clefs pour le référencement -->
<meta name="keywords" content="motClé1, motClé2, …. " />


   -   Déclaration des inclusions des différents fichiers Javascript et CSS utilisé dans la page
       HTML:


< !-- déclaration d’un fichier de style (.css) -->
<link type="text/css" rel="stylesheet" href="[chemin du fichier .css]" media="all" />
< !-- déclaration d’un fichier javascript (.js) -->
<script type="text/javascript" src="[chemin du fichier .js]"></script>




         b. Le corps

La balise « body » contient toutes les informations qui vont s'afficher dans le navigateur. Ces
informations sont :
Structuration du texte

<p> paragraphe</p>
<span>un simple texte </span>
<hr/> (trait horizontal)


<h1> Titre 1 </h1>
<h2> Titre 2 </h2>                           
...
<h6> Titre 6 </h6>
<div>bloc</div>

Les listes non ordonnées :

<ul>
        <li>Elément 1</li>
        <li>Elément 2</li>                   
</ul>

Les listes ordonnées :

<ol>
        <li>Elément 1</li>
        <li>Elément 2</li>                   
</ol>

Les tables :

<table>
       <tr>
                <td>1ère ligne, 1ère colonne</td>
                <td>1ère ligne, 2ème colonne</td>
        </tr>                                              
        <tr>
                <td>2ème ligne, 1ère colonne</td>
                <td>2ème ligne, 2ème colonne</td>
       </tr>
</table>

Au fil du texte :

Il s'agit de balises qui doivent être contenues dans celles de structuration.
     - Retour à la ligne : <br/>
     - Texte en italique : <i>...</i>
     - Texte en gras : <b>...</b>
Les liens :


< !-- Un lien vers Internet ; on parle d’un lien externe -->
<a href="http://www.google.com">Moteur de recherché google </a>

< !-- Un lien vers une page du site : on parle d’un lien interne-->
<a href="pageInterne.html">autre page</a>

< !-- Un lien vers une adresse email : par exemple dans Windows, le logiciel de gestion de mail,
Outlook sera lancer une fois on clique sur le lien, et ceci en indiquant dans la destination l’adresse
définie dans le lien-->
<a href="mailto:personnes@gmail.com">envoyer un mail </a>


Les images :


< !-- balise pour afficher une image
NB : Si l’image est inexistante ou bien le chemin est incorrect, le navigateur affiche le texte de
l’attribut « alt » -->
<img src="[chemin de l’image]" alt="description" />


Une image lien :

< !-- On peux toujours, combiner plusieurs balise.
C’est le cas pour avoir une image cliquable. On combine deux balise : <a> et <img> -->
<a href= "contact.html">
       <img src="[chemin de l’image contact]" alt="Contacter nous !" />
</a>




Cette partie donne une idée générale sur les bases du langage html, pour plus de détail consulter le
site :

En anglais :

http://www.w3schools.com/html/DEFAULT.asp

En français :
http://www.outil-referencement.com/xhtml.htm

En vidéo :
http://www.netprof.fr/Informatique/HTML,6,88,0.aspx
    II. CSS (Cascading Style Sheet) :

       Qu'est-ce que CSS

Définition : Une CSS (Cascading Style Sheet) gère l'aspect visuel du site. Si Le XHTML permet de remplir
le contenu de la page et de faire des réglages simples (gras, souligné ...) et locales. Alors Les CSS nous
permettent de faire tous les réglages de forme (positions du texte, marges, couleurs,...) de manière globale
(sur toutes les pages du site).
Les feuilles de style ont été mises au point afin de compenser les manques du langage HTML en ce qui
concerne la mise en page et la présentation. En effet, le HTML offre un certain nombre de balises permettant
de mettre en page et de définir le style d'un texte, toutefois chaque élément possède son propre style,
indépendamment des éléments qui l'entourent. Au contraire grâce aux feuilles de style, lorsque la charte
graphique d'un site composé de plusieurs centaines de pages web doit être changée, il suffit de modifier la
définition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier.

La CSS agit sur les trois facettes du design d'un site :

        - La mise en forme du texte (couleur, police, taille du texte et des titres)
        - La mise en page du site (positionnement et alignement des objets)
        - Le design (images de fond ...)

       Syntaxe :

La syntaxe du langage est comme suite :

    sélecteurA {
          propriété1    : valeur ;
          propriété2    : valeur ;
          ...
    }
    sélecteurB {
          propriété3    : valeur ;
          propriété4    : valeur ;
          ...
    }
V

       Avantages :
- Riche de style : une diversité des possibilités des feuilles de style, prenons l’exemple d’une h1

h1 {
        color: red;
        font: italic 2em Times, serif;
        text-decoration: underline;
        background: yellow;
        border: 1px solid red;
        margin-bottom: 0;
        padding: 5px;
}
- Simple à utiliser :

Sans style :

<h2>
       <font color="yellow">Ceci est écrit avec la couleur jaune</font>
</h2>
Avec css :

h2 {
        color: yellow;
}

- Utilité accrue avec l’augmentation du nombre des pages pour un site :

Supposons qu’on a une centaine de page et on veut modifier le style de toutes les pages en même temps.

- Diminuer la taille d’une page grâce à la centralisation


       Intégration de CSS dans html :

Il existe trois manières d’utiliser le CSS dans une page html :

1- Recours direct au style dans la balise elle-même
2- Définir un style (par utilisation de la notion de classe) dans la page et faire appel à ce style dans la balise
3- Définir un fichier externe contenant la liste des styles et faire appel à ce fichier dans la page.

Détaillons par des exemples chacun des cas :

1- Recours direct au style dans la balise elle-même :


<p style="color: green;">Exemple</p>


L’attribut style permet de définir les différents styles à appliquer sur les données définies dans la balise <p>.
Dans notre cas précis, le mot « Exemple » sera affiché en vert. Retenons qu’on peut définir un ensemble de
style en même temps. Par exemple, on peut écrire :


<p style="color: green; text-decoration: underline; ">Exemple</p>


On aura alors un texte en vert et souligné.
2- Définir un style (par utilisation de la notion de classe) dans la page et faire appel à ce style dans la
balise

L’exemple qui suit illustre en gras l’emplacement de la déclaration :


<html>
         <head>
                <title>page de test</title>
                <style type="text/css">
                         .maclasse {
                                color: green;
                                text-decoration: underline;
                        }
                </style>
         </head>

         <body>
              <p class="maclasse">Exemple</p>
       </body>
</html>


On peut avoir le même résultat sans faire recours à class="maclasse". En fait, il suffit de renommer
« .maclasse » en « p » (sans le point au début de la déclaration). A ce moment, toutes les balises <p> auront
ce style. L’exemple devient alors :


<html>
         <head>
                <title>page de test</title>
                <style type="text/css">
                         p{
                                color: green;
                                text-decoration: underline;
                        }
                </style>
         </head>

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



3- Définir un fichier externe contenant la liste des styles et faire appel à ce fichier dans la page.

Il suffit de créer un fichier .css contenant la liste de nos styles. Par la suite, dans la page html, on fait un
appel à ce fichier. Voici un exemple qui illustre cette démarche :


Le fichier style.css :


.maclasse {
       color: green;
       text-decoration: underline;
}
La page html :


<html>
         <head>
                <title>page de test</title>
                <link rel="stylesheet" type="text/css" href="style.css" />
         </head>

         <body>
              <p class="maclasse">Exemple</p>
       </body>
</html>


On peut aussi recourir à ce fichier de cette manière :


<html>
         <head>
                <title>page de test</title>
                <style type="text/css">
                        @import url(mes_styles.css);
                </style>
         </head>

         <body>
              <p class="maclasse">Exemple</p>
       </body>
</html>


Retenons qu’on peut mixer les trois manières d’appel au CSS dans la même page. Parfois, on est obligé à le
faire si on a définit par exemple un style générale pour la balise <p> pour toutes les pages et on veut le
personnaliser pour une page bien précise.

Pour plus de détail sur les possibilités offertes par le mécanise des css , consulter les liens suivants :

En anglais : http://www.w3schools.com/Css/default.asp

En français : http://www.cssdebutant.com/index.html

				
DOCUMENT INFO
Categories:
Tags:
Stats:
views:0
posted:10/28/2012
language:
pages:10