Le HTML de base - Cours 3

Philippe Phen

Description

Cours3Cours 3Le HTML de base-Retour sur le dernier cours-Les différentes balises du HTML de base(les liens, les fichiers multimédia, les tableaux etautres)1Retour: Cours 2Voici ce que vous avez appris d’important audernier cours:-La balise et pour votre texte-Les caractères spéciaux &??;-Quelques spécifications importantes-Les couleurs (texte et hexadécimal)-L’insertion d’images via la balise Revenons sur les attributs des balises• Les attributs de balises sont les composantes que l’oninsère dans une balise:• SRC, ALT et WIDTH sont les attributs dans cetexemple.• Vous devez OBLIGATOIREMENT insérer un espaceentre les attributs:• À ne PAS faire: • À FAIRE: 2Copyright 2006 Philippe Phen - www.CoursHTML.tkL’utilisation de guillemets dans les attributs• Lorsque vous employez un attribut pour une balise, lecontenu doit être entre deux guillemets ( “ et ” )• Bien que ça fonctionne avec des apostrophes ( ’ ),évitez de les utiliser pour ne pas avoir des problèmesde compatibilité avec les anciens ordinateurs.• Vous ne devez pas employer deux apostrophes colléscomme étant un guillemet ( ne pas faire: ‘’ ) carl’ordinateur considèrera l’attribut vide étant donné qu’iln’y a rien entre les deux apostrophes collés!L’emploi des attributs• Lorsqu’une balise possède plusieurs attributs (cequi est le cas pour presque toutes les balises), iln’y a ...

Sujets

• ordinateur

Informations

• Publié par: Ninol
• Nombre de lectures: 200
• Langue: Français

Extrait

Cours 3

Cours 3 Le HTML de base

-Retour sur le dernier cours

-Les différentes balises du HTML de base

(les liens, les fichiers multimédia, les tableaux et autres)

1

Retour: Cours 2 Voici ce que vous avez appris d’important au dernier cours:

-La balise FONT> et <H> pour votre texte < -Les caractères spéciaux &??; -Quelques spécifications importantes -Les couleurs (texte et hexadécimal) -L’insertion d’images via la balise <IMG>

Revenons sur les attributs des balises • Les attributs de balises sont les composantes que l’on insère dans une balise: <IMG SRC=“…” ALT=“…” WIDTH=“…”>

• SRC, ALT et WIDTH sont les attributs dans cet exemple.

• Vous devez OBLIGATOIREMENT insérer un espace entre les attributs:

• À ne PAS faire: <IMGSRC=“…”ALT=“…”WIDTH=“…”> • À FAIRE: <IMG SRC=“…” ALT=“…” WIDTH=“…”>

2

L’utilisation de guillemets dans les attributs

• Lorsque vous employez un attribut pour une balise, le contenu doit être entre deux guillemets ( “ et ” )

• Bien que ça fonctionne avec des apostrophes ( ’ ), évitez de les utiliser pour ne pas avoir des problèmes de compatibilité avec les anciens ordinateurs.

• Vous ne devez pas employer deux apostrophes collés comme étant un guillemet ( ne pas faire: ‘’ ) car l’ordinateur considèrera l’attribut vide étant donné qu’il n’y a rien entre les deux apostrophes collés!

L’emploi des attributs

• Lorsqu’une balise possède plusieurs attributs (ce qui est le cas pour presque toutes les balises), il n’y a pas d’importance dans l’ordre d’utilisation.

• Il faut juste bien faire attention de les écrire correctement!

3

IMPORTANT – Caractères spéciaux

• Si, dans votre texte, vous désirez insérer les caractères <, >, &, ou ”, vous devez obligatoire- ment employer l’écriture HTML (&XY;) pour ne pas que l’ordinateur les confonde avec les indicateurs de balises.

• < s’écrit &lt; • > s’écrit &gt; • & s’écrit &amp; • " s’écrit &quot;

Les Liens hypertextes L’insertion de liens permet de relier plusieurs pages entre eux. La balise de liens est la plus simple: <A> TEXTE </A> Comme toutes les autres balises, des attributs doivent être utilisés:

NOM et EXEMPLE

HREF ="page2.html" TITLE="Lien 1" TARGET=" blank" _ NAME="milieu"

DÉFINIT

Adresse du lien Texte au passage du pointeur de la souris Cible du lien Nom pour ancrage

4

Les attributs en détails

HREF ="page2.html" : Adresse source du lien: adresse vers laquelle on veut diriger le lien. Si la page se trouve dans le même dossier, il suffit simplement d’indiquer le nom et l’extention de cette page. Si c’est vers un autre site Web, il faut taper http://www.serveur.com/compte/page.html TITLE="Lien 1" : Texte au passage du pointeur de la souris sur le lien TARGET=" blank" _ Cible du lien (Où s’affichera la page du lien?). Cela est plus utilisé lorsque le site emploie des cadres (Comme sur CoursHTML). Si cet attribut n’est pas utilisé, le lien s’affichera dans la même page. Voici les attbuts les plus souvents utilisés: _ TARGET=" blank" : Le lien s’affiche dans une nouvelle fenêtre TARGET="_top" : Page entière (Lorsqu’il y a des cadres)

Les attributs en détails

NAME ="milieu" : On apelle ça l’attribut d’ancrage d’une page. On s’en sert lorsqu’on veut séparer une longue page interminable en différentes section et qu’on veut y insérer des liens sur le haut de cette même page. On sépare la page en diverses sections comme suit: <A NAME=“Chapitre1”> <A NAME=“Chapitre2”> <A NAME=“Chapitre3”> On insère les liens comme suit: <A HREF=“#Chapitre1”> Allez au chapitre 1 </A> <A HREF=“#Chapitre2”> Allez au chapitre 2 </A> <A HREF=“#Chapitre3”> Allez au chapitre 3 </A> Autre lien utile: <A HREF=“#top”> Monter en haut complètement </A>

5

Les liens… • Donc, voici comment fonctionne un lien: <A HREF=“http://www.yahoo.com"> Visitez YAHOO </A> C’est donc entre <A HREF=“…”> et </A> que se trouve l’objet du lien. (L’objet qui lorsqu’on clique dessus, active le lien). Donc, si on veut créer une image-lien, c’est le même principe: on insère la balise d’image entre <A> et </A> comme par exemple: <A HREF="http://www.yahoo.com"> <IMG SRC=“image1.jpg"> </A> Cette image (image1.jpg) sera par défaut encadré. Si vous désirez enlever ceci, il suffit d’employer la balise border comme nous l’avons vu au cours précédent: <IMG SRC="image1.jpg" border=“0">

Les liens… • Lien vers une adresse e-mail

<A HREF= “mailto:[e-mail]" > Écrivez-moi! < / A>

En cliquant sur ce lien, l’ordinateur ouvrira le service de courrier électronique par défaut, Microsoft Outlook.

• Lien vers un autre type de serveur (Autre que HTTP)

Serveur FTP: <A href= “ftp://[e-mail]" > HTTP sécurisé: <A href= “https://www.site.com" >

6

Une petite balise pour faire changement

Voici une balise qui permet de faire afficher une ligne de séparation horizontale <HR> (Horizontal Row) On peut lui attribuer des attributs: ALIGN=“left” : alignement WIDTH=“30%” : longueur en pixels ou en % SIZE=“3” = hauteur de la ligne (épaisseur) noshade : supprime l’ombrage <HR align=“center” width=“75%” size=“3” noshade> Cette balise n’a PAS de fin

Balise de contenu interne <!-- TEXTE ICI --> • Ce n’est pas vraiment une balise, c’est seulement un indicateur; • Tout ce qui est tapé entre <!-- et --> ne sera pas affiché sur le site; • On peut s’en servir pour identifier des sections sur la page HTML ou pour enlever des parties de code HTML (par exemple, lorsqu’on veut trouver une erreur importante). • Exemple: <!-- Photos du cours 2 --> (…) <!-- Photos du cours 1 -->

7

Les fichiers multimédia…

On peut insérer un fichier multimédia (son ou vidéo) sur une page Web grâce à la balise <EMBED>. Cette balise s’emploie comme suit: <EMBED src=“son.mid“ width=“150” height=“45”>

On peut lui ajouter d’autres attribut bgcolor="#B3DCF5" : Couleur de fond si le module de contrôle est plus petit align="center" : alignement loop="true" : jouer en boucle

Il est conseillé d’employer des fichiers MIDI (.mid) étant donné leur petite taille.

Les TABLEAUX La maîtrise de l’emploi des tableaux en HTML est essentielle pour avoir une bonne mise en page! En effet, c’est grâce aux tableaux qu’on peut avoir des alignements parfaits lorsqu’on veut mettre une image à gauche et un texte à droite par exemple! Voici la balise de base: <TABLE> et </TABLE> Comme avec les autres balises, on peut lui ajouter des attributs: WIDTH=“100” et HEIGHT=“100” : largeur et hauteur en pixels BGCOLOR=“white” : couleur de fond ALIGN=“left” : alignement (left, center ou right) BORDER=“1” : épaisseur de la bordure en pixels BORDERCOLOR=“blue” : couleur de la bordure

8

Le contenu d’un tableau Dans un tableau, on y trouve: Une légende : En haut ou en bas; Des rangées et des cellules Voici la balise qui permet d’inclure une légende (pas obligatoire). Elle est insérée entre <TABLE> et < / TABLE> : <CAPTION align=“top ou bottom”> Texte / <CAPTION> Voici la balise qui permet de créer une rangée (obligatoire). Elle est insérée entre <TABLE> et < / TABLE> : <TR> Contenu de la rangée < / TR> (TR = Table Row) Voici la balise qui permet de créer une cellule (obligatoire). Elle est insérée dans une rangée: entre <TR> et < / TR> : <TD> Contenu de la cellule < / TD> (TD = Table Data)

Les tableaux (suite) Voici donc comment se présente un tableau:

CELLULE 1 CELLULE 2 CELLULE 3 CELLULE 4 Légende

<TABLE align=“center” width=“100” height=“35” border=“1”> <CAPTION align=“bottom”> Légende </CAPTION> <TR><TD>CELLULE 1</TD><TD>CELLULE 2</TD></TR> <TR><TD>CELLULE 3</TD><TD>CELLULE 4</TD></TR> </TABLE>

9

La fusion des cellules Il est clair de tout le monde veut s’aventurer dans la fusion des cellules pour obtenir ceci:

Et c’est faisable bien évidemment avec des attributs que l’on ajoute à la balise de cellule (<TD>) <TD ROWSPAN=“2”> Fusion de 2 lignes ensemble </TD> <TD COLSPAN=“4”> Fusion de 4 colonnes ensemble </TD>

Démonstration Biensûr, nous allons utiliser un tableau légèrement plus simple pour la démonstration

Fusion de lignes Fusion de colonnes Cellule restante 1 Cellule restante 2

<TABLE border=“3”> <TR> <TD ROWSPAN=“2”> Fusion de lignes </TD> <TD COLSPAN=“2”> Fusion de colonnes </TD> </TR> <TR> <TD> Cellule restante 1 </TD> <TD> Cellule restante 2 </TD> </TR> </TABLE>

10

D’autres explications plus détaillés et plusieurs exemples de fusion de cellules sont disponible à la page “Les Tableaux” disponible dans la section “DIVERS - Astuces” du site CoursHTML www.CoursHTML.tk

Vous y trouverez aussi comment mettre un arrière plan dans un tableau ou dans une cellule,

Le texte défilant

Voici une balise qui permets de faire défiler un texte (Comme sur le site CoursHTML) <MARQUEE> et </MARQUEE>

On peut lui attribuer une multitude d’attributs: HEIGHT=“10” : hauteur en pixels BGCOLOR=“yellow” : Couleur de fond de l’élément DIRECTION=“right” = direction du texte (left, right) LOOP=“infinite” : défilement en boucle

11