Recherche
Publicités
Question aléatoire
Comment afficher directement la totalité d'un menu ?

Publicités
Qui est en ligne
11 Personne(s) en ligne (6 Personne(s) connectée(s) sur Articles)

Utilisateurs: 0
Invités: 11

plus...
Tutorial : HTML 2 : Mise en forme.
Publié par Stéphane le 14/12/2004 15:50:00 (10019 lectures)
Tutorial

Deuxième tutorial html , il concerne le texte, les tailles, les images, leur redimensionnement et d'autres attributs

  • L'espace "insécable"


  • Les tailles


  • Attributs de la balise <pre>


  • Les attributs de title


  • Les attributs de <body>



    1. bgcolor

    2. text

    3. background

    4. link, alink, vlink


  • Les attributs de align


  • Les images



    1. title ou alt

    2. Les dimensions (height et width)

    3. L'alignement (align)

    4. Une bordure (border)









    L'espace "insécable"





    Pour maintenir le nombre désiré d'espace dans un texte, on doit faire intervenir un élement spécial, qui n'est pas une balise : le &nbsp; . N'importe quel navigateur qui rencontrera ce terme, il laissera un espace, qu'il le veuille ou non :

    <html>
    <head>
    <title>L'espace "insécable"</title>
    </head>

    <body>
    5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;espaces
    </body>
    </html>

    EXEMPLE : 5          espaces







    Les tailles





    Il existe 6 niveaux de titres différents, le 1 étant le plus gros et le 6 le plus petit.
    Pour écrire un texte ou tout autre type(titres, sous-titres etc...), on utilise la balise de type conteneur <h1>, <h2>,
    <h3>, <h4>, <h5>
    ou <h6> selon la taille que l'on veut utiliser.

    <html>
    <title>Les tailles</title>
    </head>

    <body>
    <h1>Taille 1</h1>
    <h2>Taille 2</h2>
    <h3>Taille 3</h3>
    <h4>Taille 4</h4>
    <h5>Taille 5</h5>
    <h6>Taille 6</h6>
    </body>
    </html>




    EXEMPLE :

    Taille 1


    Taille 2


    Taille 3


    Taille 4


    Taille 5

    Taille 6










    Attributs de la balise <pre>





    Pour écrire du texte en respectant la mise en page pré-établie, en conservant les espaces et les sauts de lignes, il faut utiliser la balise du type conteneur <pre>

    <html>
    <head>
    <title>Exemple d'utilisation de la balise pre</title>
    </head>

    <body>
    <pre>
    Votre texte.
    </pre>
    </body>
    </html>

    EXEMPLE :
    Sans pre :


    <html>
    <head>
    <title>
    Exemple d'utilisation de la balise pre</title>
    </head>

    <body>
    <pre>
    Votre texte.
    </pre>
    </body>
    </html>








    Toute balise HTML, du type marqueur ou conteneur, peut recevoir un
    attribut.

    Un attribut, c'est une propriété à laquelle on peut affecter toutes sortes de valeur.

    Pour se faire on utilise le signe = .

    Cela donne attribut=valeur, avec pour attribut le nom de l'attribut et pour valeur, la valeur que l'on souhaite lui affecter.




    Les attributs de title (ou alt)





    Il affiche dans une infobulle le texte placé à la suite de l'attribut. L'infobulle, c'est le petit texte qui s'affiche lorsque l'on reste un certain temps en stationnement au dessus d'un élement.
    Exemple sur du texte <h1>

    <html>
    <head>
    <title>L'attribut title</title>
    </head>

    <body>
    <h1 title="Infobulle">Placez le curseur de votre souris sur ce titre pour voir l'infobulle</h1>
    </body>
    </html>




    EXEMPLE :

    Placez le curseur de votre souris sur ce titre pour voir l'infobulle



    title peut aussi bien être utilisé pour une balise d'image.







    Les attributs de <body>



  • bgcolor


  • L'attribut bgcolor fixe la couleur d'arrière plan de la page. Pour les couleurs c'est ici

    <html>
    <head>
    <title>bgcolor dans body</title>
    </head>

    <body bgcolor="black"> ou ("#000000")
    </body>
    </html>

    Aperçu







  • text


  • L'attribut text fixe la couleur du texte.

    <html>
    <head>
    <title>text dans body</title>
    </head>

    <body bgcolor="black" text="white"> (ou bgcolor="black" text="#FFFFFF" )
    Texte blanc sur fond noir.
    </body>
    </html>

    Aperçu







  • background


  • L'attribut background permet d'afficher une image en arrière plan. Il faut indiquer l'URL de l'image.

    <html>
    <head>
    <title>background dans body</title>
    </head>

    <body background="http://astucesinternet.com/data/tutorial/art-17.jpg">
    </body>
    </html>

    Aperçu







  • link, alink, vlink


  • L'attribut link permet de fixer la couleur que l'on veut attribuer aux liens de la page.

    L'attribut alink fixe celle des liens actifs.

    Quant à l'attribut vlink, se sont les liens visités.

    <html>
    <head>
    <title>link, alink et vlink dans body</title>
    </head>

    <body link="orange" alink="yellow" vlink="green">
    ( ou link="#FFA500" alink="#FFFF00" vlink="#008000" )
    </body>
    </html>








    Les attributs de align


    Cet attribut peut s'effectuer sur deux choses : Du texte et des images.


  • left alignement à gauche

  • center alignement au centre

  • right alignement à droite




  • EXEMPLE :

    <h3 align="right">Texte à droite</h3>

    Texte à droite




    Si vous ne voulez pas changer la taille de votre texte en utilisant <h> </h> utilisez alors <div> </div>


    EXEMPLE :

    <div align="right">Texte à droite</div>

    Texte à droite








    Les images


    Il faut utiliser la balise de type marqueur <img>.
    Cependant il faut préciser son emplacement, grâce à son URL placé après la valeur de l'attribut src :


    <img src="http://www.astucesinternet.com/themes/ipb_green2/images/logo.jpg"/>

    EXEMPLE:









  • title ou alt



  • <img src="http://www.astucesinternet.com/themes/ipb_green2/images/logo.jpg" title="Site d'astuces"/>

    EXEMPLE :









  • Les dimensions (height et width)


  • On peut modifier son format, soit en l'agrandissant, soit en la réduisant, grâce aux attributs height et width. (respectivement hauteur et largeur)

    Il y a deux types de redimensionnement :
  • En pixels : Les dimensions sont en pixels.

  • En pourcentages : L'image est redimensionnée en fonction d'un pourcentage.


  • <img src="http://www.astucesinternet.com/themes/ipb_green2/images/logo.jpg" height="40" width="250"/>

    EXEMPLE :



    <img src="http://www.astucesinternet.com/themes/ipb_green2/images/logo.jpg" height="15%" width="85%"/>

    EXEMPLE :









  • L'alignement (align)


  • Comme expliqué plus haut.


    Il y a trois type d'alignement : gauche, droite et centrer, (left, right et center)sauf que center ne marche pas pour ce cas.

    <img src="http://www.astucesinternet.com/themes/ipb_green2/images/logo.jpg" align="left"/>

    EXEMPLE :









    <img src="http://www.astucesinternet.com/themes/ipb_green2/images/logo.jpg" align="right"/>

    EXEMPLE :








    Pour centrer, utilisez plutôt <center> </center>


    <center><img src="http://www.astucesinternet.com/themes/ipb_green2/images/logo.jpg"/></center>

    EXEMPLE :








    On peut aussi aligner avec trois autres valeurs : top, middle et bottom (respectivement haut, milieu et bas)

    align="top"



    align="middle"



    align="bottom"








  • Une bordure (border)


  • On peut choisir d'avoir ou non une bordure à son image grâce à <border>

    <img src="http://www.astucesinternet.com/themes/ipb_green2/images/logo.jpg" border="1"/>

    EXEMPLE :






    Ou une bordure plus grosse.

    <img src="http://www.astucesinternet.com/themes/ipb_green2/images/logo.jpg" border="6"/>

    EXEMPLE :






    La valeur border="0" étant l'image sans aucune bordure.








    Autres articles
    01/01/2016 20:06:26 - Bonne année 2016
    07/09/2015 16:32:01 - 7-Zip : Découvrez nos fiches pratiques
    04/03/2015 20:22:21 - Google Chrome disponible en version 41
    28/02/2015 14:50:21 - Firefox 36 disponible en téléchargement
    11/02/2015 19:59:00 - Mise à jour des produits Microsoft (Février 2015)
    25/01/2015 16:09:20 - Google Chrome disponible en version 40
    18/01/2015 15:49:18 - Firefox 35 disponible en téléchargement
    15/01/2015 19:45:28 - Mise à jour des produits Microsoft (Janvier 2015)
    01/01/2015 00:31:27 - Bonne année 2015
    12/12/2014 19:16:16 - Mise à jour des produits Microsoft (Décembre 2014)

    Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
    Posté Commentaire en débat
    Publicités
    Rejoignez nos forums
    Forums de discussionRejoignez notre communauté en vous inscrivant gratuitement sur notre forum de discussion. Vous pourrez participer à la vie du forum et aider les autres membres en répondant à leurs questions.Toute contribution est la bienvenue !
    Posez vos questions
    Logo entraide informatiqueVous avez une question concernant l'un de nos articles ? Vous avez un problème informatique à nous soumettre ? Rendez-vous dans notre forum de discussion, rubrique Entraide Informatique.

    Lien direct : Forum d'entraide informatique