Mon Premier Site Web

Mon premier site Web
Structure d'un fichier HTML
 Le navigateur lit le code HTML de haut en bas et de gauche à droite.

 Le texte entier est englobé par les balises <html> et </html>.
 L'intérieur se compose des deux parties: de l'en-tête (<head> et </head>)
et du corps (<body> et </body>)
 L'en-tête contient les informations sur la page (auteur, langue, mots-clés,
encodage, etc.)
 Le corps contient le texte qui sera affiché par le navigateur.
 structure de base :
Code HTML :
<html>
<head>
</head>
<body>
Ma première page !
</body>
</html>
Dans le navigateur :
Ma première page !
Ce qu’il faut savoir
 Les sauts de ligne, les caractères de tabulation, les espaces multiples sont
ignorés par le navigateur.
 Le code qui est mal présenté (aucune indentation) est difficile à lire et à
modifier.
 Je vous suggère d'indenter votre code et utiliser deux espaces comme
une unité d'indentation.
Rappel
Rappel balise paire et balise impaire

 balise <br> - un saut de ligne ("line break"),
élément avec contenu vide :
Code HTML :
Une ligne<br/>qui a été coupée.
Une ligne
qui a été coupée.
 balise <hr> - une ligne horizontale

("horizontal rule"), un autre élément avec
contenu vide :
Code HTML :
Une ligne<hr/>et une autre ligne.
Une ligne
et une autre ligne.
 balises <ul> - liste non ordonnée ("unordered list"),

 <ol> - liste ordonnée ("ordered list") et
 <li> - élément de liste ("list item"):
Code HTML :
Une liste non ordonnée composée de deux éléments :

<ul>
<li>premier élément</li>
<li>deuxième élément</li>
</ul>
Une liste ordonnée composée de trois éléments :

<ol>
<li>premier élément</li>
<li>deuxième élément</li>
<li>troisième élément</li>
</ol>
Une liste non ordonnée composée de deux éléments :
o premier élément
o deuxième élément
Une liste ordonnée composée de trois éléments :
3. premier élément
4. deuxième élément
5. troisième élément
 Les éléments peuvent être imbriqués.

Code HTML :
Mes intérêts :
<ul>
<li>sports
<ol>
<li>golf</li>
<li>hockey</li>
</ol>
</li>
<li>voyages
<ul>
<li>sites archéologiques</li>
<li>musées</li>
</ul>
</li>
<li>photos
<ol>
<li>montagnes</li>
<li>oiseaux</li>
<li>nature</li>
</ol>
</li>
</ul>
Mes intérêts :
o sports
1. golf
2. hockey
o voyages
 sites archéologiques
 musées
o photos
0. montagnes
1. oiseaux
2. nature
balises de titre : <h1>, <h2>, <h3>, <h4>, <h5>,

<h6> ("heading")
Code HTML :
<h1>C'est un titre.</h1>
<h2>C'est un sous-titre.</h2>
<h3>C'est un sous-sous-titre.</h3>
Attributs
 Les attributs fournissent au navigateur des
informations supplémentaires concernant la
presentation
 Ils sont placés toujours au sein de la balise

ouvrante :
<NomBalise NomAttribut1="ValeurAttribut1"
NomAttribut2="ValeurAttribut2" NomAttribut3>
 La spécification officielle de la syntaxe HTML

stipule, pour chaque balise, quels attributs sont
autorisés et quelles valeurs ces attributs peuvent
prendre.
 Exemples :
Code HTML :
<h2 style="color:green">Exemple</h2>
<p style="color:black; background-color:red">
Texte en rouge.
</p>
Exemple
Texte en rouge.
Liens
La balise <a> - ancre ("anchor)

 L'élément <a> avec l'attribut "href" ("hypertext
reference") est utilisé pour créer un lien vers un
document sur Internet ou vers un document du même
site Web ou vers un élément à l'intérieur d'un
document HTML.
 La valeur de l'attribut "href" est un URI (Uniform
Resource Identifier). Son rôle est d'identifier une
ressource Web (document html, pdf, image, son,
etc.).
Exemples
 Un lien vers un fichier externe :
Code HTML :
Visitez <a href="http://w3.uqo.ca/dii/">nous</a> !
Visitez nous !
 Un lien vers une page du même site Web:
Code HTML :
Visitez <a href=".../index.html">la page Web du
cours</a> !
Visitez la page Web du cours !
 Un lien vers un élément à l'intérieur d'un document
HTML :
Code HTML :
Consultez <a
href="http://fr.wikipedia.org/wiki/Hyperlien#Source_et_de
stination">Wikipedia</a> pour savoir la source et la
destination d'un hyperlien !
Consultez Wikipedia pour savoir la source et la
destination d'un hyperlien !
 Un lien vers un élément de la même page :
Code HTML :
Allez <a href="#ici">une ligne plus loin</a> !
<p id="ici">Ce n'est pas très loin.</p>
Allez une ligne plus loin !
Ce n'est pas très loin.

 Un lien vers une adresse courriel :
Code HTML :
<a href="mailto:d_info@w3.uqo.ca">Envoyez</a>
un courriel au webmestre du <a
href="http://w3.uqo.ca/dii">Département
d'informatique et d'ingénierie</a>.
Envoyez un courriel au webmestre du Département
d'informatique et d'ingénierie.
Comment définir la fenêtre cible pour les liens?

 Par défaut, les liens sont ouverts dans la fenêtre
courante.
 Grâce à l'attribut "target" (cible) de la balise <a> on
peut définir une fenêtre cible pour le lien.
Les valeurs possibles de cet attribut sont
o "_blank" pour ouvrir le lien dans une nouvelle
fenêtre
o "_self" pour ouvrir le lien dans la fenêtre
courante
o un nom quelconque pour ouvrir le lien dans une
fenêtre portant ce nom

Remarque
 Les noms de fichiers sont sensibles à la casse.
 Exemple: a.pdf est différent de a.PDF et image.GIF
est différent de image.gif
Images
Types de fichier d'image
 GIF (Graphics Interchange Format)

les images GIF se composent seulement de 256 couleurs
utilisées pour les graphiques et les dessins
la taille plus petite
le chargement plus rapide
 JPG / JPEG (Joint Photographic Experts Group)
contiennent des millions de couleurs
utilisées pour les photographies
 PNG (Portable Network Graphics)
une alternative aux formats JPEG et GIF
des millions de couleurs
une compression efficace
Taille d'images
 Les dimensions sont définies en pixels.

 Un pixel est le point minimal adressable par le contrôleur vidéo.
 À chaque pixel est associée une couleur, décomposée en trois couleurs
primaires (en pourcentage ou avec une valeur sur 255),
Source : Wikipedia
Exemple: rgb(0, 0, 255) ou rgb(0%, 0%, 100%) pour le bleu et

rgb(255, 255, 0) ou rgb(100%, 100%, 0%) pour le jaune.
 La taille de chaque pixel est déterminée par la résolution de

l'écran et la taille de la diagonale.
Exemples :
résolution : 1024x768, diagonale : 19", taille de pixel : 0.377mm
Comment créer une image ?
 utiliser des images prises avec une caméra numérique

 se servir d'un programme d'édition d'images
o PhotoShop
principalement utilisé pour le traitement de photographies
numériques, mais sert également à la création d'images.
o Irfan View, excellent et gratuit
o Paint Shop Pro de Corel
o SnapaShot (captures d'écran), gratuit
 télécharger des images de l'Internet
Comment insérer une image dans une page Web ?
 On utilise la balise <img> avec l'attribut "src"

 exemples :
o Image locale
Code HTML :
<img src="gif/next.gif"/>
o Image externe
Code HTML :
<img src="http://w3.uqo.ca/dii/img/uqo/t_ext05.jpg"/>
o Image étant un lien
Code HTML :
<a href="http://www.uqo.ca/">
<img
src="http://w3.uqo.ca/dii/img/uqo/t_ext05
.jpg"/>
</a>
 Attributs de la balise <img>
o src (obligatoire) : l'adresse de l'image
o alt (obligatoire) : un texte alternatif si l'image n'est pas
disponible.
Utilisé aussi par les visiteurs non-voyants (le chargement des
images peut être bloqué; Firefox -> Outils -> Options ->
Contenu; IE -> Outils -> options Internet -> Avancé ->
Multimédia)
o title - description de l'image; affichée lorsque le visiteur
place le curseur sur l'image
o width et height - utilisés pour définir la largeur et la hauteur
de l'image en pixels.
Exemple : Code HTML :
<img src="http://w3.uqo.ca/dii/img/uqo/t_ext05.jpg"
width="60" heigth="60" title="Pavillon Alexandre-Taché"
alt="UQO" />
Si on ne définit pas sa largeur et sa hauteur, l'image sera affichée dans sa

dimension réelle.
 Remarque : N'utilisez pas les attributs width et height pour réduire la dimension de l'image.
Faites-le avec un logiciel d'édition d'images. Le navigateur doit charger l'image entière.

Mon Premier Site Web

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Mon Premier Site Web

Transféré par

Droits d'auteur :

Formats disponibles

Mon premier site Web

Structure d'un fichier HTML

 Le navigateur lit le code HTML de haut en bas et de gauche à droite.

Ce qu’il faut savoir

Rappel balise paire et balise impaire

Une ligne<br/>qui a été coupée.

 balise <hr> - une ligne horizontale

Une ligne<hr/>et une autre ligne.

et une autre ligne.

 balises <ul> - liste non ordonnée ("unordered list"),

Une liste non ordonnée composée de deux éléments :

Une liste ordonnée composée de trois éléments :

Une liste non ordonnée composée de deux éléments :

Une liste ordonnée composée de trois éléments :

 Les éléments peuvent être imbriqués.

balises de titre : <h1>, <h2>, <h3>, <h4>, <h5>,

 Ils sont placés toujours au sein de la balise

 La spécification officielle de la syntaxe HTML

La balise <a> - ancre ("anchor)

Ce n'est pas très loin.

Comment définir la fenêtre cible pour les liens?

fenêtre portant ce nom

Types de fichier d'image

 GIF (Graphics Interchange Format)

 Les dimensions sont définies en pixels.

Exemple: rgb(0, 0, 255) ou rgb(0%, 0%, 100%) pour le bleu et

 La taille de chaque pixel est déterminée par la résolution de

Comment créer une image ?

 utiliser des images prises avec une caméra numérique

Comment insérer une image dans une page Web ?

 On utilise la balise <img> avec l'attribut "src"

o Image étant un lien

Exemple : Code HTML :

Si on ne définit pas sa largeur et sa hauteur, l'image sera affichée dans sa

Vous aimerez peut-être aussi