Vous êtes sur la page 1sur 18

Année universitaire 2019/2020

Cours Développement Web


Chokri Ajroud

1
Année universitaire 2019/2020

COURS DEVELOPPEMENT WEB

Chapitre II : Développement web


Front-end

2
Outils de développement web Front-end:

3
Outils de développement web Front-end:

3 couches pour le développement Web

Structure Style Comportement

4
Outils de développement web Front-end:

5
Outils de développement web Front-end:

Imaginez-vous à quoi
ressemble cette page
sans HTML?

6
Outils de développement web Front-end:

Pas jolie , n’est-ce-pas ?

7
Outils de développement web Front-end:

Les balises HTML


 Sans HTML markup qui permet de structurer le contenu de notre page le
navigateur web retourne un texte non formaté et non stylé.

 Les balises HTML donnent une structure et un sens pour votre document.

 <p></p> : pour organiser un texte dans une paragraphe.

 <table></table> : pour afficher un tableau.

 <form></form> : pour définir un champs de saisie de texte.

 <img></img> : pour ajouter une image.

8
Outils de développement web Front-end:

 En ajoutant les balises HTML à notre texte , on obtient la page suivante :

C’est mieux mais n’est pas


encore parfaite !

9
Outils de développement web Front-end:

 Une fois le contenu de la page web est bien structuré avec les balises HTML,
le navigateur applique par le style par défaut aux balises.

 Notre page web devient lisible et bien organisée.

Qu’est ce qu’on doit faire pour


que notre page apparaisse plus
jolie ?

La réponse c’est d’utiliser CSS

10
Outils de développement web Front-end:

11
Outils de développement web Front-end:

CSS
 CSS est un ensemble de règles qui définissent comment un élément html va être
‘présenté’ par le navigateur web .

12
Outils de développement web Front-end:

 Qu’est ce qu’on peut changer avec CSS?

 Avec CSS on ne peut pas changer:


- Le contenu.
- La structure.

13
Outils de développement web Front-end:

14
Outils de développement web Front-end:

 JavaScript est développé par Netscape en 1995.


 JavaScript est un langage coté client utilisé pour ajouter l’interactivité aux
pages Web.

15
Outils de développement web Front-end:

Qu’est ce qu’on peut faire avec JavaSript ?

Valider les valeurs


entrées dans les
champs de saisie
de texte

16
Outils de développement web Front-end:

Qu’est ce qu’on peut faire avec JavaSript ?

une boite de recherche peut vous


donner des suggestions, basées sur
votre historique de recherche

17
Outils de développement web Front-end:

Qu’est ce qu’on peut faire avec JavaSript ?

Créer un SlideShow
de photos et
contrôler la durée
d’affichage de chaque
photo ainsi que les
effets d’animation

18