{"id":286,"date":"2012-07-18T22:37:30","date_gmt":"2012-07-18T21:37:30","guid":{"rendered":"http:\/\/saber.comule.com\/?p=286"},"modified":"2012-07-18T22:46:15","modified_gmt":"2012-07-18T21:46:15","slug":"balises-html","status":"publish","type":"post","link":"http:\/\/saber-benmimoun.com\/?p=286","title":{"rendered":"R\u00e9capitulatif des principaux balises HTML"},"content":{"rendered":"

 <\/p>\n\n\n\n\n\n\n\n\n\n\n
G\u00e9n\u00e9ral sur la page HTML<\/th>\n<\/tr>\n
Nom Balise HTML<\/strong><\/span><\/td>\nDescriptions<\/strong><\/span><\/td>\n<\/tr>\n
<html> <\/html><\/td>\nOuverture, fermeture du “code HTML<\/strong>“<\/td>\n<\/tr>\n
<head><\/head><\/td>\nd\u00e9limite l’ent\u00eate d’une page Web contenant des informations et instruction sur le Site. RDV sur l’article de la\u00a0SECTION HEAD<\/strong><\/a>\u00a0pour plus d’information sur son contenu<\/td>\n<\/tr>\n
<title> <\/title><\/td>\n\u00a0titre du document (inser\u00e9 dans l’en-t\u00eate)<\/td>\n<\/tr>\n
<meta name=”…” content=”…”><\/td>\n\u00a0m\u00e9tadonn\u00e9e dans l’en-t\u00eate du document,\u00a0R\u00e9flextion sur les METAs TAG<\/strong><\/a>\u00a0G\u00e9n\u00e9rateur de META TAG<\/strong><\/a><\/td>\n<\/tr>\n
<style> <\/style><\/td>\n\u00a0ensemble de d\u00e9clarations de styles CSS<\/td>\n<\/tr>\n
<body><\/body><\/td>\n\u00a0d\u00e9limite le corps du document<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n\n\n\n\n\n\n\n\n\n\n
Generaux mise en forme sur le texte<\/th>\n<\/tr>\n
Commande HTML<\/strong><\/span><\/td>\nSyntax \/ Valeur<\/strong><\/span><\/td>\nDescriptions<\/strong><\/span><\/td>\n<\/tr>\n
<a href= “url”>Nom du lien<\/a><\/td>\n\u00a0lien hypertexte ou ancre, (argument courant:\u00a0title<\/strong>\u00a0ettarget=”_blank”<\/strong>).<\/td>\n<\/tr>\n
title=”texte alternatif”<\/td>\nAtribu\u00a0TITLE=”…”<\/strong>\u00a0= texte alternatif du lien, (Yahoo affectionne particulierement cet atribu).<\/td>\n<\/tr>\n
target=”_blank”<\/td>\nAtribu\u00a0TARGET=”_BLANK”<\/strong>\u00a0Indique que la cible du lien s’ouvrira dans une nouvelle fenettre du navigateur.<\/td>\n<\/tr>\n
Exemple =<\/td>\n<a href=”nom-de-domaine.com” title=”texte-alternatif”><\/strong>NOM du LIEN<\/a><\/strong>\u00a0(ouvrira le lien dans la m\u00eame fenettre).<\/td>\n<\/tr>\n
<a href=”nom-de-domaine.com\/nom-de-la-page.html” title=”texte-alternatif”><\/strong>NOM du LIENtarget=”_blank”<\/a><\/strong>\u00a0(ouvrira le lien dans une nouvelle fenettre)<\/td>\n<\/tr>\n
\n\n\n\n\n
<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
<font>…<\/font><\/td>\nd\u00e9finit la couleur, (en hexd\u00e9cimal), la taille et le type de police, (fonte) utilis\u00e9.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
<p> <\/p><\/td>\ndefinit un paragraphe, (la balise fermante effectue un retour \u00e0 la ligne).<\/td>\n<\/tr>\n
<small> <\/small><\/td>\nformate le texte en une police\u00a0plus petite<\/small>.<\/td>\n<\/tr>\n
<strong><\/strong><\/td>\nformate le\u00a0texte en gras.<\/strong><\/td>\n<\/tr>\n
<b> <\/b><\/td>\nformate un texte en\u00a0caract\u00e8re gras.<\/strong><\/td>\n<\/tr>\n
<big> <\/big><\/td>\nformate un texte en\u00a0caract\u00e8re plus grands.<\/big><\/big><\/td>\n<\/tr>\n
<i> <\/i><\/td>\nformate un texte en le\u00a0passant en italique<\/em><\/td>\n<\/tr>\n
<em> <\/em><\/td>\nformate un texte en le\u00a0passant en italique<\/em><\/td>\n<\/tr>\n
<u> <\/u><\/td>\nPermet de\u00a0souligner un texte<\/td>\n<\/tr>\n
<del> <\/del><\/td>\nformate le texte en une police\u00a0BARREE<\/del>.<\/td>\n<\/tr>\n
<hn><\/hn><\/td>\nd\u00e9limitent des titres\u00a0H1<\/strong>\u00a0\u00e0\u00a0H6<\/strong>\u00a0\u00a0(1 > 6, la balise fermante effectue un retour \u00e0 la ligne).<\/td>\n<\/tr>\n
<sup><\/sup><\/td>\npermet le formatage d’un texte en\u00a0le passant en exposant<\/sup>.<\/td>\n<\/tr>\n
<sub><\/sub><\/td>\npermet le formatage d’un texte en\u00a0le passant en indice.<\/sub>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n\n\n\n\n\n\n\n\n
<div> <\/div><\/td>\nd\u00e9limite un conteneur de code HTML<\/td>\n<\/tr>\n
<li><\/li><\/td>\n\u00e9l\u00e9ment dans une liste<\/td>\n<\/tr>\n
<ul> <\/ul><\/td>\nd\u00e9limite une liste non ordonn\u00e9e avec des \u00e9l\u00e9ments LI<\/td>\n<\/tr>\n
<ol> <\/ol><\/td>\nd\u00e9limite une liste ordonn\u00e9e contenant plusieurs \u00e9l\u00e9ments LI.<\/td>\n<\/tr>\n
<span> <\/span><\/td>\npermet d’appliquer une classe de style \u00e0 un groupe de texte.<\/td>\n<\/tr>\n
class=”NOM”<\/td>\n<span>… <\/span><\/td>\nAppel d’une “CLASS<\/strong>” d\u00e9fini dans une fueille de style.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n\n\n\n\n\n\n\n\n
Aligment des \u00e9lments “HTML”<\/th>\n<\/tr>\n
Nom Balise HTML<\/strong><\/span><\/td>\nvaleur<\/strong><\/span><\/td>\nDescriptions<\/strong><\/span><\/td>\n<\/tr>\n
<div align<\/strong>=”valeur”><\/div<\/strong>><\/td>\nleft, center, rigth, justify<\/td>\nAligne le contenu entre les balise “DIV<\/strong>“.<\/td>\n<\/tr>\n
<…valign<\/strong>=”valeur”><\/td>\ntop, middle, bottom<\/td>\nAlignement vertical du contenu dans un \u00e9l\u00e9ment.<\/td>\n<\/tr>\n
<tdalign<\/strong>=”valeur” …<\/td>\nleft, center, rigth, justify<\/td>\nAlignement horizontal du contenu d’une cellule<\/td>\n<\/tr>\n
<tdvalign<\/strong>=”valeur”…<\/td>\ntop, middle, bottom<\/td>\nAlignement vertical du contenu d’une cellule<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Divers \u00e9l\u00e9ments HTML<\/th>\n<\/tr>\n
Nom Balise HTML<\/strong><\/span><\/td>\nExemple<\/strong><\/span><\/td>\nDescriptions<\/strong><\/span><\/td>\n<\/tr>\n
<img src=”******<\/sub>“><\/td>\n<img src=”adresse-de-l’image\/nom-du-fichier”><\/strong><\/td>\n\u00a0affiche une image<\/td>\n<\/tr>\n
alt=”Texte alternatif”<\/td>\nALT=””<\/strong>: Atribut de l’\u00e9l\u00e9ment “IMG<\/strong>” Texte d\u00e9crivant l’image au cas ou elle ne s’affiche pas. (Cet attribut est tr\u00e8s “pris\u00e9” par les moteurs de recherche). On ajoutera aussi les dimentions en pixel de l’image avec “WIDTH<\/strong>” et “HEIGTH<\/strong>” pour avoir un meilleur temps de chargement de la page.<\/td>\n<\/tr>\n
<img src=”adresse-de-l’image\/nom-du-fichier”width=”..px” height=”..px” alt=”cour descriptif de l’image”<\/strong>><\/td>\n<\/tr>\n
Si on ne souhaite pas de bordure autour de l’image. On ajoutera un attribut:\u00a0BODER=”0″<\/strong><\/small><\/td>\n<\/tr>\n
<frame><\/td>\nrepr\u00e9sente un cadre<\/td>\n<\/tr>\n
<frameset>\u00a0<\/framset><\/td>\nd\u00e9limite une ensemble de cadres (ou jeu de \u00a0cadres)<\/td>\n<\/tr>\n
<iframe> <\/iframe><\/td>\nd\u00e9finit un cadre flottant dans une page<\/td>\n<\/tr>\n
<script> <\/script><\/td>\nd\u00e9limite un ensemble d’instructions de script<\/td>\n<\/tr>\n
<br> ou <br \/><\/td>\neffectue un saut de ligne “forc\u00e9”<\/td>\n<\/tr>\n
<hr><\/td>\nligne horizontale de s\u00e9paration.<\/td>\n<\/tr>\n
<!– commentaire –><\/td>\nCommentaire dans le CODE n’apparait pas en clair dans le navigateur<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n\n\n\n\n\n\n\n\n
G\u00e9n\u00e9ral sur les Tableaux HTML<\/th>\n<\/tr>\n
Nom Balise HTML<\/strong><\/span><\/td>\nSyntax \/ Valeur<\/strong><\/span><\/td>\nDescriptions<\/strong><\/span><\/td>\n<\/tr>\n
\u00a0<table> <\/table><\/td>\n<table>
\n<th><\/strong>titre<\/th>
\n<tr>
\n<td><\/strong>contenu<\/td>
\n<\/tr>
\n<\/table><\/strong><\/td>\n		d\u00e9limite un tableau HTML<\/td>\n<\/tr>\n
\u00a0<tr> <\/tr><\/td>\nD\u00e9fini une ligne d’un TABLEAU<\/td>\n<\/tr>\n
\u00a0<th> <\/th><\/td>\nLigne, (cellule), de titre<\/td>\n<\/tr>\n
\u00a0<td> <\/td><\/td>\nColone, (cellule), d’un \u00e9l\u00e9ment TR<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

  G\u00e9n\u00e9ral sur la page HTML Nom Balise HTML Descriptions <html> <\/html> Ouverture, fermeture du “code HTML“ <head><\/head> d\u00e9limite l’ent\u00eate d’une page Web contenant des informations et instruction sur le Site. RDV sur l’article de la\u00a0SECTION HEAD\u00a0pour plus d’information sur son contenu <title> <\/title> \u00a0titre du document (inser\u00e9 dans l’en-t\u00eate) <meta name=”…” content=”…”> \u00a0m\u00e9tadonn\u00e9e dans…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20],"tags":[],"class_list":["post-286","post","type-post","status-publish","format-standard","hentry","category-informatique","category-20","description-off"],"_links":{"self":[{"href":"http:\/\/saber-benmimoun.com\/index.php?rest_route=\/wp\/v2\/posts\/286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/saber-benmimoun.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/saber-benmimoun.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/saber-benmimoun.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/saber-benmimoun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=286"}],"version-history":[{"count":3,"href":"http:\/\/saber-benmimoun.com\/index.php?rest_route=\/wp\/v2\/posts\/286\/revisions"}],"predecessor-version":[{"id":288,"href":"http:\/\/saber-benmimoun.com\/index.php?rest_route=\/wp\/v2\/posts\/286\/revisions\/288"}],"wp:attachment":[{"href":"http:\/\/saber-benmimoun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/saber-benmimoun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=286"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/saber-benmimoun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}