Remerciez-le!

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

OFPPT ROYAUME DU MAROC RESUME THEORIQUE & GUIDE DES TRAVAUX PRATIQUES MODULE N°

OFPPT ROYAUME DU MAROC RESUME THEORIQUE & GUIDE DES TRAVAUX PRATIQUES MODULE N° : 17 TITRE DU MODULE : Création de sites web SECTEUR : TERTIAIRE SPECIALITE : TSDI Niveau : TECHNICIEN Spécialisé Juin 2006 Office de la Formation Professionnelle et de la Promotion du Travail Module N° 17 : Création de sites web Filière : TSDI OFPPT / DRIF / CDC Tertiaire & TIC Page : 2 Juin 2006 REMERCIEMENT La DRIF remercie les personnes qui ont contribué à l’élaboration du présent document. Pour la supervision : MME.BENNANI WAFAE DIRECTRICE CDC TERTIAIRE & TIC M. ESSABKI NOURDDINE CHEF DE DIVISION CCFF Pour la conception : - ABDELILAH JELLAL Formateur animateur au CDC Tertiaire & TIC /DRIF Pour la validation : Les utilisateurs de ce document sont invités à communiquer à la DRIF toutes les remarques et suggestions afin de les prendre en considération pour l’enrichissement et l’amélioration de ce programme. Said Slaoui DRIF Module N° 17 : Création de sites web Filière : TSDI OFPPT / DRIF / CDC Tertiaire & TIC Page : 3 Juin 2006 MODULE 17 : Création de sites web OBJECTIF OPERATIONNELS DE PREMIER NIVEAU DE COMPORTEMENT COMPORTEMENT ATTENDU Pour démontrer sa compétence, le stagiaire doit créer un site web selon les conditions, les critères et les précisions qui suivent : CONDITIONS D’EVALUATION • Travail individuel effectué avec un ordinateur équipé d’un outil de développement de site web (type web expert) CRITERES GENERAUX DE PERFORMANCE • Utilisation des commandes appropriées. • Respect du temps alloué. • Respect des règles d’utilisation du matériel et logiciel Informatique. Module N° 17 : Création de sites web Filière : TSDI OFPPT / DRIF / CDC Tertiaire & TIC Page : 4 Juin 2006 OBJECTIF OPERATIONNELS DE PREMIER NIVEAU DE COMPORTEMENT PRECISIONS SUR LE COMPORTEMENT ATTENDU A. Créer des pages web en HTML B. Créer une feuille de style en CSS C. Intégrer des données multimédias dans une page web D.Créer des formulaires de saisie E.Programmer en JavaScript F.Intégrer des composants côté client CRITERES PARTICULIERS DE PERFORMANCE • Structuration judicieuse des données sous forme de paragraphes,tableaux,listes… • Utilisation correcte des balises de base et d’entête • Justesse de définition de liens dans une page • Définition correcte des cadres externes et Internes dans un document web ; • Définition et création des styles dans le respect de la charte graphique • Justesse de l’enregistrement de la feuille de style • Appel correct de la feuille de style par la page HTML • Justesse de numérisation des données multimédias • Optimisation correcte de la taille et du temps de téléchargement des objets multimédias • Intégration correcte dans la page HTML • Choix judicieux et insertion correcte des contrôles de formulaire dans la page web • Paramétrage correct des formulaires de saisie pour déclencher des traitements sur les serveurs • Choix approprié du type de l’interaction à ajouter à la page web • Programmation correcte des fonctions de contrôle de formulaires • Programmation adéquate des traitements associés aux événements (Handlers) avec JavaScript • Modification dynamique des styles au travers du DOM et des CSS • Stocker et Mettre à jour des informations persistantes côté client (cookies) • Intégration et configuration correctes d’Applets et d’Activex • Programmation correcte des interactions avec les composants Module N° 17 : Création de sites web Filière : TSDI OFPPT / DRIF / CDC Tertiaire & TIC Page : 5 Juin 2006 G.Créer et manipuler des documents XML • Structurer correctement un document XML • Modifier dynamiquement les contenus des balises au travers du DOM et JavaScript • Organiser et codifier correctement la présentation des informations au travers d’’XSLT (ou CSS) OBJECTIFS OPERATIONNELS DE SECOND NIVEAU LE STAGIARE DOIT MAITRISER LES SAVOIR, SAVOIR-FAIRE, SAVOIR -PERCEVOIR OU Module N° 17 : Création de sites web Filière : TSDI OFPPT / DRIF / CDC Tertiaire & TIC Page : 6 Juin 2006 SAVOIR-ETRE JUGES PREALABLES AUX APPRENTISSAGES DIRECTEMENT REQUIS POUR L’ATTEINTE DE L’OBJECTIF DE PREMIER NIVEAU, TELS QUE : Avant d’apprendre à Créer des pages web en HTML (A) : 1. Connaître la plate forme du travail 2. Connaître Internet 3. Expliquer le rôle d’un site WEB et son apport par rapport à d’autre supports d’information 4. Installer l’outil de développement à étudier 5. Expliquer l’utilité d’avoir des balises d’entête dans un document WEB Avant d’apprendre à Créer une feuille de style en CSS (B) 6. Expliquer la structure d’un document html ; 7. Expliquer l’utilité de la mise en forme d’un document html ; 8. Expliquer l’utilité à utiliser les feuilles de style Avant d’apprendre à coder un document XML 9. Présentation du modèle Objet de document (DOM) Module N° 17 : Création de sites web Filière : TSDI OFPPT / DRIF / CDC Tertiaire & TIC Page : 7 Juin 2006 RESUME THEORIQUE ET TRAVAUX PRATIQUES Cours & Exemples pratiques Module N° 17 : Création de sites web Filière : TSDI OFPPT / DRIF / CDC Tertiaire & TIC Page : 8 Juin 2006 I - HTML Introduction Le langage Html est un langage qui permet de créer une page web . il est l'abréviation de Hyper Text Markup Language . Le Html n'est pas un langage de programmation comme le c / c++ , vb …etc , mais , c'est un simple texte qui contient des balises ou tag en anglais. C'est donc le Html n'est pas besoin d'un compilateur pour s'exécuter , mais seulement d'un navigateur (Browser en anglais) qui interprète les balises Html , comme l'Internet Explorer ou Netscape Navigator . Comment commencer Pour écrire les balises Html , on a besoin seulement d'un simple éditeur de teste comme le WordPad ou le Bloc-Note . Pour être interprété par le navigateur , la page html doit porter l'extension .html ou htm . Ex : test.html Pour ceux qui ne veulent saisir du code html , il existe plusieurs éditeur de html qui permettent de générer les balise par assistant . On peut citer : ¾ WebExpert ¾ FrontPage ¾ Dreamweaver ¾ WebCreator Module N° 17 : Création de sites web Filière : TSDI OFPPT / DRIF / CDC Tertiaire & TIC Page : 9 Juin 2006 Leçon 1 : Les Bases Une page web contient les balises html. Ces dernières sont composées en général, par un marqueur d'ouverture et un marqueur de fermeture . Les marqueurs Html utilisent les caractères < et > pour limiter le début et la fin . Le marqueur de fin s'écrit avec un "/". Exemple : <marqueur> texte </marqueur> I- Structure d'une page Html Trois balises permettent de créer la structure de base d'une page quelconque . Ce sont <html>,<head>et <body> : - La première est celle qui permet de définir le langage utilisé, Vous devez toujours placer cette balise <html> au début de votre page puis se termine par </html>. - Puis y placer d'autres balises à l'intérieur : Pour l'en-tête du document, partie non-visible, mais qui contient les informations permettant au moteur de recherche de trouver votre site, vous devez placer la balise <head> puis se termine par </head>. Je reviendrais plus tard sur les informations contenu à l'intérieur de cette balise que je nomme balise "en-tête". - Pour le corps du document, la partie visible pour l'internaute qui visiteras votre site, vous devez placer cette balise <body> puis se termine par </body>. C'est dans cette dernière balise que se trouverons tous les éléments que vous montrerez à vos visiteurs ! Revenons à la balise "en-tête" : Cette balise contient une autre balise qui est le titre de votre page, ce titre apparaîtra sur la barre en haut de votre navigateur et permet aussi aux moteurs de recherche de vous trouvez, donc vous devez y placer un titre explicite ! Cette balise est <title> puis se termine par </title>. II- Création d'une simple page-web Voilà, maintenant un exemple : <html>   <head>  Module N° 17 : Création de sites web Filière : TSDI OFPPT / DRIF / CDC Tertiaire & TIC Page : 10 Juin 2006 <title>Titre de votre site</title> </head>  <body> !  </body>  </html>  Exemple: Résultat <html> <head> <title>ceci est un test</title> </head> <body> Bienvenu dans ma première page </body> </html> Bienvenu dans ma première page Module N° 17 : Création de sites web Filière : TSDI OFPPT / DRIF / CDC Tertiaire & TIC Page : 11 Juin 2006 Leçon 2 : Les formes Comment formater votre page : Pour cela, vous pouvez ajouter des attributs à la balise <body> Comment formater un texte en gras : définit un texte gras puis se termine par La règle : Votre Texte en Gras Exemple : Votre Texte en Gras Comment formater un texte en italique : définit un texte en Italique puis se termine par La règle : Votre Texte en Italique Exemple : Votre Texte en Italique Comment formater un uploads/s3/ html 3 .pdf