CONCEPTION ET DÉVELOPPEMENT WEB

Licence en informatique

Le Web, une abréviation du World Wide Web (WWW), est un espace d'information où
documents et autres ressources web identifiées par des Uniform Resource Locators (URLs),
interconnectées par des liens hypertextes, et accessibles via Internet sont situées. Les ressources Web comprennent
sites web et applications web. Un site web est une collection de pages web liées, y compris
contenu multimédia, généralement identifié par un nom de domaine commun, et publié sur au moins
un serveur web. Des exemples notables sont [Link], [Link] et [Link]. Un Web
L'application (Web app) est un programme d'application ou un logiciel qui est stocké sur un serveur distant et
livré via Internet à travers une interface de navigateur. Le design et le développement web sont donc
la discipline concernée par la conception et le développement de ressources web, y compris
sites web et logiciels web. Dans ce cours, nous considérons la conception et le développement de sites web tout en
ACSC 327 : Programmation et administration web, nous passerons au développement web
applications.
Un site web est une combinaison de différentes pages web liées entre elles d'une certaine manière selon
au bon vouloir du designer et au besoin organisationnel servi par le même serveur de noms de domaine. Le
Le site web développé est préparé et maintenu par une personne, un groupe ou une organisation. Le site web est
généralement écrit dans des technologies telles que HTML, XHTML et DHTML et est hébergé sur un seul
serveur web pour son accès à travers le réseau. Chaque site web se voit attribuer un uniforme unique
localisateur de ressource (URL) et accessible par le protocole de transfert hypertexte (HTTP) responsable
pour rendre la communication possible entre la machine cliente et le serveur par l'application de
navigateurs différents. Les sites Web proposent des ressources hypermédia, un système permettant le stockage et
accès à du texte, des graphiques, de l'audio et de la vidéo dans des pages soi-disant liées les unes aux autres de manière à ce que
intègre ces différents éléments médiatiques. Lorsqu'un utilisateur clique sur un mot ou une image mise en évidence
(icône), le navigateur convertit le clic en commandes informatiques et apporte la nouvelle demande.
informations sous forme de texte, de photographie, de graphique, de chanson ou de clip vidéo sur l'ordinateur de l'utilisateur.

La conception web fait référence à la fois à la partie esthétique du site web et à sa convivialité.
considère le choix des couleurs, des images, de la mise en page et de l'apparence générale du site web en ce qui concerne son
but. Un designer web, par exemple, considérera un site de fête et choisira des couleurs vives.
tels que le jaune et l'orange plutôt que le noir et le gris. Les développeurs web, quant à eux, prennent un
conception de site web et en fait créer un site web fonctionnel à partir de cela. Les développeurs web utilisent HTML,
CSS, JavaScript, PHP et d'autres langages de programmation pour donner vie aux fichiers de design.
Les développeurs web sont ceux qui transforment les designs en un site web en ligne. Les développeurs web utilisent le web.
langages et outils logiciels pour développer la conception et la fonctionnalité d'un site Web. Remarquez que
les développeurs web sont en outre divisés en deux sous-catégories : les développeurs front-end et les développeurs back-end
développeurs.
Un développeur front-end est celui qui construit l'interface et fournit la mise en page comme le
interaction entre le back-end du site web et l'utilisateur. Les développeurs front-end utilisent trois
langues principales ; Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), et

Page 1 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

JavaScript (JS). Avec ces langages, un développeur est capable de créer un site web à part entière. De
la mise en page principale, à l'insertion d'images, à l'application de différents types de typographie et de police
familles, implémentation d'animations, le flux de différentes pages, interfaces de formulaire, et plus encore.

Les développeurs back-end sont semblables aux programmeurs web et ce sont eux qui contrôlent le serveur.
données et demandes. En général, un site Web nécessite des services back-end s'il contient des données dynamiques. Cela
signifie, par exemple, des utilisateurs soumettant un formulaire avec des données personnelles (comme la création d'un compte), ou
sauvegarder un article pour votre page de blog. En général, si le site web nécessite que des données soient sauvegardées, et
rendre cela accessible à une étape ultérieure, cela signifie qu'il aurait également besoin d'une connexion à une base de données.
Les connexions de base de données sont rendues possibles grâce à une connexion directe depuis le serveur lui-même. Ainsi, un
Le développeur back-end utilise alors des langages Serveur tels que PHP pour des requêtes de base de données en utilisant des langages.
comme SQL ou MySQL. Les développeurs backend dans notre cas sont des programmeurs qui créent des sites web
applications.
Nous considérons trois technologies utilisées dans le développement front-end pour la conception web et
développement. Ceux-ci sont HTML, CSS et JavaScript.

HTML

HTML (Langage de balisage hypertexte) est la langue pour construire des sites web. HTML n'est pas un
langage de programmation mais un langage de balisage. HTML a été créé par Tim Berners-Lee,
Robert Cailliau et d'autres ont commencé en 1989. Cela signifie Langage de Marquage Hypertexte.
L'hypertexte signifie que le document contient des liens qui permettent au lecteur de sauter vers d'autres endroits dans
le document ou à un autre document complètement différent. La dernière version est connue sous le nom de HTML5.
Un langage de balisage est une manière dont les ordinateurs communiquent entre eux pour contrôler la façon dont le texte est traité.
et présenté. Pour cela, HTML utilise deux choses : des balises et des attributs.

Les balises et les attributs sont à la base du HTML. Les balises sont utilisées pour marquer le début d'un HTML.
élément et ils sont généralement encadrés par des crochets angulaires. Un exemple de balise est : <h1>. La plupart des balises
doit être ouvert <h1> et fermé </h1> pour fonctionner.

Les attributs contiennent des informations supplémentaires. Les attributs prennent la forme d'une balise d'ouverture.
et des informations supplémentaires sont placées à l'intérieur. Un exemple d'attribut est :

<img src="[Link]" alt="Une photo de mon chien.">

Dans ce cas, la source de l'image (src) et le texte alternatif (alt) sont des attributs de la balise <img>.

Souviens-toi :

La grande majorité des balises doivent être ouvertes (<tag>) et fermées (</tag>) avec l'élément
informations telles qu'un titre ou un texte reposant entre les balises.
Lors de l'utilisation de plusieurs balises, les balises doivent être fermées dans l'ordre dans lequel elles ont été ouvertes.
ouvert. Par exemple :

Page 2 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

<strong><em>C'est vraiment important !</em></strong>

Éditeurs HTML

Pour créer un document HTML, vous avez besoin d'un éditeur. Des exemples d'éditeurs sont Notepad, Sublime Text.
3, Notepad++, Komodo Edit et Macromedia Dreamweaver.

Structure de base d'un document HTML

<!DOCTYPE html>
<html>
<tête>
Le titre de la page Web
</ tête>
<body>
Entrez le contenu de la page Web ici
</body>
</html>

Une explication de la structure suit :

<! DOCTYPE...>
Cette balise définit le type de document et la version HTML. La balise de déclaration <! DOCTYPE> est
utilisé par le navigateur web pour comprendre la version de l'HTML utilisée dans le document. Actuel
la version de HTML est 5 et elle utilise la déclaration suivante −
<! DOCTYPE html>

<html>
Cette balise englobe le document HTML complet et se compose principalement de l'en-tête du document.
qui est représenté par <head>...</head> et le corps du document qui est représenté par
<body>...</body> étiquettes.

<tête>
Cette balise représente l'en-tête du document qui peut contenir d'autres balises HTML comme <title>, <link>
etc.
title
La balise <title> est utilisée à l'intérieur de la balise <head> pour mentionner le titre du document.

<corps>
Cette balise représente le corps du document qui contient d'autres balises HTML comme <h1>, <div>, <p>
etc.
Remarque : Il existe de nombreuses autres balises en fonction de la tâche à accomplir, et nous les examinerons.
certains d'entre eux dans les sections qui suivent.

Page 3 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

Exemple
<!DOCTYPE html>
<html>
<tête>
Ma Première Page Web
</tête>
<corps>
<h1>Ceci est un en-tête</h1>
<p>Bonjour le monde !</p>
</body>
</html>

Étiquettes de base

Balise de titre

Tout document commence par un titre. Vous pouvez utiliser différentes tailles pour vos titres. HTML aussi
a six niveaux de titres, qui utilisent les éléments <h1>, <h2>, <h3>, <h4>, <h5>, et <h6>.
Lors de l'affichage d'un en-tête, le navigateur ajoute une ligne avant et une ligne après cet en-tête.

<!DOCTYPE html>
<html>
<tête>
Exemple de titre
</tête>
<corps>
<h1>Ceci est le titre 1</h1>
<h2>Ceci est le titre 2</h2>
<h3>Ceci est le titre 3</h3>
<h4>Ceci est le titre 4</h4>
<h5>Ceci est le titre 5</h5>
<h6>Ceci est le titre 6</h6>
</body>
</html>
Balise de paragraphe

Page 4 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

La balise <p> offre un moyen de structurer votre texte en différents paragraphes. Chaque paragraphe de texte
devrait aller entre une balise d'ouverture <p> et une balise de fermeture </p>

<!DOCTYPE html>
<html>
<tête>
Exemple de paragraphe
</head>
<corps>
<p>Voici un premier paragraphe de texte.</p>
<p>Voici un deuxième paragraphe de texte.</p>
<p>Voici un troisième paragraphe de texte.</p>
</body>
</html>
Balise de saut de ligne

Chaque fois que vous utilisez l'élément <br />, tout ce qui le suit commence sur la ligne suivante. Cette balise est
un exemple d'un élément vide, où vous n'avez pas besoin de balises d'ouverture et de fermeture, car il y a
rien pour les séparer.
La balise <br /> a un espace entre les caractères br et le slash. Si vous omettez cet espace,
les anciens navigateurs auront du mal à rendre le saut de ligne, tandis que si vous oubliez la barre oblique
le caractère et utilisez simplement <br> ce n'est pas valide en XHTML.

<tête>
Exemple de saut de ligne
</tête>
<corps>
<p>Bonjour<br />
Ceci est un devoir HTML.<br />
HTML nous permet de créer des sites web<br />

J'aime écrire du contenu HTML</p>

</corps>
</html>
Lignes Horizontales

Page 5 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

Les lignes horizontales sont utilisées pour diviser visuellement les sections d'un document. La balise <hr> crée une ligne
de la position actuelle dans le document jusqu'à la marge droite et coupe la ligne en conséquence.
Par exemple, vous voudrez peut-être ajouter une ligne entre deux paragraphes.

<!DOCTYPE html>
<html>
<tête>
Exemple de ligne horizontale
</tête>
<corps>
<p>Ceci est le premier paragraphe et doit être en haut</p>

<hr />
<p>Ceci est le paragraphe deux et devrait être en bas</p>

</body>
Espace insécable
Dans les cas où vous ne souhaitez pas que le navigateur du client casse le texte, vous devez utiliser un non-séparable
entité d'espace &nbsp; au lieu d'un espace normal.

<!DOCTYPE html>
<html>
<tête>
Exemple d'espaces insécables
</tête>
<corps>
<p>HTML est un environnement de développement web plutôt merveilleux</p>

</body>
</html>
Police
<!DOCTYPE html>
<html>
<tête>

Page 6 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 Mise en forme de la police
</tête>
<body>
<font color="#993300">Affichage des couleurs de police</font><br />

<font size="12">Taille de police 12</font><br />

<font size="+6">Police qui est six fois plus haute que la taille de police actuelle</font><br />

<font size="-3">Police qui est trois fois plus petite que la taille de police actuelle</font><br />

<font face="Times New Roman, Times, serif">Police de caractères</font><br />

</body>
</html>

<!DOCTYPE html>
<html>
<tête>
Définir la couleur de la police de base
</tête>
<corps>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>C'est la police par défaut de la page.</p>

<h2>Exemple de l'élément &lt;basefont&gt;</h2>

<p><font size = "+2" color = "darkgray">
Ceci est un texte gris foncé avec deux tailles de plus

</p>
<p><font face = "courier" size = "-1" color = "#000000">
C'est une police de caractère Courier, d'une taille plus petite et de couleur noire.

</font>
</p>

Page 7 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 </body>
</html>
Mise en forme de police

<!DOCTYPE html>
<html>
<tête>
Formatage de la police
</tête>
<body>
<b>Texte en gras</b><br />
<i>Texte en italique</i><br />

<u>Texte souligné</u><br />

2^ndnd<br />
h₂0<br />
<strike>texte barré</strike><br />
<big>Texte qui est une taille plus grande que celui qui l'entoure</big><br />

<small>Texte d'une taille inférieure à celle qui l'entoure</small><br />

Ci-dessous se trouve un trait horizontal<br />

<hr />
</corps>
</html>

Listes
Il existe trois types de listes en HTML :

i. liste non ordonnée (puces) — utilisée pour regrouper un ensemble d'éléments connexes sans ordre particulier.
ii. liste ordonnée (numérotation) — utilisée pour regrouper un ensemble d'éléments connexes dans un ordre spécifique
iii. liste de descriptions - utilisée pour afficher des paires nom/valeur comme des termes et des définitions

Liste Non Ordonnée

Page 8 sur 68 CONCEPTION ET DÉVELOPPEMENT WEB

Une liste non ordonnée est une collection d'éléments liés qui n'ont pas d'ordre ou de séquence particulière. Cette liste
est créé en utilisant la balise HTML <ul>. Chaque élément de la liste est marqué par un point.

Vous pouvez utiliser l'attribut type pour la balise <ul> afin de spécifier le type de puce que vous souhaitez. Par défaut, c'est une
disc. Voici les options possibles -
<ul type="carré">
<ul type="disc">
<ul type = "circle">
Liste Ordonnée
Si vous devez mettre vos articles dans une liste numérotée au lieu d'une liste à puces, alors HTML ordonné
Une liste sera utilisée. Cette liste est créée en utilisant la balise <ol>. La numérotation commence à un et est
incrémenté d'un pour chaque élément de liste ordonnée successif étiqueté avec <li>.
Vous pouvez utiliser l'attribut type pour la balise <ol> afin de spécifier le type de numérotation que vous souhaitez. Par défaut, c'est
un nombre. Voici les options possibles −
<ol type = "1"> - Nombres par défaut.
<ol type="I"> - Nombres en lettres majuscules.

<ol type = "i"> - Chiffres en minuscules.

<ol type = "A"> - Lettres majuscules.
<ol type="a"> - Lettres minuscules.
Vous pouvez utiliser l'attribut start pour la balise <ol> afin de spécifier le point de départ de la numérotation dont vous avez besoin.

Voici les options possibles -

<ol type="1" start="4"> - Les numéraux commencent par 4.
<ol type = "I" start = "4"> - Les numéraux commencent par IV.

<ol type = "i" start = "4"> - Les chiffres commencent par iv.

<ol type = "a" start = "4"> - Les lettres commencent par d.

<ol type = "A" start = "4"> - Lettres commençant par D.

Liste de définitions

HTML prend en charge un style de liste appelé listes de définitions où les entrées sont répertoriées comme dans un
dictionnaire ou encyclopédie. La liste des définitions est le moyen idéal de présenter un glossaire, une liste de termes,
ou autre liste de noms/valeurs.

La liste de définition utilise les trois balises suivantes.

<dl> − Définit le début de la liste

Page 9 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

− Un terme
<dd> − Définition du terme

</dl> − Définit la fin de la liste

Exemple
<html>
<tête>
Listes en HTML
</tête>
<body>
<ul type="carré">
<li>pain</li>
<li>grains de café</li>
<li>lait</li>
<li>beurre</li>
</ul>
<ol type="i" start="5">
<li>Rassembler les ingrédients</li>

<li>Mélanger les ingrédients ensemble</li>

<li>Placer les ingrédients dans un plat de cuisson</li>

<li>Cuire au four pendant une heure</li>

<li>Retirer du four</li>
<li>Laisser reposer pendant dix minutes</li>

<li>Servir</li>
</ol>
<dl>
<dt>ACSC 226</dt>
<dd>Conception et développement Web</dd>

Page 10 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 <dt>Nom</dt>
<dd>Valeur</dd>
<dt>COSC 103</dt>
<dd>Introduction aux applications informatiques</dd>

</dl>
</body>
</html>
Liens hypertextes
Une page web peut contenir divers liens qui vous emmènent directement vers d'autres pages et même vers des parties spécifiques.
d'une page donnée. Ces liens sont connus sous le nom d'hyperliens. Les hyperliens permettent aux visiteurs de naviguer
entre les sites Web en cliquant sur des mots, des phrases et des images. Ainsi, vous pouvez créer des hyperliens.
en utilisant du texte ou des images disponibles sur une page web.

Un lien est spécifié à l'aide de la balise HTML <a>. Cette balise est appelée balise d'ancre et tout ce qui se trouve entre le
la balise d'ouverture <a> et la balise de fermeture </a> font partie du lien et un utilisateur peut cliquer sur cette partie
pour accéder au document lié.
<! DOCTYPE html>
<html>
<tête>
Exemple de lien hypertexte
</tête>
<body>
<p>Cliquez sur le lien suivant</p>

<a href = "[Link] target = "_self"> Site Web de l'Université de Chuka</a>

</body>
</html>
L'attribut cible est utilisé pour spécifier l'emplacement où le document lié est ouvert. Suivant
sont les options possibles −
_blank (Ouvre le document lié dans une nouvelle fenêtre ou un nouvel onglet.)

_self (Ouvre le document lié dans le même cadre.)

_parent (Ouvre le document lié dans le cadre parent.)

Page 11 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

_top (Ouvre le document lié dans le corps complet de la fenêtre.)
_targetframe (Ouvre le document lié dans une cible nommée.)
Étudiant à rechercher comment lier à différentes sections de la même page. Aussi rechercher sur
liens d'email et liens d'image.
Images
Les images sont également connues sous le nom de graphiques ou de photos. Les images améliorent l'apparence visuelle du web.
des pages en les rendant plus intéressantes et colorées. La balise <img> est utilisée pour insérer des images dans
les documents HTML. C'est un élément vide et contient uniquement des attributs. La syntaxe de base de
la balise <img> peut être fournie avec :

<img src="url" alt="some_text">

Chaque image doit avoir au moins deux attributs : l'attribut src et l'attribut alt. Le src
L'attribut indique au navigateur où trouver l'image. Sa valeur est l'URL du fichier image.
Alors que l'attribut alt fournit un texte alternatif pour l'image, s'il est indisponible ou ne peut pas
être affiché pour une raison quelconque. Sa valeur devrait être un substitut significatif pour l'image. Le
Les attributs de largeur et de hauteur sont utilisés pour spécifier la largeur et la hauteur d'une image. Les valeurs de
ces attributs sont interprétés en pixels par défaut.
<img src="[Link]" alt="chuka university logo" width="300" height="300">
Tables
Les tableaux HTML vous permettent d'organiser des données en lignes et en colonnes. Ils sont souvent utilisés pour
afficher des données tabulaires comme des listes de produits, des détails de clients, des rapports financiers, etc. Un tableau
peut également être utilisé pour définir la structure / la mise en page d'un formulaire HTML.

Vous pouvez créer un tableau en utilisant l'élément <table>. À l'intérieur de l'élément <table>, vous pouvez utiliser le
<tr> éléments pour créer des lignes, et pour créer des colonnes à l'intérieur d'une ligne, vous pouvez utiliser les éléments <td>.
Vous pouvez également définir une cellule comme en-tête pour un groupe de cellules de tableau en utilisant l'élément <th>. Par
Par défaut, les en-têtes de table sont en gras et centrés.

Si vous ne spécifiez pas de bordure pour le tableau, il sera affiché sans bordures. Une bordure est définie
en utilisant la propriété de bordure.

L'étalement vous permet d'étendre des lignes et des colonnes de tableau sur plusieurs autres lignes et colonnes.
Normalement, une cellule de tableau ne peut pas dépasser dans l'espace en dessous ou au-dessus d'une autre cellule de tableau. Mais, vous
vous pouvez utiliser les attributs rowspan ou colspan pour s'étendre sur plusieurs lignes ou colonnes dans un tableau.

Le rembourrage des cellules spécifie l'espace entre le contenu de la cellule et ses bordures. Si vous ne spécifiez pas un
remplissage, les cellules du tableau seront affichées sans remplissage. Pour définir le remplissage, utilisez le
propriété cellpadding.
L'espacement des bordures spécifie l'espace entre les cellules. Pour définir l'espacement des bordures d'un tableau, utilisez
la propriété cellspacing.

Page 12 sur 68 CONCEPTION ET DÉVELOPPEMENT WEB

Vous pouvez spécifier une légende (ou titre) pour vos tableaux en utilisant l'élément <caption>. L'<caption>
l'élément doit être placé directement après la balise d'ouverture <table>. Par défaut, la légende apparaît à la
en tête du tableau.
<html>
<tête>
Tableaux en HTML
</tête>
<body>
<table border align="center" width="70%">
<tr>
<th colspan="2">Université Chuka</th>
</tr>
<tr>
<th>Code de cours</th>
<th>Nom du cours</th>
</tr>
<tr>
<td>ACSC 226</td>
<td>Conception et développement web</td>

</tr>
<tr>
<td>ACSC 327</td>
<td>Programmation Web et Administration</td>
</tr>
<tr>
<td>COSC 280</td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr>

Page 13 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
Formulaires HTML

Les formulaires HTML sont nécessaires pour collecter différents types de saisies utilisateur, telles que les coordonnées comme
nom, adresse e-mail, numéros de téléphone ou détails tels que des informations de carte de crédit, etc.

Les formulaires contiennent des éléments spéciaux appelés contrôles comme les zones de saisie, les cases à cocher, les boutons radio, le bouton de soumission.
boutons, etc. Les utilisateurs complètent généralement un formulaire en modifiant ses contrôles par exemple en saisissant du texte,
sélectionner des éléments, etc. et soumettre ce formulaire à un serveur web pour un traitement ultérieur.

La balise <form> HTML est utilisée pour créer un formulaire HTML et elle a la syntaxe suivante −

<form action = "URL du script" method = "GET|POST">

éléments de formulaire comme input, textarea, etc.

</form>
En dehors des attributs courants, voici une liste des attributs de formulaire les plus fréquemment utilisés -

Action - Script backend prêt à traiter vos données transmises.

Méthode - Méthode à utiliser pour charger des données. Les plus fréquemment utilisées sont GET et POST
méthodes.
Cible - Spécifiez la fenêtre ou le cadre cible où le résultat du script sera affiché. Il
prend des valeurs comme _blank, _self, _parent, etc.

Enctype - Vous pouvez utiliser l'attribut enctype pour spécifier comment le navigateur encode les données avant
il l'envoie au serveur. Les valeurs possibles sont
Application/x-www-form-urlencoded - C'est la méthode standard que la plupart des formulaires utilisent dans des cas simples.

scénarios.
Multipart/form-data - Ceci est utilisé lorsque vous souhaitez télécharger des données binaires sous forme de fichiers comme
image, fichier word, etc.

Contrôles de formulaire HTML

Il existe différents types de contrôles de formulaire que vous pouvez utiliser pour collecter des données à l'aide du formulaire HTML :

Contrôles des entrées textuelles

Contrôles de cases à cocher

Page 14 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 Contrôles de la boîte radio
Contrôles de boîte de sélection

Boîtes de sélection de fichiers

Contrôles cachés
Boutons cliquables
Bouton Soumettre et Réinitialiser

Contrôles d'entrée de texte

Il existe trois types de saisie de texte utilisés sur les formulaires -

Contrôles de saisie de texte à une seule ligne− Ce contrôle est utilisé pour des éléments qui nécessitent une seule ligne
de l'entrée utilisateur, comme les zones de recherche ou les noms. Ils sont créés à l'aide de la balise HTML <input>.

Contrôles de saisie de mot de passe - C'est aussi une saisie de texte sur une seule ligne mais cela masque le caractère.
dès qu'un utilisateur le saisit. Ils sont également créés à l'aide de la balise HTMl <input>.

Contrôles de saisie de texte multi-lignes− Ceci est utilisé lorsque l'utilisateur est tenu de fournir des détails qui
peut être plus long qu'une seule phrase. Les contrôles de saisie multi-lignes sont créés en utilisant
HTML<textarea>tag.

Contrôles de saisie de texte sur une seule ligne

Ce contrôle est utilisé pour des éléments qui nécessitent une seule ligne d'entrée utilisateur, comme les zones de recherche ou
noms. Ils sont créés à l'aide de la balise HTML <input>.

Contrôles de saisie de mot de passe

Ceci est également une saisie de texte sur une seule ligne mais elle masque le caractère dès qu'un utilisateur l'entre. Ils sont
également créé en utilisant la balise HTML <input> mais l'attribut type est défini sur mot de passe.

Voici la liste des attributs pour la balise <input> pour créer un champ de texte.
type - Indique le type de contrôle d'entrée et pour le contrôle d'entrée de texte, il sera défini sur texte.

Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir le
valeur.
Cela peut être utilisé pour fournir une valeur initiale à l'intérieur du contrôle.

taille - Permet de spécifier la largeur du champ de texte en termes de caractères.

maxlength - Permet de spécifier le nombre maximal de caractères qu'un utilisateur peut saisir dans le texte
boîte.

Contrôles de saisie de texte sur plusieurs lignes

Page 15 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

Ceci est utilisé lorsque l'utilisateur doit fournir des détails qui peuvent être plus longs qu'une seule phrase.
Les contrôles d'entrée multi-lignes sont créés en utilisant la balise HTML <textarea>.

Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir le
valeur.

lignes - Indique le nombre de lignes de la zone de texte.

cols - Indique le nombre de colonnes de la zone de texte

<html>
<tête>
Contrôles de formulaire de texte
</head>
<body>
<form action=" " method="post">
UserName
<input type="text" name="txtNomUtilisateur" /><br />

Mot de passe
<input type="password" name="txtMotDePasse"/><br />
<br />
description
Entrez la description ici...

</textarea>
</form>
</corps>
</html>
Contrôle de case à cocher

Les cases à cocher sont utilisées lorsque plusieurs options doivent être sélectionnées. Elles sont également créées
utiliser la balise HTML <input> mais l'attribut type est défini sur checkbox.

Voici la liste des attributs pour la balise <checkbox>.

type - Indique le type de contrôle d'entrée et pour le contrôle d'entrée de case à cocher, il sera défini sur
case à cocher..

Page 16 sur 68 CONCEPTION ET DÉVELOPPEMENT WEB

Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir le
valeur.
La valeur qui sera utilisée si la case à cocher est sélectionnée.
Coché - Défini sur coché si vous souhaitez le sélectionner par défaut.

<!DOCTYPE html>
<html>
<head> </head>
Contrôle de case à cocher
</tête>

<corps>
<form method="post" action="">
<input type = "checkbox" name = "chkmaths" value = "on"> Maths
<input type = "checkbox" name = "chkphysics" value = "on"> Physique
</form>
</corps>
</html>
Contrôle de bouton radio

Les boutons radio sont utilisés lorsque, parmi de nombreuses options, une seule option doit être sélectionnée.
Ils sont également créés en utilisant la balise HTML <input> mais l'attribut type est défini sur radio.

Voici la liste des attributs pour le bouton radio.

type - Indique le type de contrôle d'entrée et pour le contrôle d'entrée de case à cocher, il sera défini sur radio.

Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir le
valeur.
La valeur qui sera utilisée si la case radio est sélectionnée.
Cochez pour le sélectionner par défaut.
<!DOCTYPE html>
<html>
<tête>

Page 17 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 Contrôle de la boîte radio
</tête>
<corps>
<form method="post" action="">
<input type = "radio" name = "subject" value = "radiomaths"> Maths
<input type = "radio" name = "subject" value = "radiophysique"> Physique
</form>
</body>
</html>

Contrôle de boîte de sélection

Une boîte de sélection, également appelée boîte déroulante, qui offre l'option de lister diverses options.
la forme d'une liste déroulante, à partir de laquelle un utilisateur peut sélectionner une ou plusieurs options.

Voici la liste des attributs importants pour la balise <select> :

nom - Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir le
valeur.
taille - Cela peut être utilisé pour présenter une boîte de liste déroulante.

multiple - Si défini sur "multiple", cela permet à un utilisateur de sélectionner plusieurs éléments dans le menu.

Voici la liste des attributs importants pour la balise <option> :

La valeur qui sera utilisée si une option dans la boîte de sélection est sélectionnée.
Sélectionné - Indique que cette option doit être la valeur sélectionnée par défaut lorsque la page se charge.

Une alternative pour étiqueter les options

<!DOCTYPE html>
<html>
<tête>
Contrôle de la boîte de sélection
</tête>

Page 18 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 <corps>
<form method="post" action="">
<select name="seldropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</sélectionner>
</form>
</body>
</html>
Boîte de téléchargement de fichiers

Si vous souhaitez permettre à un utilisateur de télécharger un fichier sur votre site web, vous devrez utiliser un téléchargement de fichier
boîte, également connue sous le nom de boîte de sélection de fichiers. Ceci est également créé à l'aide de l'élément <input> mais de type
l'attribut est défini sur fichier.

Voici la liste des attributs importants de la boîte de téléchargement de fichiers −

Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir le
valeur.
accept - Spécifie les types de fichiers que le serveur accepte.

<!DOCTYPE html>
<html>
<tête>
Boîte de téléchargement de fichiers

</tête>
<corps>
<form method="post" action="">
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>

Page 19 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

</html>
Contrôles de bouton

Il existe différents types de boutons cliquables dans les formulaires HTML. Cela inclut :

soumettre - Cela crée un bouton qui soumet automatiquement un formulaire.

réinitialiser - Ceci crée un bouton qui réinitialise automatiquement les contrôles de formulaire à leurs valeurs initiales.

Ceci crée un bouton qui est utilisé pour déclencher un script côté client lorsque l'utilisateur clique dessus
bouton.
image - Cela crée un bouton cliquable mais nous pouvons utiliser une image comme arrière-plan du bouton

<html>
<tête>
Boutons dans les formulaires HTML
</tête>
<body>
<form method="post" action="">
<input type = "submit" name = "btnsubmit" value = "Submit" />
<input type = "reset" name = "btnreset" value = "Reset" />
<input type = "button" name = "btnok" value = "OK" />
<input type = "image" name = "btnimagebutton" src = "[Link]" />
</form>
</body>
</html>
Contrôles de formulaire cachés

Les contrôles de formulaire cachés sont utilisés pour cacher des données à l'intérieur de la page qui peuvent ensuite être poussées vers le

serveur. Ce contrôle se cache à l'intérieur du code et n'apparaît pas sur la page réelle. Par exemple,
Le formulaire caché suivant est utilisé pour garder le numéro de page actuel. Lorsqu'un utilisateur cliquera sur suivant
page, alors la valeur du contrôle caché sera envoyée au serveur web et il décidera lequel
La page sera affichée ensuite en fonction de la page actuelle passée.

<html>
<tête>
Boîte de téléversement de fichiers

Page 20 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 </head>
<corps>
<form method="post" action="">
<p>Ceci est la page 10</p>

<input type = "hidden" name = "pagename" value = "10" />

<input type = "submit" name = "btnsubmit" value = "Submit" />
<input type = "reset" name = "btnreset" value = "Reset" />
</form>
</body>
</html>

CSS
CSS est l'abréviation de feuilles de style en cascade. CSS fonctionne avec HTML et d'autres balisages.
Langages (comme XHTML et XML) pour contrôler la façon dont le contenu est présenté. Cascading
Les feuilles de style permettent de séparer l'apparence d'une page web du contenu d'une page web.
Le CSS est une recommandation du World Wide Web Consortium (le W3C) pour définir le
présentation et apparence d'un site web. Pour y parvenir, CSS utilise des styles qui sont présentés
dans une feuille de style.

Avantages du CSS dans la conception et le développement Web

Augmente la vitesse de téléchargement - Dans une page web qui n'utilise pas de CSS, le style est réalisé
utilisant des balises de formatage qui, en essence, surcharge le contenu HTML. HTML était
destiné au contenu et non à l'apparence. L'utilisation de CSS dans un site Web réduit le 'brouhaha' HTML.
donc en compactant les fichiers,

Réduit le temps passé à entretenir le site web

Un site web plus uniforme
Une feuille de style se compose d'une ou plusieurs règles qui décrivent comment les éléments du document doivent être
affiché. Chaque règle en CSS a deux parties : le sélecteur et la déclaration ; et la déclaration
a également deux parties, la propriété et la valeur. Le sélecteur définit tout élément HTML pour lequel
un changement est jugé nécessaire par exemple : corps, p, tableau, th, hr, etc. La déclaration contient la propriété
et la valeur pour le sélecteur. La propriété est l'attribut que vous souhaitez changer et chaque propriété peut
prendre une valeur. La propriété et la valeur sont séparées par un deux-points et entourées d'accolades :
Un exemple d'une règle de feuille de style CSS et des parties composants est montré ci-dessous :

Page 21 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

Exemples
corps { couleur de fond : noir }
Si la valeur d'une propriété est composée de plus d'un mot, mettez des guillemets autour de cette valeur.

body { font-family: "sans serif"; }

Si vous souhaitez spécifier plus d'une propriété, vous devez utiliser un point-virgule pour séparer chaque.
propriété. Cette règle définit un paragraphe qui aura un texte bleu centré.
p { text-align: center; color: blue }
Vous pouvez regrouper les sélecteurs. Séparez chaque sélecteur par une virgule. L'exemple ci-dessous regroupe
en-têtes 1, 2 et 3 et les rend tous jaunes.
h1, h2, h3 { couleur: jaune }
Autres exemples
Exemple 1
h1, h2, h3 {
font-weight : bold;
police : arial;
#000000
#FFFFFF

Page 22 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

}
Exemple 2
corps {
couleur:#000000;
couleur de fond : #ffffff;
police : arial, verdana, sans-serif;
}
Exemple 3
h1 {
18px;
}
p{
taille de police : 12px;

}
Exemple 4
table {
couleur de fond : #efefef;
solide
1px;
#999999;
}
Exemple 5
th {
couleur de fond : #cccccc;
font-weight : bold;
marge : 5px;
}
Exemple 6

Page 23 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 p{
"Times New Roman", Times, serif;
}
La propriété font-style est principalement utilisée pour spécifier du texte en italique.

h1 {
taille de police : 40px;
}

h2 {
taille de police : 30px ;

p{
14px
}

Exemple 7
[Link] {
font-weight: normal;
}

[Link] {
poids de police : gras;
}
Exemple 8
corps {
bleu
}

h1 {
vert
}
Exemple 9
h1 {
text-align: center;
}

h2 {

Page 24 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 text-align: gauche;
}

h3 {
texte-alignement : droite ;
}
Exemple 10
h1 {
texte-decoration: surligné;
}

h2
text-decoration: ligne-à-travers;
}

h3 {
text-decoration: souligné;
}
a{
text-decoration: none;
}
Exemple 11
[Link] {
texte-transformer: majuscules;
}

[Link] {
texte-transformer: minuscule;
}

[Link] {
text-transform: capitaliser;
}
Attacher des styles CSS au développement web

Il existe trois façons d'associer des styles à un document HTML.

Tout d'abord, les styles peuvent être intégrés en ligne dans un document. Deuxièmement, une feuille de style peut être intégrée dans le
l'en-tête d'un document HTML. La troisième façon d'associer des pages web avec des feuilles de style est de placer
un lien dans l'en-tête du fichier HTML vers une feuille de style externe. Avec ce lien, lorsque le navigateur

Page 25 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

commence à lire la page, elle voit le lien de la feuille de style, et télécharge la feuille de style, puis utilise le
feuille de style pour dessiner la page.

Styles CSS en ligne

Les règles de style peuvent être spécifiées directement dans la balise HTML, avec style="règles de style". Par exemple :

<p style="font-family: trebuchet, times, serif; font-size: 20px; font-weight: 600; color: "
#7C3030; couleur de fond: #B5D6A9
Les règles de style ci-dessus ressemblent à ceci !

</p>
Spécifier des styles en ligne est utile lorsque vous souhaitez appliquer ces styles uniquement à un élément spécifique,
comme c'est le cas ci-dessus. Par exemple, si vous vouliez mettre en évidence un morceau de texte dans votre phrase,
vous pourriez spécifier un style local de "color: rouge" à un élément <span> afin qu'il ressemble à ceci

<span style="color: red;">cela ressemble à ça</span>

Feuilles de style CSS internes (intégrées)

Les feuilles de style peuvent être intégrées dans l'élément <head> des documents HTML. Pour ce faire, le
la feuille de style elle-même est placée à l'intérieur d'une balise <style> dans la section <head></head>. Les styles
défini dans le CSS interne sont applicables au contenu d'une page web entière dans laquelle il est
défini.
Exemple d'un style CSS interne :
<tête>
<style type="text/css">
rh
{
marron
}
p
{
police: Arial, verdana, "sans-serif";
}
corps
{

Page 26 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

couleur de fond: #ffffff
}
</style>
</tête>
Feuilles de style CSS externes
Une feuille de style externe est simplement un fichier texte, contenant des règles de style propriété : valeur. Le seul
différence entre le contenu d'une feuille de style externe et le fait d'avoir vos règles de style dans le
le document lui-même est que vous n'incluez pas les <style> </style> balises, ni d'autres balises HTML. Pour
Pour lier un document HTML à une feuille de style, vous placez un lien vers la feuille de style dans l'en-tête de la
document. Lier à une feuille de style externe est idéal pour appliquer des styles à de nombreuses pages. Avec
avec une feuille de style externe, vous pouvez changer l'apparence d'un site web entier en modifiant un seul fichier. Chaque
la page doit lier la feuille de style en utilisant la balise <link>. La balise <link> se trouve à l'intérieur de l'en-tête
section

Étape 1 : Créez un fichier .css en ouvrant Macromedia Dreamweaver Nouveau Page de base CSS

Étape 2 : Appelez le fichier externe .css sur votre page Web selon vos besoins

Page 27 sur 68 CONCEPTION ET DÉVELOPPEMENT WEB

 Types de sélecteurs CSS
Le sélecteur de type

<html>
<tête>
Document sans titre
<style type="text/css">
h4
{
couleur : #6600FF
}
</style>
</head>
<corps>
<h4>Sous-titre 4</h4>
</body>
</html>
Sélecteur universel
Plutôt que de sélectionner des éléments d'un type spécifique, le sélecteur universel correspond au nom de n'importe quel
type d'élément. Cette règle rend le contenu de chaque élément de notre document en vert.
<html>
<tête>

Page 28 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

Document sans titre
<style type="text/css">
*
{
vert
}
</style>
</tête>
<corps>
Salut
<br />
<h2>Je suis H2</h2>
<br />
<h4>Titre 4</h4>
</body>
</html>

Sélecteur de descendants
Il est utilisé pour appliquer une règle de style à un élément uniquement lorsqu'il se situe à l'intérieur d'un élément particulier. Comme
dans l'exemple suivant, la règle de style s'appliquera à l'élément <em> uniquement lorsqu'il se trouve
à l'intérieur de la balise <ul>.

<html>
<tête>
Document sans titre
<style type="text/css">
ul em
{
marron
}
</style>
</tête>
<body>
<ul>
<li>
<em>Oranges</em>
</li>
<li><em>Mangues</em></li>
</ul>
<em>Bonjour, je suis pour l'emphase</em>

Page 29 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

</body>
</html>
Sélecteur de classe

Vous pouvez définir des règles de style en fonction de l'attribut de classe des éléments. Tous les éléments ayant
cette classe sera formatée selon la règle définie.
<html>
<tête>
Sélecteurs de classe
<style type="text/css">
.rouge
{
couleur : rouge ;
}
</style>
</tête>
<body>
<h1 class="rouge">Titre 1 faisant référence au sélecteur de classe nommé noir</h1>
<br />
<h1> Titre 1 NE faisant référence à aucune classe de sélecteur</h1>
<p class="red">Paragraphe faisant référence au sélecteur de classe</p>
</body>
</html>
Cette règle rend le contenu en rouge pour chaque élément avec l'attribut de classe défini sur rouge dans notre
document
Cela peut être rendu un peu plus spécifique.

<html>
<tête>
<style type="text/css">
[Link] {
bleu
}
</style>
</tête>
<body>
<h1 class="blue">H1 héritant de la règle CSS de la classe spécifique</h1>
<p class="blue">Paragraphe faisant référence à la classe spécifique. Aucun changement visible</p>
</body>
</html>
Cette règle rend le contenu en bleu uniquement pour les éléments <h1> dont l'attribut de classe est défini sur bleu.

Page 30 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

Vous pouvez appliquer plus d'un sélecteur de classe à un élément donné

<html>
<head>
De nombreux sélecteurs de classe
<style type="text/css">
taille36
{
taille de police:36px;
}
.décoration
{
text-decoration:ligne-à-travers;
}
.magenta
{
magenta
}
</style>
</tête>
<corps>
<p class="decoration size36 magenta">Paragraphe référenciant de nombreux sélecteurs de classes css</p>
<p>paragraphe sans styles</p>
</corps>
</html>
IDs CSS
Astyle ID est un ensemble personnalisé de spécifications de formatage qui peut être appliqué uniquement à un élément dans
une page web. Vous pouvez utiliser des IDs sur un ensemble de pages mais seulement une fois par page.
par exemple, supposons que vous ayez un titre dans le corps de toutes vos pages. Chaque page n'a qu'un seul titre,
mais toutes les pages elles-mêmes incluent une instance de ce titre. Voici un exemple d'un
un sélecteur avec un ID indiqué, plus une propriété et une valeur :

p
{
24pt Verdana, Genève, Arial, sans-serif
}
Remarquez que ce sélecteur inclut un dièse, ou signe de pound (#), après p, suivi d'un
nom d'identifiant descriptif. Lors de la référence à un identifiant de style dans le code HTML, il suffit de spécifier le nom de l'identifiant dans

l'attribut id d'un élément, comme ceci :

Un titre va ici

Page 31 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

Tout ce qui se trouve entre les balises <p> d'ouverture et de fermeture apparaîtra en texte Verdana de 24 points—mais
uniquement une fois sur une page donnée. Vous verrez souvent des identifiants de style utilisés pour définir des parties spécifiques d'une page
à des fins de mise en page, telles qu'une zone d'en-tête, une zone de pied de page, une zone de corps principal, etc. Ces types de
les zones d'une page apparaîtront une seule fois par page, donc utiliser un ID plutôt qu'une classe est le
choix approprié. Un attribut ID identifie un élément sur une page. Un sélecteur ID est un nom
précédé d'un caractère dièse (#).
Exemple 2 :
#classe { couleur: marine; bordure: 1px noir solide; }

Cet html est écrit :

<p id="class">#class { couleur: marine; bord: 1px noir solide; }</p>
Utiliser le CSS sur différents éléments

Contexte
Vous pouvez définir les propriétés de fond suivantes d'un élément :
La propriété background-color est utilisée pour définir la couleur d'arrière-plan d'un élément.

La propriété background-image est utilisée pour définir l'image de fond d'un élément.

La propriété background-repeat est utilisée pour contrôler la répétition d'une image dans le
arrière-plan.
La propriété background-position est utilisée pour contrôler la position d'une image dans le
fond.
La propriété background-attachment est utilisée pour contrôler le défilement d'une image dans le
arrière-plan.
La propriété background est utilisée comme raccourci pour spécifier un certain nombre d'autres arrière-plans.
propriétés.
Exemples
<p style="background-color:yellow;">
Ce texte a un fond de couleur jaune.
</p>
<table style="background-image:url(/images/[Link]);">
<tr><td>
Cette table a une image de fond définie.

</td></tr>

Page 32 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

</table>
L'exemple suivant montre comment positionner l'image de fond à 100 pixels de distance
à partir du côté gauche et 200 pixels vers le bas du haut.

<table style="background-image:url(/images/[Link]);
position-arrière-plan:100px 200px;
<tr><td> </td></tr>
Cette table a une image de fond positionnée à 100 pixels du côté gauche et à 200 pixels de
le sommet.
</td></tr>
</table>
L'attachement de fond détermine si une image de fond est fixe ou défile avec le reste.
de la page. L'exemple suivant démontre comment définir l'image de fond fixe.
<p style="background-image:url(/images/[Link]);
background-attachment:fixed;">
Ce paragraphe a une image de fond fixe.
</p>
L'exemple suivant démontre comment définir l'image d'arrière-plan défilante.
<p style="background-image:url(/images/[Link]);
background-attachment:scroll;'>
Ce paragraphe a une image de fond défilante.
</p>
Vous pouvez utiliser la propriété background pour définir toutes les propriétés de fond en une seule fois. Par exemple :

<p style="background:url(/images/[Link]) repeat fixed;">

Ce paragraphe a une image de fond répétée fixe.

Polices
La propriété font-family est utilisée pour changer la police d'un texte.

La propriété font-style est utilisée pour rendre une police en italique ou en oblique.

La propriété font-variant est utilisée pour créer un effet de petites majuscules.

Page 33 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

La propriété font-weight est utilisée pour augmenter ou diminuer l'épaisseur d'une police, la rendant plus grasse ou plus légère.

La propriété font-size est utilisée pour augmenter ou diminuer la taille d'une police.

La propriété de police est utilisée comme abrégé pour spécifier un certain nombre d'autres propriétés de police.

Exemples
<p style="font-family:georgia,garamond,serif;">
Ce texte est rendu soit en Georgia, soit en Garamond, soit dans la police serif par défaut selon laquelle
police que vous avez dans votre système.

</p>
L'exemple suivant démontre comment définir le style de police d'un élément. Les valeurs possibles sont
normal, italique et oblique.
<p style="font-style:italic;"> </p>

L'exemple suivant montre comment définir la variante de police d'un élément. Valeurs possibles
normal et petites majuscules.

<p style="font-variant:small-caps;">
Ce texte sera affiché en petites majuscules
</p>
L'exemple suivant montre comment définir le poids de la police d'un élément. Le poids de la police
la propriété offre la fonctionnalité de spécifier à quel point une police est grasse. Les valeurs possibles pourraient être
normal
<p style="font-weight:bold;">
Cette police est en gras.

</p>
<p style="font-weight:bolder;">
Cette police est plus grasse.

</p>

Cette police a un poids de 900.

</p>
L'exemple suivant montre comment définir la taille de la police d'un élément. La taille de la police
la propriété est utilisée pour contrôler la taille des polices. Les valeurs possibles peuvent être xx-small, x-small, small,
moyen

Page 34 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

<p style="font-size:20px;">
Cette taille de police est de 20 pixels

<p style="font-size:small;">
Cette taille de police est petite

</p>
<p style="font-size:large;">
Cette taille de police est grande

</p>
Vous pouvez utiliser la propriété de police pour définir toutes les propriétés de police à la fois. Par exemple :

<p style="font:italic small-caps bold 15px georgia;">

Appliquer toutes les propriétés sur le texte à la fois.

</p>
Texte
Le texte peut également être manipulé à l'aide des propriétés CSS. Vous pouvez définir les propriétés de texte suivantes de
un élément
La propriété de couleur est utilisée pour définir la couleur d'un texte.

La propriété direction est utilisée pour définir la direction du texte.

La propriété letter-spacing est utilisée pour ajouter ou soustraire de l'espace entre les lettres qui composent un
mot.
La propriété word-spacing est utilisée pour ajouter ou soustraire de l'espace entre les mots d'une phrase.

La propriété text-indent est utilisée pour indenter le texte d'un paragraphe.

La propriété text-align est utilisée pour aligner le texte d'un document.

La propriété text-decoration est utilisée pour souligner, barrer et rayer le texte.

La propriété text-transform est utilisée pour capitaliser le texte ou convertir le texte en majuscules ou en minuscules.
lettres.
La propriété white-space est utilisée pour contrôler le flux et le formatage du texte.

La propriété text-shadow est utilisée pour définir l'ombre du texte autour d'un texte.

Exemples

Page 35 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

L'exemple suivant montre comment définir la couleur du texte. La valeur possible peut être n'importe quelle couleur
nom dans tout format valide.

<p style="color:red;">
Ce texte sera écrit en rouge.

L'exemple suivant démontre comment définir la direction d'un texte. Les valeurs possibles sont ltr ou
rtl.
<p style="direction:rtl;">
Ce texte sera rendu de droite à gauche

L'exemple suivant montre comment définir l'espacement entre les caractères. Valeurs possibles
ou un nombre spécifiant l'espace.
<p style="letter-spacing:5px;">
Ce texte a des espaces entre les lettres.
</p>
L'exemple suivant démontre comment régler l'espace entre les mots. Les valeurs possibles sont
normal ou un nombre spécifiant l'espace.

<p style="word-spacing:5px;">
Ce texte a des espaces entre les mots.
</p>
L'exemple suivant montre comment indenté la première ligne d'un paragraphe. Valeurs possibles
sont % ou un nombre spécifiant l'espace d'indentation.

<p style="text-indent:1cm;">
Ce texte aura la première ligne indentée de 1 cm et cette ligne restera à sa position actuelle.
fait par la propriété text-indent de CSS.

</p>
L'exemple suivant montre comment aligner un texte. Les valeurs possibles sont gauche, droite, centre,
justifier.
<p style="text-align:right;">
Ceci sera aligné à droite.
</p>

Page 36 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

<p style="text-align:center;">
Ceci sera aligné au centre.
</p>
<p style="text-align:left;">
Cela sera aligné à gauche.
</p>
L'exemple suivant démontre comment décorer un texte. Les valeurs possibles sont aucune, souligner,
souligné, barré, clignotant.
<p style="text-decoration:underline;">
Cela sera souligné
</p>
<p style="text-decoration:line-through;">
Cela sera barré.

<p style="text-decoration:overline;">
Ceci aura une ligne au-dessus.

</p>
<p style="text-decoration:blink;">
Ce texte aura un effet clignotant
</p>
L'exemple suivant démontre comment définir les cas pour un texte. Les valeurs possibles sont aucune.
mettre en majuscules, en majuscules, en minuscules.

<p style="text-transform:capitalize;">
Ceci sera en majuscules
</p>
<p style="text-transform:uppercase;">
CE CI SERA EN MAJUSCULE
</p>
<p style="text-transform:lowercase;">

Page 37 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

ce sera en minuscules
</p>
L'exemple suivant montre comment définir l'ombre autour d'un texte. Cela peut ne pas être
soutenu par tous les navigateurs.
<p style="text-shadow: 4px 4px 8px blue ;">
Si votre navigateur prend en charge la propriété CSS text-shadow, ce texte aura une ombre bleue.
Images
Les images jouent un rôle important sur toute page web. Bien qu'il ne soit pas recommandé d'inclure beaucoup de
des images, mais il est toujours important d'utiliser de bonnes images partout où c'est nécessaire. CSS joue un bon rôle pour
contrôler l'affichage des images. Vous pouvez définir les propriétés d'image suivantes à l'aide de CSS.

La propriété border est utilisée pour définir la largeur d'une bordure d'image.

La propriété height est utilisée pour définir la hauteur d'une image.

La propriété width est utilisée pour définir la largeur d'une image.

La propriété -moz-opacity est utilisée pour définir l'opacité d'une image.

La propriété border d'une image est utilisée pour définir la largeur d'une bordure d'image. Cette propriété peut
avoir une valeur en longueur ou en %.

Une largeur de zéro pixels signifie pas de bordure.

<img style="border:0px;" src="/images/[Link]" />

<br />
<img style="border:3px dashed red;" src="/images/[Link]" />
La propriété height d'une image est utilisée pour définir la hauteur d'une image. Cette propriété peut avoir un
valeur en longueur ou en %. Lorsqu'on donne une valeur en %, elle s'applique par rapport à la boîte dans laquelle un
l'image est disponible.

<img style="border:1px solid red; height:100px;" />

src="/images/[Link]" />
<br />
<img style="border:1px solid red; height:50%;">
src="/images/[Link]" />

Page 38 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

La propriété width d'une image est utilisée pour définir la largeur d'une image. Cette propriété peut avoir un
valeur en longueur ou en %. Lorsqu'on donne une valeur en %, elle s'applique par rapport à la boîte dans laquelle un
l'image est disponible.

<img style="border:1px solid red; width:100px;" />

src="/images/[Link]" />
<br />
<img style="border:1px solid red; width:100%;" />
src="/images/[Link]" />
La propriété -moz-opacity d'une image est utilisée pour définir l'opacité d'une image. Cette propriété est
utilisé pour créer une image transparente dans Mozilla. IE utilise filter:alpha(opacity=x) pour créer
images transparentes.
Dans Mozilla (-moz-opacity:x), x peut être une valeur de 0.0 à 1.0. Une valeur plus basse rend l'élément
plus transparent (La même chose vaut pour la syntaxe valide CSS3 opacity:x).
Dans IE (filtre: alpha(opacité=x)), x peut être une valeur de 0 à 100. Une valeur plus basse rend l'élément
plus transparent.
<img style="border:1px solid red;-moz-opacity:0.4;filter:alpha(opacity=40);"
src="/images/[Link]" />
Liens
Il y a différentes propriétés d'un lien hypertexte qui peuvent être définies à l'aide de CSS. Par exemple, vous pouvez définir
les propriétés suivantes d'un lien hypertexte :

Le :link signifie les liens hypertextes non visités.

Le :visited signifie les hyperliens visités.

Le:survol signifie un élément qui a actuellement le curseur de la souris de l'utilisateur au-dessus de lui.

L'élément actif signifie un élément sur lequel l'utilisateur clique actuellement.

En général, toutes ces propriétés sont conservées dans la partie en-tête du document HTML.

N'oubliez pas que a:hover DOIT venir après a:link et a:visited dans la définition CSS afin d'être
effectif. De plus, a:active DOIT venir après a:hover dans la définition CSS comme suit :

<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}

Page 39 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

a:active {color: #FF00CC}
</style>
<style type="text/css">
a:active {color: #FF00CC}
</style>
<a href="/html/[Link]">Cliquez sur ce lien</a>

Tables
La propriété border-collapse spécifie si le navigateur doit contrôler l'apparence des bords adjacents.
des bordures qui se touchent ou si chaque cellule doit maintenir son style.
L'espacement des bordures spécifie la largeur qui devrait apparaître entre les cellules du tableau.

Les légendes sont présentées dans l'élément <caption>. Par défaut, celles-ci sont rendues
au-dessus de la table dans le document. Vous utilisez la propriété caption-side pour contrôler le placement de
la légende du tableau.

La propriété empty-cells spécifie si la bordure doit être affichée si une cellule est vide.

La mise en page de tableau permet aux navigateurs d'accélérer la mise en page d'un tableau en utilisant la première largeur
propriétés qu'il rencontre pour le reste d'une colonne plutôt que de devoir charger la table entière
avant de le rendre.
Cette propriété peut avoir deux valeurs: effondrer et séparer. L'exemple suivant utilise les deux.
valeurs
<style type="text/css">
[Link] {border-collapse:collapse;}
[Link] {border-collapse:séparé;}
td.a {
style-de-bord:pointillé;
3px
couleur de bordure : #000000 ;
remplissage: 10px;

}
td.b {border-style: solide; }

3px

Page 40 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

couleur-de-bordure:#333333;
padding:10px;
}
</style>
<table class="one">
Exemple de bordure collapsee
<tr><td class="a"> Exemple de collapsus de la cellule A</td></tr>

<tr><td class="b"> Exemple de réduction de la cellule B</td></tr>

</table>
<br />
<table class="two">
Exemple de bordure séparée
<tr><td class="a"> Exemples de cellule A séparés</td></tr>

<tr><td class="b"> Exemple de Cellule B Séparée</td></tr>

</table>
La propriété border-spacing spécifie la distance qui sépare les bordures des cellules adjacentes.
peut prendre une ou deux valeurs ; celles-ci doivent être des unités de longueur.

Si vous fournissez une valeur, elle s'applique aux bordures verticales et horizontales. Ou vous pouvez spécifier
deux valeurs, dans ce cas, la première fait référence à l'espacement horizontal et la seconde à l'espacement vertical
spacing
<style type="text/css">
/* Si vous fournissez une valeur */

[Link] {espacement-des-bordures:10px;}

/* Voici comment vous pouvez fournir deux valeurs */

[Link] {espacement-des-bordures:10px; 15px;}

</style>
La propriété caption-side vous permet de spécifier où le contenu d'un élément <caption> doit
être placé en relation avec le tableau. Le tableau qui suit liste les valeurs possibles.
Cette propriété peut avoir l'une des quatre valeurs : haut, bas, gauche ou droite. L'exemple suivant
utilise chaque valeur.

Page 41 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

<style type="text/css">
[Link] {caption-side:haut}
[Link] {caption-side:bottom}
[Link] {caption-side:gauche}

Frontières
Les propriétés de bordure vous permettent de spécifier comment la bordure de la boîte représentant un élément
devrait avoir l'apparence. Il y a trois propriétés d'une bordure que vous pouvez changer :

La couleur de la bordure spécifie la couleur d'une bordure.

Le style de la bordure spécifie si une bordure doit être solide, en traitillé, double ou l'un des
les autres valeurs possibles.
La largeur de la bordure spécifie la largeur d'une bordure.

La propriété border-color vous permet de changer la couleur de la bordure entourant un élément.

Vous pouvez changer individuellement la couleur des côtés inférieur, gauche, supérieur et droit d'un élément.
bordure utilisant les propriétés :

border-bottom-color change la couleur de la bordure inférieure.

border-top-color change la couleur de la bordure supérieure.

border-left-color change la couleur de la bordure gauche.

border-right-color change la couleur de la bordure droite.

<style type="text/css">
p.exemple1{
bordure:1px solide;
border-bottom-color:#009900; /* Vert */
#FF0000; /* Rouge */
#330000; /* Noir */
border-right-color:#0000CC; /* Bleu */
}
p.exemple2{
bordure:1px solide;
#009900; /* Vert */

Page 42 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

}
</style>
<p class="example1"> </p>

Cet exemple montre toutes les bordures dans différentes couleurs.

<\/p>
<p class="example2">
Cet exemple montre toutes les bordures en couleur verte uniquement.

</p>
La propriété border-style vous permet de sélectionner l'un des styles de bord suivants :
Aucune bordure. (Équivalent de border-width:0;)
solid:Border est une ligne solide unique.
dotted: La bordure est une série de points.

pointillé : La bordure est une série de lignes courtes.

double : Bordure est deux lignes solides.

le contour semble comme s'il était sculpté dans la page.

La bordure semble être le contraire de la rainure.

inset : La bordure donne l'impression que la boîte est intégrée dans la page.

au début : La bordure donne à la boîte l'apparence de sortir du canevas.

caché : Même pas comme aucun, sauf en ce qui concerne la résolution de conflit de bordure pour les éléments de table.

Vous pouvez changer individuellement le style des bordures inférieure, gauche, supérieure et droite d'un élément
en utilisant les propriétés suivantes :

border-bottom-style change le style de la bordure inférieure.

border-top-style change le style de la bordure supérieure.

border-left-style modifie le style de la bordure gauche.

border-right-style change le style de la bordure droite.

<p style="border-width:4px; border-style:none;">

Ceci est une bordure sans largeur.
</p>
<p style="border-width:4px; border-style:solid;">

Page 43 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

C'est une bordure solide.
</p>
<p style="border-width:4px; border-style:dashed;">
Ceci est une bordure en pointillé.

</p>
<p style="border-width:4px; border-style:double;">
Ceci est une double bordure.

</p>
<p style="border-width:4px; border-style:groove;">
Ceci est une bordure à rainure.

</p>
<p style="border-width:4px; border-style:ridge">
Ceci est une frontière de pont.

</p>
<p style="border-width:4px; border-style:inset;">
Ceci est une bordure en relief.

</p>
<p style="border-width:4px; border-style:outset;">
Ceci est une bordure extérieure.

</p>
<p style="border-width:4px; border-style:hidden;">
Ceci est une frontière cachée.

</p>
<p style="border-width:4px; "
border-top-style:solide;
border-bottom-style: pointillé;
border-left-style: groove;
border-right-style:double;'>

Page 44 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

C'est une bordure avec quatre styles différents.
</p>
La propriété border-width vous permet de définir la largeur des bordures d'un élément. La valeur de ceci
La propriété peut être soit une longueur en px, pt ou cm, soit elle doit être définie sur fin, moyen ou épais.

Vous pouvez modifier individuellement la largeur des bordures inférieure, supérieure, gauche et droite d'un élément.
en utilisant les propriétés suivantes :

border-bottom-width change la largeur de la bordure inférieure.

border-top-widthmodifie la largeur de la bordure supérieure.

border-left-width modifie la largeur de la bordure gauche.

border-right-width change la largeur de la bordure droite.

<p style="border-width:4px; border-style:solid;">

C'est une bordure solide dont la largeur est de 4px.

</p>
<p style="border-width:4pt; border-style:solid;"></p>
Ceci est une bordure solide d'une largeur de 4pt.

<p style="border-width:fin; border-style:solide;">

C'est une bordure solide dont la largeur est fine.

</p>
<p style="border-width:medium; border-style:solid;">
Ceci est une bordure solide dont la largeur est moyenne;

</p>
<p style="border-width:thick; border-style:solid;">
C'est une bordure solide dont la largeur est épaisse.

</p>
<p style="border-bottom-width:4px;
border-top-width:10px;
largeur-de-la-bordure-gauche: 2px;

largeur-de-bordure-droite:15px;

Page 45 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

border-style:solide;
C'est une bordure de quatre largeurs différentes.

La propriété border vous permet de spécifier la couleur, le style et la largeur des lignes en une seule propriété :

L'exemple suivant montre comment utiliser les trois propriétés dans une seule propriété. Ceci est
la propriété la plus fréquemment utilisée pour définir une bordure autour de n'importe quel élément.

<p style="border:4px solid red;">

Cet exemple montre la propriété raccourcie pour la bordure.

</p>

Marge
La propriété marge définit l'espace autour d'un élément HTML. Il est possible d'utiliser des valeurs négatives.
les valeurs se chevauchent du contenu. Les valeurs de la propriété de marge ne sont pas héritées par l'enfant
éléments. N'oubliez pas que les marges verticales adjacentes (haute et basse) vont se fusionner
les uns dans les autres de sorte que la distance entre les blocs ne soit pas la somme des marges, mais seulement le
le plus grand des deux marges ou de la même taille qu'une marge si les deux sont égales.

Nous avons les propriétés suivantes pour définir la marge d'un élément.

La marge spécifie une propriété abrégée pour définir les propriétés de marge en une seule déclaration.

La marge inférieure spécifie la marge inférieure d'un élément.

La marge supérieure spécifie la marge supérieure d'un élément.

La marge-gauche spécifie la marge gauche d'un élément.

La marge droite spécifie la marge droite d'un élément.

Page 46 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 JAVASCRIPT
JavaScript est un langage de script utilisé pour le scripting côté client afin d'apporter du dynamisme à un site web.
Cela n'a rien à voir avec Java. Il a été développé par Netscape 2.0 en 1995 et était initialement nommé
LiveScript. Plus tard, Netscape a changé le nom en JavaScript, peut-être à cause de l'excitation
étant généré par Java. JavaScript est un langage à usage général et le cœur du langage
a été intégré dans Netscape, Internet Explorer et d'autres navigateurs web.
Il y a de nombreuses raisons pour lesquelles un développeur Web peut bénéficier de l'inclusion de JavaScript en tant que
outil de développement web. Ces raisons incluent :
a) Moins d'interaction avec le serveur : -Lorsque les utilisateurs saisissent des données via un formulaire, validation des données
est nécessaire. Par exemple, lorsque les utilisateurs saisissent leur adresse e-mail, nous voudrions que
assurez-vous que l'adresse e-mail est au format correct d'une adresse e-mail valide. Sans
JavaScript, cette validation est effectuée par le serveur. Cependant, grâce à JavaScript, vous pouvez
valider l'entrée de l'utilisateur avant d'envoyer la page au serveur. Cela réduit le trafic serveur,
ce qui signifie moins de charge sur votre serveur.

b) Retour immédiat aux visiteurs : JavaScript permet de définir le niveau des objets
validation de sorte que si certaines données sont requises, l'utilisateur doit les remplir avant
aller de l'avant. Les utilisateurs n'ont pas à attendre le rechargement de la page pour voir s'ils ont oublié
entrer quelque chose.
c) Interactivité accrue : JavaScript introduit du dynamisme et de l'interactivité sur un site web
système. Par exemple, vous pouvez créer des interfaces qui réagissent quand l'utilisateur les survole.
avec une souris ou les active via le clavier.

Page 47 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 d) Interfaces plus riches : Vous pouvez utiliser JavaScript pour créer des interfaces utilisateur plus riches. Grâce à
Un développeur JavaScript peut inclure des éléments tels que des composants de glisser-déposer et des curseurs.
offrir une interface riche à vos visiteurs de site.
JavaScript peut être placé dans de nombreuses parties d'une page web en fonction de la tâche nécessaire. Les zones de
le placement comprend :

i. JavaScript dans la section <head>...</head>.

ii. JavaScript dans la section <body>...</body>.
iii. JavaScript à la fois dans les sections <body>...</body> et <head>...</head>.
iv. JavaScript en tant que fichier externe et ensuite appelé dans la page web en incluant un appel dans
<head>...</head> section.
JavaScript dans la section Head
Lorsque le JavaScript doit s'exécuter en réponse à un événement, comme lorsqu'un utilisateur clique
quelque part, alors vous placerez ce script dans la section head. Voici un exemple similaire
d'une fonction JavaScript qui est exécutée lorsqu'un bouton étiqueté Dire Bonjour est cliqué.

<Html>
<tête>
<script type="text/javascript">
fonction direBonjour ()
{
alerte("Bonjour le monde");
}
</script>
</tête>
body
Cliquez ici pour le résultat
<input type="button" onClick="direBonjour( )" value="Dire Bonjour" />
</corps>
</Html>
Javascript dans la section corps
Si vous avez besoin d'un script à exécuter au chargement de la page afin que le script génère du contenu dans la page, alors
le script va dans la portion <body> du document. Cela peut être fait sans aucune fonction
défini en utilisant JavaScript. Dans l'exemple suivant, une chaîne Bonjour le monde est écrite sur le
page web utilisant le document. Écrire une fonction intégrée lorsque une page web se charge dans un navigateur.

<Html>
<tête>
</tête>
<corps>

Page 48 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

<script type="text/javascript">
[Link] ("Bonjour le monde")
</script>
<p>Ceci est le corps de la page web</p>
</body>
</Html>
Javascript dans les sections Head et Body
L'exemple suivant démontre l'utilisation de JavaScript à la fois dans les sections head et body

<Html>
<tête>
<script type="text/javascript">
fonction direBonjour ( )
{
alerte("Bonjour le monde")
}
</script>
</tête>
<corps>
<script type="text/javascript">
[Link]("Bonjour le monde")
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
Javascript en tant que fichier externe

Pour les grands projets où les développeurs réutilisent du code JavaScript identique sur plusieurs pages
d'un site Web, le code JavaScript pourrait être placé dans un fichier séparé enregistré avec une extension .js
extension, et pour toute page web qui a besoin du code JavaScript, le fichier .js est appelé à la
<head> </head> section. Le fichier .js peut être appelé par autant de pages dans le projet que nécessaire. Pour
créez le fichier .js, ouvrez Macromedia Dreamweaver, cliquez sur Fichier Nouveau Page de base JavaScript

Page 49 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

Entrez ensuite votre code JavaScript et enregistrez le fichier sous le nom [Link]

[Link]
function direBonjour()

Page 50 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

{
alerte("Bonjour le monde")

}
Après avoir créé le fichier .js, appelez-le dans la page web en le référenciant dans la section head

[Link]
<Html>
<tête>
<script type="text/javascript" src="[Link]">
</script>
</tête>
<corps>
.......
</body>
</Html>

Syntaxe Javascript
• Les points-virgules sont optionnels - Les instructions simples en JavaScript sont généralement suivies d'un
le caractère point-virgule, tout comme dans C, C++ et Java. Le JavaScript, cependant, vous permet de
omettez ce point-virgule si chacune de vos déclarations est placée sur une ligne séparée.

•JavaScript est un langage sensible à la casse - Cela signifie que les mots-clés du langage, les variables,
Les noms de fonctions et tout autre identifiant doivent toujours être écrits de manière cohérente.
capitalisation des lettres.
•Commentaires - JavaScript prend en charge à la fois les commentaires de style C et les commentaires de style C++. Ainsi :

Commentaires sur une seule ligne :

// Commentaire sur une seule ligne

Ou
<!--. Commentaires sur une seule ligne //-->

Commentaires multi-lignes

/* commentaires multilignes */

Variables Javascript

Page 51 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

En JavaScript, avant d'utiliser une variable, vous devez la déclarer. Les variables sont déclarées avec le mot-clé var.
mot-clé. L'exemple suivant illustre cela :
<corps>
<script type="text/javascript">
judy
cheruto
[Link](prénom);
</script>
</body>
Plusieurs variables peuvent être déclarées avec le même mot-clé var comme dans l'exemple qui suit :

<corps>
<script type="text/javascript">
prénom
judy
cheruto
[Link](prénom);
</script>
</body>

Types de données Javascript

JavaScript vous permet de travailler avec trois types de données primitifs et ce sont :
•Chiffres, par exemple 123, 120,50 etc.

•Champs de texte, par exemple « bonjour le monde », etc.

•Booléen, par exemple vrai ou faux, Oui ou Non, etc.

JavaScript définit également deux types de données triviaux, null et undefined, chacun d'eux ne définissant que
valeur unique. En plus de ces types de données primitifs, JavaScript prend en charge un type de données composite
connu sous le nom d'objet.

JavaScript est un langage non typé, ce qui signifie qu'une variable JavaScript peut contenir une valeur de
tout type de donnée et donc un développeur n’a pas besoin de dire à JavaScript lors de la déclaration de variable
quel type de valeur la variable va contenir. Le type de valeur d'une variable peut changer au cours de
l'exécution d'un programme et JavaScript s'en occupe automatiquement.
Opérateurs JavaScript
JavaScript prend en charge les types d'opérateurs suivants.

•Opérateurs arithmétiques (+, -, *, /, %, ++, --) Opérateurs de comparaison

== (Égal)

Page 52 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 != (Différent de)

(Supérieur à)
< (Moins que)
>= (Supérieur ou Égal à)
<= (Moins que ou égal à)
•Opérateurs logiques
&& (ET logique)
|| (OU logique)
! (Non logique)
•Opérateurs d'affectation

(Affectation simple)
Assigne les valeurs de l'opérande de droite à l'opérande de gauche
C = A + B assignera la valeur de A + B à C
+= (Ajout et affectation)
Il ajoute l'opérande de droite à l'opérande de gauche et assigne le résultat à la gauche
opérande.
C += A est équivalent à C = C + A
-= (Soustraction et Affectation)

Il soustrait l'opérande de droite de l'opérande de gauche et assigne le résultat à la

opérande gauche.

C -= A est équivalent à C = C - A
*= (Multiplication et affectation)

Il multiplie l'opérande de droite par l'opérande de gauche et assigne le résultat à

l'opérande gauche.
Exemple : C *= A est équivalent à C = C * A
/= (Division et affectation)
Il divise l'opérande de gauche par l'opérande de droite et assigne le résultat à le
opérande gauche.

C /= A est équivalent à C = C / A
%= (Modules et Assignation)

Page 53 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

 Il effectue un modulo en utilisant deux opérandes et attribue le résultat à l'opérande de gauche.

C %= A est équivalent à C = C % A
Fonctions Javascript
Une fonction est un groupe de code réutilisable qui peut être appelé n'importe où dans votre programme. Cela
élimine le besoin d'écrire le même code encore et encore. Les fonctions aident les programmeurs dans
écrire des codes modulaires et permet à un programmeur de diviser un grand programme en plusieurs petits
et des fonctions gérables.
Avant d'utiliser une fonction, nous devons la définir. Pour définir une fonction en JavaScript, on utilise :

Mot-clé fonction, suivi d'un nom de fonction unique, d'une liste de paramètres (qui pourraient être
vide), et un bloc d'instructions entouré d'accolades comme dans le format ci-dessous :

<script type="text/javascript">
Fonction nomdefonction (liste-des-paramètres)

{
Déclarations ;
}
</script
Pour invoquer une fonction quelque part plus tard dans le script, il vous suffirait d'écrire le nom de
qui fonctionnent comme montré dans les exemples de fonctions JavaScript suivants.

Exemple 1
<Html>
<tête>
<script type="text/javascript">
fonction salutations ( )
{
[Link] ("Bonjour !");
}
</script>
</tête> <corps>
<p>Cliquez sur le bouton suivant pour appeler la fonction</p>
<form>
<input type="button" onclick=“greetungs()" value=“Greet someone">
</form>
</body>
</Html>
Exemple 2

Page 54 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

<Html>
<tête>
Document sans titre
<script type="text/javascript">
fonction ouvrirfenetre ( )
{
fenê[Link]("[Link]
}
</script>
</head>
<corps>
<form>
<input type="button" value="open window" onclick="openwindow ( )" />
</form>
</body>
</Html>
Exemple 3
<Html>
<tête>
<script type="text/javascript">
fonction direBonjour(nom, âge)
{
[Link] (name + " a " + age + " ans.");
}
</script>
</tête>
<corps>
<p>Cliquez sur le bouton suivant pour appeler la fonction</p>
<form>
<input type="button" onclick="sayHello('Zara', 7)" value="Say Hello">
</form>
</corps>
</html>
Exemple 4
<Html>
<tête>
<script type="text/javascript">
function concaténer (premier, dernier)
{
var complet;
complet = premier + dernier;

Page 55 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

retourner plein;
}
fonction deuxièmeFonction ( )
{
var résultat;
concaténer('Zara', 'Ali');
[Link] (result );
}
</script>
</tête>
<corps>
<form>
<input type="button" onclick="secondFunction()" value="Appeler la fonction">
</form>
</body>
</html>
Boîtes de dialogue Javascript

JavaScript a trois types de boîtes popup : boîte d'alerte, boîte de confirmation et boîte de saisie.

Boîte de dialogue d'alerte

Une boîte d'alerte est souvent utilisée si vous souhaitez notifier l'utilisateur de quelque chose. Lorsque une boîte d'alerte apparaît
en haut, l'utilisateur devra cliquer sur "OK" pour continuer. Ce qui suit est un exemple démontrant un
Boîte de dialogue d'alerte JavaScript.

<Html>
<head>
Boîte de dialogue d'alerte JavaScript
</tête>
<body>
<script type="text/javascript">
[Link]être ("Vous avez cliqué sur le bouton de fermeture");
</script>
</body>
</Html>
OU
<Html>
<tête>
Boîte de dialogue d'alerte JavaScript
</tête>
<body>
<script type="text/javascript">

Page 56 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

alerte("Vous avez cliqué sur le bouton fermer");
</script>
</body>
</Html>
Confirmer la boîte de dialogue

JavaScript utilise une boîte de confirmation si vous voulez que l'utilisateur vérifie ou accepte quelque chose. Quand un
Une boîte de confirmation s'affiche, l'utilisateur devra cliquer soit sur "OK" soit sur "Annuler" pour continuer. Le
Les deux exemples suivants montrent l'utilisation des boutons de confirmation en JavaScript.

Exemple 1
<Html>
<tête>
Boîte de dialogue de confirmation JavaScript
</tête>
<corps>
<script type="text/javascript">
var réponse;
si(confirm("appuyez sur un bouton !"))
{
vous avez appuyé sur OK !
}
sinon
{
Vous avez appuyé sur Annuler !
}
[Link](response);
</script>
</body>
</Html>
Exemple 2
<Html>
<tête>
Boîte de dialogue de confirmation JavaScript
</tête>
<corps>
<script type="text/javascript">
var name=confirmer("appuyez sur un bouton")
si (nom==vrai)
{
[Link]("vous avez appuyé sur OK")
}

Page 57 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

sinon
{
vous avez appuyé sur annuler
}
</script>
</body>
</Html>
Boîte de dialogue contextuelle

Une boîte de dialogue JavaScript est souvent utilisée si vous voulez que l'utilisateur saisisse une valeur avant d'entrer un
page. Lorsqu'une boîte de dialogue apparaît, l'utilisateur devra cliquer soit sur "OK" soit sur "Annuler" pour continuer
après avoir saisi une valeur d'entrée. Les exemples suivants démontrent l'utilisation d'un Pop JavaScript
Boîte supérieure.

Exemple 1
<Html>
<Tête>
Boîte de dialogue pop-up JavaScript
</tête>
<corps>
<script type="text/javascript">
var personne = prompt("Veuillez entrer votre nom", "Entrez le nom");
si (personne == null || personne == "")
{
L'utilisateur a annulé l'invite.
}
sinon
{
Bonjour
}
[Link](response);
</script>
</body>
</Html>
Exemple 2
<Html>
<tête>
Boîte de dialogue d'invite JavaScript
</tête>
<body>
<script type="text/javascript">
var name=prompt("veuillez entrer votre nom", " ")

Page 58 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

si(name!=null && name!=" ")
{
[Link]("Bonjour"+" "+name)
}
</script>
</body>
</Html>
Boutons radio Javascript
<Html>
<tête>
Bouton Radio JavaScript
</tête>
<corps>
<form>
Quel navigateur est votre préféré<br />
<input type="radio" name="navigateur" onclick="check([Link])"
value="Explorer" />Microsoft Internet Explorer<br />
<input type="radio" name="navigateur" onclick="check([Link])"
valeur="Firefox" />Mozilla Firefox<br />
<input type="text" name="réponse" />
</form>
</corps>
</html>
Cases à cocher Javascript

<Html>
<tête>
Cases à cocher JavaScript
<script type="text/javascript">
fonction vérifier ()
{
[Link][0].coffee
réponse=[Link][0].réponse

pour(i=0;i<[Link];i++)
{
si(café[i].coché)
{
txt=txt+coffee[i].value+" "
}
}
[Link]="you ordered a coffee with"+txt

Page 59 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

}
</script>>
</tête>
<corps>
<form>
Comment aimeriez-vous votre café ?
<input type="checkbox" name="coffee" value="cream" />avec crème<br />
<input type="checkbox" name="coffee" value="sugar" />Avec du sucre<br />
<input type="text" name="réponse" size="30" />
<input type="button" name="test" onclick="check()" value="Order" />
</form>
</body>
</html>
Événements Javascript et Gestion des Événements

Les événements sont des choses qui se produisent. Par exemple, le lever du soleil est un événement. Le coucher du soleil est un
événement. Vous pouvez choisir de réagir à ces événements. Par exemple, lorsque le soleil se lève, vous pourriez obtenir
hors du lit ou vous ne le ferez peut-être pas. Quand le soleil se couche, vous pourriez allumer une lumière ou aller au lit.

Dans la conception et le développement web, les événements sont les choses qui se produisent sur une page web. Par exemple, un
L'utilisateur peut passer la souris sur un bouton, cliquer sur un bouton ou soumettre un formulaire. Comme dans l'exemple de
le soleil se levant, vous pouvez choisir de réagir à l'événement ou vous pouvez l'ignorer. L'interaction de JavaScript
avec HTML est géré par des événements qui se produisent lorsque l'utilisateur ou le navigateur manipule un
page. Les exemples suivants sont des événements courants rencontrés sur une page web :

Chargement de la page
ii. Clic sur le bouton
iii. Touche Pressée
iv. Fermer une fenêtre
v. Redimensionner une fenêtre

Les développeurs peuvent utiliser ces événements pour exécuter des réponses codées en JavaScript, ce qui provoque des boutons pour
fermer les fenêtres, messages à afficher aux utilisateurs, données à valider, et pratiquement tout autre
type de réponse imaginable.
En général, il existe quatre types d'événements :
•Événements de formulaire : Inclut des éléments comme la sélection d'une case à cocher ou la soumission du formulaire lui-même.
Réagir aux événements de formulaire est l'une des choses les plus courantes que les programmeurs JavaScript font.

•Événements de souris : Cela peut être n'importe quoi, d'un clic de souris aux mouvements de la souris sur la page.
C'est vrai ; vous pouvez en fait suivre où se trouve la souris sur une page et réagir à cela.
•Événements de clavier : Les choses qui se produisent à travers le clavier, comme une pression sur une touche, sont considérées
événements de clavier.

•Événements de page : Des choses comme le chargement ou le déchargement de la page sont considérées comme des événements de page

Page 60 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

La réponse aux événements est gérée par des gestionnaires d'événements. Les exemples suivants sont des événements.
gestionnaires disponibles en JavaScript :

auFlou
•auSurvol
surChangement

•surClic
•surFocus
auChargement

•surSoumettre

•onUnload
•surSélectionner

Ci-dessous, nous examinons certains de ces gestionnaires d'événements et des exemples en JavaScript.

Type d'événement onClick

C'est le type d'événement le plus couramment utilisé qui se produit lorsqu'un utilisateur clique sur le bouton gauche de sa souris.
souris. Vous pouvez mettre votre validation, avertissement, etc., contre ce type d'événement. Instances lorsque un
Le gestionnaire d'événements onClick est appelé y compris quand :

Un objet dans un bouton (classique, radio, réinitialiser et soumettre) est cliqué,

Un lien est poussé

•Une case à cocher est cochée ou

Une zone de carte d'image est sélectionnée.

Voici un exemple de code JavaScript pour un événement onClick :

<Html>
<tête>
<script type="text/javascript">
fonction direBonjour ( )
{
[Link] ("Bonjour le monde") ;
}
</script>
</tête>

Page 61 sur 68 CONCEPTION ET DÉVELOPPEMENT WEB

<body>
<p>Cliquez sur le bouton suivant et voyez le résultat</p>
<input type="button" onclick="direBonjour()" value="Dire Bonjour" />
</corps>
</html>
Type d'événement onChange

Un événement de changement se produit lorsqu'un champ de texte ou une zone de texte perd le focus et que sa valeur a été
modifié. Le gestionnaire d'événements onChange exécute du code JavaScript lorsqu'un événement de changement se produit.
Le gestionnaire d'événements onChange est utilisé pour valider les données après qu'elles aient été modifiées par un utilisateur. Le suivant

est un exemple de onChange en action :

<Html>
exemple de gestionnaire d'événements onChange
<script type="text/javascript">
fonction validchange (formulaire)
{
var entrée;
input=[Link];
Alerte("Vous avez changé les frais de 45000 " + input );
}
</script>
</tête>
<corps>
Essayez de changer la valeur de 45000 à quelque chose d'autre :<br>
<form name="frmChuka">
<input type="text" name="txtFees" value="45000" size=10>
onChange="validchange([Link])">
</form>
</body>
</html>
Type d'événement onFocus

Un gestionnaire d'événements onFocus exécute du code JavaScript lorsque le focus d'entrée entre dans le champ soit par
tabulation en cliquant mais sans sélectionner d'entrée dans le champ. Pour Windows, cadres et
Les cadres exécutent le gestionnaire d'événements du code JavaScript lorsque la fenêtre est mise au premier plan.
Voici un exemple de cet événement en code JavaScript :
<html>
exemple de gestionnaire d'événements onFocus
<tête>
</tête>
<corps>
<h3>exemple de gestionnaire d'événements onFocus</h3>

Page 62 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

cliquez avec votre souris dans la zone de texte :<br/>
<form name="monformulaire">
<input type="text" name="data" value="" size=10 onFocus='alert("vous avez mis le focus sur le
textbox!!")'> </form>
</body>
</html>
Type d'événement onLoad

Un événement onLoad se produit lorsqu'une fenêtre ou une image a fini de charger. Pour les fenêtres, cet événement
le gestionnaire est spécifié dans l'attribut body de la fenêtre. Dans une image, le gestionnaire d'événements va
exécuter le texte du gestionnaire lorsque l'image est chargée.

<Html>
Exemple de gestionnaire d'événements onLoad
<tête>
<Script type="text/javascript">
fonction bonjour()
{
alerte("Bonjour tout le monde...\nCeci est un exemple de onLoad.");
}
</script>
</tête>
<body onLoad="hello()"> <H3>Exemple de gestionnaire d'événements onLoad</H3>
</corps>
</html>
Type d'événement onSubmit

Un gestionnaire d'événements onSubmit appelle du code JavaScript lorsque le formulaire est soumis. Par exemple après
En remplissant un formulaire et en cliquant sur le bouton Soumettre, l'événement onSubmit est appelé. Voici un exemple
pour démontrer cela :
<Html>
Exemple de gestionnaire d'événements onSubmit
<head> </head>
<body>
<Script type="text/javascript">
<h3>Exemple de gestionnaire d'événements onSubmit</h3>
Tapez votre nom et appuyez sur le bouton<br>
<form name="myform" onSubmit="alert('Merci ' + [Link] +'!')">
<input type="text" name="données">
<input type="submit" name ="submit" value="Submit this form">
</form>
</Scipt>

Page 63 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

</body>
</Html>
Type d'événement onUnLoad

Un gestionnaire d'événements onUnload appelle du code JavaScript lorsqu'un document est quitté. Par exemple lorsque
une page web est fermée. Voici un exemple pour ce gestionnaire d'événements :

<Html>
<tête>
<Script type="text/JavaScript">
fonction au revoir()
{
Alerte("Merci de votre visite !");
}
</script>
</tête>
<body onUnLoad="au_revoir()">
<h3>Exemple de gestionnaire d'événements onUnload</h3>

Regardez ce qui se passe quand vous essayez de quitter cette page...

</corps>
</Html>
Type d'événement onBlur

Lorsqu'un composant web est un point de concentration, on dit qu'il a le focus et quand il ne l'est plus.
composant de focus, on dit qu'il a perdu le focus. Un événement de flou se produit lorsqu'un sélecteur, du texte ou du texte
la zone sur un formulaire perd le focus. Le gestionnaire d'événements onBlur exécute du code JavaScript lorsqu'un événement de flou se produit
se produit. Un exemple concerne un champ de texte sur lequel les utilisateurs doivent taper leur nom d'utilisateur. Nous pouvons
je veux utiliser JavaScript pour garantir que l'utilisateur ne quitte jamais le composant de champ de texte si le
Le nom d'utilisateur n'a pas été saisi ou le nom d'utilisateur saisi ne respecte pas le format requis. Quand un
l'utilisateur tente de quitter le champ de texte, le gestionnaire d'événements onBlur appelle la fonction requise () pour
confirmer que le nom d'utilisateur a une valeur légale

<Html>
Exemple de gestionnaire d'événements onBlur
<tête>
<Script type= "text/JavaScript">
fonction valide(forme)
{
var input=0;
input=[Link];
si (entrée < 0)

Page 64 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

{
Veuillez saisir une valeur inférieure à 0
}
}
</Script>
</tête>
<corps>
<h3> Exemple de gestionnaire d'événement onBlur </h3>
Essayez d'entrer une valeur inférieure à zéro :<br>
<form name="monformulaire">
<input type="text" name="data" value="" size=10 onBlur="valid([Link])">
</form>
</corps>
</Html>

Autres exemples de JavaScript

Exemple 1 : Image de survol

<html>
<tête>
Passer la souris avec des événements
<script type="text/javascript">
si([Link])
{
var image1 = new Image(); // Précharger une image
100_2440.jpg
var image2 = new Image(); // Précharger la deuxième image
100_2408.jpg
}
</script>
</tête>
<corps>
<p>Déplacez votre souris sur l'image pour voir le résultat</p>
<a href="#" onMouseOver="[Link]=[Link];"
onMouseOut="[Link]=[Link];">
<img name="myImage" src="100_2440.JPG" />
</a>

Page 65 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

</body>
</html>
Exemple 2 : Additionner deux entiers

<Html>
<tête>
Obtention d'entrées via JavaScript
</tête>
<corps>
Entrez le premier numéro : <br>
<input type="text" id="num1" name="num1"> <br>
Entrez le deuxième nombre : <br>
<input type="text" id="num2" name="num2"> <br>
<br>
<input type="text" id="result" name="result"><br>
<input type="button" name="clickbtn" value="Display Result" onclick="add_number()">
<script type="text/javascript">
function ajouter_numéro()
{
var premier_nombre = parseInt([Link]("num1").value);
var second_number = parseInt([Link]("num2").value);
var résultat = premier_nombre + second_nombre;
[Link]("result").value = result;
}
</script>
</body>
</html>
Exemple 3 : Validation de formulaire JavaScript

<html>
<tête>
Validation de formulaire
<script type="text/javascript">
// Le code de validation du formulaire viendra ici
fonction valider()
{
si( [Link] == "" )
{
alerte( "Veuillez fournir votre nom !" );
[Link]() ;
retourner faux;
}
si( [Link] == "" )

Page 66 de 68 CONCEPTION ET DÉVELOPPEMENT WEB

{
Alerte( "Veuillez fournir votre e-mail !" );
[Link]();
retourner faux;
}
si( [Link] == "" ||
isNaN( [Link] ) ||
[Link] != 3
{
Veuillez fournir un code pays au format ###.
[Link]();
retourner faux;
}
si( [Link] == "-1" )
{
alerte( "Veuillez fournir votre pays !" );
retourner faux;
}
retourner( vrai );
}
</script>
</tête>
<corps>
<form action=" " name="myForm"
onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1" align="center">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">Email</td>
<input type="text" name="EMail" />
</tr>
<tr>
<td align="right">Code du pays</td>
<td><input type="text" name="code" /></td>
</tr>
<tr>
<td align="right">Pays</td>
<td>
<select name="Pays">
<option value="-1" selected>[choisissez le vôtre]</option>

Page 67 sur 68 CONCEPTION ET DÉVELOPPEMENT WEB

<option value="1">KENYA</option>
<option value="2">UGANDA</option>
<option value="3">TANZANIA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<input type="submit" value="Soumettre" />
</tr>
</table>
</form>
</body>
</html>
95551
NB :
Pour une base solide en conception et développement web, et surtout les trois
technologies considérées dans cette classe, le site webURL cannot be [Link]
recommandé.
Maintenant que vous êtes capable de créer des sites web en HTML, CSS et Joomla ; passez à
Des frameworks tels que Bootstrap et WordPress. Je recommande d'explorer Bootstrap même si
nous passons à la programmation web.

Page 68 de 68 CONCEPTION ET DÉVELOPPEMENT WEB