Rechercher
 
 

Résultats par :
 

 


Rechercher Recherche avancée

Août 2017
LunMarMerJeuVenSamDim
 123456
78910111213
14151617181920
21222324252627
28293031   

Calendrier Calendrier

Mots-clés

Souss  Mimouni  


débuter avec HTML + CSS

Poster un nouveau sujet   Répondre au sujet

Voir le sujet précédent Voir le sujet suivant Aller en bas

Yabiladi débuter avec HTML + CSS

Message par sguirite le Lun 14 Sep - 18:12

débuter avec HTML + CSS
http://www.w3.org/Style/Examples/011/firstcss.fr.html

Ce court tutoriel est destiné à ceux qui commencent à utiliser CSS et n'ont jamais écrit de feuille de style CSS.

Il n'explique pas CSS en profondeur. Il explique comment créer un fichier HTML, un fichier CSS et comment les faire fonctionner ensemble. Après cela, vous pourrez lire d'autres tutoriels afin d'ajouter plus de caractéristiques à vos fichiers HTML et CSS

sguirite

Nombre de messages : 67
Age : 39
Date d'inscription : 04/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Yabiladi Re: débuter avec HTML + CSS

Message par sguirite le Lun 14 Sep - 18:21

Voici le code pour une page  index avec du STYLE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Ma première page avec du style</title>
</head>

<body>

<!-- Menu de navigation du site -->
<ul class="navbar">
 <li><a href="index.html">Home page</a>
 <li><a href="reflexions.html">Réflexions</a>
 <li><a href="ville.html">Ma ville</a>
 <li><a href="liens.html">Liens</a>
</ul>

<!-- Contenu principal -->
<h1>Ma première page avec du style</h1>

<p>Bienvenue sur ma page avec du style!

<p>Il lui manque des images, mais au moins, elle a du style. Et elle a desliens, même s'ils ne mènent nulle part...
&hellip;

<p>Je devrais étayer, mais je ne sais comment encore.

<!-- Signer et dater la page, c'est une question de politesse! -->
<address>Fait le 5 avril 2004<br>
 par moi.</address>

</body>
</html>


et voila la page en question:


http://www.w3.org/Style/Examples/011/firstcss.fr.html
remerciements:


Dernière édition par sguirite le Lun 14 Sep - 20:07, édité 1 fois

sguirite

Nombre de messages : 67
Age : 39
Date d'inscription : 04/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Yabiladi Re: débuter avec HTML + CSS

Message par sguirite le Lun 14 Sep - 18:34

La première ligne du fichier HTML ci-dessus dit au navigateur de quel type d'HTML il s'agit (DOCTYPE signifie DOCument TYPE). Dans ce cas, il s'agit de la version 4.01 d'HTML.

Les mots à l'intérieur de < et > sont nommés balises et comme vous pouvez le voir, le document est contenu à l'intérieur des balises et . Entre et se trouve la place pour des informations variées qui ne sont pas affichées à l'écran. A ce stade, il contient le titre du document, mais plus tard, nous y ajouterons la feuille de style CSS.

Le est l'emplacement du texte à proprement parler de notre document. En principe, tout ce qui s'y trouve sera affiché, à l'exception du texte contenu entre entre , qui sert de commentaire pour nous-même. Le navigateur ignorera ce texte.

Parmi les balises de l'exemple,

sguirite

Nombre de messages : 67
Age : 39
Date d'inscription : 04/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Yabiladi Re: débuter avec HTML + CSS

Message par sguirite le Lun 14 Sep - 18:37

le css intégré a la page index voir avant:

 <style type="text/css">
 body {
   color: purple;
   background-color: #d8da3d }
 </style>




La première ligne indique qu'il s'agit d'une feuille de style et qu'elle est écrite en CSS ("text/css"). La seconde ligne indique que nous ajoutons du style à l'élément "body". La troisième ligne indique que la couleur du texte sera le violet, et la ligne suivante que le fond aura comme couleur une sorte de jaune verdâtre.

note:
Les feuilles de style en CSS sont constituées de règles. Chacune des règles est en trois partie:

   Le sélecteur (dans l'exemple: "body"), qui indique au navigateur quelle partie du document est affectée par la règle;
   La propriété (dans l'exemple, 'color' et 'background-color' sont des propriétés), qui spécifie quel aspect de l'affichage est paramétré
   Et la valeur ('purple' et '#d8da3d'), qui indique la valeur de la propriété de style.

L'exemple montre que les règles peuvent être combinées. Nous avons paramétré deux propriétés, donc nous aurions pu en faire deux règles séparées:

body { color: purple }
body { background-color: #d8da3d }

mais puisque les deux règles affectent le corps ("body"), nous avons indiqué "body" une seule fois et mis les propriétés et valeurs ensemble


En CSS, les couleurs peuvent être spécifiées de plusieurs manières. Cet exemple en montre deux: par nom ("purple") et par code hexadécimal ("#d8da3d").

sguirite

Nombre de messages : 67
Age : 39
Date d'inscription : 04/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Yabiladi Re: débuter avec HTML + CSS

Message par sguirite le Lun 14 Sep - 18:47

puis!

Etape 3: Ajouter des fontes

notre style (css) deviendra
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;

color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }

</style>

et la page index deviendra alors:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Ma première page avec du style</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>

</head>

<body>

<!-- Menu de navigation du site -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="reflexions.html">Réflexions</a>
<li><a href="ville.html">Ma ville</a>
<li><a href="liens.html">Liens</a>
</ul>

<!-- Contenu principal -->
<h1>Ma première page avec du style</h1>

<p>Bienvenue sur ma page avec du style!

<p>Il lui manque des images, mais au moins, elle a du style. Et elle a desliens, même s'ils ne mènent nulle part...
&hellip;

<p>Je devrais étayer, mais je ne sais comment encore.

<!-- Signer et dater la page, c'est une question de politesse! -->
<address>Fait le 5 avril 2004<br>
par moi.</address>

</body>
</html>

sguirite

Nombre de messages : 67
Age : 39
Date d'inscription : 04/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Yabiladi Re: débuter avec HTML + CSS

Message par sguirite le Lun 14 Sep - 18:55

Ajoutez la barre de navigation:

La liste en haut de la page HTML est sensée devenir un menu de navigation. Beaucoup de sites Web ont une sorte de menu en haut ou sur le côté de la page, et notre page devrait en avoir un aussi. Nous le mettrons du côté gauche, parce que c'est un peu plus intéressant qu'en haut…

Le menu est déjà dans la page HTML. Il s'agit de la liste <ul> en haut. Les liens à l'intérieur ne fonctionnent pas, puisque notre notre "site Web" consiste en une seule page, jusqu'à présent, donc ceci importe peu. Dans un site Web réel, il ne devrait pas y avoir de lien cassé, évidemment.

Nous devons donc déplacer la liste à gauche, et le reste du texte un petit peu à droite, pour faire de la place pour notre menu. Les propriétés CSS que nous utiliserons pour cela sont 'padding-left' (pour déplacer le texte du corps) et 'position', 'left' et 'top' (pour déplacer le menu).

Il y a d'autres manières de le faire. Si vous recherchez "column" ou "layout" dans la page Learning CSS, vous trouverez plusieurs modèles prêt à l'emploi. Mais cette manière convient à nos besoins.


Dans la fenêtre d'édition, ajoutez les lignes suivantes au fichier HTML :

<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }

h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>

et notre page index deviendra alors:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Ma première page avec du style</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }

h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>

<body>

<!-- Menu de navigation du site -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="reflexions.html">Réflexions</a>
<li><a href="ville.html">Ma ville</a>
<li><a href="liens.html">Liens</a>
</ul>

<!-- Contenu principal -->
<h1>Ma première page avec du style</h1>

<p>Bienvenue sur ma page avec du style!

<p>Il lui manque des images, mais au moins, elle a du style. Et elle a desliens, même s'ils ne mènent nulle part...
&hellip;

<p>Je devrais étayer, mais je ne sais comment encore.

<!-- Signer et dater la page, c'est une question de politesse! -->
<address>Fait le 5 avril 2004<br>
par moi.</address>

</body>
</html>

sguirite

Nombre de messages : 67
Age : 39
Date d'inscription : 04/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Yabiladi Re: débuter avec HTML + CSS

Message par sguirite le Lun 14 Sep - 18:59

@sguirite a écrit:Ajoutez la barre de navigation:

La liste en haut de la page HTML est sensée devenir un menu de navigation. Beaucoup de sites Web ont une sorte de menu en haut ou sur le côté de la page, et notre page devrait en avoir un aussi. Nous le mettrons du côté gauche, parce que c'est un peu plus intéressant qu'en haut…

Le menu est déjà dans la page HTML. Il s'agit de la liste <ul> en haut. Les liens à l'intérieur ne fonctionnent pas, puisque notre notre "site Web" consiste en une seule page, jusqu'à présent, donc ceci importe peu. Dans un site Web réel, il ne devrait pas y avoir de lien cassé, évidemment.

Nous devons donc déplacer la liste à gauche, et le reste du texte un petit peu à droite, pour faire de la place pour notre menu. Les propriétés CSS que nous utiliserons pour cela sont 'padding-left' (pour déplacer le texte du corps) et 'position', 'left' et 'top' (pour déplacer le menu).

Il y a d'autres manières de le faire. Si vous recherchez "column" ou "layout" dans la page Learning CSS, vous trouverez plusieurs modèles prêt à l'emploi. Mais cette manière convient à nos besoins.


Dans la fenêtre d'édition, ajoutez les lignes suivantes au fichier HTML :

 <style type="text/css">
 body {
   padding-left: 11em;
   font-family: Georgia, "Times New Roman",
         Times, serif;
   color: purple;
   background-color: #d8da3d }
ul.navbar {
   position: absolute;
   top: 2em;
   left: 1em;
   width: 9em }

 h1 {
   font-family: Helvetica, Geneva, Arial,
         SunSans-Regular, sans-serif }
 </style>

et notre page index deviendra alors:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Ma première page avec du style</title>
 <style type="text/css">
 body {
   padding-left: 11em;
   font-family: Georgia, "Times New Roman",
         Times, serif;
   color: purple;
   background-color: #d8da3d }
 ul.navbar {
   position: absolute;
   top: 2em;
   left: 1em;
   width: 9em }

 h1 {
   font-family: Helvetica, Geneva, Arial,
         SunSans-Regular, sans-serif }
 </style>
</head>

<body>

<!-- Menu de navigation du site -->
<ul class="navbar">
 <li><a href="index.html">Home page</a>
 <li><a href="reflexions.html">Réflexions</a>
 <li><a href="ville.html">Ma ville</a>
 <li><a href="liens.html">Liens</a>
</ul>

<!-- Contenu principal -->
<h1>Ma première page avec du style</h1>

<p>Bienvenue sur ma page avec du style!

<p>Il lui manque des images, mais au moins, elle a du style. Et elle a desliens, même s'ils ne mènent nulle part...
&hellip;

<p>Je devrais étayer, mais je ne sais comment encore.

<!-- Signer et dater la page, c'est une question de politesse! -->
<address>Fait le 5 avril 2004<br>
 par moi.</address>

</body>
</html>

et voila ce que cela donne dans mon navigateur:



pour faire la comparaison avec la toute première voila:



ps!
'position: absolute' précise que l'élément ul est positionné de façon indépendante de tout texte qui vient avant ou après dans le document, et 'left' et 'top' indiquent quelle est cette position. Dans ce cas, 2em depuis le haut et 1em depuis le côté gauche de cette fenêtre.

'2em' signifie 2 fois la taille de la fonte courante. C'est à dire que si le menu est affiché avec une fonte de 12 points, '2em' font 24 points. L'unité 'em' est très utile en CSS puisqu'elle peut s'adapter automatiquement à la fonte que le lecteur utilise. La plupart des navigateurs ont un menu pour agrandir et réduire la taille de fonte: vous pouvez l'essayer et voir comment la taille du menu augmente dès que la fonte grossit, ce qui n'aurait pas été le cas si nous avions utilisé une taille en pixels à la place.

sguirite

Nombre de messages : 67
Age : 39
Date d'inscription : 04/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Yabiladi Re: débuter avec HTML + CSS

Message par sguirite le Lun 14 Sep - 19:10

Stylisez vos liens

Le menu de navigation ressemble toujours à une liste au lieu d'un menu. Ajoutons un peu de style. Nous allons supprimer les points de la liste et déplacer les éléments à gauche, à l'endroit où étaient les points. Nous allons aussi donner à chaque élément son propre fond blanc ainsi qu'un carré noir. (Pourquoi? Aucune raison en particulier, si ce n'est que l'on peut le faire.)

Nous n'avons pas déterminé quelle couleur auront les liens, alors nous ajouterons cela également: bleu pour les liens que l'utilisateur n'a pas encore vu et violet pour les liens déjà visités :


et notre css devient alors:

padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;

position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }

</style>

et notre fichier index deviendra:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Ma première page avec du style</title>
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>

<body>

<!-- Menu de navigation du site -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="reflexions.html">Réflexions</a>
<li><a href="ville.html">Ma ville</a>
<li><a href="liens.html">Liens</a>
</ul>

<!-- Contenu principal -->
<h1>Ma première page avec du style</h1>

<p>Bienvenue sur ma page avec du style!

<p>Il lui manque des images, mais au moins, elle a du style. Et elle a desliens, même s'ils ne mènent nulle part...
&hellip;

<p>Je devrais étayer, mais je ne sais comment encore.

<!-- Signer et dater la page, c'est une question de politesse! -->
<address>Fait le 5 avril 2004<br>
par moi.</address>

</body>
</html>


sguirite

Nombre de messages : 67
Age : 39
Date d'inscription : 04/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Yabiladi Re: débuter avec HTML + CSS

Message par sguirite le Lun 14 Sep - 19:19

Ligne horizontale

L'ajout final à notre feuille de style est une ligne horizontale pour séparer le texte de la signature en bas. Nous utiliserons 'border-top' afin d'ajouter une ligne en pointillé au-dessus de l'élément <address> :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Ma première page avec du style</title>
 <style type="text/css">
 body {
   padding-left: 11em;
   font-family: Georgia, "Times New Roman",
         Times, serif;
   color: purple;
   background-color: #d8da3d }
 ul.navbar {
   list-style-type: none;
   padding: 0;
   margin: 0;
   position: absolute;
   top: 2em;
   left: 1em;
   width: 9em }
 h1 {
   font-family: Helvetica, Geneva, Arial,
         SunSans-Regular, sans-serif }
 ul.navbar li {
   background: white;
   margin: 0.5em 0;
   padding: 0.3em;
   border-right: 1em solid black }
 ul.navbar a {
   text-decoration: none }
 a:link {
   color: blue }
 a:visited {
   color: purple }
 address {
   margin-top: 1em;
   padding-top: 1em;
   border-top: thin dotted }

 </style>
</head>

et notre index page sera alors:




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Ma première page avec du style</title>
 <style type="text/css">
 body {
   padding-left: 11em;
   font-family: Georgia, "Times New Roman",
         Times, serif;
   color: purple;
   background-color: #d8da3d }
 ul.navbar {
   list-style-type: none;
   padding: 0;
   margin: 0;
   position: absolute;
   top: 2em;
   left: 1em;
   width: 9em }
 h1 {
   font-family: Helvetica, Geneva, Arial,
         SunSans-Regular, sans-serif }
 ul.navbar li {
   background: white;
   margin: 0.5em 0;
   padding: 0.3em;
   border-right: 1em solid black }
 ul.navbar a {
   text-decoration: none }
 a:link {
   color: blue }
 a:visited {
   color: purple }
 address {
   margin-top: 1em;
   padding-top: 1em;
   border-top: thin dotted }
 </style>
</head>

<body>

<!-- Menu de navigation du site -->
<ul class="navbar">
 <li><a href="index.html">Home page</a>
 <li><a href="reflexions.html">Réflexions</a>
 <li><a href="ville.html">Ma ville</a>
 <li><a href="liens.html">Liens</a>
</ul>

<!-- Contenu principal -->
<h1>Ma première page avec du style</h1>

<p>Bienvenue sur ma page avec du style!

<p>Il lui manque des images, mais au moins, elle a du style. Et elle a desliens, même s'ils ne mènent nulle part...
&hellip;

<p>Je devrais étayer, mais je ne sais comment encore.

<!-- Signer et dater la page, c'est une question de politesse! -->
<address>Fait le 5 avril 2004<br>
 par moi.</address>

</body>
</html>

sguirite

Nombre de messages : 67
Age : 39
Date d'inscription : 04/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Yabiladi Re: débuter avec HTML + CSS

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum