Saut de ligne : permet de sauter à la ligne suivante.
<BR>
Exemple : avec <BR>
Salut <BR> Bienvenue sur mon site Web !!!
Résultat : avec <BR>
Salut Bienvenue sur mon site Web !!!
Saut de paragraphe : permet de sauter au paragraphe suivant (équivalent à sauter 2 lignes).
<P> </P>
Exemple : avec <P> </P>
Salut <P> Bienvenue sur mon site Web !!!
</P>
Résultat : avec <P> </P>
Salut
Bienvenue sur mon site Web !!!
Note : le tag de fermeture</P> n'est pas obligatoire dans tous les cas.
Ligne horizontale : permet de sauter au paragraphe suivant en insérant une barre horizontale.
<HR> </HR>
Exemple : avec <HR> </HR>
Bonjour <HR> </HR> Bienvenue sur mon site Web !!!
Résultat : avec <HR> </HR>
BonjourBienvenue sur mon site Web !!!
On peut changer la barre horizontale :
(SIZE = l'épaisseur) SIZE = "0", "1", "2", etc.
(WIDTH = la largeur) WIDTH = "10%", "50%", etc. (Il s'agit du pourcentage de la largeur de la page).
(ALIGN = l'alignement) ALIGN = "LEFT", "CENTER" ou "RIGHT".
(COLOR = la couleur) COLOR = "#00FF00", "blue", etc. (Liste des codes des couleurs).
Exemple : avec <HR> </HR>
<HR SIZE = "8" WIDTH = "50%" ALIGN = "CENTER"
COLOR = "#E4E4E4"> </HR>
Exemple : avec <B> </B>
Cette exemple est <B> écrit en gras </B>
Résultat : de <B> à </B>
Cette exemple est écrit en gras
Italique : permet de mettre le texte en italique.
<I> écrit en italique </I>
Exemple : avec <I> </I>
Cette exemple est <I> écrit en italique </I>
Résultat : de <I> à </I>
Cette exemple est écrit en italique
Souligné : permet de souligner le texte.
<U>souligner</U>
Exemple : avec <U> </U>
Cette exemple est <U>souligner</U>
Résultat : de <U> à </U>
Cette exemple est souligner
Alignement : permet d'aligner le texte à gauche
(LEFT), au centre (CENTER) ou à droite (RIGHT).
<DIV ALIGN = "positionnement voulu"> texte </DIV>
Exemple : avec <DIV> </DIV> <DIV ALIGN = "LEFT"> résultat à gauche </DIV><BR> <DIV ALIGN = "CENTER"> résultat au centre </DIV><BR> <DIV ALIGN = "RIGHT"> résultat à droite </DIV><BR>
Résultat :
résultat à gauche
résultat au centre
résultat à droite
Police, taille et couleur : permet de changer la police (FACE), la taille (SIZE) et la couleur (COLOR) du texte.
<FONT éléments à changer> texte </FONT> FACE = "Arial", "Times new roman", etc.
SIZE = "2", "3", "5", etc.
COLOR = "#00FF00", "#F00F00", etc. (Liste des codes
des couleurs).
Exemple : avec <FONT> </FONT> <FONT FACE = "Arial" SIZE = "5" COLOR = "#339999"> couleur - taille - choix de la police </FONT>
Résultat :
couleur - taille - choix de la police
Couleur pour tout le texte : permet de définir une couleur
pour tout le texte de la page Web.
<BODY TEXT = "#00FF00">
Couleur en arrière plan : permet de mettre une couleur en
arrière plan.
BORDER : l'épaisseur de la bordure BORDERCOLOR : couleur de la bordure BGCOLOR : couleur de fond WIDTH : la largeur de la colonne HEIGHT : la hauteur de la colonne CELLSPACING : l'espacement des cellules CELLPADDING : l'espacement à l'intérieur des cellules ALIGN : le positionnement du tableau ou de la colonne
<TABLE éléments à changer
>
BORDER = "5", "10",
etc. BORDERCOLOR = "#8E00F0", "#F08000", etc.
(Liste des codes
des couleurs) CELLSPACING = "5", "10",
etc. CELLPADDING = "5", "10", etc. BGCOLOR =
"#8E00F0", "#F08000", etc. (Liste des codes
des couleurs) WIDTH = "50%" ou "800", etc. (Il s'agit du
pourcentage de la largeur ou la largeur du tableau). ALIGN = "CENTER",
"RIGHT" ou "LEFT".
Permet de créer des tableaux dont le nombre de cellules varie d'une
ligne à l'autre. Pour fusionner deux cellules d'une même ligne, on
utilise le terme COLSPAN. Pour fusionner deux cellules d'une même
colonne, on utilise le terme ROWSPAN. Ces deux termes doivent
toujours être placés dans le tag
</TD&>.
COLSPAN = "Nombre de cellules à fusionner"
ROWSPAN = "Nombre de lignes"
Exemple : Je veux obtenir le tableau suivant.
Salut
Allo
Adieu
Bye
Bonjour
Je dois d'abord créer un tableau de 3 lignes et 3 colonnes et y
insérer l'information. Il est normal que certains tags <TD> </TD> soient vides car ces
cellules disparaîtront suite à la fusion.
Je dois d'abord créer un tableau de 3 lignes et 3 colonnes et y
insérer l'information. Il est normal que certains tags <TD> </TD> soient vides car ces
cellules disparaîtront suite à la fusion.
Liens hypertextes externes (vers une page Web d'un autre site Web)
<A HREF = " http://www.destination.com/page.html "> mot clé </A>
- http://www.destination.com/page.html est le site web que l'on veut visiter.
- mot clé est le mot que l'on verras apparaitre sur la page web. Se sera le lien de direction pour visiter le site web.
Exemple :
Visiter <A HREF="http://www.boiseriesc.com/boutique_inter/"> Boutique-Inter </A> pour télécharger vos logiciels !
Résultat :
Visiter Boutique-Inter pour télécharger vos logiciels !
Liens hypertextes (entre les pages d'un même site Web)
<A HREF = " page.html "> mot clé </A>
- page.html est la page web que l'on veut visiter.
- mot clé est le mot que l'on verras apparaitre sur la page web. Se sera le lien de direction pour visiter le site web.
Exemple :
Visiter la <A HREF = "index.php"> Page d'Accueil </A>
- votre@courriel.com est l'adresse de celui qui reçoit le courriel.
- mot clé est le mot que l'on verras apparaitre sur la page web. Se sera le lien de direction pour envoyer le courriel.
Exemple :
Envoyez-moi un <A HREF = "MAILTO:mon@courrier.com"> courriel
</A> pour des informations.
Résultat :
Envoyez-moi un courriel pour des informations.
Liens hypertextes à l'aide d'une image
- Lien hypertexte externe :
<A HREF = " http://www.destination.com/page.html "> <IMG SRC = " nom de l'image.extension "> </A>
- Lien hypertexte vers une autre page web du même site :
<A HREF = " page.html "> <IMG SRC = "nom de l'image.extension"> </A>
- Lien hypertexte pour envoyer un courriel :
<A HREF = "MAILTO:ADRESSE"> <IMG SRC = "nom de
l'image.extension"> </A>
Exemple :
Je veux cliquer sur l'image pour envoyer un courriel à mon@courrier.com.
Pour créer un lien hypertexte dans une même page, il faut créer 2 choses :
1) Le signet <A NAME = "nom du signet"> </A>
2) Le lien hypertexte <A HREF = "#nom du signet"> mot clé </A>
- le signet est créé à l'endroit où l'on veut aller dans la page
- le lien hypertexte est créé à l'endroit où l'on clique pour aller à notre signet.
Exemple :
Supposons que j'ai une longue page Web qui contient, en haut de la page le mot
Salut et en bas de la page, un paragraphe qui
débute par le mot Bonjour
Je désire pouvoir cliquer sur le mot Salut pour atteindre le début du paragraphe qui commence par Bonjour...
Dans cet exemple, le signet (endroit où je veut aller) sera placé au début du paragraphe qui commence par titre du texte et il s'appellera haut de la page.
Le lien hypertexte (endroit où l'on clique pour aller à notre signet) sera
placé au même endroit que le mot retour haut de la page qui est notre mot clé.
Résultat :
<A NAME = " haut de la page "> </A> titre du texte
Placer-le au début du paragraphe qui commence par titre du texte
<A HREF = " # haut de la page "> retour haut de la page </A>
Placer-le à l'endroit où vous voulez mettre le lien. En cliquant sur le lien vous serez diriger vers le haut de votre page web.
Le texte défilant est une façon simple de créer une petite animation dans une page Web :
<marquee direction = "sens du défilement" scrollamount = "vitesse" loop = "chiffre">Texte</marquee>
Le sens du défilement (direction) doit être left ou right
La vitesse (scrollamount) doit être un chiffre plus grand que 0. Plus le chiffre est grand, plus le vitesse du défilement est élevée. Une trop grande vitesse (500, par exemple) ne donnera pas l'effet voulu
Le chiffre (loop) doit être un des chiffres suivant :
-1 si l'on veut que le texte se déplace indéfiniment
1 si l'on veut que le texte se déplace une seul fois et
disparaisse par la suite
2 si l'on veut que le texte se déplace deux fois et
disparaisse par la suite
etc.
Exemple : <marquee direction = "right" scrollamount = "5" lloop = "-1">Vroummmmm....</marquee>
C'est à mon@courriel.com que l'information inscrite dans le formulaire parviendra.
Les zones de texte simples :
Ces zones de texte permettent d'inscrire de l'information sur une seule ligne. On doit spécifier le nom (name), la largeur (size) et le nombre de caractères maximal (maxlength) pouvant y être inscrit :
<input type = "text"name = "nom" size =
largeurmaxlength = nombre de caractères
maximal>
Exemple :
Titre : <br> <input type = "text"name = "Titre" size = "30" maxlength = "60">
Résultat :
Les zones de texte déroulantes :
Ces zones de texte permettent d'inscrire de l'information sur plusieurs lignes. On doit spécifier le nom (name), le nombre de lignes (rows) et la
largeur (cols). Si on inscrit plus de ligne que le nombre de lignes spécifié, la zone se déroulera automatiquement afin de pouvoir inscrire le nombre de lignes voulu. Le code est le suivant :
<textarea name ="nom" rows ="nombre de lignes" cols =
"largeur" > </textarea>
Exemple :
Adresse : <br> <textarea name ="Commentaire" rows ="3" cols ="40" > </textarea>
Résultat :
Les boutons d'options (boutons radio) :
Les boutons d'options servent à choisir une seule option
parmi un groupe d'options. Pour chaque option, on doit spécifier
le nom (name) et la valeur (value).
On peut aussi écrire checked si on veut que l'option
soit cochée d'avance. On doit également écrire le texte
qui apparaîtra à côté du bouton d'option. Le code est le
suivant :
<input type ="radio" name ="nom" value = "une valeur" checked>
note :
Les options sont rarement utilisées seules. Le plus souvent, on a plusieurs options offertes et on en choisie une seule dans ce groupe. Toutes les options qui
font partie du même groupe d'options doivent avoir le même nom(name) afin que l'ordinateur sache qu'on peut en choisir une seule dans ce même groupe. La valeur(value)servira à
distinguer chaque option d'un même groupe.
Exemple :
Degré scolaire : <br> <input type = "radio"name = "Degré" value = "Secondaire 3" > Secondaire 3
<input type = "radio"name = "Degré" value
= "Secondaire 4" > Secondaire 4
<input type = "radio"name = "Degré" value = "Secondaire 5" checked> Secondaire 5
Résultat :
Les cases à cocher :
Les cases à cocher servent à choisir aucun, un ou plusieurs
choix parmi un groupe de choix. Pour chaque case à cocher,
on doit spécifier le nom (name) et la valeur
(value). On peut aussi écrire checked si on
veut que la case soit cochée d'avance. On doit également écrire
le texte qui apparaîtra à côté de la case à cocher :
<input type ="checkbox" name ="nom" value ="valeur" checked>
Exemple :
Coché(s) : <br> <input type ="checkbox" name ="Coché" value ="Livre" checked> Livre
<input type ="checkbox" name ="Coché" value ="Vidéo"> Vidéo
<input type ="checkbox" name ="Coché" value ="Musique" checked> Musique
Résultat :
Les listes de sélection :
Les listes de sélection servent à choisir un ou plusieurs items dans une liste. On doit spécifier le nom (name), la taille (size) et on doit inscrire multiple si l'on veut que l'utilisateur du formulaire puisse choisir plus d'un item dans la liste. De plus, on doit identifier chaque item à l'aide du tag <option>:
<select name = "nom" size = "taille" multiple> <option> Premier item <option> Deuxième
item <option> Etc... </select> Exemple :
Quel(s) sport(s) pratiquez-vous ? <br> <select name = "Sports" size = "3" multiple>
<option> Hockey
<option> Baseball
<option> Skateboard
<option> Ski
<option> Soccer </select>
Résultat :
Quel(s) sport(s) pratiquez-vous ?
Dans cet exemple, 3 sports sont visibles car size = "3". De plus, la personne qui remplit le formulaire peut choisir plusieurs items car nous avons inscrit multiple. On doit
se servir de la touche Control (Ctrl) du clavier afin de sélectionner plusieurs lignes.
Exemple :
Dans Quel pays habitez-vous ? <select name = "Pays" size = "1"> <option> Arabie <option>
Canada
<option> États-Unis <option> Japon
</select>
Résultat :
Dans quel pays habitez-vous ?
Dans cet exemple, 1 pays est visible car size = "1". De plus, la personne qui remplit le formulaire ne peut pas choisir plusieurs items car nous n'avons pas inscrit multiple.
Les zones de mot de passe :
Ces zones de texte permettent d'inscrire de l'information (mot de passe) qui n'apparaîtra pas à l'écran. On verra plutôt le symbole * pour chaque caractère qui y sera inscrit. On doit
spécifier le nom (name), la largeur (size) et le nombre de caractères maximal pouvant y être inscrit (maxlength) :
<input type = "password" name = "nom" size = "largeur" maxlength = "nombre de caractères maximal">
Exemple :
Mot de passe : <br> <input type = "password" name = "Code" size = "5" maxlength = "5">
Résultat :
Les boutons (Envoyer / Effacer) :
Pour créer un bouton, on doit spécifier le type de bouton (type) et le nom qui apparaît sur le bouton (value). Le type "reset" sert à effacer le contenu du
formulaire et le type "submit" sert à envoyer le contenu du formulaire :
<input type = "type de bouton" value = "nom qui apparaît sur le bouton">
Exemple : <input type = "reset" value = "Effacer"> <input type = "submit" value = "Envoyer">
En HTML, les cadres sont utilisés pour séparer la fenêtre en plusieurs zones. Le plus souvent, on a une zone plus petite à la gauche ou dans le haut de page qui contient des mots clé sur lesquels on doit
cliquer pour afficher la page voulue dans l’autre zone (la plus grande zone).
Le principe est le suivant :
Il y a une seule page principale et plusieurs autres pages qui seront affichées dans la page principale. Dans la page principale, on écrit uniquement le code permettant de fractionner la fenêtre en plusieurs zones (2 zones suffiront pour notre cours). L’information qui apparaîtra dans les zones
de notre page principale sera contenue dans d’autres pages Web qui seront elles-mêmes affichées dans les zones voulues de notre page principale. Donc, on doit créer d’autres pages Web qui contiennent
l’information à afficher dans les zones de notre page principale.
Exemple :
Ma fenêtre est séparée en 2 colonnes. La colonne de gauche (appelée frame1), occupe 20% de la largeur de l’écran tandis que la colonne de droite (appelée frame2) occupe 80% de la largeur de
l’écran.
Le frame1 contient 2 liens hypertextes. L’information contenue dans ce frame1 ne sera pas écrite dans notre page principale mais dans une autre page que nous appelerons frame1.html.
Le frame2 contient le texte "Salut, vous êtes à la page du frame 2" ce texte sera inscrit dans une autre page que nous apelerons frame2.html. Cependant, le frame2 peut contenir aussi la phrase "Bonjour, vous êtes à la page du frame 2". Cette phrase est inscrite dans une autre page que nous nommerons frame2.html. Donc, le frame2 peut contenir la page frame2.html OU la page frame1.html.
Comment choisir laquelle des pages sera affichée ? En cliquant sur le bon mot clé dans le frame1 à la gauche de l’écran. Autrement dit, si je clique sur frame 2, la page frame2.html sera affichée dans le frame2 et si je clique sur frame 1, la
page frame1.html sera affichée dans le frame1.
Voici le code des pages Web qui servira à obtenir le résultat voulu :
Remarquez tout d’abord que le texte qui apparaît dans la page
principale n’est pas contenu dans cette page Web. Tel que mentionné plus
haut, la page principale contient le code permettant de fractionner la
fenêtre et le nom des pages à afficher dans les différentes frames.
Remarquez aussi que les tags <body> </body> ont été changés
par <frameset> </frameset>.
Le code <frameset… sert à annoncer le début du code pour les
cadres.
Le code cols="20%,80%" sert à annoncer la taille des 2 colonnes.
On aurait pu fractionner en deux lignes plutôt que deux colonnes en
remplaçant cols par rows.
Le code bordercolor="#F80800" sert à choisir la couleur de la
ligne de séparation
Le code border=5 sert à choisir l’épaisseur de la ligne de
séparation (0 et plus…). Si l’on écrit border=0, la ligne de
séparation sera invisible.
Le code <frame src="frame.html" name="frame1"> sert à
indiquer que la zone de gauche se nomme frame1 et qu’elle
affichera l’information de la page frame1.html.
Le code <frame src="frame2.html" name="frame2"> sert à
indiquer que la zone de droite se nomme frame2 et qu’elle
affichera l’information de la page frame2.html.
Le code </frameset> annonce la fin du code pour les cadres.
Le code <a href="frame2.html" target="frame2"> frame 2
</a> sert à créer un lien hypertexte qui nous amènera à la page
frame 2.html si l’on clique sur le mot clé frame 2. Le code
target="frame2" sert à spécifier que l’on veut afficher la page
frame2.html dans la frame2 et non dans la frame1.
Le code <a href="frame2b.html" target="frame 2"> frame 2b
</a> sert à créer un lien hypertexte qui nous amènera à la page
frame2b.html si l’on clique sur le mot clé frame 2b. Le code
target="frame2" sert à spécifier que l’on veut afficher la page
frame2b.html dans le frame2 et non dans la frame1.
frame2a.html
<html>
<body> Salut, vous êtes à la page frame
2a </body>
</html>
Ce code affiche simplement la phrase " Salut, vous êtes à la
page frame 2a "
frame2b.html
<html>
<body> Bonjour, vous êtes à la page frame
2b </body>
</html>
Ce code affiche simplement la phrase " Bonjour, vous êtes à
la page frame 2b "
