Cours

Voici les liens de références du cours d’infographie-webdesign de 3e Graphisme et Publicité à l’Esa Saint-Luc Liège. Pour le planning de l’école et des cours, visitez la page iCal.

Sites ultra complets (web, art numérique, etc. )

HTML

CSS

Positionnement CSS

Typographie en CSS2 et CSS3

Développement web

Dreamweaver (license)

CMS WordPress (open-source)

Javascript et jQuery (open-source)

Processing (open-source)

Webdesign et ergonomie

FTP (pour mettre vos sites sur Internet)

Hébergeurs de sites Internet

Logiciels utilisés (gratuits)

Logiciels utilisés (payant)

Webdesign analysés

Indesign

82 commentaires pour “Cours”

  1. admin
    décembre 6th, 2011 at 19 h 25 min

    Bonjour à tous. Ces commentaires sont ouverts UNIQUEMENT aux étudiants de 3e Graphisme et Publicité dans le cadre du cours et de l’examen théorique de janvier en Infographie (pour les dates de cet examen voir la page Planning).

    Après avoir lu les liens ci-dessus, vos notes de cours et les éventuels livres, vous devez chacun POSTER ici (en dessous dans les commentaires de cette page) UNE QUESTION accompagnée de sa RÉPONSE. Le tout sans faute d’orthographe. Attention, deux questions de sens semblable ne peuvent être publiées. Soyez le plus rapide et vous serez le premier servi.

    La question-réponse pourra concerner N’IMPORTE QUEL sous-titre (HTML, CSS, FTP…) de la page cours SAUF les sous-titres « CMS-WORDPRESS » et « INDESIGN » qui n’ont pas encore été vus.

    Ces commentaires sont modérés par moi-même. Tant que la question ou la réponse n’est pas correcte, je ne la publie pas. Je tiendrai compte de la pertinence des questions pour les valider.

    Attention, pour être autorisé à passer l’examen théorique dispensatoire de janvier vous devez avoir rempli 2 conditions:

    1. avoir une question et sa réponse publiée sur cette page « Cours »
    2. avoir rendu à la date demandée la page « graphiste » ou « publicitaire »

    Besoin d’aide ? Je vous propose la page Facebook 3e INFO > Centre de crise
  2. Even Eléna
    décembre 7th, 2011 at 14 h 16 min

    Quel est le set de caractères à utiliser pour la création d’un site en langue française?

    > UTF-8
    NDP(note du prof): Voir UTF-8 chez Alsacréations
  3. lola
    décembre 7th, 2011 at 23 h 44 min

    Comment écrire un lien hyper-texte pour permettre d’envoyer un e-mail ?

    <a href="mailto:dupond@exemple.com" rel="nofollow">Clique ici pour m'envoyer un e-mail</a>

    Exemple: Clique ici pour m’envoyer un e-mail
  4. Michel Audrey
    décembre 8th, 2011 at 23 h 06 min

    Quel est le rapport entre une recherche fructueuse dans Google et un code HTML bien hiérarchisé?

    Google est comme tous les moteurs de recherche: il indexe les sites selon leurs titres et leurs contenus. Si dans le code HTML les titres principaux (h1, h2, …) sont bien déclarés et que le titre de la page (balise <title> précisé dans le header) résume bien le contenu, les mots-clés piochés (dans ces titres) par le moteur de recherche seront pertinents. Ainsi les résultats du moteur de recherche seront plus appropriés, et donc, la recherche des utilisateurs, fructueuse! Tant mieux pour votre site: il sera mieux référencé dans Google et consorts.
  5. Bostan Yusuf
    décembre 9th, 2011 at 11 h 31 min

    Pourquoi est-il d’usage de sauter une ligne entre chaque déclaration (CSS, HTML, …) ?

    Pour rendre le code plus lisible et la maintenance plus facile donc plus rapide.
  6. Guillaume Foccroulle
    décembre 9th, 2011 at 11 h 45 min

    Qu’est ce que Cyberduck ?

    C’est un client FTP (file transfert protocole) open-source pour MAC OSX. Soit un logiciel libre et gratuit qui permet d’envoyer ses fichiers sur le serveur distant qui héberge notre site… (un équivalent Windows: Filezilla)
  7. Sandy Freuville
    décembre 9th, 2011 at 18 h 00 min

    Quelles sont les bonnes pratiques typographiques à adopter sur une page web?

    - Le contraste : Ne pas placer du texte clair sur un fond clair, ça semble logique. Il est également préférable de donner à l’utilisateur du texte foncé sur un fond clair, plutôt que l’inverse. Le typographe Robert Bringhurst a écrit: « la typographie existe pour honorer le contenu ». Le but de la typographie est d’être lu, en ce sens, le contraste est crucial.

    - La taille : Ne pas utiliser de tailles trop petites pour le corps de texte. L’utilisation d’une taille de police en dessous de 10, voir 12 px, est déconseillée. En effet, ce qui sera lu clairement sur un écran nouvelle génération 27′ ne le sera pas forcément sur d’autres. 14 à 16 px est préférable. (NDP: une feuille CSS adaptée a différents formats d’écrans est la meilleure solution)

    - Hiérarchie : La meilleure manière de hiérarchiser et différencier le contenu d’une page est via la taille en titres (h1), sous-titres (h2, h3, …), etc. Cela permet à l’utilisateur de se repérer facilement (bien plus qu’avec des couleurs), d’identifier les éléments similaires ou les éléments importants, et à partir de là de faciliter leur navigation.

    - Espace : Il est important d’aérer son texte, ainsi que de laisser des espaces entre paragraphes et éléments. L’un et l’autre sont importants. Pour l’espace intertexte, le « line-spacing » en css doit être au moins fixé à 140% de la taille du texte. Il est tout aussi important de bien laisser respirer les blocs de texte.

    - Serif et sans-serif : Créer un équilibre dans la page peut être réalisé avec brio en choisissant bien une paire serif/sans-serif. De préférence utiliser les polices créées par un même typographe, ou partageant les mêmes caractéristiques. (NDP: soit en utilisant les polices systèmes, soit en intégrant des polices extérieures via par exemple la déclaration CSS « @font-face ». Voir les exemples ici.
  8. Duysens Fanchon
    décembre 12th, 2011 at 16 h 36 min

    Quelle est la différence entre les propriétés CSS « margin » et « padding »?

    Le « margin » définit la distance entre le bloc et l’extérieur, c’est la marge extérieure du bloc. Le « padding » définit la distance entre le bloc et son contenu, c’est la marge interne au bloc. Elles peuvent toutes deux ce définir en pt, px, % ou em.
  9. Jérem Acquisto
    décembre 12th, 2011 at 23 h 58 min

    Quelle est la différence entre une classe et un id ?

    On peut utiliser indifféremment les attributs id et class pour appliquer des styles CSS aux éléments d’une page.
    - un id s’applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page. L’id ne doit désigner qu’un seul objet du document. On peut bien sûr définir autant d’id que l’on veut dans la feuille de style, mais il faut qu’ils soient uniques dans la page HTML.
    - une classe peut caractériser plusieurs objets (identiques ou non).

    (plus d’infos chez Alsacréations: http://www.alsacreations.com/article/lire/535-quelle-est-la-difference-entre-une-classe-class-et-un-id.html)
  10. Nicolas
    décembre 14th, 2011 at 19 h 16 min

    Quels sont les différents attributs que l’on peut (doit) attribuer habituellement à une balise img?

    src (url de l’image);
    title (texte s’affichant au survol);
    alt (texte substitut à l’image utilisé par les navigateurs des malvoyants, cet attribut est obligatoire pour un bon référencement et une bonne validation W3C.
  11. Morgane Philippart
    décembre 16th, 2011 at 12 h 53 min

    Comment déclarer une puce image au mieux ?


    li {image: url(image.png);}
    li {list-style-type: disc; list-style-image: url(image.png);}
    li {list-style-image: url(image.png);}
    li {list-style: url(image.png);}

    Pour se prémunir d’une absence d’affichage en cas d’indisponibilité de l’image, le type de puce doit être indiqué en plus de la déclaration de l’image. La réponse la plus appropriée est donc celle qui cumule la propriété « list-style-type » et « list-style-image ».
    Vous aurez noté que la propriété « image » n’existe pas.
  12. Michèle Schmitz
    décembre 16th, 2011 at 13 h 17 min

    Quelle est la différence entre .net, .com, .eu, etc lorsqu’on réserve un nom de domaine ?

    .org : pour des sites d’organisations à but non lucratif
    .com : ce sont les sites commerciaux
    .net : network (dans la plus part des cas)
    .be, .fr,… : ce sont les diminutifs des pays pour lequels les sites ont été dédiés
    .gov : ce sont les sites réservés aux gouvernements
    .eu : ce sont les sites qui se déclarent comme européens
    .edu : sites pour l’éducation
    …
  13. Ann DUTERCK
    décembre 16th, 2011 at 16 h 26 min

    Qu’est-ce que le positionnement relatif (position: relative) ?

    Il permet de décaler un élément A par rapport à sa position « normale », en flux.

    Explication : le positionnement relatif est très semblable au positionnement statique (position: static) qu’adoptent par défaut les éléments d’une page. Un élément positionné en relatif prendra sa place normale dans le flux du document (en fonction de la succession des éléments dans le code HTML, des marges des éléments, des éléments flottants…), mais sera décalé par rapport à cette position de base.

    Exemple :
    div {
    position: relative;
    left: -100px;
    }

    Ce bloc sera décalé de 100 pixels vers la gauche.
  14. Amélie Thonnard
    décembre 17th, 2011 at 10 h 14 min

    Deux erreurs se sont glissées dans cette classe, lesquelles ?


    .liste {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 9px;
    list-style-position: outside;
    list-style-image: url: puce.png;
    list-style-position: none;
    line-height:1.3em;
    }

    Solution:

    .liste {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 9px;
    list-style-position: outside;
    list-style-image: url(puce.png);
    list-style-type: none; ou list-style: none; (list-style-position: none; n’existe pas)
    line-height:1.3em;
    }
  15. Yolanda Rubio
    décembre 17th, 2011 at 14 h 58 min

    Comment arrêter la propriété « float » d’un élément afin d’éviter de déformer la structure d’une page web ?

    Il suffit d’appliquer la propriété « clear » (avec : both,left ou right) sur l’élément qui suit. Exemple:
    (NDP)
    1. HTML
    <html>
    <body>
    <div id="blocun">texte du bloc un</div>
    <div id="blocdeux">texte du bloc deux</div>
    <div id="footer">© monsite</div>
    </body>
    </html>

    2. Le CSS
    #blocun{
    width: 20%;
    float: left; /*le float permet de laisser passer le bloc suivant (blocdeux ici)*/
    }
    #blocdeux{
    width: 20%;
    float: left; /*float va aussi laisser passer le bloc suivant (footer ici) mais on aimerait que non*/
    }
    #footer{
    clear: both; /*clear va nettoyer et stopper le flottant déclaré sur #blocdeux sur le left et le right donc both*/
    }
    Après avoir déclaré « clear » à un objet, nous lui disons qu’il agit comme si il n'y avait PLUS de float. Ici le #footer va donc prendre sa place en dessous de #blocun et #blocdeux.
  16. Maxence Béranger
    décembre 17th, 2011 at 17 h 02 min

    Qu’est-ce que le W3C et quel est son rôle ?

    Le World Wide Web Consortium est un organisme de standardisation de l’internet à but non-lucratif, chargé de promouvoir la compatibilité des technologies du Web tels que les différents langages, navigateurs et applications.

    NDP: Le W3C n’impose pas de règle mais fait des recommandations.
  17. Cappello Giulia
    décembre 17th, 2011 at 18 h 58 min

    Qu’est-ce que le Javascript?

    Le Javascript est un langage de script incorporé dans un document HTML. Il permet d’apporter des améliorations à une page HTML en autorisant l’exécution des commandes du côté client. Les Javascripts peuvent exécuter des fonctions très diverses au sein d’une page: vérifier si les formulaires sont bien remplis, créer des alertes pop-up, donner l’heure, créer des animations dans les galeries images,…

    NDP: plus d’infos sur le JAVASCRIPT chez Stéphane Noël
  18. Ciardo Kevin
    décembre 17th, 2011 at 19 h 20 min

    Comment rendre transparente une div en CSS3 ?

    Solution:
    .transparence {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
    opacity: 0.5;
    }
    La première ligne est pour IE, la deuxième pour Firefox, la troisième est pour Safari et Chrome, la quatrième est le futur standard en CSS3.
    Pour de meilleures résultats, utilisez les 4 lignes.
  19. Carnevale Simone
    décembre 17th, 2011 at 19 h 30 min

    Qu’est-ce que le langage CSS?

    Le CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
  20. Coralie SCHALENBOURG
    décembre 17th, 2011 at 22 h 17 min

    Que représente l’unité « em » ?

    Il s’agit d’une unité relative en CSS. Les feuilles de style qui en emploient seront plus facilement adaptables d’un média à un autre. Pour améliorer sensiblement l’accessibilité d’un site web, il faut permettre le redimensionnement du texte, afin qu’il s’adapte aux résolutions et aux paramètres des utilisateurs. Pour cela, on utilisera les unités relatives, et en particulier l’unité « em ».

    NDP: Plus de détails chez Alsacréations
  21. Melvyn Chanteux
    décembre 17th, 2011 at 23 h 10 min

    Quelle déclaration faut-il placer dans la feuille CSS afin de mettre le texte d’une balise en lettres CAPITALES?

    Exemple:
    p {
    text-transform: uppercase;
    }
  22. Dangotte Franswa
    décembre 18th, 2011 at 14 h 35 min

    A l’intérieur de quelles balises se trouvent les balises « métas » et que permettent-elles?

    Les balises métas servent à donner une description de la page (titre, description, auteur, …) et servent également au référencement si ces dernières sont correctement décrites. Elles se situent entre « <head> » et « </ head> »
  23. Ghijsen Audrey
    décembre 18th, 2011 at 15 h 29 min

    Quelles règles syntaxiques adopter en CSS ?

    -Un bloc de déclarations (ensemble des couples propriété-valeur) est entouré d’accolades.
    -La propriété est séparée de sa valeur par un double-point.
    -Les déclarations ou règles (couple propriété-valeur) sont terminées par un point-virgule.
    -Sauf exception une propriété et une valeur s’écrit à l’aide d’un trait d’union lorsqu’elle est composée de plusieurs termes.
    -Les guillemets doivent être mis dans les chaînes de caractères et les chaînes de caractères générées avec la propriété « content » nécessitent toujours des guillemets.

    (NDP) Exemple:
    #page {
    width: 500px;
    margin: 0 auto;
    margin-top: 20px;
    background-image: url("monimage.png");
    }
  24. Lucie Schwob
    décembre 18th, 2011 at 18 h 01 min

    Comment cacher du texte en dehors de la partie visible de la fenêtre du navigateur?

    Il faut utiliser dans le css la propriété d’alinéa (text-indent) pour décaler le texte suffisamment loin à gauche.

    exemple :

    h1 {
    text-indent: -9999px;
    }
  25. Lucie Schwob
    décembre 18th, 2011 at 18 h 23 min

    Comment utiliser une fonte «non-standard» sur un site Web ?

    Il faut utiliser la syntaxe suivante en CSS3 :

    @font-face {
    font-family: « Ma Super Fonte »;
    src: url(‘MaSuperFonte-Regular.ttf’);
    }
    @font-face {
    font-family: « Ma Super Fonte »;
    font-style: italic;
    src: url(‘MaSuperFonte-Italic.ttf’);
    }
    @font-face {
    font-family: « Ma Super Fonte »;
    font-weight: bold;
    src: url(‘MaSuperFonte-Bold.ttf’);
    }
    Dans cet exemple, pour une même famille de fontes on importe trois fontes: regular («normale»), italic et bold. On pourra ensuite demander la police de caractères «Ma Super Fonte» pour chacune de ces trois fontes.
    Par exemple:

    body {
    font-family: « Ma Super Fonte », Helvetica, Arial, sans-serif;
    }
    h1 {
    /* Utilisera MaSuperFonte-Bold.ttf */
    font-style: normal;
    font-weight: bold;
    }

    Source : Alsacreations
  26. Van den Ackerveken Dimitri
    décembre 18th, 2011 at 19 h 19 min

    Quelle est la différence entre HTML, CSS et Javascript ?

    - Le HTML a comme rôle de gérer et organiser le contenu, il permet de placer les textes et les images sur une page web.
    - Le CSS a comme rôle de gérer l’apparence de la page web, l’aspect graphique et la mise en forme des éléments.
    - Le JavaScript a comme rôle de gérer l’animation et l’interactivité de la page web côté client.
  27. Maxime Dardenne
    décembre 19th, 2011 at 2 h 28 min

    Comment rogner visuellement le contenu d’une boite de bloc ? (validée pour info mais pas vue pour janvier)

    En appliquant à cette boite, dans la feuille css, la propriété {clip: rect(<haut>, <droite>, <bas>, <gauche>); } où les valeurs <haut>, <droite>, <bas> et <gauche> représentent les décalages (donnés en px) par rapport aux cotés respectifs du bloc.
    Le boite de bloc pouvant être un body, une div id ou tout autre élément rectangulaire délimité dans sa hauteur et sa largeur.
    Exemple :

    .bloc {
    clip: rect(0px, 30px, 0px, 0px);
    }

    Ce qui va cacher une bande de 30 pixels sur tout le bord droit de la boite. On peut également faire déborder le contenu en indiquant des valeurs négatives.
    Exemple :

    .bloc {
    clip: rect(0px, -30px, 0px, 0px);
    }

    Ce qui va élargir la boite de 30 pixels sur la droite.

    (source : http://www.yoyodesign.org/doc/w3c/css2/visufx.html#clipping )
  28. Vivian
    décembre 19th, 2011 at 13 h 05 min

    Lorsque vous devez mettre votre site en ligne et que vous avez commandé un hébergement, il vous faut un client FTP. Comment procédez-vous pour le paramétrer afin de vous connecter à votre serveur ?

    Votre hébergeur va vous envoyer par mail toutes vos coordonnées pour vous connecter à votre espace personnel sur votre serveur. Il vous faudra relever 3 choses :
    - LE SERVEUR FTP ( l’adresse de votre hébergement – exemple: http://ftp.monsite.be);
    - UN LOGIN;
    - UN MOT DE PASSE;

    Attention de tout de même à lire vos e-mails car d’un hébergeur à l’autre,il y a parfois quelques petits changements.
  29. Vivian
    décembre 19th, 2011 at 13 h 16 min

    Quelle est la différence entre un « hébergeur » et un « nom de domaine »?

    HÉBERGEUR :
    Pour publier votre site, il faudra le placer sur un ordinateur connecté au Web en permanence : c’est ce qu’on appelle un « serveur distant ». La gestion d’un serveur est prise en charge par des entreprises spécialisées gratuites (ex: bplaced) ou payantes (Ovh, Infomaniak, …). Des techniciens y veillent à la maintenance des machines, au flux des données, aux systèmes de sauvegarde, etc… Si vous êtes titulaire d’un compte e-mail auprès d’un distributeur (Belgacom ou autres), vous disposez d’un espace de stockage personnel sur lequel vous pourrez transférer votre premier essai de site.

    Pour une solution plus intégrée (nom de domaine correspondant à l’url, volumes adaptés, PHP, MySQL, etc), les hébergeurs proposent en général un forfait annuel pour la prise en charge de votre site, ainsi que différents services techniques: serveurs « dédiés » (votre site est seul sur un serveur), ou « partagé » (votre site se trouve sur un serveur utilisé par plusieurs utilisateurs), sauvegarde des données, garanties de vitesse…

    NOM DE DOMAINE:
    Sous chaque nom de domaine se cache en fait une adresse numérique, appelée adresse IP, du nom du protocole IP(Internet Protocol) permettant la communication entre ordinateurs sur Internet.
    Cette adresse IP est composée de 4 nombres entiers (4 octets). Le nom de domaine est donc une manière plus compréhensible de désigner le serveur qui héberge un site web.

    TCP/IP (Transmission Control Protocol/Internet Protocol) est le protocole magique qui permettra de convertir un nom du langage courant à une adresse numérique, grâce à un système appelé DNS (Domain Name System). Les suffixes de domaines (Top Level Domain) associés à ces noms désignent le type d’organisation dont il s’agit: .com pour des initiatives commerciales, .net pour les fournisseurs de réseaux, .org pour les associations non-lucratives, .edu pour les universités, etc…

    ( texte du tuto que vous pouvez télécharger sur le lien : FTP du cours )

    En résumé :
    Tous les hébergeurs ne proposent pas le nom de domaine inclus dans l’hébergement, les deux sont souvent dissociés.
    Pour un site il faut un nom de domaine ET un hébergement. Dans le pack de l’hébergeur, le nom peut être inclus mais il faut vérifier !
  30. Jari Di Benedetto
    décembre 19th, 2011 at 13 h 51 min

    Pourquoi doit-on utiliser toujours les accolades à la fin d’une déclaration sur une feuille de style CSS?

    R: Tout ce qui est entre le sélecteur et l’accolade de fermeture est dit « bloc de déclaration ». Un bloc de déclaration se compose d’un ou plusieurs sélecteurs et une ou plusieurs propriétés qui agissent sur ces commutateurs.

    sélecteur {
    propriété:valeur;
    }

    Les accolades sont nécessaires après une déclaration sinon le bloc entier de déclaration sera invalidé, ce qui signifie que les règles de styles exprimées ne sont pas appliquées.
  31. ALTAN Evrim
    décembre 19th, 2011 at 14 h 24 min

    Qu’est ce qu’un lien hypertexte?

    Le lien hypertexte (ancrage) est un élément d’une page HTML (souligné par défaut lorsqu’il s’agit de texte) permettant aux internautes de naviguer vers une nouvelle adresse lorsque l’on clique dessus.

    Ce sont les liens hypertextes qui permettent de lier des pages Web entre elles. Ils permettent notamment de naviguer:
    – vers un autre endroit du document (ancres);
    – vers une autre page HTML située à un emplacement différent sur la même machine qui héberge la page;
    – vers une page HTML hébergée sur une autre machine (NDP) située peut-être très loin dans la forêt.

    (NDP) un exemple en code HTML:
    <a href="http://fr.wikipedia.org/wiki/Lien_hypertexte">Un lien hypertexte dans Wikipédia</a>
  32. Crutzen Clément
    décembre 19th, 2011 at 14 h 28 min

    Comment faire en CSS pour que le background ne se répète pas?

    Taper dans le code CSS:

    body{
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    }
  33. Steve Rutten
    décembre 19th, 2011 at 14 h 31 min

    Pourquoi l’attribut Alt est-il indispensable sur les images?

    Tout d’abord la présence de l’attribut « Alt » est nécessaire pour recevoir la validation W3C. Cette validation sera précieuse pour être mieux référencé par Google. Cet attribut sert à apporter la même information que l’image (en général le texte qu’elle porte) dans le code de la page. Le but de ce report d’information est que celle-ci reste disponible lorsque l’image ne peut être chargée (à cause d’une surcharge de serveur ou d’un problème de connexion…) ou qu’elle ne peut être vue (par un robot de moteur de recherche ou un utilisateur de lecteur d’écran…).
  34. Brouns Jérémy
    décembre 19th, 2011 at 14 h 31 min

    Pourquoi optimiser une image pour le web?

    La rapidité d’affichage d’une page Web est directement influencée par le poids des images qui la composent. Ce poids, exprimé en kilo-octets (Ko), dépend de la taille réelle des images, de leur résolution, de la palette de couleurs et du format des fichiers. Une optimisation réussie allie légèreté et qualité graphique.

    On utilise trois types de de format:
    - Format GIF (Graphic Interchange Format). C’est actuellement le format d’image standard pour le Web.
    - Format JPEG (Joint Photographics Expert Group). Le format JPEG (JPG) est le plus adapté à la compression d’images photographiques possédant de nombreux dégradés de couleurs.
    - Format PNG (Portable Network Graphic). Le format PNG devrait remplacer JPG et GIF en raison d’une meilleure efficacité de sa méthode de compression, de ses fonctions de colorisation, du fait de son format open-source et de la présence d’une couche alpha pour la transparence.
  35. Schneider Nancy
    décembre 19th, 2011 at 14 h 49 min

    Quelle est la différence entre un positionnement absolu, fixe et flottant?

    - Le positionnement absolu et fixe: les éléments sortent du flux, ce qui peut aboutir à un affichage ne reflétant pas la structure HTML.
    - Le positionnement flottant: les éléments sortent du flux, mais restent dépendant des autres éléments flottants, ce qui permet d’aligner simplement plusieurs objets côte à côte.

    NDP: N’oubliez pas de stopper le « float » de vos éléments si vous voulez finir votre structure par un élément qui reprend toute sa largeur. Tout son flux. Exemple:

    #footer{
    clear: both;
    }

    NDP: Plus de détails chez… et oui: Alsacréations
  36. Laura Pera
    décembre 19th, 2011 at 15 h 10 min

    A quoi sert le DOCTYPE ?

    Le DOCTYPE signifie déclaration du type de document. Il indique au navigateur dans quel type de HTML la page a été écrite. Cette ligne s’écrit de la façon suivante :
    « type de HTML » est l’identificateur de la version HTML utilisée.
    « adresse_de_DTD » donne l’URL de la «document type declaration» (DTD), à savoir un document spécifiant les propriétés de chaque élément, balises et attributs, de ce type de HTML.

    Ces Doctypes sont généralement mis en place par l’éditeur HTML utilisé.
    A quoi ça sert ? Premièrement, à faire passer notre site web au validateur du consortium W3C, afin de vérifier qu’on n’a pas fait d’erreur sur la syntaxe du HTML. Sans ce doctype, le validateur ne peut pas deviner la nature du document. Deuxièmement, bien que cette ligne ne soit prise en compte que par les navigateurs les plus récents, elle permet un fonctionnement plus simple du code. Actuellement, il existe 6 DTD différents, avec chacun leurs critères.

    NDP: Plus de détails chez nos amis
  37. Gentile Soraya
    décembre 19th, 2011 at 15 h 34 min

    Quelle est la différence entre le positionnement relatif et le positionnement flottant?

    Le positionnement relatif est une variante du positionnement dans le flux courant (position: static;), qu’on active par la déclaration position:relative;. L’élément concerné est alors dit « positionné », et prend d’abord sa place dans le flux courant. Il peut ensuite se décaler à l’aide des propriétés top, right, bottom et left.

    Le positionnement flottant est un élément en flottant que l’on positionne avec une déclaration float: left ou float: right. Il est alors retiré du flux normal pour prendre place à gauche (ou à droite) du bloc qui le contient: c’est devenu un « flottant ». L’élément qui le suit s’écoulera alors dans l’espace ainsi laissé libre, en épousant sa forme.

    NDP: rappel: pour stopper la « flottaison » des éléments, on doit ajouter une déclaration CSS clear: both; sur la balise, l’id, la classe qui nous intéresse.

    (plus d’info: CSS2 Pratique du design Web, 3è édition)
  38. Gaelle Huppertz
    décembre 19th, 2011 at 15 h 47 min

    Dans mon CSS, si je veux appliquer une image comme fond d’écran sur ma page, quel code est correct parmi c’est 3 propositions?

    1) background-image: url(« mon_image.jpg »),
    2) background-image: url(mon_image.jpg);
    3) background-image: url(« mon_image.jpg »);

    R: La 3 car la première ne fonctionnera pas étant donné qu’elle se termine par une virgule et non pas par un point-virgule.
    La seconde ne fonctionnera pas non plus car le nom de l’image n’est pas placé entre guillemets.
  39. Michaël Mahaux
    décembre 19th, 2011 at 15 h 56 min

    Comment supprimer la bordure (bleue) autour des images de lien?

    R : Pour masquer cet effet visuel par défaut, il suffit en CSS de mettre à zéro la propriété border et de l’appliquer aux images contenues dans des liens :

    a img {
    border: 0;
    }
    ou un équivalent :

    a img {
    border: none;
    }
  40. Florence Lejoly
    décembre 19th, 2011 at 16 h 20 min

    Quelle est la différence entre une liste déclarée en ul ou en ol ?

    Une ul est utilisée lorsqu’on veut une liste non ordonnée (unordered list) c’est à dire sans chiffre, à l’aide de puce. Puce que l’on peut soit même changer aussi à l’aide de la saisie suivante :
    list-style-image: url("image/lenomdetapuce.jpg");

    Une ol est une liste ordonnée et sera donc formée de chiffre :
    1.
    2.
    …

    NDP: Attention <ul> et <ol> DOIVENT contenir des éléments de liste, des <li>.
  41. Jonathan Akkermans
    décembre 19th, 2011 at 16 h 49 min

    Pourquoi utiliser une feuille de style CSS, par exemple styles.css?

    1) La structure (HTML) et la présentation (CSS) sont gérées séparément. On peut modifier les couleurs, les polices de caractères, le positionnement directement dans le fichier CSS et la structure (texte, images) directement dans la page HTML.

    2) Il facilite la portabilité du contenu. Une fois le contenu HTML correctement mis en place, il devient facile de changer l’apparence de son site selon la taille des différents écrans susceptible de lire votre page.

    3) Le code HTML est réduit en taille et en complexité. Pour le référencement : Les feuilles de styles simplifient le code HTML et améliorent la vitesse de chargement de la page.
  42. Roxane Bocar(pub)
    décembre 19th, 2011 at 17 h 06 min

    Qu’est ce que le XHTML? Qu’apporte t-il de plus en comparaison au HTML classique?

    Le XHTLM (EXtensible HyperText Markup Language) est une nouvelle version améliorée du HTML, le système de base d’internet.
    Son langage de description de document, se présente également sous la forme d’un langage à balises mais se veut plus stricte et précis, ce qui réduit considérablement les erreurs. Son atout majeur vient également du fait, qu’il répond aux nouvelles conditions d’utilisations des pages ( smartphones, tablettes, applications, … ).

    NDP: Plus d’infos chez Alsacréations
  43. Damien Huart
    décembre 19th, 2011 at 18 h 04 min

    Quel code utiliser pour appliquer des bords arrondis à un bloc sans utiliser d’image (et comment les adapter pour webkit et gecko)?

    En utilisant la déclaration CSS3 « border-radius » dans le CSS de la div du bloc en question. Pour les adapter aux moteurs gecko, on ajoute le préfixe « -moz- » et « -webkit- » pour les moteurs webkit.

    ex:
    .arrondis{
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    }

    Webkit est le nom du moteur de rendu de Safari, Google Chrome,… tandis que gecko est le nom du moteur d’affichage utilisé par Firefox ou encore Netscape. Ces codes nécessitent une étape de validation, qui permet de vérifier les feuilles de style afin de repérer les éventuelles erreurs en les comparant aux spécifications CSS (exemple de service de validation : W3C).

    Références :
    http://neosting.net/aide-tutoriel/arrondir-les-bordures-en-css3-et-creer-un-rond.html
    http://jigsaw.w3.org/css-validator/about.html.fr#what
    http://www.webkit.org/
  44. Alexander Kuckart
    décembre 19th, 2011 at 20 h 01 min

    Citez les balises principales du corps de la page en HTML?

    h1,h2,h3, … : permettent de déclarer des titres à 6 niveaux disponibles;
    p : permet de créer un paragraphe dans un texte continu.
    ul et li : permettent de structurer des listes d’éléments. Se code comme ceci:
    <ul>
    <li>un élément de liste</li>
    <li>un autre élément de liste</li>
    </ul>
    (ul signifie « unordered list » (liste non-ordonnée))

    div: signifie « division ». Beaucoup utilisé pour structurer les grandes sections de la page (tête de page, navigation, corps, footer,…)
    table: permet de structurer un tableau.
    form: permet de définir un formulaire.
    quote: une citation.
    (…)
  45. Charlotte Henrottin
    décembre 19th, 2011 at 21 h 12 min

    En Javascript, à quoi correspondent «onLoad»et «onClick»?

    Toute une série d’évènements peuvent être associés à des éléments de la page. Le «onLoad» et le «onClick» permettent l’exécution du Javascript après le chargement de la page.

    Le «onLoad» permet d’exécuter le code quand toute la page a été complètement chargée par le navigateur. Cela permet de faire des changements en fonction du contexte ou préparer le terrain pour d’autres scripts.

    On ajoute pour cela, par exemple, une propriété à la balise « body »:
    <body onLoad="declenche();">

    L’évènement «onLoad» est déclenché dès que la page a terminé son chargement, et appelle la fonction «declenche()». Le «onClick» permet de déclencher un évènement lorsque l’on clique sur un élément de la page.

    Exemple:
    <a href="" onClick="alert('fais gaffe !');">Cliquer ici</a>
    Test: Cliquer ici

    Ce code fera apparaitre une fenêtre d’alerte avec «fais gaffe!» lorsque l’on clique sur un lien. Mais le même code placé sur une image:
    <img src="" onClick="alert('fait gaffe !');" /> donnera exactement le même résultat, même si une image n’est pas un lien.

    NDP: Plus d’infos chez Stéphane Noël
  46. Coralie SCHALENBOURG
    décembre 19th, 2011 at 21 h 21 min

    Comment créer un faux lien afin de démarrer un projet de site (sans vraiment créer toutes les pages)?

    En plaçant un # à la place d’une adresse HTML. Le texte apparaîtra comme un lien normal, mais ne changera pas de page.

    Exemple:<a href="#">Un faux lien</a>
    Test: Un faux lien

    Que signifie la déclaration <!DOCTYPE>?

    La déclaration <!DOCTYPE> est située avant la balise <HTML> et permet de spécifier la version de la norme utilisée dans le document (exemple : HTML 3.2, HTML 4.01, XHTML 2.0…). C’est un Identificateur Publique de Texte (Public Text Identifier ou PTI). Les normes évoluent, ainsi c’est une indication précieuse pour les navigateurs ou périphériques décodant la page, même si de nombreux navigateurs acceptent qu’il ne soit plus écrit.

    Quelles sont les 3 déclarations nécessaires à mettre dans la balise <head>…</head>?

    La déclaration « meta », la balise « title » et la balise comprenant le lien vers la feuille CSS.

    Exemple :
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Site MachinTruc</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    Quelle est la différence entre la balise <ul> et la balise <ol>?

    La balise <ul>…</ul> contient une liste de puce non ordonnée dans laquelle on place des balise <li>…</li> (représentant chaque élément pucé). La balise <ol>…</ol> contient une liste ordonnée dans laquelle on place des balise <li>…</li> (représentant chaque élément numéroté).
  47. Anthony Grova
    décembre 20th, 2011 at 0 h 17 min

    Qu’est-ce que Firebug et pourquoi l’utiliser?

    Firebug est un plugin gratuit qui tourne sous le navigateur Firefox, Safari et Chrome. Il permet de trouver et corriger les erreurs qui semblent inexistantes à vos yeux sur vos feuilles de styles (HTML, CSS, Javascrpit,…).

    (NDP) Vous pouvez aussi survoler n’importe quel élément d’un site Web (même un site qui ne vous appartient pas) afin de comprendre de quel type de balise, d’id, de classe il s’agit mais aussi les éléments CSS qui y sont liés. Vous pouvez aussi – encore plus fort – modifier ces déclarations CSS « en live » afin de tester le design de votre site pour vous (ou lors d’une réunion avec un client).

    (NDP)
    Téléchargez-le ici pour Firefox !
    Firebug et le débogage d’une page web !
  48. Ritucci Thomas
    décembre 20th, 2011 at 14 h 13 min

    Comment dois-je nommer ma page d’accueil ? et pourquoi ?

    Il existe certains fichiers que les serveurs Web sollicitent pour accéder à un répertoire. Ces fichiers sont les seuls qui apparaissent automatiquement quand vous entrez un nom de domaine. Les noms suivants sont les seuls reconnus. Ils sont classés par ordre de priorité. Si, par exemple, il y a – dans un seul répertoire – deux noms de fichiers qui apparaissent dans la liste, alors, le serveur chargera le fichier le plus haut dans l’ordre de priorité.

    Voici les noms de fichiers acceptés et leurs priorités (NDP: cela peut varier selon la config du serveur) :
    index.htm
    index.html
    index.php
    index.php3

    Pour nommer votre page accueil, s’il s’agit d’une page HTML, vous utiliserez donc index.htm ou index.html
    S’il s’agit d’une page php, vous pourrez utiliser index.php ou index.php3.
  49. Anaïs
    décembre 20th, 2011 at 21 h 29 min

    Qu’est ce que la priorité des sélecteurs CSS?

    Quand deux règles CSS rentrent en conflit, laquelle s’appliquera? En fait, chaque sélecteur à un poids, qui détermine sa priorité aux yeux du navigateur. Voici les règles générales, du plus prioritaire au moins prioritaire :

    1) Une déclaration en ligne (dans le html grâce à l’attribut style) aura toujours la priorité.

    2) Le sélecteur d’identifiant #id, sélectionnant un id dans le html.

    3) Le sélecteur de classe .class et de pseudo-classes.

    Plus la sélection sera précise, plus l’élément aura de poids, plus la propriété aura des chances d’être appliquée par rapport à une autre entrant en conflit.
  50. Marion Aguilar
    décembre 21st, 2011 at 12 h 38 min

    Dans le code HTML, où doit-on placer la référence du fichier CSS?

    Entre les balises <head> et </head>.
    Ex : <link href="styles.css" rel="stylesheet" type="text/css"/>
  51. Deprez Marion
    décembre 21st, 2011 at 14 h 17 min

    Comment faire un commentaire en Html et comment faire un commentaire en CSS?

    En HTML: <!-- votre commentaire -->
    En CSS: /* votre commentaire */
  52. Thomas Cheniaux
    décembre 21st, 2011 at 14 h 45 min

    Comment afficher une icône favicon dans le navigateur?

    Une favicon est une icône mise à disposition par un site Web pour enjoliver, en particulier dans les navigateurs Web, les endroits où ce site est mentionné. Cette icône pourra être utilisée dans la barre d’adresses ou de titre, les favoris (le terme est d’ailleurs un mot-valise né de la contraction de « favorites » et « icon »), les onglets, ou autres raccourcis. (source : Wikipédia)

    Pour avoir une favicon lisible par la plupart des navigateurs, il est préférable que cette image soit au format .ico. (NDP) On peut obtenir ce format à partir d’un .png ou de .gif. Ensuite il suffit de changer l’extension vous-même.

    Une fois votre fichier favicon.ico en ligne, il ne vous restera plus qu’à l’appeler depuis votre page. Voici le code à insérer entre les balises et de votre page :


    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

    La plupart du temps les navigateurs récents vérifient la présence d’un fichier favicon.ico à la racine du site, dès le chargement d’une quelconque page de ce site (à tous niveaux de l’arborescence).
  53. Dalier Jérémie
    décembre 21st, 2011 at 17 h 34 min

    Question sur le positionnement en float

    A la suite d’une image qui flotte à droite,
    img{
    float: right;
    }

    je veux placer un titre h3. Comment faire pour que ce titre h3 se place en dessous de l’image et pas à sa gauche ?
    Choisissez la bonne proposition:
    background {clear: left;}
    img {clear: right;}
    h3 {clear: left;}
    h3 {clear: right;}

    R:
    h3 { clear: right;}

    NDP: pour être certain, on nettoie en général les 2 côtés flottants donc clear:both; (both = les deux)
  54. Warland jonathan
    décembre 21st, 2011 at 19 h 17 min

    Quelle est la différence entre les formats JPEG, GIF et PNG ?

    Le format JPEG
    Le format JPEG est un format de compression très efficace mais avec perte de qualité. Plus l’image est compressée, plus la qualité de l’image diminue. Le format JPEG est particulièrement adapté et recommandé pour les images de type Photographies, il peut supporter plus de 16.7 millions de couleurs et donne un bon rendu pour les images nuancées et les dégradés. Le format JPEG ne supporte pas la transparence et ne permet pas de créer des animations.

    Le format GIF
    Le format GIF est un format qui utilise une compression sans perte de qualité.
    Les images au format GIF peuvent contenir un maximum de 256 couleurs, ce qui rend ce format peu adapté pour les photographies, les images nuancées et les dégradés. Par contre ce format donne d’excellents résultats pour les images avec un petit nombre de couleurs comme : les logos, les formes géométriques, les boutons etc…
    Le format GIF supporte la transparence et il permet également de créer des animations : les GIFs animés.

    Le format PNG
    Le format PNG utilise une compression sans perte de données.
    Il supporte tout comme le GIF une palette indexée de 256 couleurs et la transparence.
    Les fichiers PNG sont généralement plus légers que les GIF, par contre ils sont moins performants que le JPEG pour la compression de photographies. Le PNG ne permet pas de créer des animations et certain navigateurs ne le reconnaisse pas.
  55. Bodeux quentin
    décembre 21st, 2011 at 20 h 27 min

    Qu’est-ce qu’un favicon et comment l’insérer dans ma page?

    Le favicon est une petite icône représentant un site web. Il se situe dans la barre d’adresse, barre de titre ou encore dans les favoris.
    Pour pouvoir afficher un favicon, il faut l’insérer dans votre page html,php comme ceci:

    <head >
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head >

    (il faut bel et bien le placé dans le du site, comme pour lier votre fichier .css)

    Une fois votre favicon déclaré, il vous faudra créer l’icône en tant que telle.
    Pour ce faire, il est nécessaire de réaliser une image de 16*16 pixels et de l’enregistrer avec l’extension .ico

    Pour plus de facilité des sites tels que
    http://www.favicon.cc ou http://www.favicon.co.uk/
    vous permettent de créer votre favicon en ligne facilement.

    A titre d’exemple, nous avons le fabuleux site de monsieur Evrard. Vous pouvez remarquer son favicon ( carré vert avec evrard écrit à l’intérieur) dans votre barre d’adresse. (NDP) C’est pas bien de se moquer!
  56. Marie Godefroid
    décembre 21st, 2011 at 22 h 54 min

    Comment réagit une div si on lui donne comme position « absolute »?

    La position absolute va retirer du flux la div concernée pour la placer généralement dans le coin supérieur gauche. Elle permet de ne pas dépendre de l’ordre dans lequel les éléments HTML sont déclarés dans le code. Il est capital de noter qu’un élément bénéficiant d’une position absolue ne bougera pas de sa position initiale tant que l’une des propriétés top, bottom, left ou right n’a pas été précisée (il s’agit d’ailleurs là d’un comportement applicable à toutes les positions. (fixe et statique).

    Plus d’infos ici
  57. Winters Kevin
    décembre 21st, 2011 at 23 h 13 min

    Qu’est ce qu’une DIV?

    Une div est une balise qui va fonctionner comme une boite dans laquelle on va ajouter du contenu et/ou d’autres balises afin de créer la structure d’une page web. (NDP) Ces div vont pouvoir être attachées à des CSS par soit un id, soit une class avec un nom de votre choix (div « entete » une div « contenu », …).

    Exemple:
    HTML

    <html>
    <body>
    <div id="contenu">
    Mon super contenu
    </div>
    </body>
    </html>

    CSS
    #contenu{
    text-align: center;
    background-color: blue;
    }
  58. Ly Chan-Chung
    décembre 22nd, 2011 at 1 h 33 min

    Dreamweaver possède une interface triple présentant une interface de création qui écrit le code en fonction de ce qu’on crée, une fenêtre code et une fenêtre aperçu qui affiche le résultat instantanément… Pourquoi dès lors faut-il faire attention lorsqu’on utilise Dreamweaver?

    Dreamweaver est éditeur qui interprète nos opérations et écrit le code à l’état brut. C’est à dire qu’il va traduire au mieux ce que vous lui demandez mais cette interprétation peut quelques fois manquer de cohérence ou de simplicité. Le code est alors souvent pas très propre et une correction parfois pénible est nécessaire, surtout lors d’opérations complexes.

    La fenêtre code est sont principal atout, il anticipe et propose la suite de ce qu’on a encodé, ferme la balise presque automatiquement…mais l’aperçu quant à lui pose problème. Alors que l’aperçu dans le navigateur est propre, certains paramètres ne sont pas pris en compte dans l’affichage Dreamweaver. Il est alors important si l’on utilise Dreamweaver d’être vigilant et de tester son affichage avec un vrai navigateur.
  59. Loïc Boucha
    décembre 22nd, 2011 at 5 h 56 min

    Quelle est la différence entre un hébergement mutualisé et un serveur dédié ? Laquelle de ces deux offres choisir pour un site à faible fréquentation?

    Un hébergement mutualisé vous propose d’héberger votre site sur une machine qui partage ses ressources avec d’autres sites web. On peut ainsi avoir plus de 200 sites tournant sur la même machine (le serveur). Cette offre est très avantageuse pour un site à faible fréquentation car le regroupement de clients sur une machine permet de proposer des prix réduits. En plus de cela, vous n’avez à vous occuper de rien niveau configuration.

    Un serveur dédié est une machine entièrement laissée à votre disposition. Elle peut servir à héberger un ou plusieurs site web, mais son usage est plus étendu (serveur de jeu, serveur vocal, serveur mail). Un serveur dédié est plus destiné à héberger un site à haute voire très haute fréquentation et surtout, demande un niveau de connaissance plus élevé pour le gérer correctement. Le prix de la location d’un serveur dédié est également assez élevé.
  60. Henrot Alice
    décembre 22nd, 2011 at 12 h 07 min

    Quelles sont les balises à absolument utiliser dans un site? Et à quoi servent-elles?

    1. La balise <html>
    –> Comprend la balise <head>et<body>
    C’est l’élément qui va regrouper le tout. Il indique que l’on se trouve bien sur une page internet HTML. (NDP) Sans cette balise, le navigateur peut faire une erreur d’interprétation grave.

    2. La balise <head>
    L’élément <head> (« tête ») n’est pas un élément visible mais c’est un élément très important du langage HTML. Il permet de caractériser le document par rapport à différents points comme le titre, un lien ou un script exemple.
    Dans cette balise, on retrouve la balise <title> qui permet de mettre un titre au document.

    3. La balise <body>
    –> Encadre le corps du document HTML, c’est-à-dire le contenu proprement dit. C’est la partie visible de la page pour l’internaute. Il ne peut y avoir qu’une seule balise <body> dans laquelle on insère d’autres « sous-balises ».

    Exemple:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Document sans nom</title>

    </head>

    <body>
    Votre texte ici
    </body>

    </html>
  61. Bastien Pellegrini
    décembre 22nd, 2011 at 13 h 52 min

    Qu’es ce qu’une balise META Viewport et à quoi sert-elle?

    La balise HTML META Viewport est une balise qui va permettre de définir les dimension d’une page web pour des petits supports tels que l’iPod, l’iPhone… C’est donc une balise utile qui offre un meilleur confort visuel aux différents utilisateurs de ces technologies.

    ex: <meta name="viewport" content="width=device-width" />

    Plus d’infos ici
  62. Loïc Boucha
    décembre 22nd, 2011 at 18 h 11 min

    Qu’est-ce que le PageRank d’un site web? (question non vue donc pas pour janvier mais validée tout de même)

    Le PageRank est un indice de pertinence attribué à un site web par Google. C’est un des facteurs qui détermine la position du site dans les résultats de recherche. Il va de 0 à 10.

    Le PageRank est déterminé de la façon suivante : plus il y a de sites qui font pointer un lien vers votre site web, plus le PR a de chances d’augmenter. En outre, si un site ayant un PageRank élevé pointe vers votre site, votre site va hériter d’une partie de son PR.

    Le PageRank est une valeur très surveillée par les personnes désirant un bon référencement dans les résultats naturels de Google.
  63. Bodeux quentin
    décembre 22nd, 2011 at 18 h 15 min

    Qu’est-ce que Google Analytics ?

    C’est un service gratuit d’analyse de site web proposé par Google.
    Il permet de voir l’audience, le traffic et l’origine des visites de votre site.
    Cela est fort utile d’un point de vue marketing pour déterminer votre public à atteindre et ainsi ajuster votre axe de communication.
    http://www.google.com/intl/fr/analytics » rel= »nofollow »>
    http://www.google.com/intl/fr/analytics
  64. Minon Sophie
    décembre 23rd, 2011 at 0 h 46 min

    Quelles sont les différentes façon de donner une couleur à un élément?

    1- [Nom]
    La couleur est désignée par son nom anglais. Il n’y a que 16 noms de couleurs normalisés par le W3C. Même si les autres noms existent, ils ne seront pas reconnus par tous les navigateurs.

    2- #RRVVBB
    La couleur est désignée par son code hexadécimal (un dièse suivi de 6 digits). Les deux premiers digits représentent la valeur de rouge, les deux suivants le vert et les deux derniers le bleu. La notation hexadécimale est parfaitement normalisée. Ce code hexadécimal se trouve par exemple dans la palette couleur de photoshop.

    3- RGB( [R],[V],[B] )
    La couleur est définie par trois nombres de 0 à 255 indiquant respectivement le taux de rouge, le taux de vert et le taux de bleu.

    Le site colorschemedesigner.com est pratique pour trouver des couleurs et des combinaisons de couleurs.
  65. Franchimont Vincent
    décembre 23rd, 2011 at 10 h 34 min

    Quelle est la différence entre « http » et « ftp »?

    Ce sont deux protocoles qui n’ont pas le même usage.
    FTP c’est pour transférer des fichiers (NDP) et l’accès est réservé aux seuls propriétaire du compte distant.
    HTTP c’est pour visualiser le contenu de fichiers (NDP) sans pouvoir y toucher et cela est accessible à tout qui à l’adresse.
  66. Rousseau Aline (pub)
    décembre 23rd, 2011 at 13 h 23 min

    Comment faire pour qu’une div prenne toute la largeur disponible dans son bloc conteneur ?

    C’est automatique, pas besoin de spécifier une largeur.

    Si on veut définir nous-même la hauteur et la largeur d’une div:

    -Pour définir la hauteur d’une div:
    height: valeur;
    (Valeurs possibles: auto, px, %, em)

    -Pour la largeur d’une div:
    width: valeur;
    (Valeurs possibles: auto, px, %, em)
  67. Quarta Valentino
    décembre 23rd, 2011 at 15 h 38 min

    Flash, logiciel multimédia d’Adobe, se présentant sous la forme d’un plugin, a connu un grand succès pour sa capacité à faire tourner sur les navigateurs: vidéo, animation, etc. Depuis quelques années, flash a été supplanté par une autre technologie, quelle est-elle ? Et quel est l’avantage de celle-ci face à flash?

    Le HTML5.
    L’avantage de cette nouvelle version du HTML, réside dans sa capacité à faire tout ce que permet flash, mais à la différence qu’il ne nécessite pas le téléchargement de module supplémentaire. Le html5 étant directement intégré au navigateur.

    (NDP) Il est vrai que le HTML5 gère l’interactivité et la vidéo. Malheureusement seuls les navigateurs récents interprètent le HTML5. En attendant pour les autres le Javascript et notamment jQuery gère très bien les animations et l’interactivité sur TOUS les navigateurs même ceux de la DDR. Pour la vidéo, Flash a encore le « monopole » mais plus pour longtemps c’est juste.
  68. Drumel Damien .18
    décembre 23rd, 2011 at 21 h 51 min

    Comment réaliser 3 colonnes sans tableaux?

    Pour commencer, il faut réaliser une div pour chaque colonne dans le HTML si l’on veut gérer chaque colonne indépendamment.

    <div id="colonne1">...</div>
    <div id="colonne2">...</div>
    <div id="centre">...</div>

    Attention : les éléments flottants, que l’on placera sur les côtés, devront être placés en premier dans le code HTML.
    Après il faut travailler l’habillage CSS:

    Colonne 1:
    div#colonne1 {
    float: left;
    margin-right: 10px;
    }

    Colonne 2:
    div#colonne2 {
    float: right;
    margin-left: 10px;
    }

    Colonne centrée:
    div#centre {
    overflow: hidden;
    }

    Pour que la « colonne1″ se place a gauche, il faut nommer dans le css
    (float: let;) dans la div de celle-ci.

    La « colonne2″ il faut la placer a droite donc (float: right;).

    Et pour la colonne centrale, marquer (overflow: hidden;)
    -Hidden, cache tout ce qui dépasse.

    C’est pour cela que l’on ajoute 2 marges dans les 2 colonnes extérieurs, elles serviront à créer un retrait entre les flottants et le bloc central.
  69. Letizia Parisi
    décembre 23rd, 2011 at 22 h 07 min

    A quoi ressemble un code JavaScript et ou peut-on l’insérer?

    Le code Javascript peut être inséré où vous le désirez dans votre page Web, vous devez toutefois veiller à ce que le navigateur ait entièrement chargé votre script avant d’exécuter une instruction. En effet, lorsque le navigateur charge votre page Web, il la traite de haut en bas, de plus vos visiteurs (souvent impatients) peuvent très bien interrompre le chargement d’une page, auquel cas si l’appel d’une fonction se situe avant la fonction dans votre page il est probable que cela génèrera une erreur si cette fonction n’a pas été chargée.

    Ainsi, on place généralement le maximum d’éléments du script dans la balise d’en-tête (ce sont les éléments située entre les balises <head> et </head>). Les évènements Javascript seront quant à eux placés dans le corps de la page (entre les balises <body> et </body>) comme attribut d’une commande HTML…

    Exemple:
    <script type="text/javascript">
    document.write("Hello World!");
    </script>
  70. Crutzen Clément
    décembre 23rd, 2011 at 23 h 09 min

    A combien d’endroit(s) est-il possible de placer un code CSS ? et citez-le(s).

    Dans trois endroits différents:
    - Déclarer un comportement CSS dans une balise
    <p style="color:green;">texte en vert</p>

    - Déclarer un comportement CSS dans le head
    <style type='text/css'>
    h1 { font-size:18px; }
    p { font-size:10px; color: green; }
    </style >

    ou

    <style type='text/css'>
    h1 {
    font-size:18px;
    }

    p {
    font-size:10px;
    color: green;
    }
    </style >

    - Créer une feuille de style séparée portant l’extension .css

    <link type="text/css" rel="stylesheet" href="lien_de_la_page.css"media="screen"/>
  71. THIRY carline
    décembre 24th, 2011 at 11 h 13 min

    QUESTION: Quels sont les caractéristiques des éléments de type block et des éléments Inline? (Validée mais pas pour janvier car pas assez vue au cours))

    Les éléments de type block : Les attributs height, line-height, margin, padding peuvent être modifiés. La largeur est par défaut fixée à 100% de leur élément conteneur, si une autre largeur n’est pas spécifiée. On peut forcer la taille des éléments de type bloc, en pixel, en pourcentage, en em, en points. Leur taille totale est l’addtion de du padding, du border, du margin et la largeur (width).

    Les éléments Inline: Commence sur la même ligne que l’élément précédent. Height, line-height top and bottom margins ne pourront être changées. La longueur est aussi longue que son contenu et ne peut être modifiée.
  72. Martina Jurin
    décembre 24th, 2011 at 11 h 38 min

    Si j’écris a:active {color: red;} dans ma feuille de style, quels liens seront de couleur rouge ?

    N’importe quel lien de la page, mais uniquement au moment où on clique sur ce lien.

    La pseudo-classe CSS :active permet de passer des propriétés CSS à une ancre (un lien), propriétés qui ne s’appliqueront qu’à l’état « activé », c’est à dire au moment où on active le lien avec la souris, en cliquant dessus. Attention à ne pas la confondre avec la pseudo-classe :hover, qui correspond à l’état « survolé » d’un lien.

    Enfin, et malgré son nom, la pseudo-classe :active ne peut pas servir à indiquer visuellement à un utilisateur à quel élément d’un menu de navigation correspond la page en cours (ou page « active »). Ce type d’indication devra être géré avec d’autres moyens que les feuilles de style CSS.
  73. Sandy Rassart
    décembre 24th, 2011 at 20 h 29 min

    Comment créer un lien qui ouvre une autre page ?

    Un lien permet de relier les pages d’un site web entre elles. Un lien permet également de relier un site à d’autres sites. Pour faire un lien, on utilise la balise <a> d’ouverture suivit de l’attribut href qui permet d’indiquer l’adresse d’une page puis on referme grâce à la balise </a>.

    Supposons un lien vers cette même page :
    <a href="comment-creer-des-liens.php">Comment créer des liens</a> (à mettre dans l’HTML)

    Lien absolu ou relatif ? Quelle est la différence?

    Un lien absolu est un lien qui contient une url entière, soit : http://creer-un-site.fr/comment-creer-des-liens.php
    Un lien relatif est un lien qui contient uniquement une url sans le nom de domaine, soit : comment-creer-des-liens.php voire un lien simple pointant vers un élément dans le même dossier, exemple : « images/puce.png ».
    -Si vous faites un lien vers un autre site, vous devez spécifier une URL absolue.
    -Si vous faites un lien vers une page de votre site, vous pouvez spécifier une URL absolue ou relative:
    exemple: « http://www.monsite.be/contact.html » ou plus simplement « contact.html ». (NDP) Le relatif est conseillé car beaucoup plus simple à gérer lorsque vous construisez votre site en local, sur votre machine… sans http.

    Plus d’infos ICI !!!
  74. Mathot Bérangère
    décembre 24th, 2011 at 21 h 18 min

    A quoi servent les tables ? Quelle est la différence entre les balises <tr> et <td> ?

    Les tables servent à afficher des informations présentées en rangées et en colonnes. Elles sont représentées par la balise <table>.
    La balise <tr> sert à créer des rangées dans le sens horizontal.
    La balise <td> sert à marquer le début et la fin de chaque élément dans les rangées de la table.
  75. Benjamin Carol
    décembre 25th, 2011 at 13 h 54 min

    Quelles sont les balises de base pour réaliser un tableau ?

    (Q fort proche de la précédente mais les deux postées + ou – en même temps)

    La première balise à connaître est <table> </table>. C’est cette balise qui permet d’indiquer le début et la fin d’un tableau. Cette balise est de type « block », il faut donc la placer en dehors d’un paragraphe.

    <tr> </tr> : indique le début et la fin d’une ligne du tableau.
    <td> </td> : indique le début et la fin du contenu d’une cellule.

    En HTML, votre tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le contenu des différentes cellules (<td>).
    Ensuite pour ajouter des bordures à ce tableau, il vous faut passer par le CSS (déclaration: border) et y intégrer les options que vous souhaitez.

    Vous pourrez aussi choisir la manière d’intégrer ces bordures:
    collapse : les bordures seront collées entre elles, c’est l’effet qu’on recherche.
    separate : les bordures seront dissociées (valeur par défaut)
  76. Patrick Schmetz
    décembre 25th, 2011 at 15 h 15 min

    Comment on peut modifier la taille d’une image (sans utiliser d’autres programmes comme par exemple Photoshop)?

    On peut utiliser les attributs « width » et « height » pour fixer la largeur et la hauteur d’une image. Les valeurs utilisées pour fixer ces dimensions sont en pixels, en % ou en em.

    Soit dans le code HTML :
    <img src="images/slide03.jpg" height="200" width="500" />

    Soit dans le CSS :
    img {
    height: 500px;
    width: 200px;
    }
  77. Schouveller Lindsay
    décembre 25th, 2011 at 19 h 44 min

    Comment faire un lien vers un endroit précis d’une page HTML (ancre)?

    Le fonctionnement classique des liens hypertexte est de pointer vers une page différente de celle en cours de consultation, pour naviguer dans le site. Il est également possible de créer un lien vers un endroit précis de la page courante, ou d’une autre page afin de positionner correctement le navigateur. Créer une ancre est facile : il suffit d’attribuer à l’élément vers lequel on veut pouvoir pointer un identifiant (avec l’attribut HTML id) et d’y associer un lien débutant par le caractère dièse #, suivi du nom de cet identifiant.

    Exemple :
    <div id="news">...</div>
    Il suffira alors de faire un lien vers cet ancre :
    <a href="#news">Les dernières nouvelles</a>
  78. Marie Nepper
    décembre 26th, 2011 at 0 h 35 min

    Lorsqu’on crée un lien, et qu’on clique dessus, le lien devient automatiquement bleu et souligné. Comment faire pour éviter cela?

    Lorsque dans le HTML, le lien est créé, il faut développer dans le CSS:

    Le lien a quatre propriétés dans le CSS:
    a:link (lorsque le lien n’a pas encore été visité)
    a:visited (lorsque le lien a été visité)
    a:hover (lorsqu’on survole le lien)
    a:active (lorsqu’on clique sur le lien)

    Par exemple, si je veux mon lien noir avant et après le clique, sans soulignement:

    a:visited{
    text-decoration: none;
    color: black;
    }

    Si on veut qu’il soit d’une couleur différente uniquement lorsqu’on le survole, par exemple le rouge, alors il faut rajouter dans le CSS à la suite du {a}:

    a:hover{
    text-decoration:none;
    color:red;
    }
  79. Natacha Sckuvie
    décembre 26th, 2011 at 15 h 18 min

    Que doit-on faire en premier lieu lorsqu’on veut créer notre page HTML ?

    On crée un nouveau dossier avec tout dedans sur le bureau. (NDP) Par exemple: monsite.
    Dedans on place la première page (index.html), un dossier avec les images et le fichier CSS (styles.css).
    Ensuite il ne faut pas oublier de lier notre CSS au fichier HTML.
    (NDP)
    Soit dans Smultron ou Notepad++ vous ouvrez votre fichier index.html et vous y ajouter une ligne de lien vers la feuille css, exemple:
    <head><link rel="stylesheet" type="text/css" href=".css"/></head>

    Soit dans Dreamweaver    , vous allez sur « nouveau fichier » et choisir CSS. Vous l’enregistrez. Ensuite vous allez encore sur « nouveau fichier » mais cette fois-ci au format HTML puis là vous liez votre CSS au HTML puis créer et vous n’oubliez pas de l’enregistrer. Puis vous pouvez commencer à remplir votre page web.
  80. Angela Ricottone
    décembre 26th, 2011 at 16 h 16 min

    Quelle est la différence entre l’HTML, le CSS et JAVASCRIPT?

    L’ HTML et le CSS sont des langages descriptifs. Le HTML sert à décrire la structure (texte, titres, images, liens,…) et le CSS sert à décrire le style du contenu d’un document (habillage, typographie, couleurs, mise ne page, …). Les navigateurs interprètent au mieux ces deux langages. Le HTML et le CSS « parlent » aux navigateurs (Firefox, Safari,…)

    Le JAVASCRIPT est un langage de programmation: il donne des instructions à l’ordinateur qui lit la page HTML afin qu’il fasse certaines actions (interactivité, animation, …). Le JAVASCRIPT (dont jQuery) « parle » donc avec les ordinateurs (de bureau, les tablettes, les smartphones, …)
  81. Nicolas Emeline
    décembre 26th, 2011 at 17 h 28 min

    Quels sont les sélecteurs à employer en CSS ?

    On peut utiliser principalement 3 types de sélecteurs:

    1. Les balises comme body, h1, p, etc peuvent toutes être déclarées et peuvent recevoir des comportements visuels contrairement au « head » par exemple qui lui n’a pas d’existence visuelle.

    2. Les classes    . Une classe est un attribut de balise que l’on donne comme ceci : <p class="important">un texte ici</p>
    on lui donne un comportement visuel dans la feuille CSS externe (ex: styles.css) comme ceci :

    .important {
    background-color: red;
    }

    Le point qui précède le nom de la classe est obligatoire pour faire comprendre qu’il s’agit bien d’une classe. On peut attribuer une classe a n’importe quel élément, on peut donner une même classe à plusieurs éléments et on peut donner plusieurs classes à un même élément comme ceci : <p class="important grand">un texte ici</p>

    3. Les id.     Un id est un identifiant unique d’un élément de la page qui se code comme ceci : <p id="message">un texte ici</p>

    on lui donne un comportement visuel comme ceci :

    #message {
    background-color:red;
    border:1px solid black;
    }

    La dièse (#) qui précède le nom de l’identifiant est obligatoire afin de faire comprendre au navigateur qu’il s’agit bien d’un identifiant. Contrairement à la classe on ne peut donner qu’un seul identifiant à un élément et surtout on ne peut utiliser un identifiant qu’avec un seul élément de la page. (NPD) En général on utilise plutôt les « id » pour la structure visuelle, la mise en page d’une page web.
  82. admin
    décembre 27th, 2011 at 17 h 20 min

    Voila les commentaires pour accueillir les questions-réponses sont maintenant clôturés. Les élèves dont la question n’a pas été validée ne seront pas autorisés à passer l’examen dispensatoire de janvier. Par contre, ils pourront, bien entendu, passer ce dernier en juin sans perdre aucun points.