<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pages pour la programmation web de login</title>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>pages pour l'option IPW de login</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
</body>
</html>
Quel type de document avez-vous choisi pour votre index.html ? pourquoi ?
Sur votre compte (linux), créez à la racine un répertoire www s'il n'existe pas encore.
Naviguez avec l'explorateur de fichier graphique ou en ligne de commande, dans une console, à l'aide des commandes cd (pour changer de répertoire) et ls (pour lister le contenu d'un répertoire) et mkdir (pour créer un répertoire).
Ce répertoire sera votre page web sur le serveur www-mips.unice.fr. Créer un fichier xhtml valide que vous appellerez index.html dans le votre répertoire www.
Pour créer le fichier, utilisez n'importe quel éditeur de texte (vi, emacs, gedit, kate, quantas+, kwrite, etc.) et sauvegardez le nouveau fichier dans votre répertoire www, sous le nom index.html
Visualisez votre nouveau document dans un navigateur.
Dans votre document, modifiez ce qui est écrit dans la balise "title". Rafraîchissez (rechargez) la page dans votre navigateur. Que constatez-vous ? Où cela se répercute-t-il ?
Vous l'aurez compris, tous vos documents dans le répertoire www seront visibles via le Web et que pour voir les modifications de ces documents, il faudra recharger la page web en question.Dans votre document, modifiez ce qui est écrit entre la balise "body". Par exemple, dans une balise "div", écrivez "bienvenue sur ma page web étudiante". Rajoutez des espaces et des retours à la ligne dans ces quelques mots. Que constatez-vous ? Changez la balise div par une balise pre ? Quel est l'impact sur le document ?
Créez un répertoire html, un fichier index.html dedans et créez un lien de votre page principale (dans le fichier index.html de votre répertoire www) vers cette nouvelle page grâce à la balise "a". Privilégiez les liens relatifs.
Créez un lien de votre page "index.html" du répertoire ~/www/html (~ signifie ici votre répertoire de base de votre compte informatique) vers votre page principale (le fichier index.html de votre répertoire www) grâce à la balise "a". Voici donc les prémices d'une navigation Web.
Dans la suite du td, vous répondrez aux questions dans le fichier ~/www/html/index.html ou dans un autre fichier dans le répertoire ~/www/html. Dans ce cas, mettez un lien vers ce fichier dans ~/www/html/index.html.Les caractères accentués sont entrés de façon spéciale en html. Consultez la table disponible à http://www.w3.org/TR/html4/sgml/entities.html.
Ecrivez le mot "intérêt" en minuscule et en majuscule (avec accent). Ecrivez "coeur" (ligature) et "facade" avec une "cédille".
Quel intérêt cela peut-il représenter d'utiliser les signes unicode pour écrire une uri (adresse email, url, ...) ?
Perdus dans le nombre, retrouvez les accents de html (entities).
Sur ce site, à cet endroit (http://www.i3s.unice.fr/~tettaman/Classes/IntroWeb/html/exo) il y a deux fichiers accent&.html et "emploi du temps.html". Faites des liens vers ces deux pages.
Nous allons recréer un document html en essayant les différentes balises du cours (notamment DFN, STRONG, PRE...)
Il y aura deux liens : W3C (http://www.w3.org) et "listes des caractères spéciaux" (http://www.w3.org/TR/html4/sgml/entities.html).
Refaites la page web à l'adresse suivante : http://www.i3s.unice.fr/~tettaman/Classes/IntroWeb/html/exo/text.pdf
Pour savoir comment faire pour faire un lien qui puisse "envoyer" un courriel, consultez la documentation : la documentation (rfc) sur le "mailto"
Qu'est-ce que ce "mailto" ?
De votre page ~/www/html/index.html, placez un bloc adresse comportant un lien permettant d'envoyer un courrier à votre adresse e-mail.
Le spam provient en partie des analyses automatiques des pages web à la recherche de courrier électronique. Une solution, créez une image et la mettre sur sa page ou placer des caractères supplémentaires dans votre adresse électronique en demandant à vos visteurs de les enlevez
Avec gimp (ou autre logiciel pour faire une image), créez une image (au format png par exemple) représentant votre adresse électronique. Supprimez le lien "courriel" et remplacez votre adresse courriel par cette image.
Créez une table des matières (sommaire) interne au document fortoc.html (dans le document lui-même) Validez votre page (validator.w3.org).
Un aperçu du résultat final est visible dans le fichier pdf exo5.pdf.
Considérez l'emploi du temps suivant : un emploi du temps au format pdf à faire au format xhtml. L'objectif de cet exercice et de refaire cet emploi du temps au format html. Vous aurez à bien vérifier le nombre de colonnes et à utiliser les attributs colspan et rowspan, sachant qu'il y a en tout 41 colonnes et 5 lignes (max) par jour.
Commencez par ne faire que le mercredi matin.
Puis faites le jeudi matin, puis le mardi matin.
Finalement, ajouter le mardi après-midi et les autres après-midi.
Dans les archives de l'université, nous avons retrouvé un vieux fichier xhtml, anciencalendrier, écrit très maladroitement. Normalement, il aurait dû ressembler à ce fichier pdf. Vous mesurez ainsi tout le travail qu'il reste à faire.
À l'aide du validator (validator.w3.org), corrigez la page anciencalendrier.html erreur après erreur.
Note : il n'y a que 3 erreurs en tout.
Créez le répertoire images sur votre page web (~/www/html/images) et placez quelques (4 ou 5) images dedans.
On désire créer un document toc.html comportant la liste des liens vers les images se trouvant dans le répertoire "images".
Créez une page composée de 2 zones (frame), la zone de gauche contiendra la liste des liens vers les images se trouvant dans le répertoire images, la zone de droite affichera l'image correspondant à l'élément sélectionné dans la liste (le lien sur lequel vous avez cliqué).
Note : une fois l'image choisie, avez-vous un indice sur le nom de l'image sur laquelle vous avez cliquée ?
Valider auprès du validator.w3.org le document toc.html. N'avez-vous rien oublié ?
Ajoutez à vos images l'image http://www.i3s.unice.fr/~tettaman/Classes/IntroWeb/petitchateau.gif . Essayez de mettre un signet (bookmark, lien favori) sur cette image (sur votre site). Utilisez-le. Que constatez vous ? Ajoutez après la liste des images un lien vers votre page principale. Que constatez-vous ?
Récupérez la carte de France des départements, disponible ici. Faites en sortes que l'on puisse cliquer sur les départements pour aller sur leur site web. Faites également en sorte que le nom du département apparaisse lorsque l'on immobilise la souris dessus (sur la carte). Au mimum, faites le avec les départements (et sites) suivants :
Pour trouver les coordonnées, utilisez un logiciel d'édition d'image
(par exemple gimp).
Si vous avez terminé ces exercices, bravo ! Vous avez bien travaillé. Nous vous proposons maintenant de faire votre propre site :
Faites une page d'accueil qui explique ce qu'on trouvera sur votre site : les différents projets que vous avez faits (avec une
description le cas échérant) ou que vous ferez. Incluez à cette page les liens extérieurs qui vous tiennent à
cœur.
Préparez votre cv et mettez en ligne.
Réalisez un menu qui pointe vers les principales pages : accueil, une page par projet / tp, votre cv.
Soignez l'organisation de la page, même si avec CSS on pourra tout modifier...
