Support de Cours Animation de Site Web - 2023

Apprendre les bases du langage
Pour créer des sites web
Communication Digitale de l’Entreprise et Relation

Filière : LPU
Client (CDRC)
Année universitaire : 2022/2023
Outils de communication pour optimiser la
visibilité de votre PME
Commerce, boutique en ligne, entreprise de service…

qu’importe votre activité, communiquer est d’une importance
capitale et il est crucial d’utiliser les bons outils de
communication.
En effet, il est nécessaire de vous faire connaitre, de valoriser

vos produits et services pour attirer de nouveaux prospects et
fidéliser vos clients.
Vous y avez déjà pensé, mais n’avez jamais eu le temps de
mettre en place ou d’optimiser la stratégie de
communication de votre entreprise ?
Voici alors quelques outils de communication qui sauront

renforcer l’image de votre PME. Bien que les outils de notre
liste ne soient pas exhaustifs, vous trouverez certainement
celui ou ceux qui conviendront à votre activité, cible et
budget.
Gardez en tête que ces outils de communication doivent être

cohérent avec votre stratégie de communication globale,
Liste complète des outils pour la communication de votre PME
1 – Réseau physique
2 – Flyers
3 – Phoning
4 – Organisation d’évènements
5 – Salons professionnels
6 – Formations
7 – Relation presse
8 – Donner une interview
9 – Messages sonores
10 – Publiez un magazine
11 – Cartes de visite personnalisées
12 – Prospection client
13 – Radio
14 – SMS
15 – Goodies
16 – Plaquette commerciale
17 – Street Marketing
18 – Co-Branding
19 – Billboard
20 – Parrainage d’évènements
21 – Parrainage culturel
22 – Veille concurrentielle
23 – Mailing
24 – Ambassadeurs
25 – Télévision
26 – Couponing
27 – Site internet
28 – Blog
29 – Micro-site
30 – Landing Page
31 – Guest Blog
32 – Annuaires
33 – Facebook
34 – Twitter
35 – Instagram
36 – WhatsApp
37 – TweetChat
38 – Linkedln
39 – Viadeo
40 – Pinterest
41 – YouTube
42 – Tchat
43 – Réseaux sociaux locaux
44 – Référencement naturel
45 – AdWords
46 – E-book
47 – NewsJacking
48 – Infographie
49 – SlideShare
50 – Google My Business
51 – Prospection Clients
52 – Location de Base de Données Clients
53 – Webinar
54 – Témoignages
55 – Tuto
56 – Gaming
57 – Livre blanc
58 – Newsletter
59 – Curation de contenu
60 – Offres d’emploi
61 – Applications mobiles
Site internet : l’outil de communication le plus
complet
Pourquoi le web est-il indispensable pour

votre communication ?
L’année 2000 a marqué le début de la démocratisation

d’internet et de l’explosion du trafic (environ 370
millions de connectés, selon Wikipédia) qui ne cesse
d’augmenter au fil des années.
L’usage d’internet en 2017
Selon les statistiques du Blog du Modérateur, au niveau mondial 51% de

la population a surfé sur internet (3,81 milliards de personnes)
Le taux de pénétration est de 84% en Europe de l’Ouest.
L’Amérique du Nord dispose d’un taux supérieur (88%).
Voici les chiffres recensés pour la France :
•74% des français accèdent à Internet tous les jours

•95% des utilisateurs du web ont entre 18 et 24 ans
•Le temps journalier moyen passé sur le web est de 58 minutes.
•60% des français ont effectué au moins un achat en ligne en 2016.
Ces chiffres attestent de la grande popularité du web et

notamment chez les jeunes.
Rapport digital 2022 Maroc Tendances numérique
https://www.niemeconseil.ma/rapport-
digital-2022-maroc/
L’essor des médias sociaux
Aujourd’hui, Internet ne se limite plus à effectuer une recherche sur un

moteur de recherche (Google , Bing, Yahoo …). Les réseaux sociaux ont
désormais une influence de grande ampleur, en particulier pour le partage
d’informations.
Le blog du modérateur a établi la liste des 10 réseaux sociaux les plus en
vogue dans le monde en 2017 :
•Facebook : 2 milliard
•Instagram : 700 millions
•Qzone : 653 millions
•Tumblr : 555 millions
•Twitter : 330 millions
•Baidu Tieba : 300 millions
•Sina Weibo : 222 millions
•Snapchat : 166 millions (par jour)
•Pinterest : 150 millions
•LinkedIn : 106 millions
Ce classement ne comprend pas la plateforme de partage de contenu

vidéo YouTube qui rassemble quelques 1,5 milliards d’utilisateurs
mensuels.
En France, le temps moyen passé sur les réseaux sociaux par jour est
1h20.
Les avantages d’un site web
Posséder un site internet pour votre commune va

vous permettre :
 D’attirer de nouveaux visiteurs dans votre ville
 D’attirer de nouveaux habitants ou commerçants
 Communiquer sur votre commune
 D’interagir en direct via un module de tchat

Comment créer et gérer votre site web ?
En conclusion, posséder un site web se révèle d’une

importance cruciale pour communiquer sur votre
commune et attirer des visiteurs ou de nouveaux citoyens.
Un site web peut être géré par l’ensemble de vos employés
aisément, n’hésitez donc plus à vous lancer !
Comment fonctionnent des sites web
Le Web a été inventé par Tim Berners-Lee au
début des années 1990.
Vous consultez des sites web tous les jours. Pour

cela, vous lancez un programme appelé le
navigateur web
en cliquant sur l'une des icônes représentées à la
figure suivante.
Navigateur
Le navigateur est le programme qui permet de voir les
sites web. le travail du navigateur est de lire le code
HTML et CSS pour afficher un résultat visuel à l'écran.
Avec le navigateur, vous pouvez consulter n'importe

quel site web. Voici par exemple un navigateur
affichant le célèbre site web Wikipédia.
Navigateur
Langages
HTML et CSS
Traduction par l’ordinateur (exactement Navigateur)
Résultat
visible
À l’écran
Une page Web c’est …
• Un fichier HTML est un format de fichier « texte »

éditable dont les éléments ont du sens
• Au format .html ou .htm
• Peut contenir du texte, des images, des liens, des
médias, etc.
• Peut être liée à une autre page via des liens
Un site Web c’est ...
• Un ensemble de pages liées entre elles généralement

consacrées à un sujet déterminé.
• Accessible en ligne depuis n'importe où
• Contenus textuels dans le fichier HTML, mais aussi
images, sons, vidéos, CSS, JavaScript, polices
d'écriture, etc.
• Un site Internet constitue l'outil le plus moderne de
communication et de publication.
• Tous ces fichiers sont chargés dans le navigateur
pour créer une page web.
Les bases
HTML et CSS : deux langages pour créer un site web
Pour créer un site web, on doit donner des instructions

à l'ordinateur. Pour expliquer à l'ordinateur ce qu’on
voulait faire,
Il ne suffit pas simplement de taper le texte qui devra

figurer dans le site (comme on le ferait dans un
traitement de texte Word, par exemple), il faut aussi
indiquer où placer ce texte, insérer des images, faire
des liens entre les pages, etc.
Les bases
Pourquoi deux langages ? Un seul aurait suffi, non ?
Manipuler deux langages va être deux fois plus

complexe et deux fois plus long à apprendre ???
Au contraire, pour faciliter les choses. Nous allons

avoir affaire à deux langages qui se complètent car ils
ont des rôles différents.
Il y a eu plusieurs versions des langages HTML et

CSS. Les dernières versions sont HTML5 et CSS3.
Les bases
HTML (HyperText Markup Language) : il a fait son
apparition dès 1991 lors du lancement du Web. Son
rôle est de gérer et organiser le contenu d’une page
web.
C'est donc en HTML qu’on écrit ce qui doit être
affiché sur la page : (du texte, des liens, des images …)
CSS (Cascading Style Sheets, aussi appelées Feuilles

de style) : le rôle du CSS est de gérer l'apparence de
la page web (agencement, positionnement, décoration,
couleurs, taille du texte …). Ce langage est venu
compléter le HTML en 1996.
Les bases
HTML
(pas de CSS)
HTML + CSS
Les bases
Nous travaillerons dans un programme appelé
«éditeur de texte»
On n’aura pas besoin d’aller chercher un logiciel

payant et compliqué, Bloc-Notes est suffisant.
Les bases
On utilisera Notepad++.
Faire la manipulation suivante :
Allez dans le menu Langage > H > HTML.
Cela permettra au logiciel de savoir que l'on va taper

du HTML.
Il colorera le code, ce qui permettra de se repérer plus

facilement.
Les bases
En résumé
 Le Web a été inventé par Tim Berners-Lee au début des années 1990..
 Pour créer des sites web, on utilise deux langages informatiques :
• HTML : permet d'écrire et organiser le contenu de la page (paragraphes,
titres…) ;
• CSS : permet de mettre en forme la page (couleur, taille…).
 Il y a eu plusieurs versions des langages HTML et CSS. Les dernières versions sont
HTML5 et CSS3.
 Le navigateur web est un programme qui permet d'afficher des sites web. Il lit les
langages HTML et CSS pour savoir ce qu'il doit afficher.
 Il existe de nombreux navigateurs web différents : Google Chrome, Mozilla Firefox,
Internet Explorer, Safari, Opera… Chacun affiche un site web de manière légèrement
différente des autres navigateurs.
 Dans ce cours, nous allons apprendre à utiliser les langages HTML et CSS. Nous
travaillerons dans un programme appelé « éditeur de texte » (Notepad++).
HTML, les principes
1 2
4 3
HTML, les principes
Il contient des commandes, implémentées par des

balises pour marquer les différents types de texte (titres,
paragraphe, listes …) , pour inclure des images, des
formulaires, des liens …
C'est un langage à balisage qui décrit la structure

logique d'un document hypertexte.
HTML, les principes
Les attributs sont un peu les options des balises. Ils viennent les compléter pour
donner des informations supplémentaires. L'attribut se place après le nom de la
balise ouvrante et a le plus souvent une valeur, comme ceci
À quoi cela sert-il ? Prenons la balise <image /> que nous venons de voir. , elle
ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de
l'image à afficher :
HTML, les principes
Les balises en paires : Elles s'ouvrent, contiennent du texte, et se ferment plus

loin. Voici à quoi elles ressemblent :
Les balises orphelines : Ce sont des balises qui servent le plus souvent à insérer
un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire
de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur «
Insère une image ici ».
L'hypertexte
Le langage HTML permet de créer des documents

interactifs grâce à des liens hypertextes, qui relient votre
document à d'autres documents.
En cliquant sur une zone de texte (ou une image, un

logo) mise en évidence, on peut accéder a un nouveau
document situé sur un autre ordinateur en n'importe quel
point du globe.
Introduction
Une page HTML se compose de quatre balises indispensables :
 La balise <HTML></HTML>
Contient toutes les autres balises.
 Le document source doit commencer par <HTML> et se finir par </HTML>.
 La balise <HEAD></HEAD>
 Définit l'en-tête du document.
 Contient des informations qui ne sont pas visibles dites métas informations.
 La balise <TITLE></TITLE>
 Se trouve dans la balise <HEAD>
 Titre de la page
 Est le seul élément visible qui se trouve dans l'en-tête.
 La balise <BODY></BODY>
 Contient les informations qui seront visibles,
 c'est le corps de votre document.
Il existe deux type de balise :
Les balises en paires : Elles s'ouvrent, contiennent du texte, et se ferment plus loin.
Les balises orphelines : Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis
(par exemple une image).
Exercice : première page web en HTML
Créez de la même façon une page nommée index.html qui contient le texte suivant :
<html>
<head>
<title>ma page d'accueil</title>
</head>
<body>
Bonjour bienvenue sur ma page d'accueil, voici ma page 1 :
</body>
</html>
Exercice
Créez de la même façon une page nommée page1.html (attention pas de majuscule)
qui contient le texte suivant :
<html>
<head><title>Page 2</title></head>
<body>
Voici ma page 1, retour à la page d'accueil :
<a href="index.html">ici</a>
</body>
</html>
Enregistrons ce fichier sous le nom page1.htm.

HTML, les principes
1 2
3
Les attributs / Les Commentaire
 Les attributs sont les options des balises. Ils viennent les compléter pour
donner des informations supplémentaires.
 L'attribut se place après le nom de la balise ouvrante et a le plus souvent une
valeur, comme ceci :
<balise attribut=‘valeur’>
• Un commentaire est une balise HTML avec une forme bien spéciale :
il n'a aucun impact sur votre page, mais vous pouvez vous en servir pour vous
aider à vous repérer dans votre code source (surtout s'il est long).
<!- - Ceci est un commentaire - ->

En résumé
 On utilise l'éditeur de texte (Notepad++) pour créer un fichier ayant l'extension .html
(par exemple : test.html). Ce sera notre page web.
 Ce fichier peut être ouvert dans le navigateur web simplement en faisant un double-
clic dessus.
 À l'intérieur du fichier, nous écrirons le contenu de notre page, accompagné de
balises HTML.
 Les balises peuvent avoir plusieurs formes :
 <balise> </balise> : elles s'ouvrent et se ferment pour délimiter le contenu (début
et fin d'un titre, par exemple).
 <balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles
permettent d'insérer un élément à un endroit précis (par exemple une image).
 Les balises sont parfois accompagnées d'attributs pour donner des indications
supplémentaires (exemple : <image nom="photo.jpg" />).
 Une page web est constituée de deux sections principales : un en-tête (<head>) et un
corps (<body>).
 On peut afficher le code source de n'importe quelle page web en faisant un clic droit
puis en sélectionnant Afficher le code source de la page.
Les paragraphes
 Le paragraphe se détermine grâce à la balise
<P> </P>
<p> signifie « Début du paragraphe » ; </p> signifie « Fin du paragraphe ».
 La balise <P> génère un saut de ligne
Exercice
<html>
<head>
<title>Paragraphes</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Sauter une ligne
 En HTML, si vous appuyez sur la touche Entrée, cela ne crée pas une
nouvelle ligne comme vous en avez l'habitude. Essayez donc ce code
Exercice
<html>
<head>
<title>Essais de sauts de ligne</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !
Ceci est mon premier test alors soyez indulgents s'il
vous plaît, j'apprends petit à petit comment cela marche.
Pour l'instant c'est un peu vide, mais revenez dans 2-3
jours quand j'aurai appris un peu plus de choses, je vous assure que
vous allez être surpris !</p>
</body>
</html>
Sauter une ligne
 si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une

deuxième balise <p>.
Exercice
<html>
<head>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !
Ceci est mon premier test alors soyez indulgents s'il vous
plaît, j'apprends petit à petit comment cela marche.</p>
<p>Pour l'instant c'est un peu vide, mais revenez dans 2-3

</body>
</html>
Sauts de ligne
 la balise <BR/> qui ne possède pas de balise de fin
Exercice
Insérer la balise <BR/> dans le texte
Sauter une ligne
 <br/> : C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la
ligne : <br />. Vous devez obligatoirement la mettre à l'intérieur d'un
paragraphe..
Exercice
<html>
<head>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test alors soyez indulgents s'il vous
plaît, j'apprends petit à petit comment cela marche.</p>
<p>Pour l'instant c'est un peu vide, mais revenez dans 2-3

</body>
</html>
Sauter une ligne
 <p> </p> : pour organiser le texte en paragraphes ;

 <br /> : pour aller à la ligne.
Titre de chapitre
 balise <Hn> </Hn>
 "n" est un chiffre comprit entre 1 et 6 qui détermine la taille du titre
 1 est la plus grosse taille
Exercice
Insérer <Hn> Mon titre </Hn> dans le <Body>
Titre de chapitre
 Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes,

il va devenir difficile pour vos visiteurs de se repérer. C'est là que les titres
deviennent utiles.
Exercice
<html>
<head>
<title>Titre de chapitre</title>
</head>
<body>
<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>
<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>
</body>
</html>
Filet horizontal
 Balise <hr/>
 Donne plus de clarté au document HTML
Exercice
<html>
<head>
</head>
<body>
<hr/>
<hr/>
</body>
</html>
La mise en valeur
 Au sein de vos paragraphes, certains mots sont parfois plus importants que
d'autres et vous aimeriez les faire ressortir. HTML vous propose différents
moyens de mettre en valeur le texte de votre page.
Exercice
<html>
<head>
<title>Licence Communication Digitale de l’Entreprise et Relation Client </title>
</head>
<body>
<h1>Objectifs</h1>
<p><i>L’objectif de ce diplôme est de former les étudiants aux métiers
suivants</i></p>
<h2>Public concerné</h2>
<p><u>Bac + 2 ou plus</u></p>
<h2>Modalités de sélection</h2>
<p><b>Etude du dossier, </b> <br/> Test Ecrit et Entretien</p>
</body>
</html>
Couleur de fond de la page web
 Attribut BGCOLOR
 Modifier <BODY > par <BODY bgcolor=“#FFFF00">
 N'oubliez pas : HTML pour le fond, CSS pour la forme
https://www.w3.org/wiki/CSS/Properties/color/keywords
Exercice
<html>
<head>
</head>
<body bgcolor=“#FFFF00">
<hr/>
<hr/>
</body>
</html>
Couleur du texte
 Attribut text
 <BODY text=“aqua"> ou <BODY bgcolor="#00FFFF">.
Exercice
<html>
<head>
</head>
<body bgcolor="#00FFFF">
<hr/>
<hr/>
</body>
</html>
Image de fond
 Attribut BACKGROUND
 <BODY BACKGROUND= "image">
Exercice
<html>
<head>
</head>
<body BACKGROUND= ’C:\Users\Public\Pictures\Sample Pictures\Phare.jpg’>
<hr/>
<hr/>
</body>
</html>
Mise en forme du texte
 Gras: Balise <B> … du texte …</B>
 Italique: Balise <I> … du texte … </I>
 Souligné: <U> … du texte … </U>
 Taille: <FONT size="10pt">… du texte …</FONT>
 Couleur: <FONT color="red"> … du texte … </FONT>
 Police: <FONT face="arial"> … du texte …</FONT>
Exercice
Appliquer toutes ces balises sur votre texte
Les listes
Les listes nous permettent souvent de mieux structurer notre texte et
d'ordonner nos informations.
Nous allons découvrir ici deux types de listes :
 les listes non ordonnées ou listes à puces ;
 les listes ordonnées ou listes numérotées ou encore énumérations.
Les listes
 les listes non ordonnées
Exercice
<html>
<head>
</head>
<body>
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>
</body>
</html>
Les listes
 les listes ordonnées ou listes numérotées ou encore énumérations
Exercice
<html>
<head>
</head>
<body>
<ol>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ol>
</body>
</html>
En résumé
 Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte

de notre page. Ces balises donnent des indications comme « Ceci est un paragraphe
», « Ceci est un titre », etc.
 Les paragraphes sont définis par la balise <p> </p> et les sauts de ligne par la balise
<br />.
 Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6>, à utiliser selon l'importance
du titre.
 On peut mettre en valeur certains mots avec les balises <b>, <u> et <i>.
Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée) ou <ol>
(liste ordonnée). À l'intérieur, on insère les éléments avec une balise <li> pour chaque
item.
Les liens : relatifs / Absolus
 un lien : est un texte sur lequel on peut cliquer pour se rendre sur une autre
page.
Un lien vers un autre site (Lien absolu)

 <a href="http://encgcasa.ma">Ecole Nationale de Commerce et de Gestion de
Casablanca</a>
Un lien vers une autre page de son site (Lien relatif)
 Deux page situé dans un même dossier
 <a href="page2.html">la page2</a>
 Deux pages situées dans des dossiers différents
 <a href="contenu/page2.html">
 <a href="contenu/autredossier/page2.html">
 Si votre fichier cible est placé dans un dossier qui se trouve « plus
haut » dans l'arborescence, il faut écrire deux points comme ceci :
 <a href="../page2.html">
Un lien vers un autre site
Exercice
<html>
<head>
<title>Page1</title>
</head>
<body>
<p> Bonjour. Souhaiter-vous visiter le
<a href="http://www.encgcasa.ma">Site web de l’ENCG Casablanca</a>?<br/>
C’est une école de commerce et de gestion
</p>
</body>
</html>
Un lien vers une autre page de son site
 Deux pages situées dans un même dossier
 Nous allons créer deux pages HTML différentes. je vous propose de les appeler page1.html et
page2.html. Nous aurons donc ces deux fichiers sur notre disque dans le même dossier (figure
suivante).
Un lien vers une autre page de son site
 Deux pages situées dans un même dossier
 Nous allons créer deux pages HTML différentes. je vous propose de les appeler page1.html et
page2.html. Nous aurons donc ces deux fichiers sur notre disque dans le même dossier (figure
suivante).
Exercice
Page 1.html Page 2.html
<html> <html>
<head> <head>
<title> page1.html </title> <title> page1.html </title>
</head> </head>
<body> <body>
<h1>Bienvenue sur la page 1 !</h1> <h1>Bienvenue sur la page 2 !</h1>
<p> Bonjour. Souhaiter-vous visiter la <p> Bonjour. Souhaiter-vous visiter la
<a href="page2.html">page <a href="page1.html">page
2</a>? </p> 1</a>? </p>
</body> </body>
</html> </html>
Deux pages situées dans des dossiers différents
 les pages sont situées dans des dossiers différents (dans un sous-dossier par exemple).
 Imaginons que page2.html se trouve dans un sous-dossier appelé contenu, comme à la figure
suivante.
 Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans l'arborescence, il
faut écrire deux points comme ceci,
Deux pages situées dans des dossiers différents
 les pages sont situées dans des dossiers différents (dans un sous-dossier par exemple).
 Imaginons que page2.html se trouve dans un sous-dossier appelé contenu, comme à la figure
suivante.
 Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans l'arborescence, il
faut écrire deux points comme ceci,
Exercice
Page 1.html Contenu/Page 2.html
<html> <html>
<head> <head>
<title> page1.html </title> <title> page1.html </title>
</head> </head>
<body> <body>
<h1>Bienvenue sur la page 1 !</h1> <h1>Bienvenue sur la page 2 !</h1>
<p> Bonjour. Souhaiter-vous visiter la <p> Bonjour. Souhaiter-vous visiter la
<a <a href=« ../page1.html">page
href=« contenu/page2.html">p 1</a>? </p>
age 2</a>? </p> </body>
</body> </html>
</html>
Résumé
 Il suffit de regarder dans quel «niveau de dossier » se trouve votre fichier
cible pour savoir comment écrire votre lien. La figure suivante fait la
synthèse des différents liens relatifs possibles.
La couleur des liens
 Attribut link dans la balise body
 Couleur des liens ------- > attribut link
 Couleur des liens actifs ------- > attribut alink
 Couleur des liens visités ------- > attribut vlink
 N'oubliez pas : HTML pour le fond, CSS pour la forme
Exercice
<html>
<head>
</head>
<body link = ‘red’ alink = ‘green’ vlink = ‘blue’>
<hr/>
<hr/>
</body>
</html>
 l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le
Un
lien.lien qui affiche une infobulle au survol
Exercice
<html>
<head>
</head>
<body>
<a href="http://www.encgcasa.ma" title=‘Ecole Nationale de Commerce et de Gestion
de Casablanca’>Site web de l’ENCG Casablanca</a>?<br/>
</p>
</body>
</html>
Un
Attribut
lientarget
qui deouvre
la baliseune
<a> nouvelle fenêtre
Exercice
<html>
<head>
</head>
<body>
<a href="http://www.encgcasa.ma" target="_blank" >Site web de l’ENCG
Casablanca</a>?<br/>
</p>
</body>
</html>
 Supposez que vous vouliez faire télécharger monfichier.zip. Placez simplement
Un lien pour envoyer un e-mail
ce fichier dans le même dossier que votre page web (ou dans un sous-dossier) et
faites un lien vers ce fichier
Exercice
<html>
<head>
</head>
<body>
<p> Souhaiter-vous
<a href="monfichier.zip"> Télécharger le fichier </a>
</p>
</body>
</html>
 Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, vous pouvez
Un lien pour télécharger un fichier
utiliser des liens de type mailto. Rien ne change au niveau de la balise, vous
devez simplement modifier la valeur de l'attribut href comme ceci :
Exercice
<html>
<head>
</head>
<body>
<a href="mailto:encgcasa@encgcasa.ac.ma">Envoyez-moi un e-mail</a>
</p>
</body>
</html>
Un lien vers une ancre
Une ancre est une sorte de point de repère que vous pouvez
mettre dans vos pages HTML lorsqu'elles sont très longues.
En effet, il peut alors être utile de faire un lien amenant plus
bas dans la même page pour que le visiteur puisse sauter
directement à la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut id à
n'importe quelle balise qui va alors servir de repère.
<h2 id="mon_ancre">Titre</h2>
Ensuite, il suffit de créer un lien comme d'habitude, mais cette

fois l'attribut href contiendra un dièse (#) suivi du nom de
l'ancre.
<a href="#mon_ancre">Aller vers l'ancre</a>
Un lien vers une ancre
Exercice
<html>
<head>
</head>
<body>
<h1>Ma grande page</h1>
<p>Aller directement à la partie traitant de :<br />
<a href="#cuisine">La cuisine</a><br />
<a href="#rollers">Les rollers</a><br />
<a href="#arc">Le tir à l'arc</a><br />
</p>
<h2 id="cuisine">La cuisine</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="rollers">Les rollers</h2>
<h2 id="arc">Le tir à l'arc</h2>
</body>
</html>
En résumé
 Les liens permettent de changer de page et sont, par défaut, écrits en bleu et
soulignés.
 Pour insérer un lien, on utilise la balise <a> avec l'attribut href pour indiquer l'adresse
de la page cible.
 On peut faire un lien vers une autre page de son site simplement en écrivant le nom
du fichier : <a href="page2.html">.
 Les liens permettent aussi d'amener vers d'autres endroits sur la même page. Il faut
créer une ancre avec l'attribut id pour « marquer » un endroit dans la page, puis faire
un lien vers l'ancre comme ceci : <a href="#ancre">.
Les tableaux
Balises indispensables pour dessiner un tableau :
 La balise < table ></ table >

 indiquer le début et la fin d'un tableau.
 La balise < tr ></ tr >

 indique le début et la fin d'une ligne du tableau.
 La balise < td ></ td >

 indique le début et la fin du contenu d'une cellule.
 La balise < th ></ th>

 Indique une cellule de la première ligne du tableau (ligne d’en-tête).
 La balise < caption></ caption>

 contient le titre du tableau.
Exercice
<table border=« 1 » >
<caption>Passagers du vol 377</caption>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
</table>
Les tableaux : fusion des cellules
 Pour effectuer une fusion, on rajoute un attribut à la balise
<td>
 La fusion de colonnes : Plusieurs colonnes seront groupées
entre elles. La fusion s'effectuera horizontalement.
 On utilisera l'attribut colspan.
 La fusion de lignes : plusieurs lignes seront groupées entre
elles. La fusion s'effectuera verticalement.
 On utilisera l'attribut rowspan.
 Il faut indiquer le nombre de cellules à fusionner entre elles

 <td colspan="3">
 <td rowspan ="2">
Introduction
 La présence d’éléments de formulaires HTML fait
distinguer une application web d’un site web.
 Un formulaire HTML est une partie de page web qui

accepte des entrées de l’utilisateur.
Un formulaire peut contenir
 Des champs de saisi de texte;

 Des listes de sélections;
 Des boutons;
 Des cases à cocher;
 Des boutons d’options.
 Un bouton de soumission du formulaire et son contenu au serveur web.
Traitement du formulaire par le serveur web
 Récupération des valeurs des champs de formulaire;
 Traitements des données soumis;
 Génération d’une nouvelle page web;
 Renvoie de la page générer au client soumissionnaire du formulaire.
Définition de formulaire
BALISES ATTRIBUTS FONCTIONS
<FORM>… Balise qui permet de regrouper plusieurs éléments d'un formulaire (boutons, champs de
</FORM> saisie,...) et qui possède certains attributs obligatoires.
<FORM NAME = "nom" Un nom qui permet de différencier plusieurs formulaires sur une même page.
ATTRIBUTS>…</
FORM>
ACTION = "http://url" Envoyer les données du formulaire vers une adresse de site Web
ACTION = "mailto:url" Envoyer les données du formulaire vers une adresse E-Mail.
METHOD = "POST" Pour un envoi caché des informations vers une destination (CGI ou Email).
La méthode "POST" envoie le contenu du formulaire séparément de l'URL.
METHOD = "GET" La méthode ‘’GET’’ envoi le contenu du formulaire et l’enregistre dans la variable
d’environnement standard QUERY_STRING sur le serveur doté d’un protocole HTTP.
ENCTYPE = "?" "text/plain": Formulaire classique. Pour envoyer les informations par E-Mail.
"multipart/form-data": Si le formulaire doit contenir un fichier attaché.
"application/x-www-form-urlencoded": Si on a recours à un programme CGI.
TARGET = "?" Définit dans quelle fenêtre ou frame le résultat du formulaire sera affiché.
Valeur Action
nom_cadre Affiche la cible dans le cadre indiqué par le nom._
Self Affiche la cible dans le même cadre que le lien_
Parent Affiche la cible dans le cadre lié de niveau supérieur
_blank Affiche la cible dans une nouvelle fenêtre sans cadre
_top Affiche la cible dans la fenêtre entière du navigateur sans cadre
Exemple de page avec formulaire
<HTML>
<HEAD>
<TITLE>FORMULAIRE</TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">
<H3>Formulaire </H3>
<FORM ACTION="select_4.htm">
</FORM>
</BODY>
</HTML>
Entrée d’une ligne de texte
<INPUT TYPE = "text" Indique une boîte d'une seule ligne permettant l'entrée du
ATTRIBUTS> texte.
Autofocus : sélectionner automatiquement un champ
Required : rendre un champs obligatoire
NAME = "nom" Identifier la boîte de texte pour pouvoir repérer/identifier le

contenu
SIZE = nombre Spécifier la largeur de la boîte en nombre de caractères

Entrée d’une ligne de texte
MAXLENGTH = n Spécifier le nombre maximum de caractères permis dans la

boîte
Si ce nombre est plus grand que SIZE alors le texte se
défilera à l'horizontale
VALUE = "texte" Indiquer quoi écrire ou spécifier le début du texte à entrer
READONLY Convertit le "champ de saisie" en "champ de sortie" non

modifiable
PLACEHOLDER= Un champ de texte avec une indication

"Ex: Zozor"
Exemple « text »
<HTML>
<HEAD>
<TITLE>INPUT -1</TITLE>
</HEAD>
<H3>Formulaire pour entrer le nom</H3>
<FORM ACTION="index.htm">
<P>Prénom: </P>
<INPUT NAME="prénom" TYPE="search" SIZE="25"
MAXLENGTH="40"/>
<P>Nom de famille: </P>
<INPUT NAME="nom" TYPE="text" SIZE="25"
MAXLENGTH="40">
</FORM>
</BODY>
</HTML>
Entrée d’un « Mot de Passe »
<INPUT TYPE = Indentique à une boîte de texte sauf que l'écriture est remplacée
ATTRIBUTS> "password" par des * *
Les mots de passe sont, malgré la saisie cachée, transmis en clair
sur Internet
NAME = "nom" Donner un nom pour identifier/répérer le contenu de la boîte de

dialogue.
SIZE = nombre Spécifier la largeur de la boîte en nombre de caractères
VALUE = "texte" Indiquer le mot de passe qui apparaîtra sous forme ***** (Pas
sécuritaire!!)
Exemple « Password »
<HTML>
<HEAD>
<TITLE>PASSWORD -2</TITLE>
</HEAD>
<H3>Formulaire pour "mot de passe"</H3>
<FORM ACTION="password_2.htm">
<P>Nom : </P>
MAXLENGTH="20">
<P>Mot de Passe : </P>
<INPUT NAME="nom" TYPE="password" SIZE="8"
MAXLENGTH="5">
</FORM>
</BODY>
</HTML>
Entrée d’un choix par « Bouton Radio »
<INPUT TYPE = "radio" Disposera des boutons où un seul choix pourra être sélectionné.
ATTRIBUTS> Tous les boutons dans un même groupe doivent avoir le même
nom.
NAME = "nom" Identifie à quel groupe de boutons le 'bouton-radio' appartient.
VALUE = "texte" Indiquer le choix sélectionné. Peut être différent du choix affiché.
CHECKED Indique un choix par défaut parmi les options proposées.
DISABLED Montre les choix mais ne permet pas de faire, ou de modifier, la

sélection.
Exemple « Bouton Radio »
<HTML>
<HEAD>
<TITLE>RADIO-2</TITLE>
</HEAD>
<H3>Formulaire pour "sélection d'un choix"</H3>
<FORM ACTION="radio_2.htm">
<P>Faites votre choix:</P>
MAXLENGTH="40">
<INPUT TYPE="radio" NAME="Saison" VALUE="1">Printemps<BR>
<INPUT TYPE="radio" NAME="Saison" VALUE="2"
CHECKED>Eté<BR>
<INPUT TYPE="radio" NAME="Saison" VALUE="3">Automne<BR>
<INPUT TYPE="radio" NAME="Saison" VALUE="4">Hiver<BR>
</FORM>
</BODY>
</HTML>
Entrée de plusieurs choix par
« Cases à Cocher »

<INPUT TYPE = "checkbox" Disposera des cases où plusieurs choix pourront être sélectionnés.
ATTRIBUTS> Toutes les cases dans un même groupe doivent avoir le même nom
(NAME).
NAME = "nom" Identifie à quel groupe de cases la 'case à cocher' appartient.
VALUE = "texte" Indiquer le(s) choix sélectionné(s). Peut être différent du choix affiché.
CHECKED Indique un choix pré-définie parmi les options proposées.
DISABLED Montre les choix mais ne permet pas de faire, ou de modifier, la

sélection.
Exemple « Cases à Cocher »
<HTML>
<HEAD>
<TITLE>CHECKBOX-2</TITLE>
</HEAD>
<H3>Formulaire pour "sélection des choix"</H3>
<FORM ACTION="checkbox_2.htm">
<P>Faites votre choix:<P>
<INPUT TYPE="checkbox" NAME="4S" VALUE="1">Printemps<BR>
<INPUT TYPE="checkbox" NAME="4S" VALUE="2"
CHECKED>Eté<BR>
<INPUT TYPE="checkbox" NAME="4S" VALUE="3">Automne<BR>
<INPUT TYPE="checkbox" NAME="4S" VALUE="4">Hiver<BR>
</FORM>
</BODY>
</HTML>
Bouton « Envoyer »
<INPUT ATTRIBUTS> TYPE = "submit" Envoyer le formulaire à l'adresse indiquée dans

<FORM ACTION="...">
VALUE = "texte" Permet de modifier le texte affiché sur le

bouton. (Par défaut = Submit)
Bouton « Reset »
<INPUT TYPE = "reset" Remise à zéro de toutes les entrées du formulaire.

ATTRIBUTS>
VALUE = "texte" Permet de modifier le texte affiché sur le bouton. (Par

défaut = Reset)
Bouton général
<INPUT ATTRIBUTS > TYPE = "button" Utilisé pour placer une bouton cliquable à
l'écran.
Sans l'utilisation de 'fonctions JavaScript', le
bouton ne peut rien faire.
NAME = "nom" Donner un nom unique au bouton pour

identifier le clic de la souris.
VALUE = "texte" Permet de placer un ou des mots descriptifs sur

le bouton.
Bouton image

<INPUT ATTRIBUTS > TYPE = "image" Identique au "Submit" mais le bouton est
remplacé par une image.
Les coordonnées x et y de l'emplacement où
l'utilisateur a cliqué sur l'image
seront également envoyées avec les autres
informations du formulaire.
Liste déroulante
<SELECT>… Permet d'inclure une liste déroulante dans laquelle on
</SELECT> pourra faire un choix.
Les balises <OPTION> et </OPTION> permettent
de définir les choix.
<SELECT NAME = "nom" Assignera un nom à l'item sélectionné par
OPTIONS>… l'utilisateur.
</SELECT>
SIZE = "n" Indique le nombre d'items à afficher dans la fenêtre
en tout temps.
Si l'attribut n'est pas spécifié, une liste déroulante est
utilisé. (Size = 1)
MULTIPLE Permet de sélectionner plus qu'un item en enfonçant
le bouton 'Ctrl' ou 'Shift'
Si l'attribut n'est pas indiqué, un seul item de la liste
pourra être sélectionné.
DISABLED Permet de créer une liste désactivée, c'est-à-dire
affichée en grisée.
Items d’une liste déroulantes
<OPTION>… Permet de détailler les items d'une liste

</OPTION> déroulante.
<OPTION>… VALUE = "texte" Indiquera la phrase qui sera envoyé lors de la
</OPTION> sélection de l'item.
SELECTED Permet de pré-identifier un item de la liste

déroulante.
Exemple
<HTML>
<HEAD>
<TITLE>Submit</TITLE>
</HEAD>
<BODY >
<H3>Formulaire pour « Liste déroulante"</H3>
<FORM>
<P>Faites votre choix:</P >
<SELECT name = "liste" size = 3>
<OPTION> Element 1 </OPTION>
<OPTION selected> Element 5 </OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
Exemple
Vous pouvez aussi grouper vos options avec la balise <optgroup> </optgroup>.
<FORM METHOD="post" ACTION="traitement.php">

<PRE>
<LABEL FOR="pays">Dans quel pays habitez-vous ?</LABEL><BR />
<SELECT NAME="pays" ID="pays">
<OPTGROUP LABEL="Europe">
<OPTION VALUE="france">France</OPTION>
<OPTION VALUE="espagne">Espagne</OPTION>
<OPTION VALUE="italie">Italie</OPTION>
<OPTION VALUE="royaume-uni">Royaume-Uni</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Amérique">
<OPTION VALUE="canada">Canada</OPTION>
<OPTION VALUE="etats-unis">Etats-Unis</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Asie">
<OPTION value="chine">Chine</OPTION>
<OPTION value="japon">Japon</OPTION>
</OPTGROUP>
</SELECT>
</PRE>
</FORM>
Grouper les champs
Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les
regrouper au sein de plusieurs balises
<FIELDSET>
<LEGEND>  </LEGEND>
</FIELDSET>
<FORM METHOD="post" ACTION="traitement.php">

<FIELDSET>
<LEGEND> Vos coordonnées</LEGEND>
<LABEL FOR="nom">Quel est votre nom ?</LABEL>
<INPUT TYPE="text" NAME="nom" ID="nom" />
<LABEL FOR="prenom">Quel est votre prénom ?</LABEL>
<INPUT TYPE="text" NAME="prenom" ID="prenom" />
<LABEL FOR="email">Quel est votre e-mail ?</LABEL>
<input TYPE="email" NAME="email" ID="email" />
</FIELDSET>
Entrée de textes dans une boîte
<TEXTAREA>… Boite de texte éditable multi-lignes et multi-
colonnes. Si le texte dépasse la
</TEXTAREA> limite verticale de la boîte, une barre de
déroulent verticale apparaîtra.
NAME = "nom" Identifier la boîte de texte pour pouvoir
repérer/identifier le contenu
COLS = nombre Spécifier la largeur de la boîte de texte en
nombre de caractères
ROWS = nombre Spécifier le nombre de lignes pour la hauteur
de la boîte de texte
VALUE = "texte" Permet de pré-définir du texte qui sera envoyé
par défaut au script si le champ de saisie n'est
pas modifié par une frappe de l'utilisateur.
READONLY Spécifie que la boîte est en mode lecture

seulement.
Exercice 3
Donnez le code complet du formulaire suivant :
Exercice 4
Donnez le code complet du formulaire suivant :
<optgroup label=‘’ Premier semestre ’’ >
Exercice 5
Insertion d’un élément Audio
• Controls : pour ajouter les boutons « Lecture », « Pause » et la
barre de défilement.
• Width : pour modifier la largeur de l'outil de lecture audio.
• Loop : la musique sera jouée en boucle.
• Autoplay : la musique sera jouée dès le chargement de la page.
Exercice
<audio src="musique.mp3“ controls width=‘’40% loop autoplay >

</audio>
Insertion d’un élément Audio
• Les anciens navigateurs, qui ne comprennent pas la balise,
afficheront le texte qui se trouve à l'intérieur.
Exercice
<audio src="hype_home.mp3" controls>Veuillez mettre à jour votre
navigateur !</audio>
• Pour proposer plusieurs versions du fichier audio. Dans ce cas, on

va construire notre balise comme ceci :
Exercice
<audio controls>
<source src="hype_home.mp3"><source src="hype_home.ogg">
</audio>
Insertion d’un élément Vidéo
• Poster : image à afficher à la place de la vidéo tant que celle-ci n'est
pas lancée.
• Controls : pour ajouter les boutons « Lecture », « Pause » et la
barre de défilement.
• Width : pour modifier la largeur de l'outil de lecture audio.
• Height : pour modifier la hauteur de la vidéo.
• Loop : la musique sera jouée en boucle.
• Autoplay : la musique sera jouée dès le chargement de la page.
Exercice
<video src="sintel.webm" controls poster="sintel.jpg" width="600"
height="600">
</video>
Insertion d’un élément Vidéo
• Les anciens navigateurs, qui ne comprennent pas la balise,
afficheront le texte qui se trouve à l'intérieur.
Exercice
<video src="sintel.webm" controls poster="sintel.jpg" width="600">
Il est temps de mettre à jour votre navigateur !</video>
• Pour proposer plusieurs versions du fichier audio. Dans ce cas, on

va construire notre balise comme ceci :
Exercice
<video controls poster="sintel.jpg" width="600">
<source src="sintel.mp4"> <source src="sintel.webm">
</video>
CSS, les principes
C'est Le CSS (Cascading Style Sheets), n'est pas plus

compliqué que le HTML. Il vient le compléter pour vous
aider à mettre en forme votre page web
Grâce au HTML, nous avons pu rédiger le contenu de

notre site mais il est brut de décoffrage. Le CSS vient
compléter ce code pour mettre en forme tout cela et
donner au contenu l'apparence que l'on souhaite.
CSS, les principes HTML
pas de
CSS
HTML
+
CSS
Où écrit-on le CSS ?
Vous avez le choix car on peut écrire du code en langage

CSS à trois endroits différents :
1) dans un fichier .css (méthode la plus recommandée) ;
2) dans l'en-tête <head> du fichier HTML ;
3) directement dans les balises du fichier HTML via un attribut

style (méthode la moins recommandée).
Dans un fichier .css
(méthode la plus recommandée)
Code : HTML (page.html)
html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Vous noterez le contenu de la ligne 4, <link rel="stylesheet" href="style.css" /> :

c'est elle qui indique que ce fichier HTML est associé à un fichier appelé
style.css et chargé de la mise en forme.
Code : CSS (style.css)
p{
color: blue;
}
Dans l’entête <head> du fichier HTML
<html>
<head>
<style>
p{
color: blue;
}
</style>
<title> Premiers tests du CSS</title>
</head>
<body>
<h1> Mon super site</h1>
<p> Bonjour et bienvenue sur mon site !</p>
<p> Pour le moment, mon site est un peu <i>vide</i>.Patientez
encore un peu !</p>
</body>
</html>
Directement dans la balise (non recommandé)
ajouter un attribut style à n'importe quelle balise. Vous insérerez votre code CSS
directement dans cet attribut :
<html>
<head>
<title> Premiers tests du CSS</title>
</head>
<body>
<h1> Mon super site</h1>
<p style="color: blue;" > Bonjour et bienvenue sur mon site !</p>
<p> Pour le moment, mon site est un peu <i>vide</i>.Patientez
encore un peu !</p>
</body>
</html>
Le code CSS est répété dans chaque fichier
HTML
A quoi ressemble une feuille de style
balise1
{
propriete1: valeur1;
}
Dans un code CSS comme, on trouve trois éléments différents :
 Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par
exemple, si je veux modifier l'apparence de tous les paragraphes <p>, je dois écrire p.
 Des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés. Il y a
par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet
d'indiquer la taille du texte, etc.
 Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la
propriété color, il faut indiquer le nom de la couleur.
Appliquer un style
1) Sélectionner une seule balise
p{
color: blue;
}
2) Sélectionner plusieurs balise

h1{ i{
color: blue; color: blue;
} }
si les deux balises doivent avoir la même présentation Il suffit de

combiner la déclaration en séparant les noms des balises par
une virgule
h1, i{
color: blue;
}
Appliquer un style : En résumé
Propriété Valeur
Code CSS
La taille font-size: 16px;
La police font-family: Arial ;Arial Black ;Comic Sans MS

;Courier New ;Georgia ;Impact ;Times
New Roman ;Trebuchet MS ;Verdana.
Mettre en italic font-style: normal / italic
Mettre en gras font-weight: bold
Soulignement et text-decoration: Underline / line-through / overline/ blink :

autres décorations clignotant / none.
L’alignement text-align: Left / center / right / justify /
Faire flotter une float: Left / right

image
La couleur de fond Color: Indiquer le nom ou le code de la couleur
Propriété Valeur
Code CSS
Dans la balise background-color: indiquer le nom ou le code de la couleur du
<body> fond par défaut
Couleur de fond Color: La couleur par défaut du texte
Dans la balise background-image: url("nom_de_l_image.png") : le chemin et le
<body> nom de l’image
Image de fond
La transparence Opacity: Il faut donc choisir une valeur comprise entre
0 et 1
Les bordure standard
border-width: indiquez la largeur de votre bordure. Mettez
une valeur en pixels
border-color: c'est la couleur de bordure
border-style: Le type de bordure : none / solid / dotted /
dashed / double / groove / ridge / inset /
outset. Ex : border: 3px blue dashed;
Propriété Valeur
Code CSS
Listes à puces list-style-type none (pas de puce), disc, circle, square
list-style-image Valeur : le chemin d’une image

url("cheminimage");
Les bordures border-top: …;
border-left: …;
border-right: …;
border-bottom:
…;
Des bords arrondis border-radius : border-radius : 2px 20px 5px
10px; 10px;
valeur permet de background-
donner une couleur color: #E6E6E6;
de fond Background-
image
Propriété Valeur
Code CSS
Background- top : en haut; bottom : en bas; left : à
position gauche; center : centré; right : à droite
Overflow : pour Overflow: auto - p {height: 100px} :

éviter que ça afficher une barre
dépasse de défilement
overflow: hidden
Code CSS
Les différents styles de bordures que vous pouvez utiliser
Code CSS
Propriété Valeur
Code CSS
la largeur Width: c'est la largeur en pixel
la hauteur Height: c'est la hauteur en pixel
les marges padding: 12px

intérieures
Les marges Margin: 12px
extérieures.
Propriété Valeur
Code CSS
Bordures arrondies border-radius: 10px 5px 10px 5px;
Les valeurs correspondent aux angles
Les ombres des box-shadow: 6px 6px 0px black;

boites
L’ombre du text Text-shadow: 2px 2px 4px black;
Au survol a:hover; quand on pointe dessus

Au clic lors de la a:active; au moment du clique
sélection
Lorsque l’élément a:focus; lorsque l’élément est sélectionné
est sélectionné
Lorsque le lien a été a:visited; Lorsque le lien est déjà sélectionné
consulté
Exemple d’une page CSS
p{ font-size: 14px; text-align: justify; border: 3px blue solid; box-shadow: 6px 6px 0px
black; padding: 12px; margin: 50px;}
h1{ font-size: 40px; text-decoration: blink; text-align: center; color: #FFFFFF; border-
radius: 10px;}
h2{font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; text-align: right;
color: maroon;}
i{font-style: italic; text-decoration: overline;}
a{font-weight: bold; text-decoration: underline; text-shadow: 2px 2px 4px black;}
img{float: left; width: 350px; border: 1px solid black;}
/* Liens par défaut (non survolés) */
a { text-decoration: none;
color: red;
font-style: italic;}
Exemple d’une page CSS
/* Apparence au survol des liens */

a:hover {text-decoration: underline;
color: green;}
/* Quand on pointe sur un paragraphe */
p:hover { }
/* Quand le visiteur clique sur le lien */
a:active { background-color: #FFCC66;}
/* Quand le visiteur a déjà vu la page concernée / Appliquer une couleur grise */
a:visited {color: #AAA;}

Support de Cours Animation de Site Web - 2023

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

Support de Cours Animation de Site Web - 2023

Transféré par

Droits d'auteur :

Formats disponibles

Apprendre les bases du langage

Pour créer des sites web

Communication Digitale de l’Entreprise et Relation

Commerce, boutique en ligne, entreprise de service…

En effet, il est nécessaire de vous faire connaitre, de valoriser

Voici alors quelques outils de communication qui sauront

Gardez en tête que ces outils de communication doivent être

Pourquoi le web est-il indispensable pour

L’année 2000 a marqué le début de la démocratisation

Selon les statistiques du Blog du Modérateur, au niveau mondial 51% de

Voici les chiffres recensés pour la France :

•74% des français accèdent à Internet tous les jours

Ces chiffres attestent de la grande popularité du web et

Aujourd’hui, Internet ne se limite plus à effectuer une recherche sur un

Ce classement ne comprend pas la plateforme de partage de contenu

Posséder un site internet pour votre commune va

 D’attirer de nouveaux visiteurs dans votre ville

 D’attirer de nouveaux habitants ou commerçants

 Communiquer sur votre commune

 D’interagir en direct via un module de tchat

En conclusion, posséder un site web se révèle d’une

Vous consultez des sites web tous les jours. Pour

Avec le navigateur, vous pouvez consulter n'importe

Traduction par l’ordinateur (exactement Navigateur)

• Un fichier HTML est un format de fichier « texte »

• Un ensemble de pages liées entre elles généralement

Pour créer un site web, on doit donner des instructions

Il ne suffit pas simplement de taper le texte qui devra

Manipuler deux langages va être deux fois plus

Au contraire, pour faciliter les choses. Nous allons

Il y a eu plusieurs versions des langages HTML et

CSS (Cascading Style Sheets, aussi appelées Feuilles

On n’aura pas besoin d’aller chercher un logiciel

Faire la manipulation suivante :

Allez dans le menu Langage > H > HTML.

Cela permettra au logiciel de savoir que l'on va taper

Il colorera le code, ce qui permettra de se repérer plus

Il contient des commandes, implémentées par des

C'est un langage à balisage qui décrit la structure

Les balises en paires : Elles s'ouvrent, contiennent du texte, et se ferment plus

Le langage HTML permet de créer des documents

En cliquant sur une zone de texte (ou une image, un

 Est le seul élément visible qui se trouve dans l'en-tête.

 c'est le corps de votre document.

Il existe deux type de balise :

Enregistrons ce fichier sous le nom page1.htm.

<!- - Ceci est un commentaire - ->

 si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une

<p>Pour l'instant c'est un peu vide, mais revenez dans 2-3

<p>Pour l'instant c'est un peu vide, mais revenez dans 2-3

 <p> </p> : pour organiser le texte en paragraphes ;

 Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes,

 Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte

Un lien vers un autre site (Lien absolu)

Ensuite, il suffit de créer un lien comme d'habitude, mais cette

Balises indispensables pour dessiner un tableau :

 La balise < table ></ table >

 La balise < tr ></ tr >

 La balise < td ></ td >

 La balise < th ></ th>

 La balise < caption></ caption>

 Il faut indiquer le nombre de cellules à fusionner entre elles

 Un formulaire HTML est une partie de page web qui