DAW Développement Applications Web. Ouadfel Salima Site du cours:

Transcription

1 DAW Développement Applications Web Ouadfel Salima Site du cours:

2 Développement d Applications Web L'objectif de ce module est: 1. S'initier à la programmation Web en maîtrisant ses principaux langages 2. Maîtriser les outils web pour la création des sites statiques 3. Se familiariser avec les langages du web pour rendre dynamique le contenu des pages côté client ou côté serveur.

3 Développement Applications Web PLAN Partie1 : conception de page web statiques Html Les feuilles de styles CSS Partie2 : conception de page web dynamiques Le langage JavaScript Le langage PHP Evaluation Examen final + Evaluation TP(TPs +miniprojet)

4

5 Cas d une Page statique

6 Cas d une Page dynamique

7 Développement Applications Web Partie1. Conception de pages web statiques Bibliographie HTML5 : une référence pour le développeur web : Rodolphe Rimelé Apprenez à créer votre site web avec HTML5 et CSS3 : Mathieu Nebra 2016

8 Conception de page web statique

9 Conception de page web statique 1. HTML5

10 HTML 5 Introduction HTML: est l abréviation de HyperText Markup Language, soit en français «langage hypertexte de balisage». HTML 5: Est la dernière version du langage HTML. Une balise: Est une unité syntaxique (information du syntaxe) qui permet de délimiter une partie du texte. Exemple est le titre du document? Page d accueil est un paragraphe? Soyez les bienvenus Merci de votre visite est un autre paragraphe?

11 HTML 5 Introduction HTML: est l abréviation de HyperText Markup Language, soit en français «langage hypertexte de balisage». HTML 5: Est la dernière version du langage HTML. Une balise: Est une unité syntaxique (information du syntaxe) qui permet de délimiter une partie du texte. Exemple est le titre du document? Page d accueil est un paragraphe? Soyez les bienvenus Merci de votre visite est un autre paragraphe? <title>page d accueil</title> hmahfoud.wordpress.com

12 HTML 5 Introduction HTML: est l abréviation de HyperText Markup Language, soit en français «langage hypertexte de balisage». HTML 5: Est la dernière version du langage HTML. Une balise: Est une unité syntaxique (information du syntaxe) qui permet de délimiter une partie du texte. Exemple est le titre du document? Page d accueil est un paragraphe? Soyez les bienvenus Merci de votre visite est un autre paragraphe? <title>page d accueil</title> <p>soyez les bienvenus</p> hmahfoud.wordpress.com

13 HTML 5 Introduction HTML: est l abréviation de HyperText Markup Language, soit en français «langage hypertexte de balisage». HTML 5: Est la dernière version du langage HTML. Une balise: Est une unité syntaxique (information du syntaxe) qui permet de délimiter une partie du texte. Exemple est le titre du document? Page d accueil est un paragraphe? Soyez les bienvenus Merci de votre visite est un autre paragraphe? <title>page d accueil</title> <p>soyez les bienvenus</p> <p>merci de votre visite</p> hmahfoud.wordpress.com

14 Balises et éléments Notions de réseaux

15 Attributs Notions de réseaux

16 Balises, élément et attributs Notions de réseaux

17 Eléments bloc et en line

18 Imbrication de balises

19 Validation et compatibilité entre navigateurs du code HTML À la différence de langages de programmation, un non-respect de la syntaxe de HTML n'empêchera pas l'affichage sur le navigateur. Plus généralement, le navigateur affichera quelque chose (de non spécifié) ou n'affichera rien, mais n'affichera jamais d'erreur.

20

21 Editeur du code HTML

22 Structure minimale d une page HTML5

23 Structure minimale d une page HTML5 Notions de réseaux

24 Structure minimale d une page HTML5 Notions de réseaux

25 Structure minimale d une page HTML5 Notions de réseaux

26 Structure minimale d une page HTML5 charset=«utf-8» encodage Notions de réseaux

27 HTML 5 Plan du chapitre 1 Les balises simples 2 Les balises avancées hmafoud.wordpress.com

28 Titres, paragraphes et séparateurs Titres (headings) : Six niveaux notés h1 à h6 Ex. <h1>titre de niveau 1</h1> Paragraphes (séparés entre eux par un espace) Ex. <p>ceci est un paragraphe</p> Séparateurs Retour à la ligne (sans espace) : <br /> Ligne horizontale : <hr />

29 Titres, paragraphes et séparateurs Attributs p et hi : hr

30 Titres, paragraphes et séparateurs

31 Titres, paragraphes et séparateurs

32 Balises strong em et mark L élément strong (similaire à la balise b) est utilisé pour indiquer aux moteurs de recherche qu un contenu est particulièrement important, afin que celui-ci soit traité avec plus d importance. Le résultat visuel est une mise en forme automatique en gras. L élément em (similaire à la balise i), pour emphasis («emphase» en français) est proche de l élément strong. Il sert lui aussi à signifier qu un contenu est important, mais moins important tout de même qu un contenu entre des balises strong. L élément mark est utilisé pour faire ressortir du contenu. Ce contenu ne sera pas forcément considéré comme important, mais cette balise peut servir dans le cas de l affichage de résultats suite à une recherche d un de vos visiteurs par exemple.

33 Balises strong em et mark strong em mark

34 Balises de mise en forme du texte

35 HTML 5 Plan du chapitre 1 1 Les balises simples 2 Les balises avancées hmahfoud.wordpress.com

36 Les liens

37 Je suis dans f3 et je veux aller à f2 Je suis dans f2 et je veux aller à f3 Notions de réseaux

38 Les liens

39 Les liens

40 Les liens

41 Les listes

42 Les listes Notions de réseaux

43 Les listes

44 Les listes

45 Les listes

46 Les listes Imbrication de listes

47 Les tableaux

48 Balise <table>

49 Balise <TR> Chaque cellule peut être caractérisée par les attributs suivants :

50 Balise <TD>

51 Titre des lignes et/ou des colonnes du tableau Le Titre est une cellule de donnée (table data) spécial. Il est crée avec la balise th.

52 Corps, entête et pied du tableau sont crées avec les éléments : <tbody> : regroupe un ensemble de lignes du tableau <thead>:représente l en-tête du tableau. <tfoot>:représente le pied du tableau. Corps du tableau

53 Corps, entête et pied du tableau En tête du tableau Corps du tableau Pied du tableau

54

55 Tableaux irréguliers Fusion des colonnes attribut: colspan

56 Tableaux irréguliers Fusion des lignes attribut: rowspan

57 Les images

58 Notions de réseaux

59 Les balises multimedia <video src = video.mp4 </video>

60 Les balises multimedia

61 Les balises multimedia Si le navigateur ne peut pas afficher l audio <audio src="hype_home.mp3" controls>veuillez mettre à jour votre navigateur! </audio>