IFT 1146 – Programmation IFT 1146 – Programmation
Internet Internet
Copyright, 2005 © Alain Pilon
Ch. 0
Révision HTML
Page HTML Page HTML
<HTML>
<HTML>
<HEAD>
<HEAD>
<TITLE>Voici le titre</TITLE>
<TITLE>Voici le titre</TITLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
Ici on met le texte de la page Ici on met le texte de la page
</BODY>
</BODY>
</HTML>
</HTML>
Section BODY Section BODY
• Textes, changement de ligne ( )Textes, changement de ligne ( )
• Attributs: Attributs:
– background = “fichier”background = “fichier”
– bgcolor = “couleur”bgcolor = “couleur”
– text = “couleur”text = “couleur”
• <H1> … </H1> (H1 à H6)<H1> … </H1> (H1 à H6)
• <BR> (changement de ligne)<BR> (changement de ligne)
• <P> … </P> (paragraphe)<P> … </P> (paragraphe)
– align=left, center, right, justifyalign=left, center, right, justify
Section BODY (suite) Section BODY (suite)
• <HR><HR>
– width=n, n%width=n, n%
– size=n (épaisseur)size=n (épaisseur) – noshadenoshade
– align= left, right, centeralign= left, right, center
• <B>bold</B><B>bold</B>
• <I>italic</I><I>italic</I>
• <U>underline</U><U>underline</U>
• Combinaisons:<B><I>…</I></B>Combinaisons:<B><I>…</I></B>
Section BODY (suite) Section BODY (suite)
• <!-- commentaires --><!-- commentaires -->
• <ADDRESS>équ. à signature</ADDRESS><ADDRESS>équ. à signature</ADDRESS>
• <BLOCKQUOTE>texte</BLOCKQUOTE><BLOCKQUOTE>texte</BLOCKQUOTE>
• <IMG SRC=“fichier”><IMG SRC=“fichier”>
• <PRE>texte</PRE><PRE>texte</PRE>
• <BIG>texte</BIG><BIG>texte</BIG>
• <SMALL>texte</SMALL><SMALL>texte</SMALL>
Section BODY (suite) Section BODY (suite)
• <FONT>texte</FONT><FONT>texte</FONT>
– size=n, +n, -n (1 à 7; défaut=3)size=n, +n, -n (1 à 7; défaut=3) – ex: size=5, size=-2, size=+3ex: size=5, size=-2, size=+3
– face=“nom”face=“nom”
– color=“couleur”color=“couleur”
Listes à puces Listes à puces
(listes non numérotées) (listes non numérotées)
<UL>
<UL>
<LI>item </LI>
<LI>item </LI>
<LI>item 2
<LI>item 2
<LI>item 3
<LI>item 3
</UL>
</UL>
• Attributs de <UL> et <LI>Attributs de <UL> et <LI>
type=square, circle, disc type=square, circle, disc
Listes numérotées Listes numérotées
<OL>
<OL>
<LI> ...
<LI> ...
</OL>
</OL>
• Attributs de <OL> et <LI>Attributs de <OL> et <LI>
– type=1, i, I, a, A type=1, i, I, a, A – value=nvalue=n
Couleurs Couleurs
• nomsnoms
• triplet RGBtriplet RGB
Tableaux Tableaux
• Contenu organisé en lignes et colonnesContenu organisé en lignes et colonnes
• Syntaxe de base:Syntaxe de base:
<TABLE>
<TABLE>
<TR> <TD>aaa</TD> <TD>bbb</TD> </TR>
<TR> <TD>aaa</TD> <TD>bbb</TD> </TR>
<TR> <TD>ccc</TD> <TD>ddd</TD> </TR>
<TR> <TD>ccc</TD> <TD>ddd</TD> </TR>
<TR> <TD>eee</TD> <TD>fff</TD> </TR>
<TR> <TD>eee</TD> <TD>fff</TD> </TR>
</TABLE>
</TABLE>
Titres et légende Titres et légende
• LégendeLégende
– conteneur <CAPTION>conteneur <CAPTION>
– attribut: ALIGN= top, bottom, left, rightattribut: ALIGN= top, bottom, left, right
• Cellules titresCellules titres
– conteneur <TH> à la place de <TD>conteneur <TH> à la place de <TD>
– rend le texte gras et centrérend le texte gras et centré
Conteneur <TABLE>: attributs Conteneur <TABLE>: attributs
• BORDER = n (en pixels)BORDER = n (en pixels)
• WIDTH = n, n% WIDTH = n, n%
• ALIGN = left, center, rightALIGN = left, center, right
• BGCOLOR = #FFFFFF, Blue, ...BGCOLOR = #FFFFFF, Blue, ...
– Affecte toutes les cellulesAffecte toutes les cellules
• CELLPADDING = n (espace dans la cell.)CELLPADDING = n (espace dans la cell.)
• CELLSPACING = n (espace entre les cell.)CELLSPACING = n (espace entre les cell.)
Conteneur TR (Table Row) Conteneur TR (Table Row)
• Définit une ligneDéfinit une ligne
• Attributs:Attributs:
– ALIGN = left, center, rightALIGN = left, center, right
– VALIGN = top, middle, bottomVALIGN = top, middle, bottom – BGCOLOR = #FFFFFF, blue, ...BGCOLOR = #FFFFFF, blue, ...
• Ces attributs affectent toutes les cellules de Ces attributs affectent toutes les cellules de la ligne
la ligne
Conteneurs TD (Table Data) Conteneurs TD (Table Data)
et TH (Table Heading): attributs et TH (Table Heading): attributs
• HEIGHT = n (hauteur en pixels)HEIGHT = n (hauteur en pixels)
• WIDTH = n (largeur en pixels)WIDTH = n (largeur en pixels)
• ALIGN = left, center, rightALIGN = left, center, right
• VALIGN = top, middle, bottom, baselineVALIGN = top, middle, bottom, baseline
• BGCOLOR = #FFFFFF, blue, …BGCOLOR = #FFFFFF, blue, …
• NOWRAP (empêche retour à la ligne)NOWRAP (empêche retour à la ligne)
• COLSPAN = n (chevauche plsrs. colonnes)COLSPAN = n (chevauche plsrs. colonnes)
• ROWSPAN = n (chevauche plsrs. lignes)ROWSPAN = n (chevauche plsrs. lignes)
Liens Liens
• Liens vers d’autres sites WebLiens vers d’autres sites Web
<A HREF=“URL”>texte</A>
<A HREF=“URL”>texte</A>
où URL=http://…
où URL=http://…
• Liens vers courrielLiens vers courriel
<A HREF="
<A HREF="mailto:nom@domainemailto:nom@domaine">texte</A>">texte</A>
• Liens internes (dans le site Web)Liens internes (dans le site Web)
<A HREF="nom_fichier.htm">texte</A>
<A HREF="nom_fichier.htm">texte</A>
Référencement dans un Référencement dans un
fichier fichier
• Nom de la référence (signet)Nom de la référence (signet)
<A NAME=“nom_reference”>texte</A>
<A NAME=“nom_reference”>texte</A>
• Lien vers la référenceLien vers la référence
<A HREF=“#nom_reference”>texte</A>
<A HREF=“#nom_reference”>texte</A>
Images et liens Images et liens
<A HREF=“lien”><IMG SRC=“fichier_image”> </A>
<A HREF=“lien”><IMG SRC=“fichier_image”> </A>
• Images réactivesImages réactives
