Première leçon d'html

                                                 BTS  IG     Août 2011                    INITIATION A L' HTML

Première leçon d'HTML  

                                              

                                    OBJECTIF :

                                   Écrire vite un site en HTML avec seulement le wordpad ou le bloc-note disponibles dans

                                  "Accessoires" de Windows, donc sans l'aide d'une interface ou d'un logiciel de création.

                                  IMPORTANT IMMEDIATEMENT:

                                   Il faut pouvoir sauvegarder une page, dans le wordpad ou le bloc-note,

                                  avec l'extension  .html   ou   .htm   .

                                  POUR CELA aller dans  "Explorateur windows", que l'on a dans le menu " Accessoires", 

                                  cliquer sur  "OUTILS" , dérouler et cliquer sur "Options des dossiers", puis cliquer

                                   sur "Affichage" puis descendre pour décocher la ligne

                                  "masquer les extensions des fichiers dont le type est connu"

                                   enfin  cliquer sur OK.

                                  Quand on sauvegardera une page du wordpad ou du bloc-note l'extension .text

                                   pourra être effacée puis l'on écrira à la place  l'extension .html

                                 La page sera alors avec l'extension .html

                                                        PREMIERE PARTIE.

                                                              -----------------------

               1. PRESENTATION brève de l'HTML.

                       L' HTML (Hyper Text Markup Language) n'est pas un langage de programmation.

                                        C'est du balisage de texte.

                  On prépare un texte qui devra être mis en page pour être lu par le navigateur

                  Par exemple on donne à un étudiant un texte en lui demandant de suivre avec précision

                  les indications que l'on aura inscrites ( concernant le type de police , sa taille, les images à intégrer.).

                                         Ces indications seront données en utilisant uniquement des abréviations

                    entre les signes <  et  > pour bien les dintinguer du reste du texte.

                    On appellera ces indications de mise en page : des balises 

                    Vous allez donc fournir un texte codé qui sera tapé par l'étudiant et sera lu par le navigateur

                    de l'ordinateur.

                    OBLIGATOIREMENT  dans une page en html au minimum les balises suivantes

                    doivent être indiquées:

                        <HTML>

                         <HEAD>

                         <TITLE> ...................................... </TITLE>

                         </HEAD>

                        <BODY>   --------------------------------------

                         </BODY>

                         </HTML>

                     Entre les balises <TITLE> et </TITLE> les pointillés seront remplacés,

                     en français, par le titre qui servira d'entêtede la page.

                     Entre les balises <BODY> et </BODY>  il y aura, à la place des pointillés,

                     le contenu du texte du document.

                 2. PREMIERES SITUATIONS CONCRETES:

                      Mettre un texte en gras (qui se dit BOLD en anglais) s'obtient en inscrivant <B>

                       juste avant le mot ou la phrase à mettre en gras puis en indiquant

                      </B> après la fin du mot ou de la phrase

                       ( l'ajout du signe / veut dire "fin du").

                      En anglais "under " signifie "sous". La première lettre est u.

                        Il faut donc pour souligner un texte, l'encadrer par les balises <U>  et </U>

                       ( les minuscules sont autorisées. )

                      Il faut pour mettre en italique un texte, l'encadrer par les balises < I > et < /I>

                         ( les minuscules sont autorisées. )

                      Pour aller à la ligne après un mot on met la balise unique <P>

                        après ce mot ( "Break" fait référence en anglais à une rupture).

                        La balise < BR> n'a pas de fermeture.

                      Pour sauter une ligne on peut mettre deux fois la balise <BR>

                        ou encore utiliser la balise <P> comme pour commencer un paragraphe.

                       Cette balise <P> , dans ce cas, est utilisée sans sa fermeture.

                     Les balises <H1> ou <H2> ...  <H6> avant un mot ou une phrase avec

                        après le mot ou la phrase les balises de fermeture

                        </H1>ou  </H2> ...  </H6>  respectivement augmentent la tailles des caractères.

                      EXERCICE1

                            L'étudiant doit créer une page en html intitulé "MON PROJET" .

                            Il doit mettre en gras la phrase

                            " Ce site a pour but de présenter un réseau"

                             Ecrire le texte codé.

                               -------------------------------------------------     

                RÉPONSE:         L'étudiant doit écrire le texte codé:               

                         <HTML>

                         <HEAD>

                         <TITLE> MON PROJET  </TITLE>

                         </HEAD>

                        <BODY>   <B>Ce site a pour but de présenter un réseau</B>

                         </BODY>

                         </HTML>

                               ---------------------------------------------      

              EXERCICE 2:

                           L'étudiant  doit en plus à présent souligner la phrase précédente:

                            Ce site a pour but de présenter un réseau.

                       --------------------------------------------      

                 REPONSE:          L'étudiant doit écrire le texte codé:               

                         <HTML>

                         <HEAD>

                         <TITLE> MON PROJET  </TITLE>

                         </HEAD>

                        <BODY>   <B><U>  Ce site a pour but de présenter un réseau </B> </U>

                         </BODY>

                         </HTML>

                                      ----------------------------------------------

              EXERCICE 3:

                     L'étudiant  doit en plus à présent mettre en italique la phrase précédente:

                        Ce site a pour but de présenter un réseau                     

                              -------------------------------------------      

                REPONSE:         L'étudiant doit écrire le texte codé:               

                         <HTML>

                         <HEAD>

                         <TITLE> MON PROJET  </TITLE>

                         </HEAD>

                        <BODY>   <B><U>  < I >Ce site a pour but de présenter un réseau </B> </U> < /I >

                         </BODY>

                         </HTML>        

                                 --------------------------------------    

                 EXERCICE 4:

                         Demander à l'étudiant de mettre la phrase précédente

                         avec "de présenter un réseau " mis à la ligne en sautant une ligne.

                          -----------------------------------------

                REPONSE:         L'étudiant doit écrire le texte codé:                              

                          <HTML>

                         <HEAD>

                         <TITLE> MON PROJET  </TITLE>

                        </HEAD>

                        <BODY>   <B><U>  < I >Ce site a pour but <BR> <BR> de présenter un réseau </B> </U> < /I >

                         </BODY>

                         </HTML>      

                         -------------------------------------

           3.REMARQUE:

                                       Ainsi le principe de base du HTML est l'utilisation de balises

                                       pour donner des ordres au navigateur .

                                       Le navigateur (Internet Explorer, Netscape...) retranscrit la page HTML

                                       en prenant en compte les balises

                                       (les mots ou ensemble de lettre entre les signes < et > )

                                      comme des ordres à exécuter.

                                      Le reste du texte est affiché en fonction de ces ordres.

                                      Le texte codé, comme dans l'EXERCICE 1, se trouve dans un simple fichier texte

                                      dont on a remplacé l'extension .txt par .html .

                                       Ce fichier a été ensuite placé sur Internet chez un hébergeur de site.

                                       L'hébergeur  e-monsite.com  présente quatre avantages:

                                      • La gratuité de la création du site et de son hébergement.

                                      L'ouverture simple immédiate du site avec une adresse internet et le choix d'un nom.

                                      La possibilité de basculer en permanence entre la page html et l'interface en français.

                                      • Une grande fluidité dans les connextions.

                                          ( Plus de 800 000 sites déjà se trouvent chez cet hébergeur. )

                             IMPORTANT:

                                       Pour faire une page web l'étudiant n'a pas à être connecté.

                                       Il peut très bien, sans connexion, créer entièrement un site, puis,

                                       quand son professeur sera satisfait du résultat, le mettre en ligne.                                       

                                       En attendant le site est en "cale sèche". Il peut faire un site uniquement

                                       avec l'éditeur de texte wordpad de Windows.

                                                     ----------------------------------------------------------------------

                          Conseil:

                     Un site excellent très clair pour apprendre très vite est :  
http://www.guidegratuit.com/