HIVER 2017 COURS INF2005 : PROGRAMMATION WEB Exercices de Programmation … Lab02.… · Exercices de Programmation Web, Laboratoires et TP Professeur : Abdel OBAID Ateliers : Ruben

HIVER 2017

COURS INF2005 : PROGRAMMATION WEB

Exercices de Programmation Web,

Laboratoires et TP

Professeur : Abdel OBAID

Ateliers : Ruben Chambilla

Février 2017

INF2005 - 30 Programmation web Automne 2016

Ruben Chambilla i

TABLEAU DES MATIÈRES

1. Introduction ......................................................................................................................................................1

2. Outils de développement .................................................................................................................................1

3. Laboratoires ......................................................................................................................................................2

3.1. Laboratoire 2 : Élément de formatage de base ........................................................................................2

3.1.1. Objectif .............................................................................................................................................2

3.1.2. Structure d’une site web ..................................................................................................................2

3.1.3. Structure d’une table ........................................................................................................................4

3.2. Travail à réaliser........................................................................................................................................5

3.2.1. Créer tous les page web ...................................................................................................................5

3.2.2. Créer tous les page web ...................................................................................................................6

3.3. Exercices manipulation des tableaux .......................................................................................................7

3.3.1. Structurer la page web livre.html .....................................................................................................7

3.3.2. Sur la page web livre .........................................................................................................................7

3.3.3. Les attributs (bords) des tableaux ....................................................................................................7

4. Exercices aditionnel ..........................................................................................................................................9

4.1. Création d’un tableau ...............................................................................................................................9

4.2. Création de index.html .......................................................................................................................... 10

4.3. Meta Tags .............................................................................................................................................. 10


Ruben Chambilla 1

1 . I N T R O D U C T I O N

Description de cours :

Introduire les étudiants à la problématique de la programmation d'applications web. Les fondements du

web : navigateurs, serveurs, protocoles. Les principales normes et les principaux outils fonctionnant dans le

navigateur sont couverts : HTML, XHTML, JavaScript, CSS, DOM et XML. Conception de formulaires.

Introduction à la problématique des traitements sur serveur dans n environnement web : script serveur,

notion de persistance. Présentation des nouvelles approches et techniques en émergence. Séance

d'exercices de deux heures hebdomadaire.

Description de manuel :

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é en termes du langage de programmation, certaine partis

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 :

http://www.blindtextgenerator.com/fr

http://fr.lipsum.com

http://responsivetest.net/ Responsive test

https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg

Responsive Web Design Tester

Site web :

Description des balises https://developer.mozilla.org/fr/

Dictionnaire d’attributs des balises http://webmasterhelp.fr/dico.php?lang=1

Liste des attributs HTML5 http://41mag.fr/liste-des-balises-html5/liste-des-attributs-html5

The complete Font Awesome 4.6.3 icon reference http://fontawesome.io/cheatsheet

Liste des balises HTML5 https://jaetheme.com/balises-html5/

http://www.blindtextgenerator.com/fr

http://fr.lipsum.com/

http://responsivetest.net/



https://developer.mozilla.org/fr/

http://webmasterhelp.fr/dico.php?lang=1

http://41mag.fr/liste-des-balises-html5/liste-des-attributs-html5

http://41mag.fr/liste-des-balises-html5/liste-des-attributs-html5

http://fontawesome.io/cheatsheet

https://jaetheme.com/balises-html5/


Ruben Chambilla 2

3 . L A B O R A T O I R E S

3.1. Laboratoire 2 : Élément de formatage de base

3.1.1. 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 W3C1.

- Utilisant des principaux balises HTML - Balises HTML dédiées à la structuration du site (<header>, <footer>, <nav>, <section>,

<aside>, <article>, <img>, <div>) - Manipulation des tableaux

3.1.2. 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.

Source : http://photoscott54.perso.neuf.fr/blog/wordpress/archives/127

Chaque balise a son attribut, chaque attribut se comporte de différente façon d’apporter au site web.

1 Le World Wide Web Consortium (W3C), est un organisme de standardisation du www

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>

http://photoscott54.perso.neuf.fr/blog/wordpress/archives/127


Ruben Chambilla 3

Section<section></section

En-tête <header> </header>

Menu <nav></nav> <li></li>

Contenu du page web<article>, <div><p>

<form><table>,<td>, <tr>

<img>, <b>

Colonne

<aside> </aside>

Bas de page<footer> </footer>

Contenu du page web<article></article>

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.

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


Ruben Chambilla 4

<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.

<p> 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.

<script> Pour ajouter un script internet ou externe.

<style> Permets de définir un style dans le document HTML. Attention, l'attribut title à une valeur sémantique différente pour cette balise.

Source : https://jaetheme.com/balises-html5/#a

3.1.3. Structure d’une table

Un tableau est décrit par différents éléments et que peut sert pour présenter des informations mieux

structurées qu'avec des listes.

a) Le titre du tableau est encadré par <caption> </caption>

b) La balise <table> </table> correspond au tableau lui-même

c) L'élément TR encadre chacune des lignes du tableau

d) L'élément TD encadre chaque cellule de valeur

Balises complémentaires

<thead> : groupe de cellules d'en-tête

<tbody> : groupe de cellules de corps de tableau

<tfoot> : groupe de cellules de pied de tableau

Source : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-tableaux-1

LES ATRIBUTS

https://jaetheme.com/balises-html5/#a

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-tableaux-1


Ruben Chambilla 5

Attribut Balises auxquelles

il s'applique Valeur Effet Visuel

ALIGN THEAD TBODY TH TR TD

CENTER LEFT RIGHT JUSTIFY

Centré Gauche Droite Justifié

CAPTION TOP BOTTOM

Au-dessus En-dessous

VALIGN (alignement vertical) THEAD TBODY TH TR TD

TOP MIDDLE BOTTOM

En haut Au milieu En bas

BORDER=n TABLE

Taille de la bordure

CELLPADDING=n TABLE

Espacement de n pixels entre le contenu des cellules et la bordure

CELLSPACING=n TABLE

Épaisseur de la grille intérieure

FLOAT TABLE RIGHT, LEFT Position du texte qui suivra </TABLE>

COLS=n TABLE

Nombre de colonnes

FRAME (contrôle les éléments individuels d'encadrement du tableau)

TABLE NONE TOP BOTTOM TOPBOT SIDES ALL

Aucun Au-dessus En bas Tout en haut Sur les côtés Tous

RULES (Contrôle les éléments de la grille des cellules)

TABLE NONE BASIC ROWS COLS ALL

Aucun basique Ligne Colonne Tous

COLSPAN THEAD, TBODY TH, TR, TD

Débordement des cellules sur les colonnes adjacentes

ROWSPAN THEAD, TBODY TH, TR, TD

Débordement des cellules sur les lignes adjacentes

Source : http://www.commentcamarche.net/contents/504-tableau-html-table

3.2. Travail à réaliser

Projet au début.

3.2.1. Créer tous les page web

Il doit être votre code permanente

Créer les fichiers HTML qui manquent

http://www.commentcamarche.net/contents/504-tableau-html-table


Ruben Chambilla 6

Nom de page Description

index.html Page principal

accuiel.html Contiendra des informations d’utilisateur de l’application

instruction.html Description pas à pas sur l’information pour les utilisateur

livres.html Résultat de recherche

service.html Description des services du site web

joindre.html Information de contacte

apropo.html Description de l’application (version et mise à jour)

3.2.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.

La distribution des balises doit se comporter avec le critère suivant :

Index Les autres fichier






<img>, <b>

Colonne

<aside> </aside>








<img>, <b>



Colonne

<aside> </aside>



Ruben Chambilla 7

3.3. Exercices manipulation des tableaux

Éléments à utiliser Balises Tableau, TD, TR, TH, IMG

3.3.1. Structurer la page web livre.html

- Ajoutez tous les éléments du site web livre (entête, pied de page et contenu).

- Sur le fichier livre.html, insérez un tableau ou plus pour afficher une liste de livres.

3.3.2. Sur la page web livre

La distribution de l’information de la page doit être selon l’image suivante :






<img>, <b>

Colonne

<aside> </aside>



.

3.3.3. Les attributs (bords) des tableaux

- Créer des tableaux semblables à celle illustrée ci- dessous, avec éléments nécessaires sur le fichier

livre.html

- Utiliser les attributs des balises pour la configuration sur le fichier style.css

(L’information des livres peut être trouvé sur internet ex. amazon.com)

Tel qu’est montré

sur la page web

index.html

Dans cet partie doit afficher

une liste de livres en utilisant

un tableau


Ruben Chambilla 8


Ruben Chambilla 9

4 . E X E R C I C E S A D I T I O N N E L

4.1. Création d’un tableau

Effectuer l’activité suivante :

– Créer un fichier HTML 5 nommé Labo3Tab.html


Ruben Chambilla 10

4.2. 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" />

4.3. 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="Étudiante UQAM">

<meta name="reply-to" content="kbrooke">

<meta name="robots" content="all">

<title>Elements principal</title>

</head>

Documents

HIVER 2017 COURS INF2005 : PROGRAMMATION WEB Exercices de Programmation … Lab02.… · Exercices de Programmation Web, Laboratoires et TP Professeur : Abdel OBAID Ateliers : Ruben