Scribd Logo
Importer

Bienvenue sur Scribd !

  • HTML Cour2

    Transféré par

    Riadh Korchid
    4 vues12 pages

    Titre original

    HTML_cour2

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PPSX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PPSX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    4 vues12 pages

    HTML Cour2

    Transféré par

    Riadh Korchid

    Droits d'auteur :

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

    HTML5/CSS3/PHP

    Année universitaire 2020-2021

    1
    Plan
    ⚫Les images
    ⚫Les tableaux
    ⚫Les cadres
    ⚫Les liens

    2
    HTML les images
    ⚫ la taille des images est parmi les précautions à prendre en
    considération dans le développement des sites web. Plus l'image est
    grande, plus le temps de chargement est long...

    ⚫ A cette fin, une convention a été adopté :· Les 3 formats d'image


    (maximum 256 couleurs) reconnus sur la Toile, sont le format
    JPEG,GIF, et le PNG.

    ⚫ Ces 3 formats donnent des résultats équivalents bien que PNG et JPG
    sont plus recommandés pour des images avec des tons dégradés ou
    nuancés.

    3
    HTML les images
    ⚫ Des images peuvent être insérées dans un document HTML, et
    elles sont au formatJPG, GIFou JPG.

    JPG GIF PNG

    ⚫ <IMG SRC="nom_image.jpg"> pour insérer une image locale,


    où nom_image.jpg est le nom du fichier avec son chemin relatif à
    partir du répertoire du document HTML

    4
    HTML les images
    ⚫ Une image s’insère grâce à la balise <IMG> qui ne se ferme pas.

    ⚫ Voici une liste des attributs utiles :


    ⮚SRC="adresse" : l’adresse absolue ou relative de l’image
    (obligatoire).

    ⮚WIDTH="nombre" et HEIGHT="nombre" : la largeur et la


    hauteur de l’image, en pixels, si elle est différente de la taille
    normale de l’image d’origine.

    ⮚ALT="texte" : donne le texte de la bulle d’aide de l’image

    ⮚BORDER="nombre" : la largeur de la bordure autour de l’image.

    5
    Principaux attributs de la balise IMG

    6
    Insertion des images
    ⚫<!DOCTYPE html>
    <html>
    <body>
    <h2>Titre_image</h2>
    <img src="nomimage.jpg" alt="DescImage"  style="width:304px;
    height:228px;">

    </body>
    </html>
    ⚫Images dans un autre dossier:
    <img src="/images/html5.gif" alt="nomimage" style="width:128px;
    height:128px;">

    o Images dans un autre serveur:


    <img src="http://www.adresse.jpg" alt=" descriptionImg">

    7
    HTML les images
    ⚫ Image comme arrière-plan
    Cette image est affichée en mosaïque par le navigateur.

    <BODY BACKGROUND="Adresse_img">

    ⚫ Exemple :
    <BODY BACKGROUND="PAPER.gif">
    <H1>Bonjour</H1>
    </BODY>

    8
    HTML LES TABLEAUX
    ⚫ Un tableau est composé de lignes et de colonnes qui forment les cellules
    du tableau.

    ⚫ En Html, les tableaux servent non seulement stoquer des nombres mais
    surtout à placer des éléments à l'emplacement souhaité.

    ⚫ Les balises de base sont donc:

    9
    HTML LES TABLEAUX
    ⚫ Définir une bordure :

    Bordure de cadre [Border] <TABLE border=?></TABLE>


    <TABLE border=2>
    <TR>
    <TD>1</TD>
    <TD>2</TD>
    </TR>

    <TR>
    <TD>3</TD>
    <TD>4</TD>
    </TR>
    </TABLE>

    ⚫ Définir la couleur de fond : <TABLE bgcolor =?>


    ⚫ Exemple :
    <table bgcolor="#E6FFE6" >
    10
    HTML LES TABLEAUX
    ⚫ Définir la largeur et la hauteur :
    ⚫ Les deux attributs HEIGHT (« hauteur ») et WIDTH (« largeur »).

    ⚫ On peut renseigner la largeur et la hauteur suivant deux unités. Si on donne une


    valeur entière, c’est de pixels. Si on fait suivre la valeur d’un signe %, il s’agit
    d’un pourcentage par rapport au conteneur.

    ⚫ Exemple : Un tableau centré qui occupe 60% de la fenêtre avec sur une ligne,
    trois colonnes.

    <CENTER><TABLE width=60% border=1>


    <TR>
    <TD>cellule1</TD>
    <TD>cel. 2</TD>
    <TD>3</TD>
    </TR>
    </TABLE></CENTER>

    11
    HTML LES TABLEAUX
    ⚫ Les cellules d’un tableau peuvent contenir tous les éléments Html
    soit ::
    ⮚ du texte
    ⮚ des images
    ⮚ des liens
    ⮚ et même des tableaux

    ⚫ Les opérations de fusion:


    ⮚ Fusion de lignes <TD rowspan=?>
    ⮚ Fusion de colonnes <TD colspan=?>

    12

    Vous aimerez peut-être aussi