vers l'atome

 GM - ENERGIE

vers l'atome

      - INFORMATIQUE -

 

        - Informatique HTML

       

L'Informatique et l'Homme

LA CONSTRUCTION DE SITES INTERNET
LE LANGAGE HTML
Ordinateur


1 site Web = 1 ou plusieurs pages Web (liées)
1 page Web = 1 document HTML (langage : Hyper Texte Markep Langage) : composé de texte et d’instructions spéciales appelées des "Balises" HTML est le langage utilisé pour créer des pages Web

Les OUTILS :

1) Editeur de texte (Word - Wordpad - Bloc notes …)

2) Navigateur pour visualiser le résultat : il interprète les balises
Internet Explorer Netscape Navigation ……

3) Hébergeur : Serveurs Web comme Wanadoo, Free (gratuit 100 Mo), AOL … donne un emplacement sur le serveur avec une adresse : l’adresse du site créé ou à créer

4) Logiciel de transfert ( Logiciel FTP : Protocole Transfert Fichiers )
LEECHFTP ( disponible chez www.free.fr ) : le nom du Login et le mot de passe sont établis avec l’hébergeur lors de l’ouverture du site

Les pages HTML s'enrichissent avec de la programmation JAVA : langage de développement, produit par la société Sun en 1995. Ecrit par James Gosling, ce langage permet de créer des applications autonomes et de doter les documents html de nouvelles fonctionnalités : animations interactives, applications intégrées, modèles 3D , etc; ce langage est orienté objet et comprend des éléments spécialement conçus pour la création d'applications ; on écrit un programme java dans un texte source qui ressemble à C (langage) ou à C++ , puis on le traduit à l'aide d'un compilateur afin de générer un programme utilisable directement dans une page html et appelé applet ; pour exécuter ensuite un applet, l'utilisateur doit disposer d'une machine virtuelle; un applet est inclus sous forme de document html ou sous forme de hyperlink.

La BALISE est une instruction particulière ; elle encadrée par des chevrons < > :
            exemple : <.P> , <.BR> , <.B> , <.H4> etc (sans le point)

Le point derrière le premier chevron est à proscrire dans toutes vos programmations ; il sert dans ce cours comme artifice permettant de visualiser les chevrons avec leur contenu dans le navigateur Internet .


La majorité des balises fonctionnent par paire :
            balise de début <.P> ...le texte encadré par les 2 balises... <./P> balise de fin avec la barre slasch

La saisie des balises se fait en majuscules ou en minuscules et certaines balises possède des attributs : = option

Les balises principales :

    <.HTML> et <./HTML> : indique le début et la fin du document
    <.HEAD> et <./HEAD> : délimitent la zône d'entête ( on y retrouve l'auteur, les mots clés, une description )
    <.BODY> et <./BODY> : délimitent le corps du document ( texte, images, sons ...)

Enregistrement des documents : au format texte seulement

          - le nom : en minuscule et sans espace et avec l'extension .htm ou .html
             (enregistrer sous doc texte uniquement)
          - enreg. sous : texte seulement

IMPORTANT : la première page ( celle qui apparaît en premier quand on arrive sur le site )d'un site doit porter un nom particulier imposé par l'ébergeur
       exemple : index.html ou index.htm

COMPOSITION D'UN DOCUMENT :

       <.HTML>
       <.HEAD>
       <.TITLE> titre de la page (votre site)<./TITLE>
       <./HEAD>
       <.BODY>
       - site avec une page index.htm ou avec plusieurs pages
       <./BODY>
       <.HTML>

Les balises permettent la mise en forme des paragraphes et les deux balises <.P> et <./P> permettent de définir les paragraphes qui sont encadrer par ces deux balises : elles génèrent automatiquement un saut de ligne . La balise <.P> possède des attributs permettant d'intervenir sur l'alignement du texte :

       - exemple : <.P(balise), espace, ALIGN(attribut)>

BALISES et ATTRIBUTS :

       - <.BR> : permet de passer à la ligne
       - <.BLOCKQUOTE> : effectue un retrait
       - <.H1> .........<./H1> : mise en place d'un titre
          avec 6 niveaux, H1 du plus grand à H6 au plus petit
       - <.H1 ALIGN=CENTER> : permet de centrer le titre H1
       - <.!--voici une page de mon site--> : un commentaire n'apparaissant pas sur la page HTML
       - Mise en forme des caractères :
             - <.B> et <./B> pour le caractère gras
             - <.I> et <./I> pour l'italique
             - <.U> et <./U> pour souligner
             - <.STRIKE> et <./STRIKE> pour barrer
             - <.SUP> et <./SUP> pour l'exposant
             - <.SUB> et <./SUB> pour l'indice

Intervenir sur la POLICE :

        - changer la police :
               - tout le texte : après la balise BODY écrire la balise <.BASEFONT FACE(ne se ferme jamais)=" nom de la police - ex : "comic sans ms", "arial", ...">
               - partie du texte : <.FONT FACE="..."> ...le texte... <./FONT>
        - l'attribut taille est donné par la balise SIZE 1 2 3 ... 7

     En résumé : <.BASEFONT> intervient sur tout le texte, <.FONT> et <./FONT> interviennent sur une partie du texte, FACE"..." change la police, SIZE de 1 à 7 change la taille, COLOR=nom d'une couleur en anglais ou code de la couleur donne la couleur de la police .

Changer la COULEUR de Fond :

     - dans la balise BODY, on ajoute l'attribut BGCOLOR, exemple : <.BODY BGCOLOR="SILVER>

Création d'une page vierge qui servira de départ pour la création des autres pages :

        <.HTML>
        <.HEAD>
        <.TITLE> ..... <./TITLE>
        <./HEAD>
        <.BODY>

        <./BODY>
        <./HTML>
                - à enregistrer sous Nom : départ, et type : texte seulement, puis on crée une page album à partir de la page départ. La première page du site est à enregistrer sous le nom d'index : index.htlm

Création de LISTES

     - Une liste ordonnée ou liste numérotée est utilisée pour créer une liste d'étapes numérotées séquentiellement avec des nombres standarts ( 1, 2, 3, ... )
     - Balises de listes ordonnées : - <.OL>,<./OL> début et fin de liste - <.LI> chaque élément de la liste utilise cette balise - <.LH> permet d'ajouter un titre à la liste

Exemple :
     <.OL>
     <.LH><.I>Les couleurs de l'arc-en-ciel
     <.LI>Rouge
     <.LI>Orange
     <.LI>Jaune
     <./OL>

ce qui donne sur la page Web :

    Les couleurs de l'arc-en-ciel
  1. Rouge
  2. Orange
  3. Jaune

Comme il existe les listes ordonnées, il existe également les lites à puces imbriquées et les listes définition ( ayant le même format qu'un dictionnaire avec un terme identifiable et un paragraphe de définition en retrait ):

     <.UL> et <./UL> début et fin d'une liste à puces
     <.LI> chaque élément de la liste utilise cette balise
     <.LH> qui permet d'ajouter un titre à la liste

     <.DL> conteneur de la liste définition
     <.DT> devant le mot à définir
     <.DD> définit le paragraphe de la liste définition

Afficher un TEXTE DEFILANT Exemple :

<.MARQUEE BEHAVIOR=ALTERNATE (pour un texte se délaçant d'un bord à l'autre) et BEHAVIOR=SLIDE ou RIGHT ou LEFT (pour un texte défilant s'arrêtant au bord de l'écran avec changement de sens du défilement par défaut) bgcolor="green" scrollamount="2"> <.font size=3 color="yellow" face="arial"> <.b><.I>- LE TEXTE DEFILANT -<./I><./font><./b><./MARQUEE>
- LE TEXTE DEFILANT -

Placer une IMAGE dans une Page :

     - utiliser les formats GIF, JPEG, JPG usant moins de mémoire
     - GIF : dessins, graphiques,animations car 256 couleurs simultanées (pas trés performant pour les photos)
     - JPEG ou JPG : pour les photos (et dessins) car 16 millions de couleurs

-Afficher une image :

     - Balise <.IMG SRC="images/dénomination de l'image.gif (indiquer le nom de l'image avec son extension avec le nom du sous-dossier si l'image est stockée dans un sous-dossier)- en ajoutant l'attribut ALT on peut spécifier un texte de remplacement>

     - Avec CENTER on centre et BLOCKQUOTE on décale ; ne pas oublier d'indiquer la hauteur HEIGTH= et la largeur WIDTH= de l'image en pixels .

     - Exemple : <.CENTER><.IMG SRC="images/pont.jpg" WIDTH="99" HEIGHT="75" ALT="PONT" border=2> avec l'application ci-aprés,
PONT


     - Pour afficher une image en fond d'écran : <.BODY BACKGROUND=nom de l'image avec extension et nom du sous- dossier.

     - Mettre une image devant le prelier paragraphe :

         utiliser l'attribut : ALIGN=LEFT ou ALIGN=RIGHT , avec l'attribut HSPACE=(valeur en pixels) pour espacer horizontalement et l'attribut VSPACE= (...) pour espacer verticalement (on aura l'espace des 2 cotés)- ces 2 dernier attributs donnent de l'espace à l'image

     - Mettre une bordure autour de l'image :BORDER= x en pixels

La balise <.HR> permet de tracer des traits horizontaux et
       - avec l'attribut WIDTH=x en pixels ou en % on fixe la largeur du trait
       - avec ALIGN=LEFT, RIGHT ou CENTER on aligne le trait
       - avec SIZE=x on fixe l'épaisseur du trait
    - Exemple : <.HR WIDTH=70% ALIGN=CENTER SIZE=10> , ce qui donne :


    LES LIENS : balise <.A>

  1. Lien interne à l'intérieur d'une même page

    - a) nommer la partie de la page à laquelle on veut accèder (mettre un repère à un endroit précis):
    - <.A(balise gérant les liens) NAME="nom du repère : ici YYY"> ...texte à encadrer (éventuellement)...<./A>

    - b) mettre un lien vers la partie de la page où on veut aller (par exemple "Les OUTILS" en début de page :
    - <.A HREF="#les outils"> Les OUTILS <./A>
    - Exemple : cliquez :     Les OUTILS

    -Couleur des liens de la page : balise BODY avec les attributs BGCOLOR, LINK (couleur des liens visités) et VLINK (couleur des liens non visités)
    Exemple : <.BODY BGCOLOR="#silver" VLINK="#yellow">

  2. Lien vers les autres pages du site

    - Placez balise et attribut juste avant la balise <./BODY> :
    <.A HREF="adresse de la page vers laquelle on veut aller">vers ...
    - Exemple : cliquez Vers SCIENCES ET TECHNIQUE

  3. Lien vers d'autres sites

    - Ecrire la programmation de la manière suivante :
    <.A HREF="http://www.nom du site.fr( ou.com ou ....)

  4. Lien vers une image

    - On fait le lien du nom de l'image avec le fichier "images" dans laquelle elle est située :

    <.center><.img src="images/triangle.gif" alt=" " height=120 width=300 hspace=30 border=3 ><./center> ce qui donne :



- TRANSFERT - les fichiers (pages construites) sont transférés sur le site hébergeur choisi avec le logiciel LEECHFTP ( disponible chez www.free.fr )

Création de TABLEAUX : le tableau ci-aprés

TITRE
AABA
ABBB
ACBC
ADBD
AEBE
AFBF
AGBG
Case C


a été construit avec la programmation suivante :

<.center>
<.table border="6" bordercolor="#FF9900" >
<.tr><.td bgcolor="#FFFFD5" width="400" colspan=2 align=center>TITRE<./td><./tr>
<.tr><.td bgcolor="#FFFFD5" width="200" align=center>AA<./a><./td><.td bgcolor="#FFFFD5" width="200" align=center>BA<./td> <./tr>
<.tr><.td bgcolor="#FFFFD5" width="200" align=center>AB<./a><./td><.td bgcolor="#FFFFD5" width="200" align=center>BB<./td> <./tr>
<.tr><.td bgcolor="#FFFFD5" width="200" align=center>AC<./a><./td><.td bgcolor="#FFFFD5" width="200" align=center>BC<./td> <./tr>
<.tr><.td bgcolor="#FFFFD5" width="200" align=center>AD<./a><./td><.td bgcolor="#FFFFD5" width="200" align=center>BD<./td> <./tr>
<.tr><.td bgcolor="#FFFFD5" width="200" align=center>AE<./a><./td><.td bgcolor="#FFFFD5" width="200" align=center>BE<./td> <./tr>
<.tr><.td bgcolor="#FFFFD5" width="200" align=center>AF<./a><./td><.td bgcolor="#FFFFD5" width="200" align=center>BF<./td> <./tr>
<.tr><.td bgcolor="#FFFFD5" width="200" align=center><.a href="mailto:gerard/mehl@wanadoo.fr">AG<./a><./td><.td bgcolor="#FFFFD5" width="200" align=center>BG<./td><./tr>
<.tr><.td bgcolor="#FFFFD5" width="400" colspan=2 align=center>Case C<./td><./tr>
<./table>
<./center>

°°° <.TABLE> définit le tableau, <.TR> définit les lignes, <.TD> définit les cellules, <.TH> définit les cellules d'entête (contenu en gras)
°°° La bordure est définie par l'attribut BORDER="en pixels", la largeur et la hauteur de la cellule par WIDTH="en pixels" et HEIGHT="en pixels"
°°° Pour la Police on utilise FONT, FACE, SIZE, COLOR, B, et I.
°°° <.CELLSPACING="..."> fixe l'espace entre cellules
°°° <.CELLSPADDING="..."> fixe l'espace entre le bord de la cellule et son contenu


LIEN vers un SON : <.A HREF="dossier son/dénomination du son.wav (.wav ou .mid sont des fichiers sons)"> texte ou image <./A>

DECLENCHEMENT D'UN SON lorsque l'on accède à une page :

     - <.BGSOUND SRC="dossier son/dénomination du son.mid" LOOP=1 (ne produit qu'une fois le son)>
     - à installer dans BODY comme BACKGROUND


    INSERTION d'UNE BANDE VIDEO dans une page :

  1. Récupérer le sous-dossier Vidéo qui est sur le serveur

  2. Créer une nouvelle page à partir de la page départ (animation.html)
        <.BODY>
        <.EMBED SRC="vidéo/titre.mpeg" AUTOSTART=FALSE>
        <./BODY>


    AFFICHER DEUX OU PLUSIEURS PAGES EN MÊME TEMPS A L'ECRAN:
    UTILISATION DE CADRES
    Exemple : le sommaire affiché en permanence, les autres pages affichées à la demande

    Les cadres servent à organiser et à morceler l'affichage afin de rendre la page plus attrayante et plus pratique. Chaque cadre a son propre contenu HTML, et le contenu de chaque cadre peut défiler ou être changé indépendamment des autres.

    Les cadres sont contenus dans une structure appellée FRAMESET, laquelle prend la place du conteneur BODY pour les documents avec cadres.Un document HTML defini avec le conteneur <.FRAMESET> n'a pas de section <.BODY>, et une page avec une section <.BODY> ne peut pas utiliser la balise <.FRAMESET>.

    Si les balises <.FRAMESET> et <.FRAME> sont utilisées dans une section <.BODY>, la structure des cadres sera totalement ignorée par les navigateurs. N'apparaîtra à l'écran que le contenu de la section <.BODY>.

  1. On place des liens directement dans la page : liens textuels ou liens graphiques (images)
    - on pourra selectionner des zônes réactives délimitées par des coordonnées REC ou CIRCLE.
  2. On peut aussi utiliser une image MAP ou image cliquable

    Exemple : <.FRAMESET ROWS="100,240,140"> définit un ensemble constitué de trois cadres horizontaux, d'une haureur de 100 pixels pour le premier, 240 pour le deuxième et 140 pour le troisième.

    Le conteneur <.IFRAME> définit un cadre flottant qui peut être inséré n'importe où dans la page comme un graphique ou tout autre objet.

    La balise <.FRAME> définit un cadre simple; Elle doit se trouver à l'intérieur d'un conteneur <.FRAMESET>. L'attribut SRC (source) est l'attribut le pus important de la balise <.FRAME> ; SRC indique l'URL de la page qui doit être affichée dans le cadre.

Mise en place d'un COMPTEUR :

Le compteur est concrétisé par une instruction qui se met en place dans la page "index" ; il est visible que lorsque l'on est connecté sur le net ; il existe plusieurs sites sur le web expliquant la mise en place d'un tel compteur ; pour exemple l'instruction ci-aprés reflète le compteur de ce site "GM- CRE@TION" :

Vous êtes le : <.IMG SRC="http://qbc.clic.net/cgi-bin/count?df=GMCREATION|wxh=9;13|pad=0|dd=B|trgb=0099ff|ft=2 align=absmiddle|frgb= 29;215;248"> ème visiteur


    CONTACT AVEC UN UTILISATEUR :

  1. Lien vers une messagerie : permet à l'utilisateur d'envoyer un Email

    - Exemple : <.A HREF="mailto: ......"> Nom Prénom <./A>

  2. Créer un formulaire (de saisie)- Mise en place de zone de saisie :

    - Chez "free" la zone s'appelle obligatoirement "formulaire.html"
    - Mettre également une page de remerciements : "résultats.html"
    - Contenu de la page "formulaire.html" : groupe d'options, zone de texte, nom, cases à cocher, bouton "ENVOYER" ...

LES FEULLES DE STYLE :

Le principe des feuilles de style consiste à attribuer des caractéristiques de mise en forme à des groupes d'éléments. Il est par exemple possible de décider de créer un groupe de titres en police Arial, de couleur verte et en italique. On définit par un nom une caractéristique de mise en forme, il suffit ensuite de l'appeler pour l'appliquer à un texte.

On les appelle "feuilles de style en cascade" ("Cascading Style Sheets") car on peut en définir plusieurs, et, en cas de redondance de style, un ordre de priorité est donné par le browser (navigateur).

Les feuilles de style permettent:
       -d'avoir une présentation homogène sur tout un site.
       -de pouvoir changer l'aspect du site entier en modifiant quelques lignes.
       -une plus grande lisibilité du HTML.
       -le positionnement rigoureux des éléments.
       -des chargements de page plus rapides.



ASTUCES ET TRUCS
INFORMATIQUE HTML

01 - Protéger vos images ( désactivation du bouton droit de la souris) :


Ajouter à la fin de votre page, juste devant la balise <./BODY> :


02 - Un cadre qui clignote :


On insère ce qui suit dans le <.BODY>.
On peut modifier les couleurs en changeant le "red" et le "fuchsia" dans
la programmation ci-dessous .

Démonstration :

"Rien n'est si contagieux que l'exemple"
             F. de la ROCHEFOUCAULD


03 - Une mini fenêtre pour afficher votre texte :


Afficher du texte dans une mini fenêtre avec des barres de défilement ;
Démonstration :











Ajouter dans le <.BODY>, là où vous souhaitez l'effet :


04 - Changer d'image lorsque la souris passe par-dessus :


Démonstration : amenez l'index sur l'image - l'éolienne apparaît , puis cliquez



Ajouter dans votre page HTML les instructions ci-dessous entre les balises <.HEAD>,<./HEAD> et <.BODY>,<./BODY> comme indiqué :


05 - Les couleurs et leurs codes :


aliceblue
#F0F8FF
RGB 240 248 255		 antiquewhite
#FAEBD7
RGB 248 236 216		 aqua
#00FFFF
RGB 0 255 255		 aquamarine
#7FFFD4
RGB 128 255 216		 azure
#F0FFFF
RGB 240 255 255
beige
#F5F5DC
RGB 248 244 224		 bisque
#FFE4C4
RGB 255 228 200		 black
#000000
RGB 0 0 0		 blanchedalmond
#FFEBCD
RGB 255 236 208		 blue
#0000FF
RGB 0 0 255
blueviolet
#8A2BE2
RGB 176 0 224		 brown
#A52A2A
RGB 168 44 40		 burlywood
#DEB887
RGB 224 184 136		 cadetblue
#5F9EA0
RGB 96 160 160		 chartreuse
#7FFF00
RGB 128 255 0
chocolate
#D2691E
RGB 208 104 32		 coral
#FF7F50
RGB 255 128 80		 cornflowerblue
#6495ED
RGB 104 148 240		 cornsilk
#FFF8DC
RGB 255 248 224		 crimson
#DC143C
RGB 224 20 64
cyan
#00FFFF
RGB 0 255 255		 darkblue
#00008B
RGB 0 0 136		 darkcyan
#008B8B
RGB 0 140 136		 darkgoldenrod
#B8860B
RGB 184 136 0		 darkgray
#A9A9A9
RGB 168 168 168
darkgreen
#006400
RGB 0 100 0		 darkkhaki
#BDB76B
RGB 184 136 0		 darkmagenta
#8B008B
RGB 136 0 136		 darkolivegreen
#556B2F
RGB 88 108 48		 darkorange
#FF8C00
RGB 255 140 0
darkorchid
#9932CC
RGB 152 52 208		 darkred
#8B0000
RGB 136 0 0		 darksalmon
#E9967A
RGB 232 152 120		 darkseagreen
#8FBC8F
RGB 144 188 144		 darkslateblue
#483D8B
RGB 72 60 136
darkslategray
#2F4F4F
RGB 48 80 80		 darkturquoise
#00CED1
RGB 0 208 208		 darkviolet
#9400D3
RGB 152 0 208		 deeppink
#FF1493
RGB 255 20 144		 deepskyblue
#00BFFF
RGB 0 192 255
dimgray
#696969
RGB 104 104 104		 dodgerblue
#1E90FF
RGB 32 144 255		 firebrick
#B22222
RGB 176 36 32		 floralwhite
#FFFAF0
RGB 255 252 240		 forestgreen
#228B22
RGB 32 140 32
fuchsia
#FF00FF
RGB 255 0 255		 gainsboro
#DCDCDC
RGB 224 220 224		 ghostwhite
#F8F8FF
RGB 248 248 255		 gold
#FFD700
RGB 255 216 0		 goldenrod
#DAA520
RGB 216 164 32
gray
#808080
RGB 128 128 128		 green
#008000
RGB 0 128 0		 greenyellow
#ADFF2F
RGB 176 255 48		 honeydew
#F0FFF0
RGB 240 255 240		 hotpink
#FF69B4
RGB 255 104 184
indianred
#CD5C5C
RGB 208 92 96		 indigo
#4B0082
RGB 72 0 128		 ivory
#FFFFF0
RGB 255 255 240		 khaki
#F0E68C
RGB 240 232 144		 lavender
#E6E6FA
RGB 232 232 248
lavenderblush
#FFF0F5
RGB 255 240 248		 lawngreen
#7CFC00
RGB 128 252 0		 lemonchiffon
#FFFACD
RGB 255 252 208		 lightblue
#ADD8E6
RGB 176 216 232		 lightcoral
#F08080
RGB 240 128 128
lightcyan
#E0FFFF
RGB 224 255 255		 lightgoldenrodyellow
#FAFAD2
RGB 248 252 208		 lightgreen
#90EE90
RGB 144 240 144		 lightgrey
#D3D3D3
RGB 208 212 208		 lightpink
#FFB6C1
RGB 255 184 192
lightsalmon
#FFA07A
RGB 255 160 120		 lightseagreen
#20B2AA
RGB 32 180 168		 lightskyblue
#87CEFA
RGB 136 208 248		 lightslategray
#778899
RGB 120 136 152		 lightsteelblue
#B0C4DE
RGB 176 196 224
lightyellow
#FFFFE0
RGB 255 255 224		 lime
#00FF00
RGB 0 255 0		 limegreen
#32CD32
RGB 48 204 48		 linen
#FAF0E6
RGB 248 240 232		 magenta
#FF00FF
RGB 255 0 255
maroon
#800000
RGB 128 0 0		 mediumauqamarine
#66CDAA
RGB 104 204 168		 mediumblue
#0000CD
RGB 0 0 208		 mediumorchid
#BA55D3
RGB 184 84 208		 mediumpurple
#9370D8
RGB 144 112 216
mediumseagreen
#3CB371
RGB 64 180 112		 mediumslateblue
#7B68EE
RGB 120 104 240		 mediumspringgreen
#00FA9A
RGB 0 252 152		 mediumturquoise
#48D1CC
RGB 72 208 208		 mediumvioletred
#C71585
RGB 200 20 136
midnightblue
#191970
RGB 24 24 112		 mintcream
#F5FFFA
RGB 248 255 248		 Mistyrose
#FFE4E1
RGB 255 228 224		 moccasin
#FFE4B5
RGB 255 228 184		 navajowhite
#FFDEAD
RGB 255 224 176
navy
#000080
RGB 0 0 128		 oldlace
#FDF5E6
RGB 255 244 232		 olive
#808000
RGB 128 128 0		 olivedrab
#688E23
RGB 104 144 32		 orange
#FFA500
RGB 255 164 0
orangered
#FF4500
RGB 255 68 0		 orchid
#DA70D6
RGB 216 112 216		 palegoldenrod
#EEE8AA
RGB 240 232 168		 palegreen
#98FB98
RGB 152 252 152		 paleturquoise
#AFEEEE
RGB 176 240 240
palevioletred
#D87093
RGB 216 112 144		 papayawhip
#FFEFD5
RGB 255 240 216		 peachpuff
#FFDAB9
RGB 255 220 184		 peru
#CD853F
RGB 208 132 64		 pink
#FFC0CB
RGB 255 192 200
plum
#DDA0DD
RGB 224 160 224		 powderblue
#B0E0E6
RGB 176 224 232		 purple
#800080
RGB 128 0 128		 red
#FF0000
RGB 255 0 0		 rosybrown
#BC8F8F
RGB 192 144 144
royalblue
#4169E1
RGB 64 104 224		 saddlebrown
#8B4513
RGB 136 68 16		 salmon
#FA8072
RGB 248 128 112		 sandybrown
#F4A460
RGB 248 164 96		 seagreen
#2E8B57
RGB 48 140 88
seashell
#FFF5EE
RGB 255 244 240		 sienna
#A0522D
RGB 160 84 48		 silver
#C0C0C0
RGB 192 192 192		 skyblue
#87CEEB
RGB 136 208 232		 slateblue
#6A5ACD
RGB 104 92 208
slategray
#708090
RGB 112 128 144		 snow
#FFFAFA
RGB 255 252 248		 springgreen
#00FF7F
RGB 0 255 128		 steelblue
#4682B4
RGB 72 132 184		 tan
#D2B48C
RGB 208 180 144
teal
#008080
RGB 0 128 128		 thistle
#D8BFD8
RGB 216 192 216		 tomato
#FF6347
RGB 255 100 72		 turquoise
#40E0D0
RGB 64 224 208		 violet
#EE82EE
RGB 240 132 240
wheat
#F5DEB3
RGB 248 224 176		 white
#FFFFFF
RGB 255 255 255		 whitesmoke
#F5F5F5
RGB 248 244 248		 yellow
#FFFF00
RGB 255 255 0		 yellowGreen
#9ACD32
RGB 152 204 48


image