Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:html [2014/05/14 02:48] – sgariepy
+++ web:html [2014/05/14 02:48] (Version actuelle) – supprimée sgariepy
@@ Ligne 1: / Ligne 1: @@
-====== Introduction ======
-L'//Hypertext Markup Language// sert à décrire des documents contenant du texte, des images, des liens et d'autres éléments à l'aide de balises.  Les documents HTML sont normalement tous reliés ensemble à l'aide des liens pour créer des ensembles, soit des sites, intranet ou des interfaces de CD-ROM multimédia.
-====== Règles des balises ======
-  * Toutes les instructions sont exprimées dans les balises (ou //tags//)
-  * Une balise est délimitée par les symboles ''<'' et ''>''.
-    * Exemple : ''<FORM>'', ''<TABLE>'', ''<FONT>''.
-  * Presque toutes les balises doivent être ouvertes et fermées
-    * Exemple : ''<TABLE></TABLE>''
-    * ou s'il n'y a pas de balise de fermeture : ''<balise **/**>''
-  * Les balises ne doivent pas se chevaucher
-    * Incorrect -> ''<b><i>bonjour</b></i>
-    * Correct -> ''<b><i>bonjour</i></b>
-  * Dans les balises les majuscules sont équivalentes aux minuscules
-====== Structure générale ======
-Un document HTML est généralement divisé en deux parties.  L'entête qui est entre les balises ''<HEAD></HEAD>'' et le corps qui est entre les balises ''<BODY></BODY>''.
-<code html>
-<HTML>
-  <HEAD>
-    <TITLE>Titre de la page</TITLE>
-  </HEAD>
-  <BODY>
-  </BODY>
-</HTML>
-</code>
-====== Les commentaires ======
-Les commentaires est tout ce qui est ignoré par le navigateur.  Sert à documenter, débogguer, etc.
-<code html><!-- ceci est un commentaire --></code>
-====== Les balises de base ======
-===== Niveaux de titres =====
-Il existe six niveaux de titres : ''<H1>'' à ''<H6>''.
-===== Paragraphes =====
-  * La balise ''<P>'' débute un nouveau paragraphe
-  * La balise ''<BR>'' fait une nouvelle ligne
-===== Lignes horizontales =====
-On peut insérer des lignes qui délimites des sections à l'aide d'une ligne horizontale.
-<code html><HR></code>
-===== Alignement de plusieurs éléments =====
-  * La balise <DIV> permet de définir l'alignement de plusieurs éléments (titres, textes, images, etc).
-  * L'alignement s'appplique pour tout ce qui se trouve entre ''<DIV>'' et ''</DIV>''.
-  * Elle possède l'attribut ''ALIGN'' qui peut prendre les valeurs suivantes :
-    * ''LEFT'', ''RIGHT'', ''CENTER'', ''JUSTIFY''
-    * Exemple : ''<DIV ALIGN="CENTER"></DIV>''
-===== Mise en forme =====
-  * ''<B>''
-  * ''<I>''
-  * ''<TT>''
-  * ''<U>''
-  * ''<STRIKE>''
-  * ''<BIG>''
-  * ''<SMALL>''
-  * ''<SUB>''
-  * ''<SUP>''
-===== Les polices de caractères =====
-Il faut utiliser la balise ''<FONT>''.
-===== Les liens =====
-On utilise la balise ''<a>''.  Il existe plusieurs types de liens :
-  * liens internes à une page
-  * liens internes à un site
-  * liens externes
-==== Lien externe ====
-Fait référence à un site se trouvant sur un autre site.  Exemple :
-  <a href="http://www.google.com/" >Lien du site externe</a>
-==== Lien interne au site ====
-Fait référence à un document se trouvant sur le site dans lequel on se trouve.  Exemple :
-  <a href="../autrerep/document.html">Autre document du site</a>
-Il faut utiliser des URL relatifs :
-  * ''./'' -> Pour accéder au répertoire courant
-  * ''../'' -> Pour accéder au répertoire parent
-Il faut __absolument__ éviter les URL absolus comme dans l'exemple suivant :
-  <a href="C:\site\autrerep\document.html">Autre document du site</a>
-==== Lien interne à une page ====
-Fait référence à un emplacement se trouvant dans la page courante.  On utilise les ancres (ou signets).
-Définition de 'ancre :
-  <a name="hautdepage"></a>
-Lien vers l'ancre :
-  <a href="#hautdepage">Aller en haut de page</a>
-Lien vers l'ancre à partir d'une autre page :
-  <a href="autrepage.html#hautdepage">Aller à un endroit précis</a>
-==== Lien de courriel ====
-Permet d'envoyer du corrier électronique.
-  <a href="mailto:personne@domaine.ca">Écrire à personne</a>
-===== Images =====
-On utilise la balise ''<IMG>''.  La balise ''<IMG>'' a de nombreux attributs :
-  * ''NAME'' -> Nom du composant image
-  * ''SRC'' -> nom du fichier
-  * ''WIDTH'' et ''HEIGHT'' -> taille de l'image
-  * ''ALT'' -> Texte qui apparaît si l'image est désactivée
-  * ''BORDER'' -> épaisseur en pixels de la bordure
-  * ''VSPACE'' et HSPACE -> espaces vertical et horizontal autour de l'image
-  * ''LOWSRC'' -> image N&B chargée avant l'image principale
-Exemple :
-<code html><img src="images/logo.gif" name="logo" width="200" height="100" border="0" alt="image du logo" /></code>
-=== Images réactives ===
-Une seule et même image peut avoir différentes zones qui mèneront alors à différentes ressources.
-<code html>
-<img border="0" width="170" height="72" src="h-menu.gif" useMap="#menumap" />
-<map name="menumap">
-  <area SHAPE="RECT" COORDS="20,4,84,25"  HREF="http://www.microsoft.com">
-  <area SHAPE="RECT" COORDS="20,26,84,48" HREF="http://wwww.nestcape.com">
-  <area SHAPE="RECT" COORDS="20,49,84,71" HREF="http://www.multimania.com">
-</map>
-</code>
-====== Entête ======
-L'entête du document HTML se trouve entre les balises ''<head>'' et ''</head>'', qui eux-mêmes sont avant le corps du document (''<body>'').
-===== Meta tags =====
-  * ''<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">''
-===== Lien CSS =====
-Pour un lien externe à un fichier CSS :
-<code html>
-<link rel="stylesheet" type="text/css" href="style1.css">
-</code>
-====== Éléments plus avancés ======
-===== Caractères spéciaux =====
-^ Punctuation ^ HTML Entity ^ ISO Latin-1 code ^ name or meaning ^
-| –  | &ndash;  | &#8211;  | en dash |
-| —  | &mdash;  | &#8212;  | em dash |
-| ¡  | &iexcl;  | &#161;  | inverted exclamation |
-| ¿  | &iquest;  | &#191;  | inverted question mark |
-| '  |  | &#39;  | apostrophe  |
-| "  | &quot;  | &#34;  | quotation mark |
-| ‘  | &lsquo;  |   | left single quote   |
-| ’  | &rsquo;  |  | right single quote  |
-| “  | &ldquo;  |  | left double quote    |
-| ”  | &rdquo;  |  | right double quote   |
-| „  | &bdquo;  |  | double low-9 quote   |
-| « »  | &laquo; &raquo;  | &#171; &#187;  | guillemets (European-style quotation marks) |
-| (espace)  | &nbsp;  | &#160;  | non-breaking space |
-^ Symboles ^ HTML Entity ^ ISO Latin-1 code ^ name or meaning ^
-| &  | &amp;  | &#38;  | ampersand |
-| ¢  | &cent;  | &#162;  | cent |
-| ©  | &copy;  | &#169;  | copyright |
-| ÷  | &divide;  | &#247;  | divide |
-| >  | &gt;  | &#62;  | greater than |
-| <  | &lt;  | &#60;  | less than |
-| µ  | &micro;  | &#181;  | micron |
-| ·  | &middot;  | &#183;  | middle dot |
-| ¶  | &para;  | &#182;  | pilcrow (paragraph sign) |
-| ±  | &plusmn;  | &#177;  | plus/minus |
-| €  | &euro;  | &#8364;  | Euro |
-| £  | &pound;  | &#163;  | British Pound Sterling |
-| ®  | &reg;  | &#174;  | registered |
-| §  | &sect;  | &#167;  | section |
-| ¥  | &yen;  | &#165;  | Japanese Yen |
-^ Diacritics ^^^^
-| á Á  | &aacute; &Aacute;  | &#225; &#193;  | lower-case "a" with acute accent upper-case "A" with acute accent |
-| à À  | &agrave; &Agrave;  | &#224; &#192;  | lower-case "a" with grave accent upper-case "A" with grave accent |
-| â Â  | &acirc; &Acirc;  | &#226; &#194;  | lower-case "a" with circumflex upper-case "A" with circumflex |
-| å Å  | &aring; &Aring;  | &#229; &#197;  | lower-case "a" with ring upper-case "A" with ring |
-| ã Ã  | &atilde; &Atilde;  | &#227; &#195;  | lower-case "a" with tilde upper-case "A" with tilde |
-| ä Ä  | &auml; &Auml;  | &#228; &#196;  | lower-case "a" with diaeresis/umlaut upper-case "A" with diaeresis/umlaut |
-| æ Æ  | &aelig; &AElig;  | &#230; &#198;  | lower-case "ae" ligature upper-case "AE" ligature |
-| ç Ç  | &ccedil; &Ccedil;  | &#231; &#199;  | lower-case "c" with cedilla upper-case "C" with cedilla |
-| é É  | &eacute; &Eacute;  | &#233; &#201;  | lower-case "e" with acute accent upper-case "E" with acute accent |
-| è È  | &egrave; &Egrave;  | &#232; &#200;  | lower-case "e" with grave accent upper-case "E" with grave accent |
-| ê Ê  | &ecirc; &Ecirc;  | &#234; &#202;  | lower-case "e" with circumflex upper-case "E" with circumflex |
-| ë Ë  | &euml; &Euml;  | &#235; &#203;  | lower-case "e" with diaeresis/umlaut upper-case "E" with diaeresis/umlaut |
-| í Í  | &iacute; &Iacute;  | &#237; &#205;  | lower-case "i" with acute accent upper-case "I" with acute accent |
-| ì Ì  | &igrave; &Igrave;  | &#236; &#204;  | lower-case "i" with grave accent upper-case "I" with grave accent |
-| î Î  | &icirc; &Icirc;  | &#238; &#206;  | lower-case "i" with circumflex upper-case "I" with circumflex |
-| ï Ï  | &iuml; &Iuml;  | &#239; &#207;  | lower-case "i" with diaeresis/umlaut upper-case "I" with diaeresis/umlaut |
-| ñ Ñ  | &ntilde; &Ntilde;  | &#241; &#209;  | lower-case "n" with tilde upper-case "N" with tilde |
-| ó Ó  | &oacute; &Oacute;  | &#243; &#211;  | lower-case "o" with acute accent upper-case "O" with acute accent |
-| ò Ò  | &ograve; &Ograve;  | &#242; &#210;  | lower-case "o" with grave accent upper-case "O" with grave accent |
-| ô Ô  | &ocirc; &Ocirc;  | &#244; &#212;  | lower-case "o" with circumflex upper-case "O" with circumflex |
-| ø Ø  | &oslash; &Oslash;  | &#248; &#216;  | lower-case "o" with slash upper-case "O" with slash |
-| õ Õ  | &otilde; &Otilde;  | &#245; &#213;  | lower-case "o" with tilde upper-case "O" with tilde |
-| ö Ö  | &ouml; &Ouml;  | &#246; &#214;  | lower-case "o" with diaeresis/umlaut upper-case "O" with diaeresis/umlaut |
-| ß  | &szlig;  | &#223;  | ess-tsett |
-| ú Ú  | &uacute; &Uacute;  | &#250; &#218;  | lower-case "u" with acute accent upper-case "U" with acute accent |
-| ù Ù  | &ugrave; &Ugrave;  | &#249; &#217;  | lower-case "u" with grave accent upper-case "U" with grave accent |
-| û Û  | &ucirc; &Ucirc;  | &#251; &#219;  | lower-case "u" with circumflex upper-case "U" with circumflex |
-| ü Ü  | &uuml; &Uuml;  | &#252; &#220;  | lower-case "u" with diaeresis/umlaut upper-case "U" with diaeresis/umlaut |
-| ÿ  | &yuml;  | &#255;  | lower-case "y" with diaeresis/umlaut |
-  * [[http://barzilai.org/math_sym.htm|Symboles mathématiques en HTML]]
-===== Tableaux =====
-Permet tout d'abord de présenter l'information en colonnes et lignes, ils ont beaucoup servis aussi pour subdiviser la page en plusieurs parties en utilisant ses cellules.
-On utilise les balises ''<TABLE></TABLE>''.  Un tableau contient une ou plusieurs lignes, chaque ligne est décrite par les balises ''<TR></TR>''.  Chaque ligne est composée d'une ou ou plusieurs cellules qui sont décrites par les balises ''<TD></TD>''.
-Exemple de table avec un ''colspan'' et un ''rowspan'' :
-<code html>
-<table width="200" border="1">
-  <tr>
-    <td colspan="2">&nbsp;</td>
-    <td rowspan="5">&nbsp;</td>
-  </tr>
-  <tr>
-    <td>&nbsp;</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td>&nbsp;</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td>&nbsp;</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td>&nbsp;</td>
-    <td>&nbsp;</td>
-  </tr>
-</table>
-</code>
-<html>
-<table width="200" border="1">
-  <tr>
-    <td colspan="2">&nbsp;</td>
-    <td rowspan="5">&nbsp;</td>
-  </tr>
-  <tr>
-    <td>&nbsp;</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td>&nbsp;</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td>&nbsp;</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td>&nbsp;</td>
-    <td>&nbsp;</td>
-  </tr>
-</table>
-</html>
-==== Attributs ====
-  * BORDER
-  * BGCOLOR
-  * BACKGROUND
-===== Cadres =====
-Les cadres sont utilisés pour séparer une page en différentes sections.  Cette méthode de structuration d'un site n'est plus utilisée aujourd'hui car elle pose des problèmes d'affichage et de référencement.
-===== Formulaires =====
-  * Permet aux visiteur d'envoyer des données au serveur.
-  * La balise ''<FORM>'' insère un formulaire dans la page web.
-  * Les attributs sont :
-    * ''METHOD'' -> Méthode utilisée pour envoyer les données du formulaire.  Valeurs possibles : GET et POST
-    * ''ACTION'' -> Action à entreprendre lorsque l'utilisateur soumet le formulaire
-    * ''ENCTYPE'' -> spécifie le format de données, dans le cas où le protocole n'impose pas de format précis
-Exemple :
-<code html><FORM METHOD="POST" ACTION="script.php"></FORM></code>
-==== Éléments du formulaire ====
-La balise <INPUT>
-Attributs
-  * NAME
-  * MAXLENTGTH
-  * VALUE
-  * TYPE
-    * TEXT
-    * BUTTON
-    * PASSWORD
-    * CHECKBOX
-    * RADIO -> Les boutons radio sont regroupés par le nom qui doit être identique.
-    * HIDDEN
-    * FILE -> Exemple : ''Incluez votre cv : <INPUT TYPE="file" NAME="lecv">''
-    * SUBMIT
-    * RESET
-  * CHECKED -> dans le cas que le type est CHECKBOX
-Les zones de texte : <TEXTAREA></TEXTAREA>
-  * ROWS, COLS, READONLY
-Listes de choix : <SELECT>
-  * NAME
-  * SIZE
-  * MULTIPLE
-  * Les choix sont décrits par la balise <OPTION>
-    * VALUE
-    * SELECTED
-====== Inclure des styles CSS dans le code HTML ======
-<code html>
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
-<html>
-<head>
-  <title>Html avec style</title>
-  <style type="text/css">
-  body {
-    color: purple;
-    background-color: #d8da3d }
-  </style>
-</head>
-<body>
-</code>
-===== Inline styles =====
-<code html>
-<font style="font-family: Arial,Helvetica,sans-serif; font-size:22px; color:red; text-decoration:underline; ">
-</code>
-====== Exemples de codes ======
-===== nofollow =====
-<code html>
-<a href="http://www.siteinternet.com/" rel="nofollow">nom du lien</a>
-</code>