Remerciez-le!

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

P Pr ro og gr r Ministère de l'Enseignement Supérieur et de la Recherche Scient

P Pr ro og gr r 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 r ra am mm ma at ti io on n w we eb b S Su up pp po or rt t d de e c co ou ur rs s Année universitaire : 2010-2011 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 Elaboré par : Mr. BOUREGBA Aymen Version : 2010 Public cible : Classes de la 1ère année Licence : Technologies de l’Informatique Département : Technologies de l’informatique b 1 1 Ministère de l'Enseignement Supérieur et de la Recherche Scientifique Institut Supérieur des Etudes Technologiques de Djerba Mr. BOUREGBA Aymen année : Technologies de l’Informatique Technologies de l’informatique De nos jours, l’Internet et le web sont devenus des expressions courantes et fréquemment utilisées. Ce support est consacré d’une part à l’étude des services et les fichiers supportés par Internet ainsi que les notions de base nécessaires pour la création de pages web, et d’autre part à la présentation des outils nécessaires permettant d’obtenir des IHM répondant aux besoins tel que le langage HTML avec ces différents type de composants : tableaux, formulaires ; les feuilles de style, ainsi que le langage supportant le standard d’échange XML : le XHTML. Il est destiné aux étudiants des établissements (ISETs, 1ère année licence technologies de l’informatique). La pratique des différentes notions abordées dans ce support, sera assurée par le module « Atelier web 1 » par le biais d’un ensemble de TPs et un mini-projet. Le contenu, ainsi que l’enseignement pédagogique de ce cours restent toujours aptes à évoluer en fonction des critiques et remarques constructives des lecteurs. Aussi, avec la participation des étudiants, une évaluation semestrielle de l’enseignement de ce module est effectuée par le biais de fiches à rendre commentées librement. J’adresse d’avance mes remerciements aux lecteurs qui voudront bien faire part de leurs critiques et de leurs remarques constructives. A AV VA AN NT T P PR RO OP PO OS S P P R R O O R R A A M M A A T T I I O O N N W W E E B B 1 1 F FI IC CH HE E M MA AT TI IE ER RE E Pré requis - Connaissances générales sur l’Internet et le Web Objectifs généraux Ce cours vise à développer chez l’apprenant les compétences adéquates pour planifier et concevoir un site web en utilisant les logiciels appropriés. Objectifs spécifiques L’étudiant doit être capable de : - Maîtriser les services offerts par Internet. - Savoir écrire une page web en utilisant le langage HTML/CSS Public cible Etudiants de la première année licence (L1) : Technologies de l’Informatique. Volume horaire 0.75h pour chaque groupe (de manière hebdomadaire) Soit en total : 11.25h. Sommaire Chapitre I : Généralités et notions de base..........................................................................................7 Introduction............................................................................................................................7 I Historique............................................................................................................................7 I.1 Les années 60 : Contexte de l a guerre froide ................................................................... 7 I.2 Les années 70/80 : Arpanet et le protocole TCP/IP................................................................... 8 I.3 Les années 80/90/2000 : d'Internet au WWW, une montée exponentielle................................ 8 II Les services d'Internet.......................................................................................................9 II.1 Messagerie électronique........................................................................................................... 9 II.2 Forum de discussion................................................................................................................. 9 II.3 Transfert de fichiers ............................................................................................................... 10 II.4 Telnet et SSH ......................................................................................................................... 10 II.5 Cyber-bavardage (chat).......................................................................................................... 10 II.6 Journal personnel (Blog)........................................................................................................ 10 II.7 Moteur de recherche et annuaire Web............................................................................. 11 III Principaux formats de fichiers...................................................................................11 III.1 Les documents textes ........................................................................................................ 12 III.2 Les images........................................................................................................................... 12 III.3 Les fichiers audio .............................................................................................................. 12 III.4 Les fichiers vidéo.............................................................................................................. 13 IV Création d’un site Web ................................................................................................13 IV.1 Définition.............................................................................................................................. 13 IV.2 Objectifs et cible................................................................................................................... 14 IV.3 Les technologies utilisées ..................................................................................................... 14 IV.4 Présentation du site............................................................................................................... 15 V Le référencement et la gestion ........................................................................................16 V.1 Le référencement.................................................................................................................... 16 V.2 La gestion............................................................................................................................... 16 Conclusion ............................................................................................................................17 Chapitre II : Les bases du HTML......................................................................................................19 Introduction..........................................................................................................................19 I Qu'est-ce qu'une balise HTML ? .....................................................................................19 I.1 Les balises simples .................................................................................................................. 19 I.2 Les balises doubles .................................................................................................................. 20 I.3 Structure d'un document HTML.............................................................................................. 20 I.4 Le DOCTYPE.......................................................................................................................... 20 I.5 Les commentaires.................................................................................................................... 21 II Le corps du document – body.........................................................................................21 II.1 Mise en forme......................................................................................................................... 21 II.2 Les images.............................................................................................................................. 23 II.3 Les liens hypertextes.............................................................................................................. 23 II.4 Les listes................................................................................................................................. 25 Conclusion ............................................................................................................................29 Chapitre III Les notions avancées du HTML ...................................................................................31 Introduction..........................................................................................................................31 I Les tableaux.......................................................................................................................31 I.1 À quoi servent-ils ?.................................................................................................................. 31 I.2 Du tableau simple au tableau complexe .................................................................................. 31 I.3 L'utilité des tableaux aujourd'hui............................................................................................. 35 II Les formulaires ................................................................................................................35 II.1 À quoi servent-ils ? ................................................................................................................ 35 II.2 La balise form......................................................................................................................... 35 II.3 Les champs texte mono lignes ............................................................................................... 36 II.4 Les boutons radio ................................................................................................................... 38 II.5 Les cases à cocher .................................................................................................................. 38 II.6 Les boutons ............................................................................................................................ 39 II.7 Les listes déroulantes ............................................................................................................. 40 III Le XHTML.....................................................................................................................41 III.1 Définition ............................................................................................................................ 41 III.2 Validation W3C.................................................................................................................. 41 III.3 Syntaxe................................................................................................................................. 42 Conclusion ............................................................................................................................44 Chapitre IV : Les feuilles de style.......................................................................................................46 Introduction..........................................................................................................................46 I Utilité et avantages ............................................................................................................46 II Définition..........................................................................................................................47 II.1 CSS Globale........................................................................................................................... 48 II.2 CSS Intra-lignes ..................................................................................................................... 48 II.3 CSS importée.......................................................................................................................... 49 III Les classes et les ID ........................................................................................................49 III.1 Notion de classes................................................................................................................... 49 III.2 Notion des ID........................................................................................................................ 50 IV Les pseudo-éléments et les pseudo-classes....................................................................51 IV.1 Les pseudo-classes................................................................................................................ 51 IV.2 Les pseudo-éléments............................................................................................................. 53 V Les balises structurales....................................................................................................54 VI Le flux..............................................................................................................................54 VII Le positionnement.........................................................................................................55 VII.1 Généralités........................................................................................................................... 55 VII.2 Attributs............................................................................................................................... 57 Conclusion ............................................................................................................................59 Bibliographie ........................................................................................................................................60 Webographie ........................................................................................................................................60 I. Introduction II. I. Historique III. Les services d'Internet IV. principaux formats de fichiers V. Conclusion Généralités et notions de base C CH HA AP PI IT TR RE E I I P Pr ré é- -r re eq qu ui is s Aucun. O Ob bj je ec ct ti if fs s g gé én né ér ra au ux x Introduire la notion d’Internet ainsi que ses services. Présenter les étapes et les techniques de création d’un site web. P Pl la an n : : Introduction. I. Historique. II. Les services d'Internet. III. Principaux formats de fichiers. IV. Création d’un site web V. Le référencement et la gestion Conclusion. Programmation web 1 Chapitre I Généralités et notions de base Page 7 Chapitre I : Généralités et notions de base Introduction Surfer, ou naviguer, sur Internet sont devenus des expressions courantes et fréquemment utilisées. Elles montrent bien l’image de cet océan d’informations qui s'étend aujourd'hui à la grandeur de la planète et continue de croître et de se diversifier chaque jour [1]. L’Internet marque un virage technologique et culturel important en diffusant aussi largement l'information électronique et en donnant accès à des grandes quantités d’information pour un grand nombre de personnes à travers le monde. Il s'agit d'un réseau international d'ordinateurs qui communiquent entre eux dans une toile dense de relations et de connexions. Les différents ordinateurs branchés au réseau Internet peuvent communiquer ensemble de façon transparente pour l'usager indépendamment des types d'ordinateurs utilisés (Mac, PC, Unix ou autres), mais en utilisant cependant les logiciels appropriés et surtout les protocoles standard. Le mot Internet (abréviation du mot anglais internetwork) désigne un réseau informatique constitué par l'interconnexion de plusieurs réseaux. Pour cette raison, on appelle aussi Internet « le réseau des réseaux ». I Historique Internet est l’infrastructure de communication à l'échelle planétaire issue de l'interconnexion de réseaux informatiques publiques et privés, il a été crée dans les années 70. À l'origine, l’Internet relie les sites informatiques militaires des États-Unis. I.1 Les années 60 : Contexte de la guerre froide En 1957, l'ARPA (Advanced Research Project Agency) a été crée aux USA pour piloter un certain nombre de projets dans le but est d'assurer la supériorité scientifique et technique sur les Russes. Cette organisation regroupait certains des plus brillants cerveaux américains. En 1967, Lawrence G. Roberts, récemment arrivé à la tête du projet de réseau informatique à l'ARPA, publie ces « Plans pour le réseau ARPANET ». Présentation d'une conception de réseau à commutation de paquets par Donald Davies et Robert Scantlebury du NPL (National Physical Laboratory Royaume Uni). Programmation web 1 Chapitre I Généralités et notions de base Page 8 Également un article de Paul Barran de la RAND Corporation (militaires) au sujet de l'utilisation d'un réseau à commutation de paquet pour transmission sécurisée de la voix. I.2 Les années 70/80 : Arpanet et le protocole TCP/IP En 1969, le réseau Arpanet est opérationnel reliant initialement 4 instituts universitaires. Cette liaison a permis aux quatre institutions de transférer des données et d'effectuer à distance des calculs longs sur plusieurs ordinateurs. Tout au long des années 70, les laboratoires de recherche sont progressivement reliés au réseau Arpanet. En 1970, le protocole NCP (Network Control Protocol) a été utilisé sur Arpanet afin de pouvoir mettre en liaison des machines hétérogènes (Unix, IBM,...). En 1983, le NCP est définitivement abandonné au profit du TCP/IP (Transfer Control Protocol / Internet Protocol) que nous utilisons encore aujourd'hui et qui constitue le protocole de base d'Internet. TCP est chargé de segmenter le message en paquets et de réarranger ces derniers à la réception, tandis qu’IP est chargé d'assurer l'acheminement des paquets d'un ordinateur vers uploads/Science et Technologie/ prog-web1-aymen-bouregba.pdf