Chapitre1 HTML - Cours 01

Chapitre 1 : Créer une interface utilisateur avec HTML
Leçon 01 : Les Concepts de base
I- Définitions :
1- Internet : est un réseau informatique étendu (réseau global mondial) Basé sur
plusieurs services comme : la messagerie la navigation internet le transfert de fichier …etc.
chaque service repose sur un protocole
Exemple
 Protocole HTTP : navigation de pages web dans votre navigateur

 Protocoles POP/IMAP/SMTP : envoi et réception d’e-mails
 Protocole BitTorrent : échange de fichiers pair à pair
 Protocole FTP : échange de fichiers
 Protocole IRC : messagerie instantanée
2- Le web : appelé aussi WWW (Le World Wide Web), est un système hypertexte
fonctionnant sur Internet qui permet de consulter, avec un navigateur, des pages accessibles
sur des sites. (Nombreuses pages interconnectées, passage de l’une à l’autre par des liens) Le
web repose sur architecture client / server
3- Un site web : est un ensemble de pages web liées entre elles par des liens hypertextes,
dont on peut y accéder par une adresse web appelée Url.
4- Un site web ou site internet englobe des textes et multimédia, il est hébergé sur
un serveur web, auquel on peut y accéder à travers le réseau internet ou intranet.
5- Une page web : peut être définie comme étant l’ensemble des documents html
structurés, stockés sur un serveur connecté au réseau mondial internet, il existe deux type de
page
6- Page web statique : Un site web statique est un site web dont le contenu est figé
C’est-à-dire que les internautes qui demandent la page au même moment reçoivent le même
contenu.
Enseignante : Mme MENAD

 Page web dynamique : est une page dans laquelle les informations générées sont à la
demande de l’utilisateur de la page. Ainsi, deux utilisateurs peuvent être simultanément sur la
même page web sans pour autant avoir les mêmes informations. Cela est possible grâce à la
base de données associée à la page dynamique.
 Le contenu d'une page web dynamique peut donc varier en fonction

d'informations (heure, nom de l'utilisateur, formulaire rempli par l'utilisateur,
etc.) qui ne sont connues qu'au moment de sa consultation.
 Cette page nécessite certains langages informatiques tels que : PHP, CGI, JSP,
ASP pour sa génération
 Architecture client-serveur 3 tiers
II- C’est quoi HTML (HyperText Markup Langage ) :HTML n’est pas un langage de
programmation c’est un Langage qui permet de créer et de concevoir des page web basé
sur les balises
1- Environnement de création et visualisation des pages web
Pour créer des pages web il existe plusieurs environnements comme suit :
- Blocnote ou TextEdit, si vous n’avez rien d’autre sous la main :

 Pas de coloration syntaxique
 Nécessite de connaître tout le langage
- Brackets, Atom, SublimeText, notpad++ et Komodo, visual studio
 Sont des Éditeurs spécialisés
 Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc
- Les éditeurs « WYSIWYG » What You See Is What You Get
 Permet de visualiser le rendu directement

 Exemple : Dreamweaver (payant), Blue Griffon (gratuit)
Pour visualiser les pages web on a besoin d’utiliser les navigateurs web comme suit :
- Google Chrome
- Mozilla Firefox
- Opera
- Safari
- Internet Explorer…etc.
1- Toutes les balises HTML doivent être entre le symbole supérieur et

inferieur < >
2- La majorité des balises ont une balise de début et une balise de fin
<balise_debut> </balise fin>
3- Il existe des balises qui contiennent une seule balise exemple <br/>
4- Toutes les balises HTML s’écrivent entre <html> </html>

2- Les Balises de structure du document HTML : il s’agit de 4 balises obligatoires qui

doivent toujours exister dans un fichier HTML
Les 4 Balises sont :
HTML Cette balise permet de dire que c’est un fichier html

HEAD Cette balise représente l’entête de la page ou on peut mètre les
informations de la page exemple : titre de page
TITLE Cette balise permet de préciser le titre de la page qui sera affiché par
la suite dans la barre de titre
BODY Cette balise représente le corps de la page qui va contenir toutes les
balises
Rmq : Dès que vous utiliserez les 4 balises vous devez enregistrer votre travail sous
l’extension .htm ou .html comme suit :

Remarque :
Lorsque votre site sera hébergé sur un serveur web, la page d’accueil de votre site devra
être nommée « index ». Vous pouvez considérer ce fichier comme le fichier principal de
votre site
3- Les attributs des balises :
La majorité des balises contiennent des attributs qui permettent d’améliorée la mise en
forme de la balise
Voici les attributs de la balise body
Les différents attributs les plus utilisés dans la balise <body>
bgcolor Cet attribut permet de changer la couleur de l’arrière-plan de la

page
dir
Cet attribut permet de déterminer le sens de lecture du texte à
partir de la droite Vers la gauche (dir= "ltr") ou le contraire
(dir= "rtl")
background Cet attribut permet de changer l’arrière-plan de la page en image

au lieu de la couleur
id
Cet attribut permet d'appeler un fichier CSS Soit à partir du
même fichier, soit à partir d'un fichier externe Pour exécuter les
commandes CSS sur la balise
class
Cet attribut permet d'appeler un fichier CSS Soit à partir du
même fichier, soit à partir d'un fichier externe Pour exécuter les
commandes CSS sur la balise
text
Définir la couleur de base du texte

link
Spécifie la couleur du lien ou du lien hypertexte
vlink
Déterminer la couleur du lien ou du lien hypertexte qui est visité
alink
Spécifie la couleur du lien ou du lien hypertexte lorsqu’on clique
sur elle
Exemple : dans cette balise on a changé la couleur de la page en bleu
4- Les commentaires sous Html : un commentaire sert à décrire une balise dans la le
fichier HTML.
Lors de l’exécution, le commentaire n’a aucun effet
La syntaxe est comme suit : < ! --le commentaire -->

Questions sur La leçon 01 :
1- C’est quoi html ?

2- Quels sont les balises de la structure de base d’un fichier html ? avec explication
de chaque balise
3- Quel est l’extension d’un fichier HTML ?
4- Comment peut-on changé la couleur de l’arrière-plan d’une page du blanc vers une
autre couleur ?
5- Comment appel-t-on les éléments ajouté dans une balise ? donner un exemple
6- Donner la syntaxe d’un commentaire

Chapitre1 HTML - Cours 01

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

Chapitre1 HTML - Cours 01

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 1 : Créer une interface utilisateur avec HTML

Leçon 01 : Les Concepts de base

 Protocole HTTP : navigation de pages web dans votre navigateur

Enseignante : Mme MENAD

 Le contenu d'une page web dynamique peut donc varier en fonction

 Architecture client-serveur 3 tiers

- Blocnote ou TextEdit, si vous n’avez rien d’autre sous la main :

Enseignante : Mme MENAD

 Exemple : Dreamweaver (payant), Blue Griffon (gratuit)

1- Toutes les balises HTML doivent être entre le symbole supérieur et

Enseignante : Mme MENAD

2- Les Balises de structure du document HTML : il s’agit de 4 balises obligatoires qui

Les 4 Balises sont :

HTML Cette balise permet de dire que c’est un fichier html

Enseignante : Mme MENAD

3- Les attributs des balises :

Voici les attributs de la balise body

Les différents attributs les plus utilisés dans la balise <body>

bgcolor Cet attribut permet de changer la couleur de l’arrière-plan de la

partir de la droite Vers la gauche (dir= "ltr") ou le contraire

background Cet attribut permet de changer l’arrière-plan de la page en image

commandes CSS sur la balise

commandes CSS sur la balise

Enseignante : Mme MENAD

Exemple : dans cette balise on a changé la couleur de la page en bleu

La syntaxe est comme suit : < ! --le commentaire -->

Enseignante : Mme MENAD

Questions sur La leçon 01 :

1- C’est quoi html ?

Enseignante : Mme MENAD

Vous aimerez peut-être aussi