Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Ministère de l’Enseignement Supérieur, et de la Recherche Scientifique Directio

Ministère de l’Enseignement Supérieur, et de la Recherche Scientifique Direction Générale des Etudes Technologiques Institut Supérieur des Etudes Technologiques de Djerba Support de cours Programmation Web 1 Elaboré par : Olfa HAMROUNI Mouna KORT Maèl SALAH JRAD Public cible : Classe de 1ère année Licence appliquée : Technologies de l’informatique Année Universitaire : 2016-2017 Support de cours Programmation Web1 Fiche Matière Fiche descriptive de la matière : Programmation Web 1 Domaine de formation : Sciences et technologies Mention : Technologie de l’informatique (TI) Parcours : Tronc commun (TC) Semestre : S1 Unité d’enseignement : Développement Web et Multimédia 1 Volume horaire : 21 heures (CI) Coefficient : 2 Objectifs  Introduire des terminologies liées au développement web  Connaitre la syntaxe du langage HTML5  Connaitre la syntaxe du langage CSS3  Comprendre les technique de référencement Pré-requis  Connaissances générales sur l’Internet et le Web Evaluation  Devoir de contrôle  Examen  Travaux personnalisés Moyens pédagogiques  Tableau  Fascicule de Travaux dirigés Méthodologies  Le cours s’articule autour des séances de travaux dirigés.  Les TP sont distribués aux étudiants. Support de cours Programmation Web1 Table des matières Chapitre1. Introduction au Web ............................................................................ 2 1. Introduction .......................................................................................................... 2 2. Définition .............................................................................................................. 3 3. Principe ................................................................................................................ 3 4. Evolution du Web ................................................................................................. 4 5. Les étapes de développement d’un site web .......................................................... 7 5.1. Planification du travail de développement ...................................................... 7 5.2. Mise en œuvre ................................................................................................... 8 5.3. Conception ........................................................................................................ 8 5.4. Réalisation ........................................................................................................ 9 6. L'hébergement ...................................................................................................... 9 6.1. Définition .......................................................................................................... 9 6.2. Types d’hébergement ........................................................................................ 9 7. Le référencement ................................................................................................ 10 7.1. Annuaires et moteurs de recherche ............................................................... 10 7.2. Définition du référencement........................................................................... 12 Le langage XHTML .............................................................................................. 14 Chapitre 2 :Le langage XHTML ........................................................................... 15 1. Historique .......................................................................................................... 15 2. XHTML en tant que langage de balisage ............................................................ 16 3. HTML ou XHTML ? ............................................................................................ 16 4. La différence entre HTML et XHTML ................................................................ 16 5. Les éditeurs HTML ............................................................................................. 17 6. Les éditeurs visuels ............................................................................................ 18 7. Les éditeurs classiques ....................................................................................... 18 8. La structure de base d’un document XHTML ..................................................... 18 8.1. L’élément racine <HTML> ............................................................................. 19 8.2. L’élément<HEAD> : en-tête d’un document .................................................. 19 8.3. L’élément <body> : le corps du document ...................................................... 22 Chapitre 3:Mise en forme, liste et tableau ........................................................... 24 1. Les titres ............................................................................................................. 24 2. Les divisions de la page ...................................................................................... 24 2.1. Les paragraphes : l’élément <P> .................................................................... 24 2.2. L’élément<DIV> ............................................................................................. 25 3. Les styles physiques ........................................................................................... 25 4. Les listes ............................................................................................................. 26 4.1. Les listes ordonnées ........................................................................................ 26 4.2. Les listes à puces ............................................................................................ 26 4.3. Les listes de définitions .................................................................................. 27 5. Les tableaux ....................................................................................................... 28 5.1. La structure générale d’un tableau ................................................................ 28 5.2. Les attributs de la balise <TABLE> .............................................................. 28 5.3. L'alignement du contenu des cellules ............................................................ 29 5.4. La fusion des cellules ...................................................................................... 30 Chapitre 4: Images, Audio, Vidéo et Liens Hypertextes ...................................... 33 Support de cours Programmation Web1 1. Les images .......................................................................................................... 33 1.1. Les types d’images .......................................................................................... 33 1.2. L’insertion d’images ........................................................................................ 33 2. L'audio ................................................................................................................ 35 3. La vidéo .............................................................................................................. 35 4. Les liens hypertextes .......................................................................................... 36 4.1. Définition ........................................................................................................ 36 4.2. Les liens externes............................................................................................ 37 4.3. Les liens internes: les ANCRES / les SIGNETS .............................................. 38 4.4. Les liens déclenchant l’envoi d’un e-mail ........................................................ 39 Chapitre 5. Les formulaires ................................................................................. 41 1. Introduction ........................................................................................................ 41 2. Structure d'un formulaire ................................................................................... 41 3. Les attributs de l'élément <FORM> .................................................................... 42 3.1. L’attribut ID................................................................................................... 42 3.2. l’attribut ACTION ......................................................................................... 42 3.3. L’attribut METHOD ...................................................................................... 42 4. Les éléments intégrés dans l'élément FORM ...................................................... 42 4.1. Les boutons d'envoi ou de soumission ............................................................ 42 4.2. Les boutons de réinitialisation ....................................................................... 43 4.3. Les boutons graphiques .................................................................................. 43 4.4. Les zones de saisie de texte unilignes ............................................................ 44 4.5. Les zones de saisie de mot de passe ............................................................... 46 4.6. Les zones de saisie de texte long .................................................................... 46 4.7. Les boutons radio et les cases a cocher .......................................................... 47 4.8. Les listes de sélection ..................................................................................... 49 4.9. Les zones cachées ........................................................................................... 52 4.10. Les zones file ................................................................................................... 52 5. Apports du HTML5 ............................................................................................. 53 5.1. Les nouveaux objets ........................................................................................ 53 5.2. Les nouveaux attributs ................................................................................... 54 Chapitre 6: Les feuilles de style ........................................................................... 56 1. Introduction ........................................................................................................ 56 2. les avantages des CSS ........................................................................................ 56 3. Définition ............................................................................................................ 56 4. La syntaxe .......................................................................................................... 56 5. Les sélecteurs ..................................................................................................... 57 5.1. La sélection d’un seul élément ....................................................................... 57 5.2. La sélection de plusieurs éléments................................................................ 57 5.3. Le sélecteur universel ..................................................................................... 58 5.4. Les classes ....................................................................................................... 58 5.5. L'application de plusieurs classes au même élément .................................... 59 5.6. Le sélecteur d’identifiant ID ........................................................................... 60 5.7. Les pseudo-classes et Les pseudo-éléments ................................................... 60 6. Où écrire les styles ? ........................................................................................... 62 6.1. Manière 1 : dans l’élément <style> ................................................................ 62 6.2. Manière 2 : dans un fichier externe ............................................................... 63 6.3. Manière 3 : dans l’attribut style ..................................................................... 63 7. Le positionnement .............................................................................................. 64 7.1. Généralités ...................................................................................................... 64 7.2. Attributs.......................................................................................................... 66 Support de cours Programmation Web1 Annexe1 ............................................................................................................... 69 Annexe2 ............................................................................................................... 75 1 Chapitre 1 Introduction au Web Objectifs Spécifiques A la fin de ce chapitre, l’étudiant sera capable de : - Connaitre l’origine et l’utilisation d’Internet. - Identifier les principaux services d'Internet et leurs utilisations. - Savoir différencier entre le Web et l’Internet. - Avoir une idée sur les différentes technologies utilisées pour le développement des sites web. - Connaitre le cycle de vie d’un site web passant de l’idée vers l’administration. Plan du chapitre 1. Introduction 2. Définition 3. Principe 4. Evolution du Web 5. Les étapes de développement d’un site web 6. L'hébergement 7. Le référencement Volume horaire - 3 heures Programmation Web 1 Introduction au Web 2 Chapitre1. Introduction au Web 1. Introduction Le Web n’est qu’une des applications d’Internet. Il existe d’autres applications qui sont:  FTP (File Transfer Protocol) Le protocole FTP permet d’établir une connexion temporaire entre deux machines pour échanger ou télécharger des fichiers. Les fichiers peuvent être des programmes, des fichiers textes, des images, des séquences vidéo, de la musique, des logiciels, etc.  Messagerie électronique La messagerie s’utilise soit avec un logiciel de messagerie spécifique soit avec un navigateur qui intègre ces fonctionnalités. La messagerie est basée sur différents protocoles : protocole SMTP (Simple Mail Transfer Protocol), POP (Post Office Protocol). Généralement, chaque internaute dispose d’une adresse mail reconnaissable au caractère @.  USENET Il est appelé aussi news ou newsgroup ou groupe de discussion ou conférence répartie. Les news sont des forums fédérés par thèmes, où, pendant un temps donné, les courriers sont conservés sur un serveur. Les news ne sont pas envoyés à tous les utilisateurs mais stockées sur des ordinateurs dédiés à cette fonction. La consultation des news résulte d’une démarche volontaire de l’utilisateur.  TELNET Ce service est appelé aussi émulation de terminal. Il s’agit d’une connexion à un ordinateur éloigné. Ce service assure le travail en mode réparti, c'est-à-dire qu’il est possible d’utiliser les ressources offertes par la machine distante.  CHAT Il est appelé aussi tchatte ou bavardage. C’est un lieu de dialogue en directe avec d’autres utilisateurs du web sur des sujets. Il existe plusieurs façons de chatter, la plus classique consiste à se connecter à un serveur IRC (protocole Internet Relay Programmation Web 1 Introduction au Web 3 Chat) avec un logiciel spécialisé (MSN par exemple), de choisir un pseudo puis de répondre en direct aux phrases qui s’affichent à l’écran. 2. Définition Le Web ou le World Wide Web ou le WWW ou le 3W ou la toile d’araignée, est une source phénoménale d'information. Il s'agit d'un système d'information hypermédia. Il est constitué de documents MULTIMEDIAS (pages de textes enrichies de sons, graphiques, images fixes et animées, vidéos, etc...) qui sont reliés entre eux par des liens HYPERTEXTE. Ainsi dans les pages qui composent un site web, chaque mot souligné voire certaines images, est un lien hypertexte cliquable assurant l’affichage d’un autre document. Ce document pouvant être localisé sur n’importe quel ordinateur du réseau. Des documents contiennent ainsi des références sur d'autres documents, créant une toile d'araignée de documents recouvrant le monde. Le Web a été inventé plusieurs années après Internet, mais c’est lui qui a rendu le grand public attentif à Internet. Depuis, le Web est fréquemment confondu avec Internet. 3. Principe Le Web se base sur:  Le protocole HTTP Un protocole de communication est un ensemble de contraintes et de règles permettant d'établir une communication entre deux entités. HTTP s’agit de l’abréviation de HyperText Transfer Protocol  Le langage HTML HTML s’agit de l’abréviation de HyperText Markup Language. C’est un langage à balises permettant de doter certains mots ou images d’une propriété d’hyperlien.  Les adresses URL Une adresse URL (Uniform Resource Locator) localise les pages HTML ou fichiers HTML qui existent dans des serveurs. L’URL est le reflet de la structuration des informations sur le plan informatique et leur emplacement sur Programmation Web 1 Introduction au Web 4 le disque dur du serveur. L’URL peut être une adresse simple uploads/Science et Technologie/ html-css 1 .pdf