DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/
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.
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)
Cas d une Page statique
Cas d une Page dynamique
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
Conception de page web statique
Conception de page web statique 1. HTML5
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?
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
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
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
Balises et éléments Notions de réseaux
Attributs Notions de réseaux
Balises, élément et attributs Notions de réseaux
Eléments bloc et en line
Imbrication de balises
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.
Editeur du code HTML
Structure minimale d une page HTML5
Structure minimale d une page HTML5 Notions de réseaux
Structure minimale d une page HTML5 Notions de réseaux
Structure minimale d une page HTML5 Notions de réseaux
Structure minimale d une page HTML5 charset=«utf-8» encodage Notions de réseaux
HTML 5 Plan du chapitre 1 Les balises simples 2 Les balises avancées hmafoud.wordpress.com
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 />
Titres, paragraphes et séparateurs Attributs p et hi : hr
Titres, paragraphes et séparateurs
Titres, paragraphes et séparateurs
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.
Balises strong em et mark strong em mark
Balises de mise en forme du texte
HTML 5 Plan du chapitre 1 1 Les balises simples 2 Les balises avancées hmahfoud.wordpress.com
Les liens
Je suis dans f3 et je veux aller à f2 Je suis dans f2 et je veux aller à f3 Notions de réseaux
Les liens
Les liens
Les liens
Les listes
Les listes Notions de réseaux
Les listes
Les listes
Les listes
Les listes Imbrication de listes
Les tableaux
Balise <table>
Balise <TR> Chaque cellule peut être caractérisée par les attributs suivants :
Balise <TD>
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.
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
Corps, entête et pied du tableau En tête du tableau Corps du tableau Pied du tableau
Tableaux irréguliers Fusion des colonnes attribut: colspan
Tableaux irréguliers Fusion des lignes attribut: rowspan
Les images
Notions de réseaux
Les balises multimedia <video src = video.mp4 </video>
Les balises multimedia
Les balises multimedia Si le navigateur ne peut pas afficher l audio <audio src="hype_home.mp3" controls>veuillez mettre à jour votre navigateur! </audio>