Notre Entreprise

NOUS CONTACTER

Image Hosted by ImageShack.us

La Motte

26400 Grane (20km sud Valence )

Image Hosted by ImageShack.us

 

 04 75 62 70 76

systemesetprojets@wanadoo.fr 

 

 

Syndication

  • Feed RSS 2.0
  • Feed ATOM 1.0
  • Feed RSS 2.0

Portail d'information Informatique Gestion d'entreprise Portail de service TPE

Image Hosted by ImageShack.us



Ce Blog créé par Systèmes et Projets est un Portail d’information aussi bien en matière de gestion comptabilité informatique, internet, juridique.... C’est aussi un Portail de service pour créateurs et dirigeants d’entreprise, artisans et TPE. 

 

Systèmes et Projets : qui sommes-nous ?  

 

Notre société  s'adresse aux dirigeants de jeunes entreprises, c'est-à-dire celles en exploitation depuis moins de trois ans mais aussi aux porteurs de projet. Partenaire des TPE notamment des artisans, Systèmes et Projets se définit comme acteur de la pérennisation des petites structures.

Des solutions aussi bien  adaptés aux artisans dans tous corps de métier : bâtiment (plombier, maçon, peintre, plaquiste, menuisier, piscinier) qu’aux artisans d’art, qu’aux services (beauté, soins, textile, travail du bois cuir métaux verre), alimentation (boucher, pâtissier, traiteur, poissonnier) sans oublier les créateurs d’entreprise.   

 

systemesetprojets@wanadoo.fr

 

Augmenter le chiffre d’affaire de votre entreprise !

MIEUX COMUNIQUERAVEC VOTRE EXPERT COMPTABLE !

Telle est notre mission !

Les feuilles de style en cascade, niveau 1

 

Les feuilles de style en cascade. Image Hosted by ImageShack.usQu’est-ce que c’est ??? Ces mots ma foi très étranges pour des néophites sont souvent utilisé sur le net notamment en programmation mais aussi pour le référencement. Alors on se lance ?  

Je vous ai bien évidemment trouvé un super site sur la question. Essayez c’est l’adopter. Toujours pour débutant bien sûr !!!!!!  Table des matières

 En suivant pas à pas les cours sur le site http://www.yoyodesign.org/doc/w3c/css1/index.html

 Vous comprendrez aisément le CSS1. Si si ! Essayez c’est l’adopter  Résumé
La terminologie  

1         Les notions de base
1.1         L'incorporation dans HTML
1.2         Le regroupement
1.3         L'héritage
1.4         Une classe comme sélecteur
1.5         Un ID comme sélecteur
1.6         Les sélecteurs contextuels
1.7         Les commentaires
2         Les pseudo-classes et les pseudo-éléments
2.1         Les pseudo-classes d'ancre
2.2         Les pseudo-éléments typographiques
2.3         Le pseudo-élément 'first-line'
2.4         Le pseudo-élément 'first-letter'
2.5         Les pseudo-éléments dans les sélecteurs
2.6         Les pseudo-éléments multiples
3         La cascade
3.1         'important'
3.2         L'ordre de cascade
4         Le modèle de mise en forme
4.1         Les éléments de type bloc
4.1.1         La mise en forme verticale
4.1.2         La mise en forme horizontale
4.1.3         Les éléments de liste
4.1.4         Les éléments flottants
4.2         Les éléments de type en-ligne
4.3         Les éléments remplacés
4.4         La hauteur de ligne
4.5         Le canevas
4.6         L'élément 'BR'
5         Les propriétés de CSS1
5.1         La notation des valeurs de propriété
5.2         Les propriétés des polices
5.2.1         L'ajustement des polices
5.2.2         'font-family'
5.2.3         'font-style'
5.2.4         'font-variant'
5.2.5         'font-weight'
5.2.6         'font-size'
5.2.7         'font'
5.3         Les propriétés de couleur et de fond
5.3.1         'color'
5.3.2         'background-color'
5.3.3         'background-image'
5.3.4         'background-repeat'
5.3.5         'background-attachment'
5.3.6         'background-position'
5.3.7         'background'
5.4         Les propriétés du texte
5.4.1         'word-spacing'
5.4.2         'letter-spacing'
5.4.3         'text-decoration'
5.4.4         'vertical-align'
5.4.5         'text-transform'
5.4.6         'text-align'
5.4.7         'text-indent'
5.4.8         'line-height'
5.5         Propriétés de boîte
5.5.1         'margin-top'
5.5.2         'margin-right'

 

 

 

5.5.3         'margin-bottom'
5.5.4         'margin-left'
5.5.5         'margin'
5.5.6         'padding-top'
5.5.7         'padding-right'
5.5.8         'padding-bottom'
5.5.9         'padding-left'
5.5.10        'padding'
5.5.11        'border-top-width'
5.5.12        'border-right-width'
5.5.13        'border-bottom-width'
5.5.14        'border-left-width'
5.5.15        'border-width'
5.5.16        'border-color'
5.5.17        'border-style'
5.5.18        'border-top'
5.5.19        'border-right'
5.5.20        'border-bottom'
5.5.21        'border-left'
5.5.22        'border'
5.5.23        'width'
5.5.24        'height'
5.5.25        'float'
5.5.26        'clear'
5.6         Les propriétés de classification
5.6.1         'display'
5.6.2         'white-space'
5.6.3         'list-style-type'
5.6.4         'list-style-image'
5.6.5         'list-style-position'
5.6.6         'list-style'
6         Les unités
6.1         Les unités de longueur
6.2         Les unités de pourcentage
6.3         Les unités de couleur
6.4         Les adresses URL
7         La conformité à CSS1
7.1         La compatibilité ascendante de l'interprétation
8         Références
9         Remerciements

Annexe A : Exemple de feuille de style pour HTML 2.0
Annexe B : Grammaire de CSS1
Annexe C : Codage
Annexe D : Correction du gamma
Annexe E : Conditions d'utilisation et capacité d'extension de CSS1
Annexe F : Changements depuis la version du 17 décembre 1996

 

 

 

 http://www.yoyodesign.org/doc/w3c/css1/index.html

 

 

 

 

 

 

 

 

 

Image Hosted by ImageShack.usLa terminologie en programmation

 

 

 

Il est important à mon avis de bien comprendre les termes informatiques et Internet si l’on veut progresser. J’ai trouvé un site qui explique de manière simple et concise le sens de chaque mot. il est utile de connaître le sens des mots sans pour autant avoir des définitions à rallonge que personne ne lit et surtout difficile à retenir dans ce mode de fou où le temps est si précieux. Vous ne croyez pas ?

 

 

agent (d')utilisateur

un agent utilisateur, souvent un navigateur ou un client Web.

attribut

attribut HTML

auteur

l'auteur d'un document HTML

balisage fictif

un moyen pour décrire le comportement des pseudo-classes et des pseudo-éléments.

canevas

la surface dessinée par l'agent utilisateur sur laquelle un document est rendu

CSS1

CSS niveau 1. Ce document définit le langage CSS1 qui est un mécanisme de feuille de style simple pour le Web.

déclaration

une propriété (ex. 'font-size') et sa valeur correspondante (ex. '12pt').

designer

l'auteur d'une feuille de style.

dimensions intrinsèques

la largeur et la hauteur définies par le seul élément, non imposées par son environnement. On considère dans cette spécification que tous les éléments remplacés, et seulement ceux-ci, ont des dimensions intrinsèques.

document

un document HTML.

élément

un élément HTML.

élément de type bloc

un élément qui a une fin de ligne avant et après (ex. 'H1' en HTML)

élément de type en-ligne

un élément qui n'a pas de fin de ligne avant ni après (ex. 'STRONG' en HTML)

élément remplacé

un élément dont l'interpréteur de CSS ne connaît que les dimensions intrinsèques. En HTML,'IMG', 'INPUT', 'TEXTAREA', 'SELECT' et 'OBJECT' sont des exemples d'éléments remplacés. Par exemple, le contenu de l'élément 'IMG' est souvent remplacé par l'image que l'attribut 'SRC' indique. CSS1 ne définit pas comment sont trouvées les dimensions intrinsèques.

élément enfant (ou enfant)

un sous-élément dans la terminologie SGML [5]

élément parent ou parent

l'élément contenant dans la terminologie SGML [5].

extension HTML

Balisage introduit par les compagnies éditrices d'agents utilisateurs, le plus souvent pour obtenir des effets visuels. Les balises 'FONT', 'CENTER' et 'BLINK' en sont des exemples, ainsi que l'attribut 'BGCOLOR'. Un des buts des feuilles de style est de fournir une alternative aux extensions HTML.

feuille de style

un ensemble de règles

feuille de style ou Cascading Style Sheets

les feuilles de style en cascade et leur format

fonctions avancées de CSS1

caractéristiques décrites dans cette spécification mais qui n'appartiennent pas aux fonctions de base de CSS1.

fonctions de base de CSS1

la partie de CSS1 obligatoire pour tous les agents utilisateurs conformes à CSS1.

HTML

Hypertext Markup Language [2] une application de SGML.

interpréteur CSS1

un agent utilisateur qui lit les feuilles de style CSS1.

lecteur

la personne qui consulte le document.

poids

l'importance relative d'une règle, son ordre de priorité.

propriété

un paramètre de style sur lequel peut agir une feuille de style. Cette spécification définit une liste de propriétés et leurs valeurs associées.

pseudo-élément

les pseudo-éléments qui sont utilisés par les sélecteurs de CSS pour agir sur des éléments typographiques (ex. la première ligne d'un élément) plutôt que sur les éléments structuraux proprement dits.

pseudo-classe

les pseudo-classes qui sont utilisées par les sélecteurs de CSS permettent des indications en supplément de la source HTML (ex. un lien a été visité ou non) pour la classification des éléments.

règle

une déclaration (ex. 'font-family: helvetica') et son sélecteur (ex. 'H1').

sélecteur

une chaîne de caractères qui identifie les éléments sur lesquels s'applique la règle correspondante. Un sélecteur est ou bien simple (ex. 'H1') ou bien contextuel (fait de plusieurs sélecteurs simples, p.ex. 'H1 B').

sélecteur contextuel

un sélecteur qui agit sur les éléments selon leur position dans la structure du document. Un sélecteur contextuel consiste en plusieurs sélecteurs simples. Par exemple, le sélecteur contextuel 'H1.initial B' est constitué des deux sélecteurs simples 'H1.initial' et 'B'.

sélecteur simple

un sélecteur qui identifie un élément par son type et/ou son attribut et non par la position de celui-ci dans la structure du document (ex. 'H1.initial' est un sélecteur simple).

SGML

Standard Generalized Markup Language [5], HTML en est une application.

taille ou corps de police

http://www.yoyodesign.org/doc/w3c/css1/index.html

 

 

 

La taille du dessin d'une police. Typiquement, le corps d'une police est à peu près égal à la distance entre le bas de la lettre avec jambage la plus basse et le haut de la lettre avec hampe la plus haute avec éventuellement un accent diacritique.

type d'élément

un identifiant générique dans la terminologie SGML [5].

utilisateur

synonyme de lecteur

Tout au long de ce texte, l'utilisation de guillemets simples ('...') correspond à des extraits de code HTML ou CSS.

  XHTML en UNE HEURE

 J’adore l’investigation quel que soit le sujet. C’est pourquoi je passe des heures à fouiner sur la toile. Dès que je découvre un site intéressant je m’empresse de vous le faire partager…N’est-ce pas cela la solidarité ??  Ce site vous apprend les bases de XHTML en une heure. Une heure pour pour les plus brillants certes mais ce cours est très bien fait. Je félicite le webmaster.

 http://openweb.eu.org/articles/xhtml_une_heure/   

 

 Image Hosted by ImageShack.us

  

En bref

 Une rapide introduction à XHTML, qui vous permettra de faire vos premières armes avec ce langage de description.

 Ce texte est une rapide introduction à XHTML. Il vous permettra de faire vos premières armes avec ce langage de description. Pour écrire en XHTML, vous pouvez utiliser un simple éditeur de texte plus ou moins évolué. Si comme certaines personnes vous préférez utiliser un éditeur HTML compatible XHTML, ce guide vous permettra de comprendre ce qui se passe au niveau du code HTML.

 Je ne vais pas vous expliquer comment convertir votre code HTML en XHTML, d'autres l'ont déjà fait. Je vais seulement considérer que vous n'avez jamais écrit de code XHTML (ou même HTML) et vous expliquer les bases de la création d'une page Web.

 Création d'un document, déclaration XML et DTD

 Un document XHTML étant un document XML il commence par une déclaration XML indiquant la version et le jeu de caractère utilisé. Ensuite vous devrez spécifier quelle DTD vous comptez utiliser avec votre document.

Note : —

 Une DTD est un document dans lequel est décrite la manière d'utiliser les différentes balises. Voir à ce propos Les DTD HTML4.01 et XHTML1.0 : comment choisir ?

 Les DTD HTML4.01 et XHTML1.0 : comment choisir ?

 Voici donc à quoi ressemble un document XHTML vide :

 <?xml version="1.0" encoding="ISO-8859-1"?>

<!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"> </html>    Le contenu de votre document se trouvera alors entre les balises <html> et </html>.  On utilise le jeu de caractère ISO-8859-1 qui correspond au jeu français.

On aurait pu utiliser n'importe quoi d'autre tel que UTF-8 par exemple. 

Vous voyez je n'ai pas menti je vous laisse surfer sur le site pour votre

apprentissage de ce programme simple et très intéressant!

http://openweb.eu.org/articles/xhtml_une_heure/

Sites d'information sur la formation professionnelle

 

 

Site du ministère de l'emploi

 

http://www.travail.gouv.fr/sous-dossiers.php3?id_rubrique=156&id_mot=297*

 

Centre Inffo

http://www.centre-inffo.fr/

 

Forum Français pour la formation ouverte et à distance

 

http://www.fffod.org/fr/index.asp
Legifrance

http://www.legifrance.gouv.fr/html/
Fédération Française de la Formation

 

http://www.ffp.org/

 

 

 

 

 

 

 

 

 

Utiliser les class et id

 

 

Source : http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1

 

 

Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes soient écrits par exemple en bleu / 18 pixels.
Comment faire pour que seulement certains paragraphes (ou certains titres, ou certaines citations) soient écrits d'une manière différente ?

On a la possibilité pour faire cela d'utiliser des attributs spéciaux qui fonctionnent sur toutes les balises :

  • L'attribut class
  • L'attribut id

  • Nous allons voir les choses suivantes dans l'ordre :
  1. Ce que sont les class et id et comment s'en servir
  2. Les balises dites "universelles" et leur utilité
  3. Les imbrications de balises

  4. Que de réjouissances en perspective !!!

Class et ID

Que les choses soient claires dès le début : les attributs class et id sont quasiment identiques. Il y a seulement une petite différence que je vous dévoilerai plus bas.
Pour le moment et pour faire simple, on ne va s'intéresser qu'à l'attribut class.

Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image que etc...
<h1 class=""> </h1>

<p class=""></p>
<img class="" />

Oui mais que met-on comme valeur à l'attribut class ?

En fait, vous mettez un nom. Ce que vous voulez.

Les class vous permettent de définir un style personnalisé.
Supposons que vous vouliez définir un style appelé "important" qui écrive le texte en rouge / 18 pixels. Vous rajouterez l'attribut class="important" à chacune des balises que vous voulez modifier.

Sur cet exemple j'ai rajouté un attribut class à un paragraphe et à la citation :

Code : HTML

<!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>Page d'exemple pour tester le CSS</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Essai 2" href="essai2.css" />
   </head>
   <body>
       <h1>Découverte du CSS</h1>
       <p>
           Bonjour !<br />
           Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour les tutoriaux du <a href="http://www.siteduzero.com">Site du Zér0</a>
       </p>
       <h2>Ce n'est que du blabla</h2>
       <p>
           Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q class="important">C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
           J'aime la choucroute en conserve.<br />
           Vive les frites !
       </p>
       <p class="important">
           Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
       </p>
   </body>
</html>


Comment faire à partir de là pour dire dans le CSS : "Je veux que toutes mes balises qui ont la class "important" soient écrits en rouge / 18 pixels" ?
C'est très simple : au lieu de mettre le nom de la balise avant les accolades (comme p ou encore h1), vous devez écrire un point suivi du nom de la class, comme par exemple :
.important

Ce qui nous donnerait le CSS suivant :

Code : CSS

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


Testez maintenant la page XHTML précédente, et voyez comment la class "important" que nous avons créée modifie le texte :

Essayer !


Pratique, n'est-ce pas ?

Et l'attribut id alors ?



Lui, il fonctionne exactement de la même manière que class, à un détail prêt : il ne peut être utilisé qu'une fois.

Quel intérêt ? Il y en a assez peu pour tout vous dire, cela vous sera utile si vous faites du Javascript plus tard pour reconnaître certaines balises. D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens (pour réaliser des ancres).

En pratique, nous ne mettrons des "id" que sur des éléments qui sont uniques sur votre page, comme par exemple le logo :
<img src="images/logo.png" alt="Logo du site" id="logo" />

Dans le CSS, ce n'est pas un point que vous devez mettre avant le nom de l'id, mais un dièse (#) :

Code : CSS

#logo
{
   /* Mettez les propriétés CSS ici */
}


Je ne vous propose pas de le tester, parce que de toute façon ça fonctionne exactement comme class.

Si vous vous emmêlez les pinceaux entre class et id (il ne devrait pas y avoir de raison, mais on sait jamais ), vous pouvez utiliser tout le temps des class car ça marchera toujours.


Pour ma part, il se peut que j'utilise des id dans la suite de ce cours. J'ai pris l'habitude de mettre un id plutôt qu'une class quand je sais que je ne m'en servirai qu'une fois.

Les balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id mais c'est plus rare) à certains mots qui ne sont pas entourés par des balises.
En effet, le problème des class c'est qu'il s'agit d'un attribut, vous ne pouvez donc en mettre que sur une balise.

Par exemple, si je veux modifier uniquement "Neil Armstrong" dans le paragraphe suivant :

Code : HTML

<p>Comme l'a dit Neil Armstrong un certain 20 juillet 1969...</p>



Ca serait facile à faire s'il y avait une balise autour de "Neil Armstrong", malheureusement il n'y en a pas.Heureusement, on a inventé la balise-qui-sert-à-rien
En fait, on a inventé 2 balises qui ne servent à rien, avec une petite (mais importante !) différence entre les deux :

  • <span> </span> : c'est une balise de type inline. Vous vous souvenez ce qu'est une balise inline ? C'est une balise qui se met à l'intérieur d'un paragraphe, comme <strong>, <em>, <q>. Cette balise s'utilise donc au milieu d'un paragraphe, et c'est celle dont nous allons nous servir pour colorer Neil Armstrong.
  • <div> </div> : c'est une balise de type block. Comme <p>, <h1> etc... Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne. C'est une balise très très utilisée pour faire un design. Nous lui dédierons d'ailleurs 2 chapitres entiers dans la partie III du cours pour vous aider à construire le design de votre site web.

    Pour le moment donc, nous allons utiliser plutôt la balise <span>.On la met autour de Neil Armstrong, on lui rajoute une class, on crée le CSS et puis basta

    Code : HTML

<p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</p>


Code : CSS

.nom
{
   color: blue;

Pour en savoir plus sur ce cours aller sur le site très bien fait : http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1

 

 

 

Où mettre du CSS ?

 

Source : http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1

 

 

Vous vous souvenez ce que CSS veut dire ? Je vous en ai rapidement parlé dans le premier chapitre du cours. Cela signifie : "Cascading Style Sheets", ce qui peut se traduire en français par "Feuilles de style en cascade".

On dit "Feuille de style" car en règle générale, on écrit le code CSS dans un fichier à part (à l'extension .css au lieu de .html). C'est un fichier dans lequel on écrit l'apparence que notre site doit avoir : la couleur et la police du texte, la taille des titres, la position des menus, la couleur ou l'image de fond etc...Croyez-moi, le CSS permet de faire une foule de choses !

Imbrication de balises

Source : http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1


Une des dernières notions "de base" que je souhaite vous enseigner sur le CSS est qu'on a la possibilité d'indiquer l'ordre d'imbrication des balises dans le CSS.
On pourrait penser que c'est encore un truc tordu inventé par des informaticiens portant des grosses lunettes... mais que nenni !
C'est en fait simple à comprendre, et surtout utile.

Nous sommes dans notre fichier CSS. Nous souhaiterions définir un style uniquement pour les balises <em> qui se trouvent à l'intérieur d'un titre <h3>.On doit écrire ceci :

Code : CSS

h3 em /* => tous les em situés à l'intérieur d'un h3 */
{
   color: blue;
}
Comme vous le voyez, on a juste séparé les 2 noms de balises par un espace, et non pas par une virgule comme on l'a fait plus haut.
Cela signifie "Je veux modifier le style de toutes les balises <em> situées à l'intérieur de titres <h3>". On a indiqué dans le CSS dans quel ordre devaient être imbriquées les balises.

L'ordre est très important ! Si vous aviez mis "em h3" cela aurait voulu dire "Tous les <h3> situés à l'intérieur de balises <em>".Cela est d'ailleurs impossible à faire car on ne peut pas mettre une balise de type block dans une balise de type inline.


Voici un fichier XHTML pour que vous compreniez bien comment ça fonctionne :
Code : HTML

<h3>L'imbrication, c'est <em>pratique</em></h3>

<p>Cet exemple vous montre comment fonctionne l'imbrication.<br />Le mot "pratique" dans le titre sera écrit en bleu, mais pas celui-ci : <em>pratique</em>.</p>

Essayer !


Pratique, n'est-ce pas ?

Vous pouvez aussi mélanger des balises et des class :
p .important

Ce qui signifie : "Toutes les class "important" contenues dans des balises <p>".

Un petit exemple tordu pour terminer en beauté :
blockquote p strong, h1 .important

Alors là, attention de ne pas tout mélanger. La virgule "coupe" la ligne en deux, elle signifie "ET". Pour bien voir que la ligne est coupée en deux, je vais colorer les deux parties :
blockquote p strong, h1 .important

Ce qui veut dire : "Toutes les balises <strong> contenues dans un <p> elles-mêmes contenues dans un <blockquote> ET
toutes les class "important" contenues dans un titre <h1>"

Il existe des possibilités plus étendues en CSS pour l'imbrication, mais à notre stade non seulement ce n'est pas très utile et ça risque de vous embrouiller, mais

Source : http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1

 

 

 

 

Créer une page XHTML  

 

http://www.siteduzero.com/tuto-3-24-1-votre-premiere-page-xhtml.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420 

 

Aller au menu - Aller au contenu

Les tutoriaux

Vous débutez ? Nos cours sont faits pour vous !  

 

Livre d'or

Par thomassss :
"very good good good"

Signez le livre !

Publicité

Votre publicité ici !

 

 

[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriaux > Officiels > Site Web > Apprenez à créer votre site web ! > Les bases du XHTML > Votre première page XHTML > Lecture du tutorial

Votre première page XHTML  

C'est bon, vous avez tous les logiciels qu'il faut ?
Alors ne traînons plus, on va maintenant passer à l'attaque et réaliser notre première page en XHTML. Comme je vous l'ai dit dans le chapitre précédent, il n'y aura pas de CSS pour le moment.

Et c'est partiii !

Sommaire du chapitre :

·      Les balises et attributs

·      Une page XHTML

·      Les commentaires

·         Q.C.M.

Les balises et attributs  

Avant de commencer à écrire notre première page web, il faut que je vous présente à quoi ressemble ce fameux langage XHTML.
Par exemple, pour écrire "Bienvenue sur mon site !" en XHTML, comment on fait ? Bah, il suffit de le taper :
Bienvenue sur mon site !

Jusque-là, pas trop dur... Oui mais attendez, si c'était ça, ça serait trop simple et forcément ça serait pas rigolo

LES BALISES

En effet dans une page XHTML, en plus du texte, vous allez trouver un autre élément au milieu : ce sont les balises.
Une balise commence par "<" et se termine par ">". Par exemple :
<balise>

Les balises sont invisibles pour le visiteur, elles servent de marqueurs pour indiquer quelque chose au navigateur. Par exemple, une balise permet d'indiquer que tel texte est le titre de votre page, cet autre texte est une citation etc etc...

Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au contraire sont toutes seules.

  • Les balises existant par paire : ce sont les plus courantes. On écrit la première balise, on tape du texte, puis on "ferme" la balise en la réécrivant avec un slash devant "/". Par exemple :

    Code : Xhtml

<titre>Bienvenue sur mon site !</titre>
La première balise <titre> indique le début du titre, et elle est refermée plus loin avec </titre>.
Le navigateur comprend que ce qui est entre <titre> et </titre> est le titre de votre site web, et que celui-ci est "Bienvenue sur mon site !"

  • Les balises seules : elles sont un peu plus rares, mais il y en a quand même. On s'en sert en général pour insérer un élément dans une page.
    Ce type de balise se termine toujours par un slash "/", mais cette fois le slash se trouve à la fin de la balise. Par exemple la balise qui permet d'insérer une image :

    Code : Xhtml

<image />


Cette balise indique juste qu'il y a une image à cet endroit.


Il est donc facile de reconnaître à quel type de balise on a affaire :

  • Si vous voyez <truc>, c'est qu'il s'agit forcément d'une balise existant par paire, et donc que vous allez trouver un </truc> un peu plus loin, pour indiquer la fermeture de la balise.
  • Si vous voyez <truc />, c'est une balise seule.  

 

Les Attributs

Les attributs sont un moyen de donner des précisions sur une balise. On peut trouver des attributs sur les deux types de balises (par paire ou seules).
Par exemple, prenons la balise seule <image />. C'est bien beau de dire qu'on insère une image, mais encore faut-il indiquer laquelle. On fera ça avec un attribut :

Code : Xhtml