1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
Dismiss Notice
Welcome to our Education website, plz like our page facebook to support us. Thank You and wish you good navigation

HyperText Markup Language HTML - Part 2

abdelouafiSep 21, 2016

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Messages:
      181
      Likes Received:
      9
      Trophy Points:
      18
      Joined
      Sep 13, 2016
      HyperText Markup Language

      Balise <a> (lien hypertexte)

      -Href: lien de destination (chemin relatif de la page appartenant au site courant ou chemin absolu commençant par http:// si la page existe sur un autre site Web)
      -Target: carde de destination (fenêtre courante ou nouvelle fenêtre)
      -Title: titre affiché dans l’info bulle si l’on survole le lien avec le pointeur de la sourie.

      Quelques valeurs courantes de l’attribut « target »:

      -_self: même cadre
      -_blank: nouvelle fenêtre
      -_top: page entière

      Exemple:

      Code:
      <a href=‘’http://www.exam-lib.com’’ target=‘’_blank’’>
      Ceci est un lien hypertexte vers Google
      
      <!-- Lien vers un autre site s’ouvrant dans une nouvelle fenêtre -->
      
      </a>
      <u></u>: souligné
      Balise <font> ( mise en forme du texte)

      -Face: police du texte (verdana, arial…)
      -Size: taille du texte (de 1 à 7) pour les tailles standards, (-2 à +4) pour définir une taille relave à la taille par défaut (3). Si on veut définir une taille différente on utilise l’attribut de style locale de type: style=‘’font-size:taille_en_pt’’
      -Color: couleur du texte qui peut prendre comme valeur l’identificateur de la couleur (blue, green, pink…) ou son code RVB hexadécimal (plus pratique).

      Exemple:

      Code:
      <font face=‘’verdana’’ color=‘’orange’’ size=‘’3’’>
      
      Le texte courant est de police Verdana, couleur bleue et de taille 12 pt
      
      </font>
      Ou encore

      Code:
      <font face="verdana" color=‘’blue’’ style=‘’font-size:15pt’’>
      
      La taille des cette police est 15 pt
      
      </font>
      Balise <font> ( mise en forme du texte)

      L’attribut « color » peut prendre comme valeur le nom de la couleur tel que green, white, red… Cependant, le codage de couleurs demeure la solution la plus adéquate pour exprimer toutes les nuances disponibles dans l’environnement RVB (ou RGB en anglais).

      Les couleurs du Web sont réparties sur une palette RVB (Rouge, Vert, Bleu). Avec ces trois couleurs de base on peut composer toutes les couleurs connues avec une précision définie par le nombre de bits qui exprime chaque couleur de base.

      Chaque couleur de base est représentée sur un octet. On peut alors exprimer une couleur quelconque par trois octets (24 bits: 8 bits pour le Rouge, 8 bits pour le Vert et 8 bits pour le Bleu). L’assemblage de ces trois couleurs de base à un pourcentage bien déterminé donne la couleur désirée.


      upload_2016-9-21_14-38-54.png


      L’attribut « color » de la balise « font » devient alors:

      Color=‘’#XXXXXX’’

      Le Diez ‘’#’’ informe le navigateur que lXe code qui suit est une suite de nombres hexadécimaux.


      Exemple de quelques couleurs spéciales:


      Rouge: #FF0000 Jaune: #FFFF00 (Rouge + Vert)

      Vert: #00FF00 Magenta: #FF00FF (Rouge + Bleu)

      Bleu: #0000FF Cyan: #00FFFF (Vert + Bleu)

      Blanc: #FFFFFF (Rouge + Vert + Bleu)

      Noir: #000000 (Absence de toutes les couleurs)

      Balise <img> (insertion d’image):

      -Src: chemin relatif (ou absolu) de l’image
      -Border: taille de la bordure de l’image en pixel
      -Width: largeur de l’image en pixel
      -Height: hauteur de l’image en pixel
      -Alt (ou Title): description de l’image qui s’affiche sur une info bulle

      Exemple:

      Code:
      <img src=‘’images/portrait.jpg’’ width=‘’250’’ height=‘’300’’ border=‘’0’’ alt=‘’mon portrait’’>
      Noter que <img> ne procède pas de balises de fermeture </img>

      Balise <div> (mise en page)

      -Align: alignement de l’objet mis entre <div> et </div> (centré, à droite ou justifié. A gauche est définie par défaut)

      Exemple:

      Code:
      <div align=‘’center’’>
      
      <img src=‘’images/portrait.jpg’’ border=‘’0’’>
      
      <!-- L’image est centrée sur la page -->
      
      </div>
      Les quatre valeurs possibles de l’attribut « align »:

      Left (valeur par défaut), right, center, justify

      L’alignement peut être défini sur une page entière ou tout simplement (ce qui est le plus courant) sur une cellule d’un tableau masquée qu’on va voir plus loin dans ce cours.

      Balise <span> (surlignage):

      La balise span utilise une information de style locale de type:

      -Style=‘’background-color:couleur’’ : marquage du texte
      -Style=‘’text-decoration:underline’’ : soulignage du texte
      -Style=‘’text-decoration:eek:verline’’ : surlignage du texte
      -
      Exemple:

      Code:
      <span style=‘’background-color:#00ff00; text-decoration: overline’’>
      
      Ce texte est marqué en vert et est surligné
      
      </span>
      Balises <table> <tr> et <td> (tableaux HTML)

      Les tableaux HTML permettent d’établir une mise en page facile de la page Web. Elle permettent de diviser la page en plusieurs partie, chacune accueille un objet (text, script, image, objet de formulaire…)

      <table> (balise de déclaration d’un tableau)

      -Id: identificateur du tableau
      -Border: taille de la bordure du tableau
      -Width: largeur du tableau en pixel ou en pourcentage
      -Height: hauteur du tableau en pixel ou en pourcentage
      -Cellspacing: espacement entre cellules en pixel
      -Cellpadding: marge intérieure des cellules en pixel
      -Bgcolor: couleur de l’arrière plan du tableau
      -Bordercolor: couleur de la bordure du tableau

      Balises <table> <tr> et <td> (tableaux HTML)

      <tr> (balise de définition d’une nouvelle ligne du tableau)

      -Bgcolor: couleur de l’arrière-plan de la ligne
      -Width: largeur de la ligne en pixel ou en pourcentage (par défaut c’est la largeur définie en paramètres de la balise <table>
      -Height: hauteur de la ligne en pixel ou en pourcentage

      <td> (balise de définition d’une nouvelle colonne de la ligne)

      -Bgcolor: couleur de l’arrière-plan de la colonne
      -Width: largeur de la colonne en pixel ou en pourcentage
      -Height: hauteur de la colonne en pixel ou en pourcentage
      -Align: alignement horizontal des objet de la colonne
      -Valign: alignement vertical des objets de la colonne

      Balises <table> <tr> et <td> (tableaux HTML)

      Exemple:

      Code:
      <table border=‘’0’’ width=‘’760’’ cellspacing=‘’0’’ cellpadding=‘’0’’>
      
        <tr>
      
        <td bgcolor=‘’blue’’ height=‘’50’’ width=‘’380’’ valign=‘’top’’>
      
        C’est la colonne 1 de la ligne 1 du tableau 1
      
        </td>
      
        <td bgcolor=‘’green’’ height=‘’50’’ width=‘’380’’ valign=‘’top’’>
      
        C’est la colonne 2 de la ligne 1 du tableau 1
      
        </td>
      
      
        </tr>
      
      </table>
      
      
      Balises <bgsound> (placée entre <head> et </head>)

      L'élément BGSOUND permet de créer des pages avec un fond sonore et de paramétrer la durée de diffusion, le volume et la balance.

      L'élément BGSOUND admet les types de fichiers sons suivants:

      –Fichiers .WAV
      –Fichiers .AU
      –Séquences MIDI: .MID
      –Le format MP3 est pris en charge par les navigateurs actuels

      Attributs

      -Id: identificateur de l’élément
      -Src: chemin relatif du fichier son
      -Loop: nombre de répétitions (-1 veut dire infini)
      -Volume: volume du son entre -10 000 et 0 (0: maximum)
      -Balance: balance entre les deux haut-parleurs entre -10 000 et +10 000 (-10 000: le son provient entièrement du haut-parleur gauche)

      Balises <marquee>

      La balise marquee permet d’insérer un texte (ou une image) défilant sur la page Web

      Cette balise n'est pas reconnu par Netscape qui ne rendra son contenu qu’en élément fixe et immobile.

      Attributs

      -Id: identificateur de l’élément
      -Behavior: comportement de l’élément (alternate, slide, scroll)
      -Direction: sens de défilement (left, right, up, down)
      -Loop: nombre du défilements (si rien n’est mentionné: infinie)
      -Scrollamount: fixe le pas de déplacement en pixel (par défaut 6)
      -Scrolldelay: vitesse de défilement (par défaut 90)
      -Width: largeur de l’élément (zone réservée au défilement)
      -Height: hauteur de l’élement

      Code:
      <marquee> votre texte animé ici</marquee>
      Balises <p> (Nouveau paragraphe):

      Attributs:
      -Style=‘’margin-left: n px’’ marge gauche
      -Style=‘’margin-right: n px’’ marge droite
      -Style=‘’margin-top: n px’’ marge supérieure
      -Style=‘’margin-bottom: n px’’ marge inférieure
      -
      n: nombre entier définissant la valeur de la marge en pixel.

      Exemple:

      Code:
      <p style=‘’margin-left:10px; margin-right:10px’’>
      
        Ce paragraphe possède une marge de 10 pixels à gauche et à droite
      
      </p>
      <p style=‘’margin:10px’’> Une marge de 10 pixels est définie en haut, en bas, à gauche et à droite </p>

      Balise meta I:
      Permet de décrire votre page web.

      les balises meta sont souvent utilisées pour permettre aux moteurs de recherche de mieux analyser le contenu d'une page et de faciliter la recherche sur Internet en présentant des sujets connexes au contenu du document, l'auteur du document, une description courte du document…

      Cependant, les moteurs de recherche ont diminué l’importance de ces balises dans leurs algorithmes vu leur mauvaise utilisation par les concepteurs de sites (définition de mots clé vagues ou spamdexing…).

      meta est une balise simple (ne procède pas de balise de fin). Elle est toujours déclarée à l’entête du document (entre <head> et </head>).

      Chaque balise meta procède un nom qui caractérise sa fonction (par exemple ‘’keywords’’ est le nom donnée à la balise meta qui définie les mots clés sur lesquels se basent les moteurs de recherche pour référencer la page courante).

      Infos sur vous (créateur ou possesseur du site)


      Balise meta retournant le nom du créateur du site

      Code:
      <meta name=‘’author’’ lang=‘’fr’’ content=‘’nom prénom’’>
      Lang: spécifie la langue utilisée sur la page courante.

      Balise meta retournant le nom du publieur du site (propriétaire du site)

      Code:
      <meta name=‘’publisher’’ content=‘’nom prénom’’>
      Exemple:


      Code:
      <head>
      
      <meta name=‘’author’’ lang=‘’fr’’ content=‘’ENSA-Marrakech’’>
      
      <meta name=‘’publisher’’ content=‘’ENSA’’>
      
      </head>
      Infos sur le site

      Balise meta retournant les mots clé de recherche

      Code:
      <meta name=‘’keywords’’ content=‘’mots clés séparés par des virgules’’>
      Balise meta retournant la description du site

      Code:
      <meta name=‘’description’’ content=‘’brève description du site’’>
      Balise meta donnant l’URL complet de votre site

      Code:
      <meta name=‘’identifier-URL’’ content=‘’URL complet du site’’>
      Exemple:

      Code:
      <head>
      
      <meta name=‘’keywords’’ content=‘’ENSA, Marrakech, Ingénieurs, Formation’’>
      
      <meta name=‘’description’’ content=‘’Bienvenue sur le site de l’ENSA’’>
      
      <meta name=‘’identifier-URL’’ content=‘’http://www.ensa.ac.ma’’>
      
      </head>
      Infos sur la création

      Balise meta retournant les copyrights

      Code:
      <meta name=‘’copyright’’ content=‘’text du copyright’’>
      Balise meta retournant les outils de developpement

      Code:
      <meta name=‘’generator’’ content=‘’liste des logiciels utilisés à la création’’>
      Balise meta retournant la date de la création de la page

      Code:
      <meta name=‘’date’’ content=‘’date de création de la page’’>
      Balise meta retournant le codage par défaut de la page

      Code:
      <meta http-equiv=‘’content-type’’ content=‘’text/html; charset=codage’’>
      La balise précédente spécifie le type MIME et le code ASCII utilisé grâce à l'attribut Content-type celui-ci indique l'alphabet latin contenant les accents (utilisé pour le français)


      Exemple:

      Code:
      <meta http-equiv=‘’content-type’’ content=‘’text/html; charset=iso-8859-1’’>
      Orienter les robots (robots de moteurs de recherche)


      indexer toutes les pages :

      Code:
      <meta name=‘’robots’’ content=‘’all’’>
      Si le site est en construction et que vous voulez que le robot n’indexe pas vos pages vous mettez ‘’none’’ à la place de ‘’all’’. Avec ‘’follow’’ les destinations des liens sont indexées. ‘’Nofollow’’ empêche le robot d’indexer ces destinations. Avec ‘’Index’’ seule la page courante est indexée. ‘’NoIndex’’ La page courante n’est pas indexée


      Indexation automatique :

      Code:
      <META NAME="Revisit-after" CONTENT="n">
      Exemple:


      Code:
      <META NAME="Robots" CONTENT=‘’Index,Follow">
      
      <META NAME="Revisit-after" CONTENT="5">
      Rafraîchissement et redirection

      Recharger vos page périodiquement :


      Code:
      <META HTTP-EQUIV="Refresh" CONTENT="n">
      On peut même procéder au chargement d'une page différente, très utile lorsqu'on change d'hébergeur afin de rediriger le navigateur vers un autre site:


      Code:
      <META HTTP-EQUIV="Refresh" CONTENT="n; URL=URL souhaité">
      Exemple :


      Code:
      <META HTTP-EQUIV="Refresh" CONTENT="60; URL=http://www.google.com’’>
      Plus…


      Ne pas conserver les pages en cache:


      Code:
      <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
      Date d'expiration


      Code:
      <META HTTP-EQUIV="Expires" CONTENT=‘’Sat, 2 Jun 2008 14:30:00">
      Les formulaires

      Les formulaires HTML (FORMS en anglais) sont des ensembles de composants , appelés aussi champs, qui permettent à l'utilisateur d'entrer des informations, d'exprimer ses choix, de saisir du texte…

      En général, on parle de sites dynamique ci celui-ci contient des formulaires. En effet, les champs de formulaires permettent à l’internaute de communiquer avec le site (Il ne se contente pas de voir le contenu en passant d’un lien à autre).

      La balise <form></form> déclare un formulaire sur la page web.

      Tous les champs (zone de texte, boutons, listes de choix, cases à cocher…) doivent être placés entre <form> et </form>.

      Une page peut contenir plusieurs formulaires à la fois.

      Les formulaires sont généralement traités par des scripts tels que : JavaScript ou PHP…

      Balise:

      Code:
      <form name=‘’nom du formulaire’’ Method=‘’méthode d’envoie’’ Action=‘’URL de la page qui procèdera au traitement du formulaire’’>
      Name: Nom du formulaire. Utile si on utilise plusieurs formulaires sur la même page.

      Method: POST ou GET. POST permet l’envoi des valeurs du formulaire dans l’entête du document (les valeurs ne sont pas visibles) alors que GET les envoie avec l’URL (les valeurs sont visibles sur la barre d’adresse ce qui peut compromettre la confidentialité des données envoyées tels que les mots de passe).

      Action: Spécifie la page qui se charge du traitement du formulaire.

      La balise FORM possède comme attribut facultatif ENCTYPE (qu’on va voir plus loin dans le cours de PHP) qui spécifie le codage des données dans l'URL.

      Le champ TEXTE

      Syntaxe:


      Code:
      <input type=‘’text’’>
      Attributs:

      Name: nom du champ texte (Identificateur du champs)

      Value: valeur par défaut

      Size: taille en caractère

      Tabindex: ordre de tabulation (définit l’ordre de déplacement du curseur entre les champs de formulaire suite à l’appuie sur la touche TABULATION du clavier).


      Exemple:


      <
      Code:
      input type=‘’text’’ name=‘’login’’ size=‘’20’’ tabindex=‘’1’’>
      Le champ ZONE DE MOT DE PASSE

      Syntaxe:

      Code:
      <input type=‘’password’’>
      Attributs:

      Name: nom du champ texte

      Value: valeur par défaut

      Size: taille en caractère

      Tabindex: ordre de tabulation


      Exemple:

      Code:
      <input type=‘’text’’ name=‘’login’’ size=‘’20’’ tabindex=‘’2’’>
      Le champ ESPACE DE TEXTE


      Syntaxe:

      Code:
      <textarea></textarea>
      Attributs:

      Name: nom de l’espace de texte

      Colls: largeur de l’espace de texte en caractères

      Rows: hauteur de l’espace de texte en lignes

      Tabindex: ordre de tabulation


      Exemple:


      Code:
      <textarea name=‘’commentaire’’ colls=‘’30’’ rows=‘’6’’ tabindex=‘’3’’>
      
      Ceci est un commentaire
      
      </textarea>
      Le champ BOUTON RADIO

      Syntaxe:


      Code:
      <input type=‘’radio’’>
      Attributs:

      Name: nom du bouton radio

      value: valeur alphanumérique de l’élément

      checked: dit si l’élément est sélectionné

      Tabindex: ordre de tabulation


      Noter que les boutons radio forment des groupes. C’est-à-dire qu’ils portent le même nom mais on les différencie par leurs valeurs.


      Exemple:

      Code:
      <input radio name=‘’rad’’ value=‘’1’’ checked>
      
      <input radio name=‘’rad’’ value=‘’2’’>
      Le champ CASE A COCHER

      Syntaxe:


      Code:
      <input type=‘’checkbox’’>
      Attributs:


      Name: nom de la case à cocher

      value: valeur alphanumérique de l’élément

      checked: dit si l’élément est sélectionné

      Tabindex: ordre de tabulation


      Les cases à cocher peuvent être traitées comme des éléments indépendants, des groupes d’élément ou encore des tableaux d’élément (apprécié en PHP)


      Exemple:

      Code:
      <input type=‘’checkbox’’ name=‘’che’’ value=‘’1’’ checked>
      
      <input type=‘’checkbox’’ name=‘’che’’ value=‘’2’’>
      Le champ BOUTON

      Syntaxe:


      Code:
      <input type=‘’type_de_bouton’’>
      Il existe trois types:


      -type=‘’submit’’ ce sont les boutons d’envoie de formulaires
      -Type=‘’button’’ boutons ordinaires (peuvent être personnalisés avec JavaScript)
      -Type=‘’reset’’ boutons rétablir (rétablie les valeurs par défaut des champs de formulaire)

      Attributs:

      Type: type de bouton

      Name: nom du bouton

      value: label du bouton (texte écrit dessus)

      Tabindex: ordre de tabulation

      Le champ BOUTON

      Exemple:


      Code:
      <input type=‘’button’’ name=‘’imp’’ value=‘’Imprimer cette page’’>
      
      <input type=‘’submit’’ name=‘’valider’’ value=‘’Envoyer’’>
      
      <input type=‘’reset’’ name=‘’RES’’ value=‘’Rétablir le formulaire’’>
      Si le bouton est de type SUBMIT (le plus utilisé d’ailleurs), le fait de cliquer dessus redirige le navigateur vers la page définie en valeur de l’attribut ACTION de la balise FORM. En effet, c’est le bouton SUBMIT qui soumets le formulaire au traitement.

      Le champ LISTE DE SELECTION

      Syntaxe:


      Code:
      <select name=‘’nom_de_l_element’’>
      
      <option>option1</option>
      
      <option>option2</option>
      
      …
      
      </select>
      Attributs:


      Balise SELECT

      Name: nom de la liste

      Tabindex: ordre de tabulation


      Balise OPTION

      Value: valeur de l’option (par défaut c’est le contenu de l’option)

      Selected: mentionne si l’option est sélectionnée par défaut.


      rdana; mso-fareast-font-family:+mn-ea;mso-bidi-font-family:Arial;color:#FFCC00; mso-font-kerning:12.0pt;language:fr'>Tabindex: ordre de tabulation

      Le champ LISTE DE SELECTION


      Exemple:


      Code:
      <select name=‘’secteur_activité’’>
      
      <option selected>Télécoms</option>
      
      <option>Électricité</option>
      
      <option>Informatique</option>
      
      <option>Mécanique</option>
      
      <option>Métallurgie</option>
      
      </select>
      L’attribut VALUE de la balise OPTION est facultatif. Si rien n’est mentionné alors le contenu de la balise passe en valeur de l’attribut VALUE (Informatique pour le premier cas).


      Le champ CHARGEMENT DE FICHIER


      Syntaxe:

      Code:
      <input type=‘’file’’>
      Attributs:

      Name: nom du champs

      Tabindex: ordre de tabulation


      Les champs FILE permettent de parcourir un fichier sur le poste de travail et le soumettre au formulaire. Ce dernier, grâce à des scripts coté serveur comme PHP, charge le fichier sur le serveur (UPLOAD)


      Exemple:

      Code:
      <input type=‘’file’’ name=‘’mon_fichier’’>
      Le champ CACHÉ

      Syntaxe:


      Code:
      <input type=‘’hidden’’>
      Attributs:

      Name: nom du champs

      Value: valeur de l’élément


      Les champs caché (ou HIDDEN) permettent de transmettre en cachettes des informations sur le formulaire. HIDDEN est souvent utilisé avec le champ FILE. Il permet de définir la taille maximale du fichier à charger sur le serveur.


      Exemple:


      Code:
      <input type=‘’hidden’’ name=‘’max_file_size’’ value=‘’1024’’>
      Exemple:


      Code:
      <html><head><title>Page d’authentification</title></head><body>
      
      <form name=‘’form1’’ method=‘’post’’ action=‘’connexion.php’’>
      
      <div align=‘’center’’>
      
      <h2>Veuillez vous identifier</h2><br><br>
      
      Login: <input type=‘’text’’ name=‘’login’’><br>
      
      Mot de passe: <input type=‘’password’’ name=‘’pass’’><br>
      
      Vous êtes connecté en tant que:
      
      &nbsp;
      
      <select name=‘’statut’’>
      
      <option>Utilisateur</option>
      
      <option>Administrateur</option>
      
      </select><br>
      
      <input type=‘’submit’’ name=‘’valider’’ value=‘’  OK  ‘’>
      
      </div></form>
      
      </body></html>
      Balises supplémentaires

      <sup></sup>: Exposant (X<sup>2</sup> donne X²)

      <sub></sub>: Indice (H<sub>2</sub> donne H2)

      <strong></strong>: Écriture en gras tout comme <b></b>

      <em></em>: Écriture oblique tout comme <i></i>

      <h1></h1>: Titre de taille 6 (24pt)

      <h2><h3><h4><h5><h6>: Titres de taille respectivement 5, 4, 3, 2 et 1.


      Cependant, il existe d’innombrables effets à appliquer sur le contenu de la page en introduisant des attributs de style locale sauf que cela demande trop de travail qui peut s’avérer fastidieux.
      Le chapitre suivant traitera les feuilles de styles CSS qui peuvent nous épargner beaucoup d’effort en mise en page de nos pages Web.
       

      Attached Files:

      Last edited: May 8, 2017
      Loading...

Share This Page

Share