docConsignes développement web
download 
Plainte Transcription
Consignes développement web
Rappels – Consignes Développement web L1 Isfates 1 Rappels (mise en forme du code) – – – – 2 Toute balise doit être fermée (de l’une des deux façons différentes). Le nom et les attributs des balises sont en minuscule. La valeur des attributs est entre guillemets anglaises (i.e. "). Aucune mise en forme (justification, couleur, fond de page, police, etc.) ne doit être faite en (X)HTML. C’est le CSS qui s’occupe de cela, ainsi que du positionnement (haut, bas, droite, gauche, flottant, etc.). Consignes – Tous les fichiers de pages html doivent compléter le fichier squelette.html suivant. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>titre de la page ici</title> <meta <meta <meta <meta <meta </head> http-equiv="content-type" content="text/html; charset=utf-8" /> http-equiv="content-language" content="fr" /> name="author" content="vos noms" /> name="description" content="une courte description de la page" /> name="keywords" content="mots, cles, separes, par, des, virgules" /> <body> </body> </html> – Tous les fichiers doivent comporter l’extension .html. Pour afficher les extensions des fichiers sous windows : – ouvrir un dossier quelconque (mes documents, poste de travail, etc.) ; – menu « Outils », aller dans « Options des dossiers.. » ; – onglet « Affichage », décocher l’élément « Masquer les extensions des fichiers dont le type est connu ». – Il est conseillé d’écrire tous les fichiers en utilisant l’encodage utf-8. Cela permet de saisir les caractères spéciaux et accentués directement (plus besoin de é pour obtenir un « é » par exemple). Si vous utilisez Notepad++, il suffit de le configurer pour que les fichiers soient toujours écrits dans cet encodage en suivant les instructions suivantes : – ouvrir Notepad++ ; – menu « Paramètrages », puis dans « Préférences... » ; – onglet « Nouveau document/Répertoire », cocher « UTF-8 sans BOM » et « Apply while open ANSI file ». Pour les pages déjà rédigées, Notepad++ permet de les convertir en utf-8 : – ouvrir le fichier en question avec Notepad++ ; – puis dans le menu « Format », sur « Convertir en UTF-8 (sans BOM) » et enregistrer le fichier. – Tous les styles CSS doivent être enregistrés dans des fichiers séparés d’extension .css. – Toutes les pages doivent passer le test de validation W3C pour l’HTML et le CSS : – ouvrir la page à vérifier avec Firefox ; – grâce à l’extension Web Developper (installée pendant les TD1), aller dans le menu « Tools » puis « Validate Local HTML » pour valider la syntaxe HTML, ou « Validate local CSS » pour valider la syntaxe CSS ; – le résultat est affiché dans une nouvelle page ouverte en onglet dans Firefox, avec des commentaires associés. 3 Recommandations – Éviter de nommer les fichiers et dossiers du site avec des espaces ou des caractères accentués. – Copier les images dans le dossier contenant le site (si possible) ou un sous-dossier. – Utiliser des liens relatifs avec des barres obliques « / » et non pas des barres obliques inversées « \ ». Par exemple pour référencer l’image nommée ciel.jpg se trouvant dans le dossier img de votre site, le chemin relatif est img/ciel.jpg. – Nommer la page d’accueil index.html. 4 Quelques balises HTML autorisées Les éléments entre crochets « [ ] » sont des attributs possibles mais non obligatoires. Une liste d’éléments « [a|b|c|d] » désigne des alternatives : il faut choisir soit a, soit b, soit c ou bien d. Cela permet de factoriser la description des balises en un texte plus court. Évidemment la valeur des attributs est à remplacer par ce que vous voulez y mettre (copie intelligente). Les balises sont présentées ici sur une ligne. Il est conseillé de produire un code facile à lire —afin de pouvoir rapidement vous repérer lorsque vous allez le modifier— en établissant quelques conventions et en s’y tenant (p.ex. tabulation dans le code à chaque nouvel élément d’une liste). – <h1></h1>, ..., <h6></h6> : titres (du plus grand au plus petit) ; – <p></p> : paragraphe ; – <br /> : retour à la ligne ; – <strong></strong> : mise en valeur, insister (gras par défaut) ; – <em></em> : mise en valeur plus faible (italique par défaut) ; – <ul><li></li></ul> : listes à puces (unordered list) ; – <ol><li></li></ol> : listes numérotées (ordered list) ; – <table><tr><td [ colspan="n"rowspan="m"]></td></tr></table> : tableau ; – <th></th> : titre d’une colonne dans un tableau (remplace une cellule <td>) ; – <a href="chemin relatif"></a> : lien ; – <img src="image"alt="descriptif alternatif"[ width="w"height="h"] /> : insertion image ; – caractères spéciaux (non ASCII) avec des macros à á ç &. De http://www.tuteurs.ens.fr/internet/web/html/bases.html : – <!-- --> : commentaires dans le code (ne produit aucun résultat dans le navigateur) ; – <q></q> : guillements (ignoré par IE) ; – <blockquote></blockquote> : bloc de citation (extrait) ; – <i lang="fr"></i> : italique typographique ; – <cite [ lang="fr"]></cite> : citation sur une ligne (titre, nom film, etc.) ; – <code></code> : code source (informatique) ; – <pre></pre> : texte préformaté, tel quel (police à chasse fixe, espacement conservé) ; – <abbr title="signification sigle"></abbr> : sigles et leur signification (IAEM, IUT, etc.) ; – <acronym title="signification sigle"></acronym> : sigles prononçables (ONU, LITA, etc.) ; – <ol type="[1|a|A|i|I]"><li></li></ol> : liste ordonnée numérotée (type="1"), indicée par des lettres (type="a"), etc. ; – <dl><dt></dt><dd></dd></dl> : liste de définitions (definition list, definition term, definition definition) ; – <table><caption></caption></table> : légende de tableau ; – <a name="nom ancre"></a> : déclaration d’une ancre à cet endroit ; – <a href="document#ancre"></a> : lien vers une ancre d’un document html ; – <a href="mailto:adresse@mail"></a> : lien spécial, vers une adresse de messagerie. 2
