INTERNET Le langage HTML Richard BONNET 9, rue des Marronniers B.P 503 74105 ANNEMASSE Cedex Tél. 04.50.43.91.81
Le langage HTML Richard BONNET Cours n° 2
Couleur et Fond d’écran On peut faire afficher un fond d’écran coloré avec le paramètre BGCOLOR de la balise BODY. Exercice : Afficher un fond d’écran vert. On peut également indiquer une image qui sera reproduite (multipliée) en fond d’écran, avec le paramètre BACKGROUND de la balise BODY. Exercice : Afficher en fond d’écran l’image "Foret.gif", puis dans une autre page, le fond d’écran "Egypte.gif". Fond-ecran.html FE2.html et FE3.html
Les images L’insertion d’une image dans une page Web se fait grâce à la balise <IMG SRC="nom du fichier"> (IMG SRC pour Image Source). L’argument ALT permet de décrire l’image. Cette description est visible lorsque l’on passe sur l’image. Elle est aussi très utile pour les non-voyants qui naviguent sur le Web grâce au braille ou à la synthèse vocale. Le descriptif de l’image sera prononcé par l’ordinateur si ALT a bien été renseigné. L’argument ALIGN définit l’alignement de l’image sur la page. L’argument BORDER=N définit un cadre d’une épaisseur de N pixels. Exemple : ALT= "Un coucher de soleil" ALIGN=LEFT BORDER=3
Les images Exercice : Reproduire cette page Web : Voir le site www.iconbazaar.com pour récupérer d’autres images. Sources = logo.bmp ; bmw.gif ; audi_tt.gif ; ferarri_f50.gif ; aston-martin_vantage.gif Voitures.html
Les images animées Exercice : Faire afficher l’image animée de cette molécule dans une page HTML, en procédant de la même manière que pour une image fixe. Source = viagra.gif chimie.html
Le textes défilants (que pour Internet Explorer) La balise <marquee> permet de créer un texte défilant, pour IE. Paramètres de la bannière : BEHAVIOR=ALTERNATE | SCROLL | SLIDE (Manière dont le texte se déplacera) BGCOLOR (Couleur de fond de la boîte de déroulement) DIRECTION= DOWN | LEFT | RIGHT | UP (Sens de déplacement du texte) SCROLLAMOUNT=nombre (Vitesse de déplacement, en pixel, du texte sur l'écran) Etc. Exercice : <html> <head> <title>La balise Marquee</title> </head> <body> <MARQUEE BEHAVIOR="ALTERNATE" SCROLLAMOUNT=10 BGCOLOR="Aqua"> Ne pas abuser des textes défilants </MARQUEE> <MARQUEE BEHAVIOR="ALTERNATE" SCROLLAMOUNT=10 BGCOLOR="fuschia" direction="down" > Ne pas abuser des textes défilants </MARQUEE> </body> </html> defilant.html
Commentaires et Préformatage <html> <head> <title>Commentaires et balise PRE </title> </head> <body> <!-- Ceci est un commentaire inséré dans le code mais invisible pendant la navigation --> <h4>Voici du texte formaté</h4> <!-- Utiliser la touche "tabulation" pour créer ce pseudo tableau --> <pre> Prix HT TVA Prix TTC 100 19.6 119.6 Euros 200 39.2 239.2 Euros 300 58.8 358.8 Euros </pre> <h4>Le même texte, non formaté</h4> Prix HT TVA Prix TTC 100 19.6 119.6 Euros 200 39.2 239.2 Euros 300 58.8 358.8 Euros pre.html
Les hyperliens (ancres) #1 La balise <A> </A> sert à définir un hyperlien (une ancre hypertextuelle) dans une page Web. Format : <A HREF= "Chemin du document"> Texte qui sera souligné </A> Exemples : <A HREF="http://www.tf1.fr">La page de TF1</A> Le site de l’<A HREF="http://www.afp.fr/">AFP </A> est ici. Lien interne à une page : <A name="Partie 1"></A> HREF=URL (Uniform Resource Locator) Spécifie un lien externe ou interne (avec un # au début de l’URL, dans le 2éme cas). TARGET=emplacement_cible Il est possible d'associer un nom pour chaque fenêtre de la commande CADRE (FRAME). Ceci permet de définir un cadre comme cible d'un lien hypertexte. ancre.html
Les hyperliens (ancres) #2 On peut définir un signet pour la création de lien interne à une page Web. Le signet est un nom repérant une position dans la page. Exemple : <A name="Partie 5"> </A> On l’utilise ensuite ainsi : <A HREF="#Partie 5"> Partie 5 de cette page </A> Par défaut, la page appelée remplace la page courante dans la navigateur. On peut faire en sorte d’ouvrir une nouvelle page (on conserve l’ancienne), lorsque l’internaute active un lien (il reste donc présent sur notre site). Exemple : Ouvrir une nouvelle fenêtre vers le site de l’ <A HREF="http://www.lemonde.fr" target="_new"> Le Monde</A>. ancre.html
Les hyperliens (ancres) #3 Un hyperlien peut pointer vers : Une adresse E-Mail Exemples : <A HREF="mailto:chirac@elysee.fr">chirac@elysee.fr </A> <A HREF="mailto:chirac@elysee.fr?cc=rafarin@matignon.com &subject=Wazzza &body=C’était pour dire que … rien du tout."> Cliquer ici pour préparer l’envoi du mail </A> Un lien, un lien FTP, un fichier, News, etc. ancre.html
Image faisant office d’hyperlien Pour qu’une image soit un hyperlien, il suffit d’écrire : <A HREF="page cible"> <IMG SRC= "fichier image"> </A> Exemples : <A HREF="http://www.sfr.com"> <IMG SRC="logo-sfr.gif"> </A> Exercice : Créer les liens-images, pointant vers les 3 sites des opérateurs : www.bouygtel.com www.itineris.com www.sfr.com et un pointant vers votre mail. Operateurs.html
FIN du cours 2