HTML

Les bases du codages html

Le code HTML

 

Préambule


Notre objectif est une présentation de la codification HTML. Codification comprise par tous les navigateurs Web et base de tous les sites Web en fonctionnement à ce jour.
Notre ambition est de vous présenter les bases de cette programmation et ainsi, de mettre en avant la simplicité de cette codification.
Nous avons conscience que nous sommes loin d'être exhaustif, mais là n'est pas notre propos.
Il existe des sites et des livres qui sont cent fois plus complet que cette simple page de présentation.

Le Html


HTML est le langage universel utilisé pour communiquer sur le Web. Votre information sera ainsi transportée sur cette gigantesque toile qu'est Internet pour aboutir sur l'ordinateur d'un internaute ou un programme appelé navigateur (ou browser) pourra le décrypter et ainsi afficher les informations. 

Ce logiciel, que l'on appelle un navigateur, vous permet de surfer sur le Net et d'afficher les "pages" lues.
Les plus connus sont Chrome de Google et Internet Explorer de Microsoft mais il en existe d'autres.


  • Chaque navigateur a ses particularité.
    Ce qui fait que vous ne saurez jamais exactement comment sera affichée la page que vous avez conçu sur l'ordinateur de l'internautes visitant votre site.
    ce qui fait qu'avec le HTML, vous n'avez pas la maîtrise totale de la présentation de votre document.

  • Un éditeur de texte suffit pour programmer un site
    En effet, pour ne pas alourdir les lignes téléphonique (au temps de la création du HTML !), support privilégier de cette toile mondiale qu'est Internet, la codification utiliser est tout simplement ce bon vieux code ASCII à 7 bits, c'est à dire sans les caractère accentué !!!.  Ceux-ci faisant l'objet d'une codification spéciale.

     

  • Mais le HTML est un langage simple
    compris par tous les navigateurs existant, quelques soit la plate forme utilisé (windows, mac, linux, etc...)

    En premier vous avez le texte.
    Mais pour pouvoir "contrôler" son affichage, il faut donner au navigateur des instructions TOUJOURS encapsulé entre les caractères < et >

    Par exemple : < TITLE > pour donner le titre de la page, celui qui sera affiché dans le bandeau en haut de la fenêtre de votre navigateur.

    Certaines balises sont simples comme (< TITLE >), d'autres vont nécessiter des paramètres comme < TABLE BORDER="1" WIDTH="650"  > par exemple
     

    Les outils



    Pour écrire du code HTML, vous n'avez besoins que d'un éditeur de texte comme bloc-notes par exemple.
    Nous vous déconseillons d'utiliser un logiciel de traitement de texte comme Word par exemple.
    Heureusement, pour vous faciliter la tâche, il en existe qui comprenne le code HTML et même le codage des langages du net comme le PHP. .
    Leur avantage est qu'il mettre en couleur les balise pour les distinguer du texte.  Cela facilite grandement la frappe.

     

    Le document Html minimum





    < HTML >
    Balise de début d'un document de type HTML.
    < HEAD > Balise de début de la zone d'en-tête
    < TITLE > Balise de début du titre de la page.
    < /TITLE > Balise de fin du titre de la page.
    < /HEAD > Balise de fin de la zone d'en-tête.

    < BODY >
    Balise de début du document proprement dit.
    < / BODY > Balise de fin du document proprement dit.
    < /HTML > Balise de fin d'un document de type HTML.


  • Vous aurez remarqué qu'à chaque balise de début d'une action, soit "< code balise >", auquel correspond, normalement, une balise de fin "< /code balise >".
  • Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire < TITLE >, < title >, < Title >, etc.

    Le texte


    Toutes pages web est constitué de texte. Les balises HTML vous permette de l'afficher selon la présentation choisie.


    Exemple de formatage de texte


    Affichage
    Balises à utiliser
    Commentaire
    Gras bold < B >...< /B >
    < STRONG >...< /STRONG >    		 Début et fin de zone en gras
    Italique italic < I >...< /I >
    < EM >...< /EM >    		 Début et fin de zone en italique
    Taille de caractère >font size < FONT SIZE=taille >......< /FONT > Début et fin de zone avec cette taille
    Couleur de caractère font color < FONT COLOR="#codecouleur" >........< /FONT > Début et fin de zone en couleur
    A la ligne line break < BR > Retour à la ligne
    >Commentaires Comments < !-- *** -- > Ne pas traiter (commentaire pour le programmeur)
    Centrage
    		< CENTER >......< /CENTER > Centrer



    Exemple de code HTML :

    < HTML >
    < HEAD >
    < TITLE >titre de la page< /TITLE >
    < /HEAD >
    < BODY >
    texte simple

    < B >texte en gras< /B >< BR >
    < STRONG >texte en gras< /STRONG >< BR >
    < I >texte en italique< /I >< BR >
    < EM >texte en italique< /EM >< BR >
    < B >< I >texte en gras et en italique< /I >< /B >< BR >
    < FONT SIZE=5 >texte en taille 5< /FONT >
    < FONT COLOR="#0000FF" >texte en bleu< /FONT >
    < !--Commentaire-- >
    < /BODY >
    < /HTML >

    Ce qui donne :


    texte simple
    texte en gras
    texte en gras
    texte en italique
    texte en italique
    texte en gras et en italique
    texte en taille 5
    texte en bleu



    Les principales balises de texte à connaître
  • Le texte tout simple s'écrit sans balises. Il sera afficher par le navigateur avec la police et taille de caractères selon sa configuration par défaut.
    D'un manière générale, quand vous sélectionnez une police de caractère, celle-ci ne s'affiche que si elle est présente sur l'ordinateur de l'internaute.

  • Le même browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui :
    < FONT SIZE=5 >texte< /FONT >
    < FONT COLOR="#0000FF" >en bleu< /FONT > est équivalent à :
    < FONT SIZE=5 >texte< /FONT >< FONT COLOR="#0000FF" >en bleu< /FONT >

  • Il n'est pas rare d'utiliser plusieurs balises les unes après les autres. Il vous faut veiller à bien les imbriquer. Ainsi < I >< U >...< /U >< /I > est correct et < I >< U >...< /I >< /U > peut vous créer des surprises.

  • Le navigateur affiche le texte qu'on lui "dicte". Il force un retour à la ligne quand le texte atteint le bord de la fenêtre. Pour rester maitre des retours à la ligne, il vous faut jouer avec la balise : < BR >. Celle-ci représente une action ponctuelle et n'a donc pas besoin de balise de fin.

  • Le tag < BLOCKQUOTE >...< /BLOCKQUOTE > introduit un retrait.
     
  • Vous savez déjà que les navigateurs ne reconnaissent qu'un espace entre les mots. Mais, pour remédier à certaine situation, la balise < PRE >...< /PRE > affiche un texte dit préformaté. Le navigateur affiche donc le texte telle que définit par le concepteur du site.
    Par exemple : < PRE >V o i c i Un Formatage qu i comprends d e s espaces v a r i a b l e s ...< /PRE >
    donne : 
    V o i c i Un Formatage qu i comprends d e s espaces v a r i a b l e s ...

     
  • La balise < U >...< /U > souligne le texte.
    Attention, par convention (qui à tendance à disparaitre) un lien dans un texte est écrit en soulignés. Par conséquent, il faut utiliser d'autres méthodes pour mettre en avant des portions de texte. 
  • Les tags < SUB >...< /SUB > et < SUP >...< /SUP > placent le texte respectivement en indice et en exposant. 
  • Pour aligner du texte, on utilise l'attribut ALIGN ou le tag < CENTER >. Il existe une balise permettant d'aligner différents éléments. c'est le DIV :

    < DIV align=left >...< /DIV >
    < DIV align=center >...< /DIV >
    < DIV align=right >...< /DIV >
    < DIV align=justify >...< /DIV >

    • Vous avez ici les principales balises du HTML à connaître pour formater un texte à l'écran. Il existe encore d'autres balises et les évolutions du HTML vont certainement en apporter de nouvelles comme en faire disparaître... mais là, le mieux est d'acquérir un guide du HTML permettant une recherche multicritères. 

    Les titres et les listes


    Comme dans les traitement de texte, il faut pouvoir mettre en place une présentation du texte avec des titres et des listes.

    En voici les principales balises

    Affichage Balises à utiliser Commentaire
    En-têtes Heading < Hn >< /Hn >
    avec n=1 à 6 (H1, H2, ..., H6    		 Afficher un titre de niveau n et sauter une ligne
    Liste non-ordonnée Bullet list < UL >< /UL > Afficher le texte sous forme d'une liste non-ordonnée.
    >Liste ordonnée Numbered list < OL >< /OL > Afficher le texte sous forme d'une liste ordonnée.
    Elément de liste List items < LI > Voici un élément de la liste
    Paragraphe >Paragraph < P >< /P > Saut de ligne, insérer une ligne vierge et commencer un paragraphe


    Pour exemple, le code suivant :


    < H1 >Les mois du printemps< /H1 >
    < UL >< LI >avril
    < LI >mai
    < LI >juin< /UL >
    < P >
    < H3 >Les mois d'automne< /H3 >
    < OL >< LI >octobre
    < LI >novembre
    < LI >décembre< /OL >

    Donne pour résultat :


    Les mois du printemps


    • avril
    • mai
    • juin

    Les mois d'automne


    1. octobre
    2. ovembre
    3. décembre




    Quelques commentaires :


    é est l'un de ces caractères spéciaux utilisés pour représenter le é. Les éditeurs Html vous déchargeront de cette corvée.
    Les paragraphes et les en-têtes peuvent s'aligner à gauche, au centre ou à droite.
    < H1 align=left >< /H1 >
    < P align=left >< /P >
    < H1 align=cente r>< /H1 >
    < P align=center >< /P >
    < H1 align=right >< /H1 >
    < P align=right >< /P >


    Les listes peuvent s'imbriquer:
    < H4 >Les 12 mois< /H4 >
    < UL > < LI >Les mois du printemps
    < OL >< LI >avril
    < /OL >< /UL >
       

    Les liens


    Html (Hyper Text Markup Language) est un langage hypertexte qui vous permet en cliquant sur un mot, une image, une portion de d'image, d'aller ailleurs, sur une autre page de votre site, comme sur un  autre site  
    La syntaxe de ces liens est simple : < A HREF="URL ou adresse" >...< /A >
    La complexité vient des option et des variantes.

    Les liens vers un autre site Web

  • >Lien vers un autre site web : "http://serveur/chemin.../fichier"    
  • Lien vers une boîte aux lettre électronique : "mailto:nombal@domaine.ext"    
  • Lien vers un site de téléchargement de fichier : "ftp://serveur/chemin.../fichier"    

    • Lien vers une autre page du site


    Quand on navigue dans un site Web, chaque fois que l'on fait un clic sur un lien, on appel un autre fichier, une image présentes dans le même répertoire, ou dans un répertoire différents.
    L'organisation des répertoires n'étant pas l'objet de cette page, nous n'en diront pas plus.
    Ce qu'il faut retenir c'est que vous avez deux manière de programmer ces liens :
  • En adressage absolu : "file:///lecteur:/répertoire/fichier.htm"
  • En adressage relatif :  "../../../fichier.htm"

    • Nous vous conseillons autant faire ce peut, d'utiliser l'adressage relatif. Celui-ci permet, quand il est bien maîtriser, de transporter assez facilement votre site d'un serveur à un autre. 

    Les Liens dans la même page, à un autre paragraphe.


     

    Les ancres

    Lien vers une ancre dans la même page < A HREF="#azert" >...< /A > Lien vers la cible azert
    dans la même page
    Lien vers une ancre dans une autre page < A HREF="URL#azert" >...< /A > Lien vers la cible "azert" dans une autre page
    Définition d'une ancre < A NAME="azert" >...< /A > Ceci est une cible



    Ces types de liens sont très utiles pour naviguer dans une page contenant beaucoup de texte. Maintenant, reste à voir s'il ne vaudrait pas mieux faire plusieurs pages...  
       

    Les images et le choix du format



    En préambule, il existe plusieurs format d'image. deux sont principalement utiliser sur le web : le GIF et le JPG (prononcer JPEG).
    Des différences existent.
    Nous conseillons, pour les logos, les icônes, les images demandant peu de couleur et n'ayant pas de nuance, d'utiliser le GIF en 256 couleur.
    Dans les autres cas, d'utiliser le JPG (photos par exemple).

    Ceci dit, il faut garder à l'esprit que l'ennemi du Web est la taille des pages (en ko), donc des images.
    Même avec les hauts débits qui se mettent progressivement en place.
    En premier la taille de l'image est prépondérante. Plus elle est "lourde", plus il faudra du temps pour la charger.
    Il n'y a aucun miracle, les kilos (ko) de l'image, il faut les faire passer par "les tuyaux"...... même avec des tuyau en fibre !
    Gagner du poids sur une image diminue sa qualité. Un compromis est à trouver !  
    Et ce n'est pas en changeant de serveur par un encore plus performant que le résultat sera plus nette ou plus rapide car celui-ci va dépendre aussi de la qualité de l'accès internet du visiteur comme de son matériel informatique  

    Liens vers une image

    < IMG SRC="./...../Adresse de l'image" > Pensez à utiliser des adresses en relatif....
    Balise pour mettre un Texte alternatif alt="****" Pour afficher un texte quand la souris passe sur l'image
    width=xxx height=yyy (en pixel) Forcer l'image à s'afficher dans une hauteur et une largeur donné
    border=x (en pixels) Taille de la bordure



    En Html, l'image ne fait pas partie de votre fichier HTML Le navigateur va la chercher à l'adresse indiquée.
    Presque en conséquence logique de ceci, le fait d'utiliser la même image dans un fichier Html ne modifie en rien sa taille totale de la page à charger.
    Une image utilisée sur plusieurs pages ne sera chargée qu'une fois par le navigateur (sauf si vous forcer la ré-initialistion du cache du navigateur)

    Liens à partir d'une image

    < A HREF="fichier.htm" >< IMG SRC="image.gif" >< /A > Pensez à utiliser des adresses en relatif....


    La ligne horizontale


    Le html permet d'insérer dans une page des trait horizontaux comme celui-ci :
       

    La syntaxe

    < HR size=? > Epaisseur du trait en pixels
    < HR width=? (ou %) > Largeur du trait en pixels ou en % de la fenêtre
    < HR color="#rrvvbb" > Couleur du trait selon la codification RVB en hexadécimal
    < HR align=left >
    < HR align=right >
    < HR align=center >     		Alignement gauche
    Alignement droite
    Alignement centré


    Les arrière-plans


    Le langage Html permet d'agrémenter la présentation du document d'un arrière-plan [background] coloré ou composé d'une image. Ce qui apporte un élément "artistique" à votre page.
    La balise à utiliser ne pose pas de problème :
    Pour une couleur d'arrière plan sur toute la page :  < BODY BGCOLOR="#$$$$$$" >
    Ce code peut permettre de donner une couleur d'arrière plan à un tableau ou une case 'un tableau.
    Il existe aussi des balises pour modifier les couleurs utilisées par défaut par le browser pour le texte et les liens.   
    Couleur de texte < BODY TEXT="#$$$$$$" >
    Couleur de lien < BODY LINK="#$$$$$$" >
    Lien visité < BODY VLINK="#$$$$$$" >
    Lien actif < BODY ALINK="#$$$$$$" >
         
    On peut aussi prévoir un fond en image. Cette image (petite de préférence) est affichée en mosaïque par le browser. Attention aux raccords... comme lorsque vous posez du papier peint.
    Texture d'arrière-plan  < BODY BACKGROUND="Adresse de l'image" >  avec bien une adresse en relatif...  

    Les tableaux

     
    En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc très fréquent.
    Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau.
    Ce qui est à retenir : Si vous savez faire un tableau en HTML, vous savez faire une page web. C'est le premier conseil que j'ai eu quand j'ai fait mon premier site. J'avoue ne pas l'avoir comprise sur l'instant, mais dès la première page faite... en fait chaque page est un ensemble de tableau pouvant être imbriqué les uns dans les autres.

    Les balises de base sont donc :
    Définition du tableau [Table] < TABLE >  < /TABLE > Début et fin de tableau
    Définition d'une ligne [Table Row] < TR >  "codage de la ligne" < /TR > >Début et fin de ligne
    Définition d'une cellule [Table Data] < TD > "contenu de la cellule"  < /TD > Début et fin de cellule
     

    Exemple de codage d'un tableau à deux lignes et deux colonnes.


    < TABLE >
    < TR >< TD >Cellule 1 < /TD >< TD > Cellule 2 < /TD >< /TR >
    < TR >< TD > Cellule 3 < /TD >< TD > Cellule 4 < /TD >< /TR >
    < /TABLE >

    Joindre des bordures

       
    Bordure de cadre [Border] < TABLE border=x >   < /TABLE >
     
     
    Ce qui donne :
     
    cellule 1cellule 2
    cellule 3cellule 4
     

     Il y a encore trois type de codage :   
     
    L'espace entre les cellules ou
    l'épaisseur des lignes du quadrillage     		< TABLE cellspacing=? >
    L'enrobage des cellules ou
    l'espace entre le bord et le contenu    		 < TABLE cellpadding=? > 
    La largeur de la table < TABLE width=yyy >
    < TABLE width=xx% >
     

    Les cellules des tableaux


    Nous n'en avons pas fini avec les tableaux. Allons plus loin dans notre étude en nous penchant sur les cellules de ces tableaux.
    Avant toutes choses, les cellules peuvent contenir tous les éléments Html déjà passés en revue soit :
    ·       du texte
    ·       des images
    ·       des liens
    ·       des arrière-plans
    ·       et même des tableaux (eh oui!)
    Bien que l'allure de votre tableaux soit déjà déterminée, chaque cellule est en quelque sorte un petit univers à part qui a ses propres spécifications.
    Découvrons-en les possibilités :  
    Largeur d'une cellule < TD width=? >  en pixels
    < TD width=% >  en pourcentage
    Fusion de lignes < TD rowspan=x >
    Fusion de colonnes < TD colspan=x >
          

    Conclusion

     
    La première question qui va venir est : "Mais à quoi cela va-t-il me servir ? En fait c'est le besoin qui fera que vous vous en servirez ou pas. 
     C'est vrai qu'avec des outils comme WordPress, connaître de codage n'est pas essentiel. Mais, le jour ou vous aurez à faire des pages simples cela vous sera utile et vous permettra d'avoir une présentation de page maitriser.
    Personnellement autant au début je codais chaque page d'un site, autant aujourd'hui c'est très ponctuel. en fait, cette connaissance m'a permis de développer un mini site qui fonctionne en statique sur un simple disque dur de PC. Très utile pour faire un partage d'information au sein d'un service.
      

    Autres articles intéressants à parcourir

    WordPress : La médiathèque

    par | Déc 28, 2023 |

    WOrdprss La médiathèqueLa médiathèque est le coeur de votre site web Dans la médiathèque, vous allez retrouver toutes les images, fichier vidéo & audio qui vont agrémenter votre site internet. Mais, Wordpress ne classe pas ces fichiers autrement que par date de...

    Les « mots de passe »

    par | Déc 28, 2023 |

    WindOws Les mots de passeLes mot de passe sont le pilier de notre sécurité Aujourd'hui, de nombreux sites nous demande d'ouvrir un compte et de choisir un identifiant et un mot de passe. Très souvent, l'identifiant est notre mail : nous n'avons donc pas de choix à...

    Windows : les raccourcis claviers à connaître

    par | Déc 4, 2021 |

    WindOws Les raccourcis clavier à connaîtreLes 10 raccourcis clavier de base sur Windows Ces raccourcis mythiques fonctionnent sur toutes les versions de Windows. Du fait de leur popularité, ils sont également disponibles sur de nombreux logiciels de bureau.  ...

    WordPress : Présentation

    par | Avr 30, 2021 |

    WOrdPress Présentation du tableau de bordLe menu de gauche de WordPress permet de gérer l'intégralité des fonctions associés au site. De manière synthétique voici, la présentation des principaux menus :Tableau de bord : Donne un état des derniers événements passés sur...

    Les Balises META

    par | Avr 21, 2021 |

    INTERNET Les balises METALes Balises META et le référencementIntroductionVéritable outil du concepteur de sites Web, cesbalises META feront la différence entre un site d'amateur d'un site de proLes balises META apportent un certain nombre d'information utiles aux...

    Les règles d’Or de la Conception Graphique

    par | Jan 10, 2021 |

    INTERNET Les règles d'Or de la Conception GraphiqueLes règles d'Or de la Conception Graphique"   Gardez ces règles en tête, c'est assurer une meilleure visibilité à votre site Web. Allégez la taille des fichiers images. Même si les raccordement sont de plus en...

    Brève Présentation d’Internet

    par | Jan 10, 2021 |

    INTERNET une brève présenation d'internet  En premier, il faut distinguer deux composants qui ont tendance à se confondre : le hard et le soft. Le hard composé des liaisons, des serveurs et des protocoles d'interconnexion et le soft, les langages qui permettent...

    Internet : Bref historique

    par | Jan 10, 2021 |

    INTERNET L'origine d'internet L'histoire complète de l'internet peut être trouvée dans de nombreux documents disponibles sur le net, nous n'aurons donc pas la prétention d'établir ici un historique exhaustif et d'une précision sans faille ; le but de cette...

    Code erreurs SMTP

    par | Jan 10, 2021 |

    INTERNET Les codes d'erreurs SMTP    Les codes d'erreur SMTPCes codes sont génés par le serveur SMTP lors du traitement des messages électroniques.Vous pouvez trouver ses codes lors de réception de message d'erreur par exemple et cette liste vous permettra de...