Cours

Un moi 10 jours pour devenir expert en Développement web avec New Dreams Services
CHAPITRE I GENERALITES SUR LE HTML
Objectifs : Connaitre la structure de base du html et les éléments qui la

Comporte
Prérequis : Savoir modifier l’extension d’un fichier texte lors de son
Enregistrement
INTRODUCTION
Le HyperText Markup Langage, généralement abrégé HTML ou,

dans sa dernière version, HTML 5, est le langage de balisage conçu pour
représenter les pages web. Créer en Aout 1991 par Tim BERNERS-LEE, le
HTML est un langage interprété dont ne nécessite que d’un éditeur de
texte (Notepad ++, sublime text, note book…) et d un navigateur (opéra,
chrome, internet explora …). L’éditeur de texte nous permettra d’écrire le
code tandis que le navigateur sera utilisé pour interpréter le code.
I-CREATION D’UN FICHIER HTML
La création d’une page html commence tout d’abord par la création

d’un fichier texte portant l’extension .html. Pour le faire il suffit d’ouvrir
un éditeur de texte, ne rien écrire et enregistrer. Lors de l’enregistrement,
effacer l’extension du fichier et le remplacer par .html. Ensuite ouvrir le
fichier que vous venez de créer avec votre éditeur et commencer à coder
II- STRUCTURE D’UN CODE HTML
Un code html est caractérisé par une tête et un corps mais tous cela
précèdé par l’expression < ! DOCTYPE html> qui va permettre au serveur
Google de savoir que c’est du html. La structure du html est la suivante
1
Blanchard FOTSING: Formateur en développement web Tel: (+237) 656638243
< ! DOCTYPE html >
<Html>
<Head>
Contenu de l’entête
</Head>
<Body>
Contenu de la page
</body>
</html>
Exercice Application
Créer une page web dans laquelle vous afficherez le texte suivant en
remplaçant les pointillés par votre nom : je m’appelle …. Je suis
apprenant(e) en Développement Web à New Dreams services
2
CHAPITRE II : LES BALISES
Objectifs : Connaitre les balises de bases utilisées en html

Prérequis : Savoir saisir du texte au clavier et maitriser la position des
symboles suivants sur le clavier : <,>, /, !
INTRODUCTION
Le HTML est language de balisage. Un language de balisage est

un language qui utilise des éléments appelés balises. Une balise est un
bout de code utilisé pour structurer et ordonner les éléments d’une page
html.
Formater un texte en HTML consiste a apporté des modifier la
taille,la police et la couleur de ce texte .Celui-ci se fait également a l aide
des balises
La structure d’une balise est la suivante
<Nom de la balise> contenu de la balise </nom de la balise>
Cependant il existe des balises n’ayant pas de porte de fermeture. La

syntaxe est la suivante
<Nom de la balise>contenu de la balise
Les balises utiliser pour le formatage de texte et la mise en forme d
une page HTML sont :
1. <html> …. </html> : Cette balise permet de définir le point de

départ de notre code html
2. <Head> …. </Head> : Elle est permet d’éditer l’entête du code. La
balise la plus utilisé l’entête est la balise <title> …. < /title > permettant de
donner un nom à notre page web
3
3. <body> …. </body> : Cette balise permet de montrer au

navigateur les éléments qu’elle devra afficher à l’écran ; Le navigateur
n’affiche que le contenu du corps du code
4.<h1 >…. <h1> : Cette balise est utilisée pour nommer des titres
dans un code
5.< ! -- ….. -- : cette balise est utilisée pour écrire un commentaire
dans un code
6. <p> …. </p> : Elle est utilisée pour des paragraphes
7.<Br> : Elle permet un saut à la ligne dans une phrase ou dans un
texte. Si on le met plusieurs fois au même endroit alors elle fait plusieurs
sauts à la ligne
8. <section>… </section> : Elle permet de créer des sections sur
une page. Pour nommer une section on utilise la syntaxe suivante
<Section id= ‘’nom de la section’’> …. </section>
9. <header> …. </header> : pour éditer l’entête d’un code
10. <footer> …. </footer> : pour éditer les pieds de page
11. <nav> …. </nav> : pour éditer les menus
12. <strong>....</strong>: Permet de mettre un texte ,un
paragraphe ou un mot en gras .Même la balise <b>..</b> permet aussi
de mettre un texte en gras
13. <i>....</i>: Permet de mettre un texte en Italie
14. <font color ="code de la couleurs ">....</font>: Permet de
mettre la couleur de la police d un texte
15. <U>...<U>: Permet de souligner un texte
16. <S>...</S> : Permet de barré du texte
17. <TT>...<TT> : permet d écrire un texte avec une fonte a
espacement constant
18. <font size ="nombre d unité d affichage">...</font
size="nombre d unité d affichage>: Permet de modifier la police d un
texte
4
19. <center >....</center>: Permet de centrer le texte sur la page

20. <div>...</div>: Permet de créer de petits fenêtres ou carreaux
dans une page html
Exercices d application
5
INSERTION DES LIENS, IMAGES

ET ETABLIR UNE LISTE DANS UNE
CHAPITRE III.
PAGE HTML
Objectif : Connaitre lié des pages html, des sections d’une page html à
l’aide
des liens, insérer des images et établir une liste dans une page
html
Prérequis : Savoir créer et donner des noms à des sections sur une page
html
1.INSERTION DES LIENS
Un lien est un text dans lequel on a intégré l’adresse d’une page

web, d’un site ou d’une section de notre page. Un lien est composé de 02
parties
- Le texte qui doit décrire le lien
- L’adresse de la destination ou doit aller l’utilisateur en cliquant
dessus
Ainsi un lien a la syntaxe suivante :
<a href = ‘’adresse de destination’’>text qui décrit le lien <a/>
Remarque : pour ouvrir un lien dans un autre onglet, on utilise la syntaxe
suivante :
<a href = ‘’adresse de destination’’ target=’’blanc’’>text qui décrit le lien
<a/>
2.INSERTION DES IMAGES
6
Pour insérer une image sur une page html, on utilise la balise
<img scr=’’nom image.extention’’>
Si l’on veut que l’image soit considérée comme un lien alors on utilise la
syntaxe suivante
<a href=’’adresse destination ‘’><img scr=’’nom de l’image.extention’’>
</a>
3.LES LISTES
En html il existe 2 façon d’établir une liste on a :

-les listes ordonnées donc la syntaxe est la suivante
<ol>
<li> élément 1 de la liste </li>
<li> élément 2 de la liste </li>
…..
<li> élément n de la liste </li>
</ol>
- Les listes n’ayant pas d’ordre donc la syntaxe est la suivante
<ul>
<li> élément de la liste </li>
…..
</ul>
7
CHAPITRE L’ATTRIBUT IV :
STYLE
Objectif : faire la mise en forme d’une page html en utilisant l’Attribut

style Prérequis : Maitriser les savoir utiliser les balises de base du html
INTRODUCTION
Bien qu’étant du CSS l’attribut style comme son nom l’indique est
permet de donner du style a un texte html. C’est l’une des façons de
coder du CSS. La différence entre une balise et un attribut est qu’un
attribut est insérer dans une balise
Exemple : soit le code suivant
<a href= ‘’adresse de destination’’> texte qui décrire le lien </a>
Dans ce code la balise est :
<a> texte qui décrire le lien </a>
Tandis que l’attribut est :
Href= ‘’adresse de destination’’
1.COULEUR
Pour modifier la couleur d’un paragraphe on utilise le
8

Cours

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

Cours

Transféré par

Droits d'auteur :

Formats disponibles

Un moi 10 jours pour devenir expert en Développement web avec New Dreams Services

CHAPITRE I GENERALITES SUR LE HTML

Objectifs : Connaitre la structure de base du html et les éléments qui la

Le HyperText Markup Langage, généralement abrégé HTML ou,

I-CREATION D’UN FICHIER HTML

La création d’une page html commence tout d’abord par la création

II- STRUCTURE D’UN CODE HTML

< ! DOCTYPE html >

CHAPITRE II : LES BALISES

Objectifs : Connaitre les balises de bases utilisées en html

Le HTML est language de balisage. Un language de balisage est

Cependant il existe des balises n’ayant pas de porte de fermeture. La

1. <html> …. </html> : Cette balise permet de définir le point de

3. <body> …. </body> : Cette balise permet de montrer au

19. <center >....</center>: Permet de centrer le texte sur la page

INSERTION DES LIENS, IMAGES

1.INSERTION DES LIENS

Un lien est un text dans lequel on a intégré l’adresse d’une page

2.INSERTION DES IMAGES

En html il existe 2 façon d’établir une liste on a :

Objectif : faire la mise en forme d’une page html en utilisant l’Attribut

Vous aimerez peut-être aussi