Mcnoell
Messages postés2Date d'inscriptionmardi 13 décembre 2016StatutMembreDernière intervention14 décembre 2016
-
13 déc. 2016 à 21:57
Mcnoell
Messages postés2Date d'inscriptionmardi 13 décembre 2016StatutMembreDernière intervention14 décembre 2016
-
14 déc. 2016 à 00:43
Bonjour,
Je suis étudiant à l'université et pour un cour d'informatique de base 1 notre professeur nous demande de crée une page web. Je ne m'y connait pas et je voulais savoir si quelqu'un pouvait m'aider et éclaircir les étapes:
B. Structure de chaque page Toutes vos pages Web doivent être composées de cinq divisions : § conteneur, § entete, § navigation, § corps et § piedpage. Chaque division aura un identifiant (id) qui correspond respectivement au nom donné ci-dessus. Le conteneur est la division principale. Il servira à accueillir les quatre autres divisions qui correspondent respectivement à l’entête, au menu de navigation, au corps et au pied de page de chaque page Web. En d’autres termes, vous allez reprendre la structure utilisée dans le TP2 et y insérer une nouvelle division : la division navigation, entre la division entete et la division corps (à l’intérieur de la division conteneur). Le contenu des divisions entete, navigation et piedpage doit être identique dans toutes les pages Web. Le corps de chaque page Web sera différent. 1. Division entete : La division entete doit comporter une image flottante à gauche (comme dans le TP2). Sur cette image, vous devez insérer un lien vers l’adresse absolue (c.-à-d. l’URL) de la page d’accueil de votre site Web une fois publié sur le serveur Web de la DESI, à savoir : http://www-desi.iro.umontreal.ca/~login/tp3/tp3.html Le login sera bien sûr votre propre login (du DIRO).
IFT1945 / A16 TP3, page 3
2. Division navigation : La division navigation servira comme un menu permettant de naviguer entre les différentes pages de votre site Web. a. Pour ce faire, vous allez insérer, dans cette division, un tableau avec une ligne et cinq cellules. Chaque cellule va contenir un texte de votre choix, sur lequel vous allez insérer un lien vers l’adresse relative de chaque page Web. Par exemple : Accueil Notre équipe Nous joindre Inscription Galerie Vous devez absolument respecter l’ordre suivant : - La 1ère cellule doit pointer sur la page d’accueil, soit la page « tp3.html » - La 2ème cellule doit pointer sur la « page2.html » - La 3ème cellule doit pointer sur la « page3.html » - La 4ème cellule doit pointer sur la « page4.html » - La 5ème cellule doit pointer sur la « page5.html » De plus, dans chaque page, seuls les liens vers les autres pages doivent être définis. C.-à-d., dans la page d’accueil, seuls les liens vers les pages « page2.html », « page3.html », « page4.html » et « page5.html » doivent être définis ; la 1ère cellule va contenir uniquement du texte, p. ex. « Accueil », sans lien. Dans la page « page2.html », seuls les liens vers les pages « tp3.html », « page3.html », « page4.html » et « page5.html » doivent être définis, et ainsi de suite. Attention : il faudra s’assurer que ces liens sont fonctionnels dans toutes vos pages Web, et donc au besoin modifier les adresses relatives de ces liens. Par exemple, dans la page d’accueil « tp3.html », le lien vers la page « page2.html » est défini par l’adresse relative : ‘pages/page2.html’, alors que dans la « page3.html », le lien vers la page « page2.html » est défini par l’adresse relative : ‘page2.html’. Styles des liens : b. Vous devez définir des styles CSS pour vos liens, pour qu’ils s’affichent dans des couleurs et/ou formes différentes selon leurs états : link, visited, hover et active. 3. Division piedpage : La division piedpage doit contenir un tableau de 3 colonnes et 3 lignes. Si vous travaillez à 2 sur le TP, votre tableau aura 5 lignes. a. Dans la première colonne, vos lignes devront être fusionnées. Vous y placerez l’icône de validation HTML. b. Dans la deuxième colonne, vous placerez : • sur la 1ère ligne : l’URL de la page d’accueil de votre site Web : http://wwwdesi.iro.umontreal.ca/~login/tp3/tp3.html (avec votre propre login). Cette URL devra être fonctionnelle : vous placerez dessus un lien vers cette même adresse. • sur la 2ème ligne : nom et prénom, et • sur la 3ème ligne : matricule et login.
IFT1945 / A16 TP3, page 4
Utilisez les 4ème et 5ème lignes pour identifier le deuxième coéquipier, si vous travaillez à deux. c. Dans la troisième colonne, vos lignes devront être fusionnées. Vous y placerez l’icône de validation CSS. Les icônes de validation HTML et CSS devront être fonctionnelles une fois votre site Web publié. La correction des erreurs détectées par le validateur (le cas échéant) n’est pas requise.
C. Page d’accueil « tp3.html » a. La page « tp3.html » doit avoir comme titre « Ma page d’accueil ». b. Dans la division corps de cette page, vous pourrez utiliser le même contenu du TP2.
D. Feuille de style externe «messtyles.css » a. Créez une feuille de style externe nommée «messtyles.css ». Placez-la dans le sous-dossier « css ». b. Dans cette feuille de style, vous allez transférer les styles internes qui seront communs à toutes vos pages Web : notamment les identifiants de style des différentes divisions. c. Cette feuille de style devra être attachée à toutes vos pages Web. Si vous allez créer des nouveaux styles qui sont communs à toutes vos pages Web, vous devrez les placer dans cette feuille de style externe.
E. La «page2.html » a. Donnez un titre à votre page (de votre choix). b. La division corps de cette page Web doit contenir au moins trois tableaux. - Créez une classe de style interne (dans cette page) permettant de • redéfinir la largeur de vos tableaux : inférieure à 100% (p. ex. 80%), • et de leur donner une image d’arrière-plan. - Créez des classes de style internes pour définir les largeurs des colonnes (p. ex. 30% et 70% dans un tableau à deux colonnes) Vous pourrez bien sûr créer un premier tableau, lui créer les styles demandés, et le copier/coller pour créer les autres tableaux. c. Le corps de cette page doit également comporter au moins deux liens, insérés sur des images et/ou du texte, pointant vers deux différents signets à l’intérieur de cette page.
F. La «page3.html » a. Donnez un titre à votre page. b. Dans la division corps de cette page, insérez deux divisions côte à côte : la première division flottante à gauche, et la deuxième division flottante à droite.
IFT1945 / A16 TP3, page 5
Définissez, des id de style pour vos divisions (#gauche et #droite) pour définir leur largeur respective (en %). c. La division de gauche doit comporter au moins : - un lien vers une adresse de courriel, et - deux liens externes vers des pages Web de votre choix. Ces liens doivent permettre d’ouvrir ces pages dans une nouvelle fenêtre (ou onglet). Image cliquable avec des zones réactives : d. La division de droite doit comporter une image cliquable avec au moins deux zones réactives portant des liens externes vers des pages Web de votre choix.
G. La «page4.html » a. Donnez un titre à votre page. Formulaire : b. Dans la division corps de cette page, insérez un formulaire. c. Votre formulaire doit comporter au moins cinq différents types de champs de saisie parmi les suivants : zones de texte, champs mot de passe, cases à cocher, cases d’option, listes déroulantes et zones de texte sur plusieurs lignes. Vous pouvez utiliser un tableau pour organiser votre formulaire d. Le formulaire doit également comporter les boutons envoyer et effacer. e. Le formulaire doit faire appel au programme cgi suivant : http://www-desi.iro.umontreal.ca/~jraidiim/cgi-bin/jraidiim.cgi JavaScript : f. Insérez la fonction prompt() pour demander une information à l’utilisateur (p. ex. son prénom) lors du chargement de votre page Web, et la fonction alert() pour lui afficher un message (p.ex. « Bonjour » suivi de son prénom). g. Choisissez un champ de saisie obligatoire dans votre formulaire et ajoutez, dans le texte qui l’identifie, le mot : « (obligatoire)* ». Ci-dessous un exemple : Insérez dans ce champ de saisie, l’évènement onclick permettant d’afficher, à l’aide de la fonction alert(), un message à l’utilisateur pour lui afficher un message (p.ex. « Ce champ est obligatoire ») dès qu’il clique à l’intérieur de ce champ. h. (Question optionnelle) : la question suivante ne sera pas notée. Insérez dans votre formulaire, l’évènement onsubmit pour faire appel à la fonction valider() vue dans le cours, qui permet de vérifier si l’utilisateur a bien rempli votre champ obligatoire avant de l’envoyer.
IFT1945 / A16 TP3, page 6
H. La «page5.html » a. Donnez un titre à votre page. Galerie photo : b. Dans la division corps de cette page, insérez une galerie photo comportant au moins cinq images miniatures. Chaque image miniature doit porter un lien permettant d’afficher son image correspondante dans sa taille réelle. Vous pouvez utiliser un tableau pour organiser vos miniatures et une classe de style pour les dimensionner. Vidéo YouTube : c. Insérez, sous votre galerie photo, une vidéo YouTube de votre choix.
I. Feuille de style externe «impression.css » a. Créez une feuille de style externe nommée «impression.css ». Placez-la dans le sous-dossier « css ». Cette feuille de style devra permettre de faire disparaître les divisions navigation et piedpage. Vous pouvez créer une copie de votre feuille de style « messtyles.css », et modifier la propriété display: none, dans votre nouvelle feuille de style. b. La feuille de style «impression.css » devra être reliée à votre page d’accueil « tp3.html », et utilisée lors de l’impression (media ="print")
Avant de te demander ça, ton prof ne t'aurait pas fait par hasard un truc appelé "cours" qui te permettrait d'avancer un peu ? Histoire que tu nous poses des question précises sur des détails qui restent à éclaircir, pas sur la totalité du sujet.
Mcnoell
Messages postés2Date d'inscriptionmardi 13 décembre 2016StatutMembreDernière intervention14 décembre 2016 14 déc. 2016 à 00:43
C'est plus le fait que j'ai plusieurs questions comme: Le corps de cette page doit également comporter au moins deux liens, insérés sur des images et/ou du texte, pointant vers deux différents signets à l’intérieur de cette page.
Trouvez des réponses à vos questions sur les langages, les frameworks et les astuces de codage. Échangez avec d'autres développeurs passionnés pour améliorer vos compétences en programmation et rester au fait des dernières tendances du secteur.
14 déc. 2016 à 00:43