Scribd Logo
Importer

Bienvenue sur Scribd !

  • Langage HTML

    Transféré par

    Marie Therese
    21 vues7 pages
    HTML

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOC, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    HTML

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    21 vues7 pages

    Langage HTML

    Transféré par

    Marie Therese
    HTML

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 7

    HTML

    Hyper-Text Mark-Up Language


    Hyper-text=texte+liens vers d'autres pages

     Le langage HTML permet la mise en forme de textes et d'objets multimédia


    (images, son, vidéo) et donc la création d'une page Internet. C'est une norme décidée
    par le W3O (World Wide Web Organization).

     Ce n'est pas un langage de programmation à proprement parler, mais un langage


    qui se veut multi système (PC, Unix, Mac…) et multi plateforme (tout type de taille
    et de résolution d'écran, tout type de navigateur: Microsoft Internet Explorer,
    Netscape Navigator…).

     Un document HTML est interprété par le navigateur d'où la nécessité de tester ses
    pages sur différents navigateurs pour avoir le même rendu.

     Une page Internet est constituée de plusieurs éléments:


    - Un fichier HTML, également appelé "script", "fichier source" ,etc…Son
    extension est ".htm" ou ".html". Par exemple, "index.htm" pour la page
    d'accueil. Il s'agit d'un fichier en texte brut que ce cours est destiné à créer.

    - De photos ou d'images au format JPEG ".jpg" ou ".jpeg" (optimisé pour les


    photos), au format GIF ".gif " (optimisé pour les images, logos…).

    - Du son (WAVE ".wav"), des videos (MPEG ".mpeg ou ".mpg", AVI ".avi"),
    des animations Flash ou Quicktime, des codes Javascript…

     Pour créer un document HTML, c'est-à-dire une page Internet, il existe deux
    solutions:
    •Un éditeur de texte : Notepad, Wordpad
    •Un générateur de pages Internet: Macromedia Dreamweaver, Microsoft
    Frontpage ou Netscape Composer.

    1
    L'utilisation d'un générateur de pages nécessite un minimum de connaissance de
    bases en HTMl.

    Notions de base:
    Le principe de la programmation en HTML est basé sur le principe de l'apprentissage
    par la pratique. Donc pour créer un document HTML il faut:

    イ Ouvrir l'éditeur de texte Wordpad. (start –programs-accessories-Wordpad)


    ロ Saisir le texte.
    ハ Faire Save as : le type est un document text.
    le nom du fichier doit avoir l’extension “.htm”
    La programmation par balises
    Les balises ou "tags" : ce sont des mots-clés syntaxiques entourés de crochets (<HTML
    >). La plupart des balises ouvertes doivent être fermées (</ HTML>).
    On utilise indifféremment l'écriture en majuscule ou en minuscule.
    Pour écrire les balises aller dans le menu view / source.
    Pour voir le texte formaté, minimiser la fenêtre source, puis cliquer sur l’icône refresh.

    Les principales balises:

    1- la balise <html> détermine le langage utilisé. Elle est mise juste au début du
    texte.
    </html> est mise à la fin du texte.
    Un document HTML commence toujours par <HTML> et se termine par </HTML>.

    2- la balise <head> détermine l’en-tête du document. C'est le début des éléments


    non visibles dans la fenêtre principale.
    </head> fin de l’en-tête.

    3- la balise <title> détermine le titre visible en haut de la fenêtre du navigateur.


    </title> fin du titre.

    4- la balise <body> détermine le début du corps du document visible dans la fenêtre


    principale.
    </body> fin du corps .

    5- la balise <p> détermine le début d’un paragraphe.


    </p> fin du paragraphe.

    2
    6- On peut contrôler l'alignement d'un paragraphe grâce à l'attribut "align" qu'on
    peut ajouter dans la balise <p>. L'alignement peut être : left, right, center ou justify.
    Exemple: <p align= center>
    7- la balise <br> permet de faire un saut de ligne. Ne pas fermer cette balise.

    8- la balise <B> permet de mettre le texte en gras ou bold.


    </B> fin du texte mis en gras.

    9- la balise <I> permet de mettre le texte en italique.


    </I> fin du texte mis en italique.

    10- la balise <U> permet de souligner le texte.


    </U> fin du texte souligné.

    11- la balise <strike> permet de barrer un texte.


    </strike> fin du texte barré.

    12- la balise <sup> permet de mettre une lettre en exposant.


    </sup> fin du texte mis en haut.

    13- la balise <sub> permet de mettre une lettre en indice.


    </sub> fin du texte mis en indice.

    14- la balise <font > permet de sélectionner la police de caractères, la taille, la


    couleur… la syntaxe est la suivante:
    <font face=police size=entier color=couleur>
    texte
    </font>

    Concernant les polices de caractères, étant donné qu'elles diffèrent d'un système à
    l'autre, on peut en spécifier plusieurs:
    <font face="Verdana, Tahoma, Arial">

    La première police trouvée en partant du gauche est utilisée, sinon le navigateur utilise
    sa police par défaut.

    La taille de la police est un entier entre 1 et 7.

    3
    Pour la couleur, on peut entrer des noms (blue,yellow,red…) mais le résultat est
    souvent catastrophique. L'autre solution (majoritairement utilisée) est le codage RGB
    (rouge vert bleu). On utilise alors comme code couleur la chaîne #rrggbb où rr, gg et bb
    sont les codages en hexadécimal des pourcentages respectifs du rouge, vert et bleu
    désirés.
    15- Dans la balise <body>, on peut personnaliser la couleur du fond et/ou ajouter une
    image de fond d'écran:
    <body bgcolor=couleur> permet de donner une couleur à l'arrière- plan.
    <body background=nom du fichier image> permet d'insérer une image dans l'arrière-
    plan.
    <body bgcolor=coleur background=nom du fichier image> les deux à la fois.
    Si le fond est majoritairement noir, il convient de rajouter bgcolor=black, car, le temps
    que l'image se charge, le fond permettra de lire la page. De plus l'image défile avec le
    texte lorsque l'on navigue dans le document, alors pour la fixer, il suffit de modifier la
    balise comme suit:
    <body background=nom du fichier image bgproperties=fixed>

    16- Pour changer la marge à gauche dans Internet explorer. On peut ajouter dans la
    balise <body> l'attribut suivant: <Body leftmargin =nombre>
    On peut également ménager des espaces vides à droite, en haut et en bas en ajoutant les
    attributs: rightmargin, topmargin et bottomargin.
    EX: <body leftmargin=60 rightmargin=70>

    17- la balise <img src=nom du fichier image> permet de placer une image dans le
    document.
    Pour positionner l'image il faut ajouter dans cette balise l'attribut align :
    <img src=nom de l'image align=left>. L'alignement peut être right ou center.
    Les attributs width et height permettent de modifier la taille de l'image originale
    respectivement en largeur et en hauteur. Il est recommandé de mettre les valeurs de
    l'image même si elle n'est pas à redimensionner car cela accélère le chargement.
    Ex: <img src= file width=100 height=80>
    L'attribut border permet d'ajouter une bordure à l'image en lui donnant comme
    paramètre un entier centre 3 et 30.
    Ex: <img src=file border =8>
    Pour ménager de l'espace autour de l'image il faut ajouter les attributs vspace pour
    l'espace vertical et hspace pour l'horizontal.
    Ex: <img src= file vspace=40 hspace=30>

    4
    Enfin, l'attribut alt permet d'étiqueter l'image; Il est très utile car en cas de
    téléchargement long, le visiteur a une description sommaire de l'image.
    Ex: <img src =file alt="commentaire">
    <img src=file align=alignement width=x height=y border=entier vspace=entier
    hspace=entier alt="commentaire">.
    18- La balise <marquee> permet de faire défiler une phrase sur l'écran.
    </marquee> fin de la phrase.
    Ex: <marquee><b><i><font color=red face=tahoma size=7>
    ECOLE VPJ
    </font></i></b></marquee>

    19- Pour créer une liste numérotée, la syntaxe est la suivante:


    <ol><li>premier élément</li><li> deuxième élément </li></ol>
    exemple:
    <ol type=1> 1- introduction
    <li>introduction</li> 2- historique
    <li>historique</li> 3- conclusion
    <li>conclusion</li>
    </ol>

    les types: <ol type="A"> pour A,B,C…


    <ol type="1"> pour 1,2,3…
    <ol type="I"> pour I,II,III…
    <ol type="a"> pour a,b,c…
    Pour créer une liste à puces la syntaxe est la suivante:
    <ul><li>premier élément</li><li> deuxième élément </li></ul>

    <ul type=disc>
    <li>Introduction</li>  Introduction
    <li>Historique</li>  Historique
    <li>Conclusion</li>  Conclusion
    </ul>
    les types: square pour un carré
    disc pour un disque plein
    circle pour un cercle.
    La fermeture </li> est facultative.

    20- les tableaux sont extrêmement utiles pour faire une mise en page élaborée.
    Pour créer un tableau:

    5
    Saisir la balise <Table> avant les données constituant le tableau.
    Saisir la balise </table> après les données constituant le tableau.
    Saisir <TR> avant les données de chaque ligne du tableau.
    Saisir </TR> après les données de chaque ligne du tableau.
    Saisir <TH> avant les données de chaque cellule de l'en-tête.
    Saisir </TH> après les données de chaque cellule de l'en-tête.
    Saisir <TD> avant les données de chaque cellule de données.
    Saisir <TD> après les données de chaque cellule de données.

    21- Pour appliquer une bordure au tableau, Il faut ajouter dans la balise <Table>
    l'attribut Border=un nombre.
    Exemple: <table border=10>
    Pour attribuer une couleur à la bordure, Il faut ajouter l'attribut Bordercolor=couleur.
    Exemple: <table border=10 bordercolor=red>
    Pour insérer une image dans l'arrière-plan du tableau, il faut ajouter l'attribut
    background=fichier image.
    Exemple: <table background=classe.jpg>
    Pour placer le tableau au centre, à gauche ou à droite, il faut ajouter l'attribut align dans
    la balise table.
    Exemple: <table align=center>
    Pour redimensionner un tableau, il faut ajouter les deux attributs width et height.
    Exemple: <table width=600 height=300>.
    Pour changer l'espacement et les marges intérieures du tableau, il faut ajouter l'attribut
    cellspacing=nombre.
    Pour paramétrer les bordures extérieures du tableau, il faut ajouter dans la balise table
    l'attribut Frame=…
    Frame peut être: void(aucune), above(en haut), below(en bas), rhs(à droite), lhs(à
    gauche), hsides(haut et bas), vsides(droite et gauche).
    Exemple: <table border=8 Frame=hsides>.
    Pour paramétrer les bordures intérieures, Il faut ajouter dans <table> l'attribut
    Rules=none(aucune), cols(entres colonnes), rows(entre lignes), all( toutes les bordures
    intérieures).
    22- Pour appliquer une couleur au fond d'une cellule, Il faut ajouter l'attribut
    Bgcolor=couleur dans l'une des balises suivantes: <tr>, <th> ou <td>.
    Exemple: <tr bgcolor=yellow>.

    6
    Pour aligner les données dans un tableau, Il faut ajouter dans la balise de l'élément à
    aligner l'option Align=left, center, right ou justify.
    Exemple: <tr align=right> ou <th align=center>
    Pour aligner les données verticalement dans un tableau, Il faut ajouter dans la balise de
    l'élément à aligner verticalement l'option Valign=top (haut), middle (milieu), ou bottom
    (bas).
    Exemple: <tr valign=top>
    Pour redimensionner une cellule, Il faut ajouter dans <th> ou <td> les attributs width
    et height.
    Exemple: <th width=200 height=100>VPJ</th>

    23- Pour fusionner plusieurs cellules d'une ligne, Il faut ajouter dans la balise <tr>
    l'attribut colspan=nombre de cellules. Exemple: <th colspan=3>.

    24- Pour fusionner plusieurs cellules d'une colonne, Il faut ajouter dans la balise <th>
    ou <td> l'option Rowspan=nombre de cellules. Exemple: <th rowspan =3>.

    25- Pour créer un lien d'une page Web vers une autre page au sein d'un même site:
    <A href="URL ou adresse">…………</A>
    Exemple: <A href="classe.html">Découvrez notre classe</A>
    "Découvrez notre classe" étant la phrase sur laquelle il faut cliquer pour ouvrir la page
    classe.html.

    26- Pour créer un lien d'une page Web vers une image se trouvant sur le même site:
    <A href="nom du fichier image"> Découvrez notre classe</A>

    27- Pour créer un lien d'une page Web de votre site vers un autre site:
    <A href="http://www.education.com.lb>L'éducation nationale</A>

    Vous aimerez peut-être aussi