Pages

vendredi 27 septembre 2013

CSS - La couleur et le fond - Couleur du texte

Passons maintenant au vaste sujet de la couleur.
Comment cela, « vaste » ?
Vous connaissez déjà la propriété qui permet de modifier la couleur du texte : il s'agit de color. Nous allons nous intéresser aux différentes façons d'indiquer la couleur, car il y en a plusieurs.

Indiquer le nom de la couleur

La méthode la plus simple et la plus pratique pour choisir une couleur consiste à taper son nom (in english, of course).
Plus d'infos »
Publié par à 0 commentaires

CSS - La couleur et le fond - Couleur de fond

Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Eh oui,<body> correspond à l'ensemble de la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur d'arrière-plan de la page.
Plus d'infos »
Publié par à 0 commentaires

CSS - La couleur et le fond - Images de fond

Dans les exemples qui suivent, je vais modifier l'image de fond de la page. Cependant, tout comme pour la couleur de fond, n'oubliez pas que l'image de fond ne s'applique pas forcément à la page entière. On peut aussi mettre une image de fond derrière les titres, paragraphes, etc.

Appliquer une image de fond

La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit renseigner url("nom_de_l_image.png"). Par exemple :
Plus d'infos »
Publié par à 0 commentaires

CSS - La couleur et le fond - La transparence

Le CSS nous permet de jouer très facilement avec les niveaux de transparence des éléments ! Pour cela, nous allons utiliser des fonctionnalités de CSS3 : la propriété opacity et la notation RGBa.

La propriété opacity

La propriété opacity, très simple, permet d'indiquer le niveau d'opacité (c'est l'inverse de la transparence).
  • Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut.
  • Avec une valeur de 0, l'élément sera totalement transparent.
Plus d'infos »
Publié par à 0 commentaires

CSS - Les bordures et les ombres - Bordures standard

Le CSS vous offre un large choix de bordures pour décorer votre page. De nombreuses propriétés CSS vous permettent de modifier l'apparence de vos bordures : border-width, border-color, border-style…
Pour aller à l'essentiel, je vous propose ici d'utiliser directement la super-propriété border qui regroupe l'ensemble de ces propriétés. Vous vous souvenez de la super-propriété background ? Cela fonctionne sur le même principe : on va pouvoir combiner plusieurs valeurs.
Plus d'infos »
Publié par à 0 commentaires

CSS - Les bordures et les ombres - Bordures arrondies

Les bordures arrondies, c'est un peu le Saint Graal attendu par les webmasters depuis des millénaires (ou presque). Depuis que CSS3 est arrivé, il est enfin possible d'en créer facilement !
La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe quel élément. Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en pixels :
Plus d'infos »
Publié par à 0 commentaires

CSS - Les bordures et les ombres - Les ombres

Les ombres font partie des nouveautés récentes proposées par CSS3. Aujourd'hui, il suffit d'une seule ligne de CSS pour ajouter des ombres dans une page !
Nous allons ici découvrir deux types d'ombres :
  • les ombres des boîtes ;
  • les ombres du texte.
Plus d'infos »
Publié par à 0 commentaires

CSS - Création D'apparences dynamiques - Au survol

Nous allons découvrir dans ce chapitre plusieurs pseudo-formats CSS. Le premier que je vais vous montrer s'appelle :hover. Comme tous les autres pseudo-formats que nous allons voir, c'est une information que l'on rajoute après le nom de la balise (ou de la classe) dans le CSS, comme ceci :
Plus d'infos »
Publié par à 0 commentaires

CSS - Création D'apparences dynamiques - Au clic et lors de la sélection

Vous pouvez interagir encore plus finement en CSS. Nous allons voir ici que nous pouvons changer l'apparence des éléments lorsque l'on clique dessus et lorsqu'ils sont sélectionnés !

:active : au moment du clic

Le pseudo-format :active permet d'appliquer un style particulier au moment du clic. En pratique, il n'est utilisé que sur les liens.
Le lien gardera cette apparence très peu de temps : en fait, le changement intervient lorsque le bouton de la souris est enfoncé. En clair, ce n'est pas forcément toujours bien visible.
Plus d'infos »
Publié par à 0 commentaires

CSS - Création D'apparences dynamiques - Lorsque le lien a déjà été consulté

Il est possible d'appliquer un style à un lien vers une page qui a déjà été vue. Par défaut, le navigateur colore le lien en un violet assez laid (de mon point de vue du moins !).
Vous pouvez changer cette apparence avec :visited (qui signifie « visité »). En pratique, sur les liens consultés, on ne peut pas changer beaucoup de choses à part la couleur (figure suivante).
Plus d'infos »
Publié par à 0 commentaires

HTML5 - Comment fait-on pour créer des sites web ? "Le fonctionnement des sites web"

Comment fonctionnent les sites web ?
Non, n'ayez pas peur de poser des questions même si vous pensez qu'elles sont « bêtes ». Il est très important que nous en parlions un peu avant de nous lancer à fond dans la création de sites !
Je suis certain que vous consultez des sites web tous les jours. Pour cela, vous lancez un programme appelé le navigateur web en cliquant sur l'une des icônes représentées à la figure suivante.
Les icônes des navigateurs web les plus répandus
Les icônes des navigateurs web les plus répandus
Plus d'infos »
Publié par à 0 commentaires

HTML5 - Comment fait-on pour créer des sites web ? "HTML et CSS : deux langages pour créer un site web"

Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le texte qui devra figurer dans le site (comme on le ferait dans un traitement de texte Word, par exemple), il faut aussi indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc.

Les rôles de HTML et CSS

Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Et c'est là que les choses se corsent, parce qu'il va falloir apprendre deux langages !
Plus d'infos »
Publié par à 0 commentaires

HTML5 - Comment fait-on pour créer des sites web ? "l'éditeur de texte"

De quel logiciel vais-je avoir besoin pour créer mon site web ?

Vais-je devoir casser ma tirelire pour acheter un logiciel très complexe que je vais mettre des mois à comprendre ?
Il existe effectivement de nombreux logiciels dédiés à la création de sites web. Mais, je vous rassure, vous n'aurez pas à débourser un seul centime. Pourquoi aller chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu'il faut chez vous ?
Plus d'infos »
Publié par à 0 commentaires

HTML5 - Comment fait-on pour créer des sites web ? "les navigateurs"

Pourquoi le navigateur est important

Le navigateur est le programme qui nous permet de voir les sites web. Comme je vous l'ai expliqué plus tôt, le travail du navigateur est de lire le code HTML et CSS pour afficher un résultat visuel à l'écran. Si votre code CSS dit « Les titres sont en rouge », alors le navigateur affichera les titres en rouge. Le rôle du navigateur est donc essentiel !
On ne dirait pas, mais un navigateur est un programme extrêmement complexe. En effet, comprendre le code HTML et CSS n'est pas une mince affaire. Le principal problème, vous vous en rendrez vite compte, c'est que les différents navigateurs n'affichent pas le même site exactement de la même façon ! Il faudra vous y faire et prendre l'habitude de vérifier régulièrement que votre site fonctionne correctement sur la plupart des navigateurs.
Plus d'infos »
Publié par à 0 commentaires

HTML5 - Votre première page web en HTML "créer une page web avec l'éditeur"

Allez, mettons-nous en situation ! Comme je vous l'ai dit, nous allons créer notre site dans un éditeur de texte. Vous avez dû en installer un suite à mes conseils dans le premier chapitre : qu'il s'appelle Notepad++, PSpad, jEdit, vim, TextWrangler… peu importe. Ces logiciels ont un but très simple : vous permettre d'écrire du texte !
Dans la suite de ce cours, je travaillerai avec Notepad++. Je vais donc l'ouvrir (figure suivante).
Plus d'infos »
Publié par à 0 commentaires

HTML5 - Votre première page web en HTML "les balises et leurs attribus"

Bon, tout cela était trop facile. Évidemment, il a fallu que ces satanés informaticiens s'en mêlent et compliquent les choses. Il ne suffit pas d'écrire « simplement » du texte dans l'éditeur, il faut aussi donner des instructions à l'ordinateur. En HTML, on utilise pour cela des balises.

Les balises

Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
Plus d'infos »
Publié par à 0 commentaires

HTML5 - Votre première page web en HTML "structure de base d'une page HTML5"

Reprenons notre éditeur de texte (dans mon cas Notepad++). Je vous invite à écrire ou à copier-coller le code source ci-dessous dans Notepad++. Ce code correspond à la base d'une page web en HTML5 :
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>
 
    <body>
     
    </body>
</html>
Plus d'infos »
Publié par à 0 commentaires

HTML5 - Votre première page web en HTML "les commentaires"

Nous avons appris à créer notre première vraie page HTML dans ce chapitre. Avant de terminer, j'aimerais vous présenter le principe des commentaires.
Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas affiché, il n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page.
Bref, cela ne sert à rien ?
Plus d'infos »
Publié par à 0 commentaires

HTML5 - Créer des liens "un lien vers un autre site"

Il est facile de reconnaître les liens sur une page : ils sont écrits d'une façon différente (par défaut, en bleu et soulignés) et un curseur en forme de main apparaît lorsqu'on pointe dessus.
Je vous propose d'essayer de coder le lien qui amène vers le Site du Zéro, comme à la figure suivante.
Lien vers le Site du Zéro
Lien vers le Site du Zéro
Plus d'infos »
Publié par à 0 commentaires

HTML5 - Créer des liens "un lien vers une autre page de son site"

Nous venons d'apprendre à créer des liens vers des sites existants. Mais je suis sûr que vous aimeriez faire des liens entre les différentes pages de votre site, non ?
Oui, justement, comment je fais pour faire un lien vers une autre page de mon site ? Je ne connais pas son adresse en http://…, je commence à peine à créer mon site là ! Je n'ai pas d'adresse.
Plus d'infos »
Publié par à 0 commentaires
Inscription à : Articles (Atom)