Le HTML de base - Cours 2 par Phillipe Phen

Chuwyung - Philippe Phen

Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

12 pages

Français

Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

A propos
Informations
Extrait

Description

et
Revenons un peu sur les balises META• Les balises font partie de • Voici quelques exemples• • NAME=“…" Est une indication que vous nedevez pas changer, c’est NAME qui détermine lerôle de ce META (Description, Mots clé, Auteurde la page, etc. )…2Copyright 2006 Philippe Phen - www.CoursHTML.tkGénérateur de META TAGS• Vous trouverez dans la section “Divers -Astuces” du site CoursHTML ungénérateur de Meta tags qui créera pourvous les meta tags.• www.CoursHTML.tkL’alignement des paragraphesAvec la balise

…Vous pouvez ajouter l’attribut ALIGN=“” à labalise

L’attribut ALIGN déterminera l’alignementdu contenu du paragraphe

AlignementGAUCHE

Alignement CENTRÉ

Alignement DROITE

JUSTIFIÉ3Pour donner du à vos textes…• Jusqu’a présent, l’attribut TEXT de la baliseBODY (

Sujets

ordinateur

informatique

Informations

Publié par	Chuwyung
Nombre de lectures	241
Langue	Français

Extrait

Cours2
Cours 2
Le HTML de base
-Retour sur le dernier cours
-Les différentes balises du HTML de base
(la mise en page, les couleurs et les images)
- L’utilité de chacunes des balises et comment
s’en servir
1Retour: Cours 1
Voici ce que vous avez appris d’important au
dernier cours:
-Les fondations d’une page HTML
(<HTML>, <HEAD> et <BODY>)
-Les balises <P> et <BR>
Revenons un peu sur les balises META
• Les balises <META> font partie de <HEAD>
• Voici quelques exemples
• <META NAME="DESCRIPTION" CONTENT="Tapez la description de
votre site ICI">
<META NAME="KEYWORDS" lang="fr-ca" CONTENT="Tapez des
mots clés ICI, séparé, par, des, virgules">
<META NAME="AUTHOR" CONTENT="Noms du ou des webmasters
ICI">
• NAME=“…" Est une indication que vous ne
devez pas changer, c’est NAME qui détermine le
rôle de ce META (Description, Mots clé, Auteur
de la page, etc. )…
2
Copyright 2006 Philippe Phen - www.CoursHTML.tkGénérateur de META TAGS
• Vous trouverez dans la section “Divers -
Astuces” du site CoursHTML un
générateur de Meta tags qui créera pour
vous les meta tags.
• www.CoursHTML.tk
L’alignement des paragraphes
Avec la balise <P>…
Vous pouvez ajouter l’attribut ALIGN=“” à la
balise <P>
L’attribut ALIGN déterminera l’alignement
du contenu du paragraphe
<P ALIGN=“left”> AlignementGAUCHE
<P ALIGN=“center”> Alignement CENTRÉ
<P ALIGN=“right”> Alignement DROITE
<P ALIGN=“justify”> JUSTIFIÉ
3Pour donner du à vos textes…
• Jusqu’a présent, l’attribut TEXT de la balise
BODY (<BODY TEXT=“black”>) vous
permettait de définir la couleur de base du
texte.
• Que fait-on si l’on veut donner différentes
couleurs à chaque paragraphe?
On devra se servir d’une nouvelle balise!
Pour donner du à vos textes…
• La balise <FONT> est la balise qui s’occupe du
texte: couleur, taille, écriture, alignement.
Nom de l’attribut Définit le/la…Exemple
FACE FACE="Arial" Style d’écriture
SIZE SIZE="3" Taille du texte
(1 à 7)
COLOR COLOR="Blue" Couleur du texte
ALIGN ALIGN="Left" Alignement du
texte
Ex.<FONT COLOR=“RED” SIZE=“3”> Votre texte </FONT>
N’oubliez pas de fermer votre balise (</FONT>)…
4
Copyright 2006 Philippe Phen - www.CoursHTML.tkÉtant donné que chaque ordinateur ne possède
pas tous les écritures du monde, il est conseillé
d’utiliser les écritures de bases.
Vous pouvez aussi déterminer un ordre de priorité
pour les écritures… <FONT FACE=“Arial,
Verdana, Courrier">
Explication: Si l’ordinateur qui visite le site ne
possède pas l’écriture Arial, il utilisera l’écriture
Verdana et s’il ne la possède pas, il optera pour
Courrier.
Voici quelques balises qui permettront d’ajouter
du style à votre texte.
• <B>Le texte sera en gras</B> (Bold)
• <I>Le texte sera en italique</I> (Italic)
• <U>Le texte sera surlignée</U> (Underlined)
• <STRIKE>Le texte sera barré</STRIKE>
• <BLINK> Texte clignotant </BLINK>
• <SUB> Mode indice </SUB> (Na2SO4)
• <SUP> Mode exposant </SUP> (325²³)
• <TT>Mode Courier </TT> (True Type)
5_
L’attribut SIZE de FONT permets de définir la taille du texte:
1= le plus petit et 7= le plus grand
Si vous voulez mettre évidence un titre / sous-titre de
quelques mots, c’est une perte de temps d’utiliser une
balise longue comme FONT (<FONT SIZE=“3”
FACE=“Arial” COLOR=“blue”>)
Vous pouvez donc vous servir des balises <H> et </H>
<H1> La plus grande taille </H1>
<H2> Grande taille </H2>
<H3> Taille moyenne - grande </H3>
<H4> Taille moyenne - petite </H4>
<H5> Petite taille </H5>
<H6> La plus petite taille </H6>
Contrairement à l’attribut SIZE de FONT,
<H1>= le plus grand et <H6> = le plus petit
Les caractères accentués
• Étant donné que les programmes informatiques ont tout
d’abord été inventés en anglais, certains ordinateurs ou
logiciels ne reconnaîtront pas les lettres accentués du
français. Vous pouvez écrire normalement mais il est
recommandé d’utiliser l’écriture en “codes” ISO
international en suivant le modèle suivant: & ;
• & : ça doit commencer par le “et” commercial
• : lettre à laquelle on veut attribuer un accent
• : caractéristique qu’on veut attribuer (le type d’accent
: aigu, grave, tréma)
• ; : ça doit finir par un point-virgule
6
Copyright 2006 Philippe Phen - www.CoursHTML.tk
_Les caractères accentués : explications
• Accent aigu: [& acute;]
Accent grave: [& grave;]
Accent circonflexe: [& circ;]
Tréma: [& uml;]
Cédille: [& cedil;]
Lettres reliés ( ) : [& lig;]
• é = é ç = ç = &oelig;
È = È À = À
ê = ê ë = ë
• Ex. Écolière : Écolière
Préférée : Préférée
ur de Noël : C&oelig;ur de Noël
Avant d’aller plus loin…
Si vous voulez créer un site Web avec plusieurs
pages, images, musiques, vidéos, etc. Il est conseillé
(voire obligatoire) de créer un Dossier (Folder) dans
lequel vous mettrez TOUS les fichiers utiles pour le
site (Pages Web, Images…)
Cela vous facilitera la vie lorsque vous voudrez
insérer des images, créer des liens pour relier les
pages etc.
Lorsque vous aurez tout complété, il vous suffira
d’envoyer tout le contenu du dossier vers un serveur
d’hébergement.
La page PRINCIPALE (d’accueil) de votre site
devra obligatoirement s’appeler « index.html »
7
&°
°
°Quelques spécifications
Dans un ordinateur PC (Windows), il n’y a pas de
différences entre majuscules et minuscules
pour le nom et l’extension du fichier
Ainsi,
index.html , Index.html, INDEX.html,
index.HTML, Index.HTML et INDEX.HTML
Sont tous le même fichier pour Windows!
Quelques spécifications (suite)
Sur un serveur d’hébergement (Linux/Unix), et
sur l’Internet en général, Majuscules et
minuscules sont différenciés pour le nom et
l’extension du fichier
Ainsi,
index.html , Index.html, INDEX.html,
index.HTML, Index.HTML et INDEX.HTML
Sont six (6) différents fichiers !!!
Faites attention lors de l’écriture de vos
liens vers les fichiers: images, pages …
Conseil: Écrivez tous les noms en minuscule!
8
Copyright 2006 Philippe Phen - www.CoursHTML.tkLes COULEURS
• Il y a deux moyens pour représenter les couleurs
en HTML:
• Le premier: par leur nom (en anglais)
exemples: ( red , green , black , yellow )
• En utilisant ce principe, on peut représenter 256
différentes couleurs (amplement suffisant) en
utilisant des préfixes et suffixes du genre:
“deepskyblue” (Bleu ciel intense)
“mediumspringgreen” (Vert printemps moyen)
“darkslategray” (Gris adroise foncé)
“mediumorchid” (Orchidée moyen)
“blanchedalmond” (Amande blanchie)
Les COULEURS (suite)
Le second: par un code hexadécimal. En utilisant
un code hexadécimal, on peut définir plus de
16 777 216 différentes couleurs! (256 X 256 X 256)
• Voici un exemple de code héxadécimal:
#FF0000 = Rouge ,
#00FF00 = Vert ,
#0000FF = Bleu ,
• Le code hexadécimal est basé sur le principe du
mélange des 3 couleurs primaires; Rouge, Vert et
Bleu.
• Pour des explications complètes, allez sur le
site CoursHTML à la section Divers - Astuces
9L’insertion d’images
• Voici la balise de BASE pour afficher une image.
<IMG SRC=“image.jpg”>
• D’autres attributs peuvent y être ajoutés:
Nom et exemple Définit
SRC="image.jpg" L’adresse source de l’image
ALT="Mon image" Texte au passage du pointeur de
la souris
ALIGN="left" L’alignement
BORDER="0" La bordure en pixels
WIDTH="255" Largeur de l’image en pixels
HEIGHT="200" Hauteur de l’image en pixels
Exemple
Admettons que sur votre ordinateur, ce fichier-image se
nomme “chats.gif”. Cette image doit être placée dans le
même dossier que dans lequel se trouve la page Web.
La balise HTML sera donc:
<IMG src=“chats.gif” alt=“Mes chats” border=“0”>
10
Copyright 2006 Philippe Phen - www.CoursHTML.tk