Programmation Web, HTML5. Développement d une site web. Ruben Chambilla

Transcription

1 Programmation Web, HTML5 Développement d une site web Ruben Chambilla Novembre 2017

2 TABLEAU DES MATIÈRES 1. Introduction Outils de développement Installation de Aptana Studio L environnement de travail Créer l espace de travaille Development d une site web Élément de formatage de base Objectif Structure d une site web Structurer sa page web avec CSS Travail à réaliser Créer tous les page web Créer tous les page web Les attributs css Exercices aditionnel Création de index.html Meta Tags...9 Ruben Chambilla i

3 1. I N T R O D U C T I O N Les applications web même s ils sont simples pages statiques en termes du code html ou une page dynamique avec connexion à une base de données en termes du langage de programmation, certain parti d une application web s exécutera sur l ordinateur de l utilisateur et certaine sur le serveur web. Dans c est manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant différentes technologies. Contienne des exercices des laboratoires et travaux pratiques. 2. O U T I L S D E D É V E L O P P E M E N T Sur internet il y a nombreux outils qu aide créer un application web, sur tour au niveau de texte, cependant, la plupart des développeurs utilisent les suivants : Générateur de faux texte : Site web : Description des balises Responsive test Responsive Web Design Tester Dictionnaire d attributs des balises Liste des attributs HTML5 The complete Font Awesome icon reference Liste des balises HTML Installation de Aptana Studio Aptana c est un logiciel pour développer des applications Web de façon rapide et compréhensible que permettre tester toutes vos applications Web dans un seul environnement telles que HTML5, CSS3, JavaScript. Dépendamment dans quel système d exploitation sera installé, la version d Aptana change, il faut aller vers une version compatible aussi les applications complémentaires. Ruben Chambilla 1

4 Dans ce manuel on va aller expliquer l installation sur Windows 10 1 Télécharger Node.js 2 Télécharger Aptana 3 Installer 1. Node.js 2. Aptana L environnement de travail Aptana Studio est un logiciel (open source), l environnement de développement intégré (IDE) pour la création d'applications Web. Il prend en charge JavaScript, HTML, DOM et CSS avec le code d'achèvement, décrivant, débogage JavaScript, l'erreur et d'avertissement des notifications et la documentation intégrée. Il a des plugins supplémentaires que permettent Aptana Studio pour soutenir Ruby on Rails, PHP, Python, Perl, Adobe AIR, Apple iphone et Nokia WRT (Web Runtime) Ruben Chambilla 2

5 1. Explorateur de projet Affichage- Naviguer et gérer des projets et des fichiers 2. Onglets Fichier / projet En haut de l'éditeur de code pour basculer entre les fichiers ouverts 3. Icône Run Pour exécuter le programme dans un navigateur web 4. Barre d'outils Icônes que permette aller directement vers une opération propre d Aptana 5. Vue en perspective Web Pour mettre à jour il faut cliquer sur ouvrir l URL 6. App onglets explorateur Permettre aller chercher les valises qu on a utilisé dans l application web 7. Problème vue : Affiche les erreurs et les avertissements dans le code d'un utilisateur 8. Code de Editor La zone de travail Créer l espace de travaille Workspace : Dossier pour y mettre tous vos fichiers du projet. Instruction : Option File New Project Écrire le nom du Project dans la champ «Wizards» Créer un projet web nommé «abcd », dans ce dossier créer 3 sous-dossier vides (images, js, css). Il doit être votre code permanente Hyperliens : Est une référence «dans un document hypertexte» que permet passer d'un document consulté à un document lié. Instruction : Option File New File Écrire le nom du fichier avec son extension.html dans la champ «File name» - Créer trois (3) fichiers HTML (index.html, instruction.html, apropo.html livres.html), le fichier accueil.html doit avoir deux hyperliens : Une pour aller vers instruction.html l autre livres.html Les fichiers instruction.html, livres.html doit avoir un hyperlien pour retourner vers index.html Ruben Chambilla 3

6 3. D E V E L O P M E N T D U N E S I T E W E B 3.2. Élément de formatage de base Objectif Le but de ce laboratoire est de s initier à la programmation : - Concevoir une page web HTML en suivant la philosophie du standard HTML5 spécifié par le W3C 1. - Utilisant des principaux balises HTML - Balises HTML dédiées à la structuration du site (<header>, <footer>, <nav>, <section>, <aside>, <article>, <img>, <div>) Structure d une site web Depuis que la structure de base préparée, on peut placer d'autres éléments HTML pour le contenu et les éléments comme : métadonnées, paragraphes, liens, images, vidéos, listes, tableaux, formulaires, etc. Noté que particulièrement quelques balisages ne sont pas compatibles dans un endroit HTML5. Les balises d en-tête doivent être situe entre <head> </head <title> </title> <meta> </meta> <link> Contient tous les éléments d un document HTML5 (Texte, des hyperliens, des images, tableaux, listes) <header> </header> <p>, <form>, <table>, <td>, <tr> <img>, <li>, <ul>, <nav>, <section>, <article>, <aside>, <b>, <div>, <footer> Source : 1 Le World Wide Web Consortium (W3C), est un organisme de standardisation du www Ruben Chambilla 4

7 Chaque balise a son attribut, chaque attribut se comporte de différente façon d apporter au site web. En-tête <header> </header> Menu <nav></nav> <li></li> Section <section></section <article>, <div><p> <form> <table>,<td>, <tr> <img>, <b> <article></article> Bas de page <footer> </footer> Colonne <aside> </aside> Attribut de <header> </header> Attribut Valeur Description class nom de la classe Définit une classe pour un élément (Ils sont définis en CSS) id id Identifiant ID unique pour un élément style Définition du style Indique le style de l élément title texte Informations supplémentaires sur un élément Attribut de <footer> </footer> Attribut Valeur Description class nom de la classe Définit une classe pour un élément (Les classes sont définit en CSS) id id Définit un identifiant ID unique pour un élément style Définition du style Indique le style de l élément LISTE DES BALISES À UTILISER Balise Description <! > Pour un commentaire <!DOCTYPE> L'inclusion du DOCTYPE dans un document HTML assure que le navigateur interprétera la version HTML ainsi déclarée. En HTML5 le doctype à déclarer est : <!DOCTYPE html>. <a> Utilisée pour les hyperliens. Attention : l'attribut "name" n'existe plus pour les liens. <article> Utilisé pour du contenu ayant son propre sens indépendamment du reste des autres éléments de la page, ce contenu est distribuable et réutilisable. Cela peut-être un billet de forum, un article de journal, un gadget, un commentaire d'utilisateur... La balise <article> peut avoir son propre header et footer. Confusion possible avec la balise <section> qui regroupe des éléments de thématique identique. <aside> Balise de structure supposant avoir un titre de type <h1>. Cette balise permet de regrouper des informations non essentielles relatives au site Web. Lorsque la balise <aside> se trouve dans un article, son contenu se réfère à l'article lui même et non au site Web (par exemple des notes de pages, un glossaire ou tout élément relatifs à l'article). Confusion: La sidebar d'une page n'a pas pour obligation d'être dans une balise <aside>. <br> Utilisée dans un paragraphe, cette balise permet de créer un saut de ligne. <body> Partie principale du document HTML. <div> Balise sans valeur sémantique réelle, elle sert de conteneur pour une mise en forme en CSS. Cette balise doit être utilisée en dernier recours, lorsqu'aucune autre balise ne peut convenir. <footer> Regroupe des informations de bas de page dans une section ou un article. Cette balise permet d'ajouter des liens de navigation sans utilisation de la balise <nav>. <h1> à <h6> Utilisés pour la hiérarchisation des titres. <head> Pour les informations d'en tête du document HTML. <header> Pour l'entête d'une section et/ou d'une page, cette balise est utile pour une introduction et/ou des éléments de navigation. Cette balise peut-être utilisée dans la balise <section> et dans la balise <article>. <img> Pour déclarer une image. <li> Item d'une liste ordonnée ou à puce. <nav> Pour regrouper des liens qu'ils soient internes à la page ou pour des pages liées. Il est recommandé, mais non obligatoire d'utiliser les listes à puce pour lister les liens. Ruben Chambilla 5

8 <p> <script> <style> Définis un paragraphe contenant une ou plusieurs phrases. Cette balise ne doit pas être utilisée si une autre balise est mieux indiquée. Pour ajouter un script internet ou externe. Permets de définir un style dans le document HTML. Attention, l'attribut title à une valeur sémantique différente pour cette balise. Source : Structurer sa page web avec CSS En général, une page web est constituée d'un en-tête (tout en haut), de section pour contrôler l accès des utilisateurs, de menus de navigation, de différentes sections au centre et d'un pied de page (tout en bas). Une feuille de style consiste en une suite de déclarations de la forme : sélecteur_1, sélecteur_2,..., sélecteur_m { propriété_1: valeur_1; propriété_2: valeur_2; propriété_n: valeur_n; Où sélecteur est un simple élément HTML comme body ou h1, où propriété est une propriété CSS A partir des lignes de code css on peut distribuer en plusieurs espace Ruben Chambilla 6

9 4. T R A V A I L À R É A L I S E R Projet au début Créer tous les page web Il doit être votre code permanente Créer les fichiers HTML qui manquent Nom de page index.html accuiel.html instruction.html livres.html service.html joindre.html apropo.html Description Page principal Contiendra des informations d utilisateur de l application Description pas à pas sur l information pour les utilisateur Résultat de recherche Description des services du site web Information de contacte Description de l application (version et mise à jour) 4.2. Créer tous les page web Principales balises du html5 En utilisant la structure des balises complétez des informations référentes à chaque fichiers HTML (index.html, accueil.html, instruction.html, livres.html, service.html joindre.html, apropo.html,). Créer les hyperliens vers tous les fichier HTML depuis d index.html Ajouter des informations nécessaires dans chaque page. Tout le texte contenu sur votre page se trouvera entre les balises <body> et </body>, la structure doit être respecte les diagrammes suivants. Ruben Chambilla 7

10 La distribution des balises doit se comporter avec le critère suivant : Index Les autres fichier En-tête <header> </header> Section <section></section En-tête <header> </header> Menu <nav></nav> <li></li> Colonne <aside> </ aside> Menu <nav></nav> <li></li> Section <section></section <article>, <div><p> <form> <table>,<td>, <tr> <img>, <b> Colonne <aside> </ aside> Section <section></section <article>, <div><p> <form> <table>,<td>, <tr> <img>, <b> Colonne <aside> </aside> <article></article> <article></article> Bas de page <footer> </footer> Bas de page <footer> </footer> 4.3. Les attributs css Créer les éléments nécessaires pour modifier à travers des attributs du balises Le bloc en-tête aura une longueur correspondant à toute la page sans marge (margin 0). Le contenu de ce bloc aura un espacement de 10 px #head { margin: 0; padding: 10px 10px 10px 10px; border-bottom: 1px solid #cccccc; Le bloc contenu correspondra au 75% de la page et il sera placé à gauche #section { margin: %; padding: 0px; background-color: #eeeeee; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; Pour le menu principal #nav { padding: 0; margin: 0; text-align: center; /* centrer le texte */ #nav li { display: inline; list-style: none; #nav a { display:inline-block; margin: 0 30px; Ruben Chambilla 8

11 5. E X E R C I C E S A D I T I O N N E L 5.1. Création de index.html Enregistrez votre document sous le nom de "index.html" (Aptana). Il faut renseigner l'extension en.html, Ajoutez les balises MÉTA qu indique la langue du site web, description et autour. <meta http-equiv="mot clé ici" content="valeur ici" /> 5.2. Meta Tags Ajouter des lignes de code dans l'espace MetaTag de accueil.html, instruction.html, livres.html <head> <meta name="description" content= information sur meta tags."> <meta name="keywords" content="meta meta-tag, search-engine"> <meta name="author" content="etudiante UQAM"> <meta name="reply-to" content="kbrooke"> <meta name="robots" content="all"> <title>elements principal</title> </head> Ruben Chambilla 9